/* ===== Micrositio base ===== */
.ms-wrap{ display:flex; flex-direction:column; gap:16px; }
.ms-head{ display:flex; justify-content:flex-end; }
.ms-title{ margin:.2rem 0 .4rem; font-size:1.5rem; }
.ms-desc{ background:#0f1322; padding:12px; border-radius:12px; line-height:1.45; }

/* ===== Hero (desktop: 2 columnas) ===== */
.ms-hero{
  display:grid;
  grid-template-columns: minmax(260px, 1.15fr) 1fr;
  gap:14px;
  align-items:start;
  background:#121626;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.ms-hero-left, .ms-hero-body{ min-width:0; }
.ms-hero-body{ padding:16px; }
.ms-hero-img,
.ms-viewer .ms-view{
  width:100%; height:auto; display:block;
  max-height:58vh; object-fit:cover; border-radius:10px;
}
/* Video nunca usa object-fit:cover (requeriría alto fijo) */
.ms-viewer[data-type="video"] .ms-view{
  object-fit: contain;
}

/* ===== Thumbnails ===== */
.ms-gallery{ display:block; margin-top:1rem; }
.ms-gallery h3{ margin:0 0 .5rem; }
.ms-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap:10px;
}
.ms-thumb{
  display:grid; place-items:center;
  aspect-ratio:1/1;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  background:#111; color:#fff;
  overflow:hidden; cursor:pointer;
}
.ms-thumb img,
.ms-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.ms-thumb.is-active{ outline:2px solid #4c8bf5; outline-offset:1px; }
.ms-thumb-video{ width:100%; height:100%; display:grid; place-items:center; }
.ms-play{ font-size:18px; background:rgba(0,0,0,.55); padding:6px 10px; border-radius:999px; }

/* ===== Mobile (≤ 900px): apilar y ordenar bien ===== */
@media (max-width: 900px){
  .ms-hero{
    grid-template-columns: 1fr;   /* apila */
  }
  .ms-hero-left{ order:1; }
  .ms-hero-body{ order:2; }
  .ms-viewer .ms-view{ max-height:42vh; object-fit:contain; }

  .ms-title{ font-size:1.25rem; }
  .ms-desc{
    font-size:.95rem; line-height:1.4;
    overflow-wrap:anywhere; word-break:break-word;
  }

  /* thumbs más densos en mobile */
  .ms-grid{ grid-template-columns: repeat(4, 1fr); gap:8px; }
}

/* Contenedor con scroll (evita cortes) */
#mdContent{ min-height:0; }

@media (max-width:900px){
  .my-domain-view, .my-domain-wrapper{
    display:grid; grid-template-columns:100vw 100vw;
    overflow-x:auto; scroll-snap-type:x mandatory;
  }
  #myDomainLeft, #myDomainRight{ min-width:100vw; scroll-snap-align:start; }
}



@media (max-width: 767px){
  /* el panel derecho arranca “fuera” a la derecha */
  #myDomainRight{
    position: fixed;
    inset: 0 0 0 0;         /* ocupa pantalla completa */
    transform: translateX(100%);
    transition: transform .25s ease;
    background: #1d1d1d;       /* o tu color de fondo */
    z-index: 50;            /* encima del panel izquierdo */
    overflow: auto;
  }
  /* cuando le ponés data-view="right", entra a escena */
  #myDomainRight[data-view="right"]{
    transform: translateX(0);
  }
  /* el botón back solo en mobile */
  .mobile-back{ display: inline-block; }
}

/* en desktop no tocamos nada: el panel se queda donde está */



/* ===== Micrositio: viewer a ancho completo ===== */

/* Base: que el visor use el ancho del contenedor */
.ms-hero-left,
.ms-viewer{ width:100%; }
.ms-viewer .ms-view{
  width:100%;
  height:auto;           /* mantiene proporción en imágenes y videos */
  display:block;
}

/* Vídeos: aspect-ratio garantiza alto visible antes de que carguen metadatos */
.ms-viewer[data-type="video"] .ms-view{
  aspect-ratio: 16 / 9;
  max-height: 80vh;
  background: #000;
}

/* Desktop: hero en dos columnas como siempre (si lo usás) */
@media (min-width: 768px){
  .ms-hero{
    display: grid;
    grid-template-columns: 1.2fr 1fr;  /* ajustá la relación si querés */
    gap: 16px;
  }
}

/* Mobile: full-bleed real (anula padding lateral de #mdContent) */
:root{ --md-pad-x: 14px; }  /* debe coincidir con tu padding de .md-content */

@media (max-width: 767px){
  /* El viewer "muerde" el padding para llegar al borde de pantalla */
  #mdContent .ms-hero-left{
    margin-left: calc(var(--md-pad-x) * -1);
    margin-right: calc(var(--md-pad-x) * -1);
  }
  /* Opcional: bordes redondeados suaves al full-bleed */
  #mdContent .ms-viewer{
    border-radius: 10px;
    overflow: hidden;
    background: #0a1224; /* coherente con tu tema */
  }

  /* El cuerpo (título/desc) queda con padding normal */
  #mdContent .ms-hero-body{
    padding-top: 8px;
  }
}
.is-hidden{ display:none !important; }

/* ===============================
   Micrositio · Ajuste MODO CLARO
   =============================== */

/* Fondo del hero + texto claro */
body.theme-light .ms-hero{
  background: #0f172a;   /* azul oscuro limpio */
  color: #f9fafb;        /* texto claro */
}

/* Título y textos principales dentro del hero */
body.theme-light .ms-hero .ms-title{
  color: #f9fafb;
}

body.theme-light .ms-hero .ms-desc{
  background: rgba(15,19,34,.92);  /* caja oscura pero legible */
  color: #e5e7eb;
}

/* Stats, badge, etc. (si los usás) */
body.theme-light .ms-hero .ms-stats,
body.theme-light .ms-hero .ms-badge,
body.theme-light .ms-hero p{
  color: #e5e7eb;
}

/* SOLO CELULAR + MODO CLARO */
@media (max-width: 767px){
  body.theme-light .ms-hero{
    background: #ffffff;        /* fondo claro en mobile */
    color: #111827;             /* texto oscuro */
  }

  body.theme-light .ms-hero .ms-title{
    color: #111827;
  }

  body.theme-light .ms-hero .ms-desc{
    background: #f3f4f6;        /* cajita gris suave */
    color: #111827;
  }
}