/* caso-magnalux.css — tokens y lo propio del caso Magna Lux.
   Todo lo demas vive en caso-base.css, que es COMPARTIDA: no se toca aqui.

   ---------------------------------------------------------------------------
   LA PALETA sale del propio morado de marca, muestreado del fondo liso de las
   tarjetas de fecha (2022/12/gloriabirhday.jpg, esquinas sin globos ni texto):
     #845A99  rgb(132, 90, 153) en las cuatro esquinas de la tarjeta

   A diferencia del resto del portafolio, este morado YA pasa AA sobre blanco
   sin bajarlo: 5,38:1. Blanco sobre el acento da el mismo 5,38:1 (el par que
   mandaria en un boton si la pagina lo llevara; aqui no hay CTA en el
   fragmento, igual que Figaro y La Herencia).

   En oscuro el morado de marca casi no sube (sobre #101215 no llega a 2:1),
   asi que el acento pasa a una variante mas clara del mismo tono: #C9AEDD da
   9,45:1. Igual que los demas casos pequenos, estos tokens quedan calibrados
   pero INERTES: la seccion va con data-tema="claro" y no sigue el sistema. */

/* --- La tipografia del caso -------------------------------------------------
   Fredoka (The Fredoka Project), licencia SIL OFL 1.1. La licencia va en
   assets/fonts/ y tiene que viajar con los archivos.

   Sacada de AMPLIAR LOS ROTULOS de las propias piezas ("New Service!",
   "Happy Birthday", "Empathy is a value of"), no del logotipo: el wordmark
   MAGNA LUX es una geometrica angosta con mucho tracking que no dice nada del
   tono del contenido. Lo que SI se repite en cada pieza de fecha y de
   anuncio es una redondeada gruesa y amistosa — Fredoka. Solo en titulares y
   rotulos; el cuerpo se queda en la pila del sistema. */

@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fredoka-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/fredoka-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.caso--magnalux {
  --caso-acento: #845a99;
  --caso-acento-texto: #fff;
  --caso-secundario: #5c3d6e;
  --caso-fondo-alt: #f6f1f8;
  --caso-linea: #e6dcec;
  --magnalux-display: "Fredoka", ui-rounded, "Segoe UI", sans-serif;
}
.caso--magnalux[data-tema="claro"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  .caso--magnalux:not([data-tema="claro"]) {
    --caso-acento: #c9aedd;
    --caso-acento-texto: #2a1a34;
    --caso-secundario: #d9c7e6;
    --caso-fondo-alt: #17131a;
    --caso-linea: #2e2536;
  }
}

.caso--magnalux .caso__titular,
.caso--magnalux .caso__bloque-titulo {
  font-family: var(--magnalux-display);
  font-weight: 700;
  letter-spacing: -.005em;
}

/* --- Reparto: texto a la izquierda, fila de piezas a la derecha -------------
   SEGUNDA PASADA (21 ago 2026): las dos secciones de la primera version se
   fundieron en una sola, a pedido de Miguel — con cuatro piezas curadas no
   hacia falta separar "transformaciones" de "fechas especiales" en dos
   bloques, y quedaba mejor todo junto, al lado del texto de entrada.

   TERCERA PASADA, mismo dia, mirando la pagina en Chrome: el primer intento
   metia las CUATRO piezas en la columna izquierda (destacada arriba, fila de
   tres debajo) y el texto solo en la derecha. Con la destacada a 1:1 llenando
   una columna de 640px, el bloque de medios media ~940px de alto contra ~380
   del texto: quedaban 500px de blanco muerto a la derecha, que es el mismo
   hueco que Miguel senalo en La Herencia. Se corrigio bajando la fila a la
   columna del texto.

   CUARTA PASADA, mismo dia: Miguel quito el hero (el post de cejas) y pidio
   invertir el reparto -texto a la izquierda, piezas a la derecha-. Sin
   destacada ya no hay una columna de imagen que sostenga 640px de alto: las
   tres piezas de la fila SON la columna derecha entera, y el texto vuelve a
   ser mas angosto que ella (5fr contra 7fr), lo mismo que tenia el hero
   original pero con los lados cambiados. */
@media (min-width: 1000px) {
  .caso--magnalux .caso__reparto {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }
}

/* --- Fila de tres: video + imagen + video -----------------------------------
   Las tres son 9:16 exactas (1080x1920), asi que una rejilla de tres columnas
   iguales las deja a la misma altura sola, por proporcion: ninguna se recorta
   ni se estira y NO hace falta fijarle un alto a la fila.

   ASI ES COMO SE ARREGLO, y vale anotarlo porque es el mismo error que ya
   estaba escrito en el LEEME de la carpeta y se repitio igual: la version
   anterior era un flex de ALTO FIJO con `height: 100%` en el <li> y en el
   boton. El <li> si media 280px, pero la <figure class="caso__pieza"> que va
   EN MEDIO se quedaba en `auto`, asi que el `height: 100%` del boton no tenia
   contra que resolver, caia a `auto`, y cada pieza se pintaba a su alto
   natural (1138px) dentro de una fila de 280: las tres se salian y se
   encimaban unas sobre otras.

   La leccion es la misma del visor: una cadena de alturas en porcentaje se
   rompe en el primer eslabon que no tenga alto resuelto, y basta un envoltorio
   intermedio para romperla. Aqui se quito la cadena entera en vez de
   completarla -el alto sale de la PROPORCION de cada pieza- porque completarla
   volveria a romperse en cuanto alguien meta otro <div> en el medio. */
.caso--magnalux .ml__fila {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.5rem, 1.2vw, .85rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 999px) {
  /* Bajo el quiebre del reparto, la fila cae debajo del texto: ahi si hace
     falta el respiro superior que sobraba al lado de el. */
  .caso--magnalux .ml__fila { margin-top: clamp(1.25rem, 3vw, 2rem); }
}
.caso--magnalux .ml__fila li { margin: 0; min-width: 0; }
.caso--magnalux .ml__fila figure { margin: 0; }
.caso--magnalux .ml__fila .caso__marco,
.caso--magnalux .ml__fila .ml__reel { border-radius: var(--caso-radio-lg); }

/* --- Reel: vista previa muda en bucle, sonido en el visor ------------------- */
.caso--magnalux .ml__reel {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--caso-radio-lg);
  overflow: hidden;
  background: #000;
  cursor: zoom-in;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.caso--magnalux .ml__reel:hover, .caso--magnalux .ml__reel:focus-visible {
  transform: translateY(-4px) scale(1.012);
}
.caso--magnalux .ml__reel:focus-visible { outline: 3px solid var(--caso-acento); outline-offset: 3px; }
.caso--magnalux .ml__reel video { display: block; width: 100%; height: auto; }
.caso--magnalux .ml__reel-icono {
  position: absolute;
  right: .6rem; bottom: .6rem;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  background: rgb(0 0 0 / .45);
  border-radius: 50%;
  color: #fff;
  pointer-events: none;
}
.caso--magnalux .ml__reel-icono svg { width: 12px; height: 12px; }

/* --- Video dentro del visor compartido --------------------------------------
   El visor de caso-base.js solo trae <img>. Este caso agrega un <video> al
   lado (ver el <script> propio del fragmento, que lo inyecta sin tocar el
   archivo compartido) para los dos reels. AL INTEGRAR AL SITIO: esta regla
   tiene que subir a caso-base.css si otro caso vuelve a necesitar video en el
   visor — de lo contrario se sincroniza a mano aqui. */
.caso-visor video {
  display: block;
  width: auto;
  max-width: 96vw;
  height: auto;
  object-fit: contain;
  border-radius: var(--caso-radio, 10px);
}

/* Y sin esto, el elemento OCULTO se sigue viendo. El `display: block` de
   arriba (0,1,1) le gana al `[hidden] { display: none }` de la hoja del
   navegador, asi que al abrir una imagen el <video> vacio aparecia igual,
   con sus controles, encima de la pieza. Encontrado en Chrome real; la regla
   la pide explicitamente el manual de estas paginas y aqui se habia omitido. */
.caso-visor img[hidden],
.caso-visor video[hidden] { display: none; }

/* --- El boton de cerrar del visor se salia de la pantalla --------------------
   ENCONTRADO EN CHROME REAL (21 ago 2026). El `max-height: 94dvh` que
   caso-base.css le ponia a `.caso-visor img` no dejaba sitio para el boton de
   cerrar, que va FUERA del marco (`top: -2.6rem`, 41,6px por encima): con una
   pieza vertical llenando esos 94dvh, el boton caia en `top: -22px`, dos
   tercios fuera de la ventana.

   YA SUBIDO a `caso-base.css` (22 ago 2026), que ahora trae `img` a 84dvh de
   fabrica -y de paso a Figaro, La Herencia, La Rueda y Queen Esther, que
   comparten el mismo archivo con el mismo bug. Esta hoja solo necesita
   repetir el numero para el `<video>`, que es una capacidad propia de este
   caso y no existe en la base compartida. */
.caso-visor video { max-height: 84dvh; }