/* ════════════════════════════════════════════════════════════════════════════
   theme.css — La piel de Mal Gusto.
   ============================================================================
   Carga DESPUÉS de styles.css, así que todo lo de aquí gana sin tocar el base.

   Sistema: "minimalismo exagerado" — tipografía enorme de alto contraste,
   paleta corta, esquinas RECTAS y mucho vacío. Es el lenguaje de Dior, Chanel
   y Balenciaga: la casa se reconoce por lo que quita, no por lo que agrega.

   Referencia de tokens que ya consume el front en styles.css:
     --mg-fondo --mg-fondo-2 --mg-panel --mg-borde --mg-tinta --mg-tinta-2
     --mg-oro --mg-oro-claro --mg-font-display --mg-font-sans --mg-radio
     --mg-max --mg-gap --mg-pad-seccion --mg-sombra
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Color ────────────────────────────────────────────────────────────────
     TONOS ALTOS. La marca sostiene que el oro es de diario, no de vitrina, y
     una página negra lo devuelve a la vitrina. Aquí el fondo es luz de mañana
     y el oro se lee cálido encima, igual que sobre la piel de las fotos.

     El oro claro NO sirve para texto sobre fondo claro (queda en 2.4:1), así
     que hay dos oros: uno oscuro para tipografía y uno claro solo decorativo.
     Contrastes medidos contra --mg-fondo:
       tinta   #17150F → 16.4:1  (AAA)
       tinta-2 #6A6154 →  5.5:1  (AA)
       oro     #8A6520 →  5.2:1  (AA, sirve para kickers y enlaces)            */
  --mg-fondo:      #FAF7F1;   /* hueso cálido */
  --mg-fondo-2:    #F3EDE3;
  --mg-panel:      #FFFFFF;
  --mg-borde:      #E3DACB;
  --mg-borde-vivo: #D4C4A6;
  --mg-tinta:      #17150F;
  --mg-tinta-2:    #6A6154;
  --mg-oro:        #8A6520;   /* oro tipográfico — pasa AA sobre el fondo */
  --mg-oro-claro:  #C9A24B;   /* oro decorativo — filetes, puntos, rellenos */
  --mg-exito:      #3F6B4C;
  --mg-error:      #9B2F27;

  /* ── Tipografía ───────────────────────────────────────────────────────────
     Cormorant tiene el contraste alto del didone de revista de moda.
     Montserrat es la geométrica neutra que no compite. */
  --mg-font-display: 'Cormorant', 'Playfair Display', Georgia, serif;
  --mg-font-sans:    'Montserrat', system-ui, -apple-system, sans-serif;
  --mg-font-mono:    ui-monospace, 'JetBrains Mono', monospace;
  --mg-tracking-kicker: .3em;

  /* ── Forma ────────────────────────────────────────────────────────────────
     Radio CERO. Ninguna maison redondea esquinas. */
  --mg-radio:       0px;
  --mg-radio-sm:    0px;
  --mg-borde-ancho: 1px;

  /* ── Ritmo (densidad 2/10 — espacioso) ────────────────────────────────── */
  --mg-max:         1400px;
  --mg-gap:         clamp(24px, 3vw, 48px);
  --mg-pad-seccion: clamp(80px, 12vh, 168px);

  /* ── Sombra ───────────────────────────────────────────────────────────────
     En fondo negro la profundidad la daba el propio negro y una sombra al 75%
     era invisible. Sobre crema esa misma sombra es una mancha sucia: aquí va
     corta, muy suave y teñida de tinta cálida, no de negro puro. */
  --mg-sombra:        0 2px 10px rgba(23, 21, 15, .05);
  --mg-sombra-fuerte: 0 24px 60px rgba(23, 21, 15, .16);

  /* ── Movimiento ───────────────────────────────────────────────────────────
     Las curvas nativas de CSS son flojas: les falta el golpe que hace que una
     animación se sienta intencional. Estas son las versiones fuertes.
     Y NUNCA ease-in en interfaz: arranca lento justo en el instante que el ojo
     está mirando, y hace sentir lenta a la página aunque dure lo mismo. */
  --mg-ease:     cubic-bezier(.23, 1, .32, 1);      /* ease-out fuerte: entra */
  --mg-ease-io:  cubic-bezier(.77, 0, .175, 1);     /* mueve en pantalla     */

  --mg-dur:       460ms;   /* revelado editorial: contenido, no interfaz */
  --mg-dur-corta: 180ms;   /* interfaz: por debajo de 300ms siempre      */
  --mg-dur-tap:   140ms;   /* respuesta al dedo                          */
}

/* ════════════════════════════════════════════════════════════════════════════
   BASE — lo que faltaba según la auditoría de interfaz.
   ════════════════════════════════════════════════════════════════════════════ */

html {
  /* Le dice al navegador de qué color es la página, para que pinte las barras
     de scroll y los controles nativos a juego en vez de en gris de sistema. */
  color-scheme: light;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Los anclas de los artículos caían justo debajo del borde superior. */
:target, h2[id], h3[id] { scroll-margin-top: clamp(90px, 12vh, 130px); }

body {
  /* Quita el retardo de ~300ms al tocar en móvil, y el recuadro azul del
     sistema al tocar un enlace — sobre una página crema se ve barato. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(23, 21, 15, .08);
}

/* ── Salto al contenido ───────────────────────────────────────────────────
   Quien navega con teclado tenía que tabular la nav entera en cada página. */
.saltar {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--mg-tinta);
  color: var(--mg-fondo);
  font-size: .8rem;
  text-decoration: none;
  transition: top var(--mg-dur-corta) var(--mg-ease);
}

.saltar:focus { top: 12px; }

/* ════════════════════════════════════════════════════════════════════════════
   NAV — pastilla colgada del borde superior, centrada.
   No es una barra que ocupa todo el ancho: es un objeto que cuelga. Eso deja
   ver la portada entera por detrás y hace que la navegación se sienta parte de
   la composición, no un mueble encima.
   ════════════════════════════════════════════════════════════════════════════ */

.nav {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 46px);
  width: auto;
  max-width: calc(100vw - 24px);
  padding: 12px clamp(18px, 2.4vw, 34px) 13px;
  border: 0;
  border-radius: 0 0 clamp(14px, 1.6vw, 24px) clamp(14px, 1.6vw, 24px);
  background: var(--mg-tinta);
}

.nav__marca {
  font-family: var(--mg-font-display);
  font-size: 1.06rem;
  color: var(--mg-fondo);
  text-decoration: none;
  white-space: nowrap;
}

.nav__marca em { font-style: italic; color: var(--mg-oro-claro); }

.nav__link {
  font-family: var(--mg-font-sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: rgba(250, 247, 241, .78);
  transition: color var(--mg-dur-corta) ease;
}

@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--mg-fondo); }
}

.nav__link.is-activa { color: var(--mg-oro-claro); }

/* MÓVIL. La pastilla cabía por centímetros en 375px y se cortaba en 390 según
   qué tipografía alcanzara a cargar. Depender de que quepa por poco es apostar:
   basta una fuente de respaldo más ancha, un idioma con palabras más largas o
   un teléfono de 360px para que "TIENDA" quede fuera de la pantalla. Aquí se
   aprieta de verdad, y si aun así no cabe, el carril se desliza en vez de
   recortar. */
@media (max-width: 560px) {
  .nav {
    gap: 12px;
    padding: 10px 14px 11px;
    max-width: calc(100vw - 16px);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav__marca { font-size: .95rem; }
  .nav__link  { font-size: .64rem; letter-spacing: .06em; }

  /* El titular gigante no debe tocar nunca el filo. */
  .hero__marca { font-size: clamp(3rem, 17vw, 6rem); }
}

/* Teléfonos angostos de verdad (360px y menos). */
@media (max-width: 380px) {
  .nav        { gap: 10px; }
  .nav__link  { font-size: .6rem; }
  .hero__marca { font-size: 15.5vw; }
}

/* Las páginas sin portada a sangre necesitan sitio bajo la pastilla. */
body:not([data-view="home"]) main { padding-top: clamp(84px, 10vh, 120px); }

/* ════════════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA DE CASA
   ════════════════════════════════════════════════════════════════════════════ */

body {
  background: var(--mg-fondo);
  color: var(--mg-tinta);
  font-family: var(--mg-font-sans);
  font-weight: 300;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .hero__titulo {
  font-family: var(--mg-font-display);
  font-weight: 400;          /* el peso lo da el tamaño, no el bold */
  letter-spacing: -.02em;
  line-height: .96;
}

.kicker {
  font-family: var(--mg-font-sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: var(--mg-tracking-kicker);
  text-transform: uppercase;
  color: var(--mg-oro);
}

/* Cifras alineadas: los precios no deben bailar de una tarjeta a otra. */
[class*="precio"], .precio, time { font-variant-numeric: tabular-nums; }

/* El contenido nunca toca el filo de la pantalla: styles.css deja el `wrap` con
   padding horizontal 0 y las tarjetas quedaban pegadas al borde. El margen es
   el mismo del hero, para que todo caiga sobre la misma línea vertical. */
.wrap {
  padding-inline: clamp(20px, 5vw, 88px);
}

/* ════════════════════════════════════════════════════════════════════════════
   HERO — una imagen, tres líneas de texto, nada más.
   ════════════════════════════════════════════════════════════════════════════ */

/* El marco: la imagen no sangra a los bordes del navegador, vive dentro de un
   rectángulo con esquinas redondeadas y un respiro alrededor. Ese hueco de
   fondo crema es lo que hace que la portada se lea como una PIEZA puesta sobre
   la página, y no como un banner pegado arriba. */
.hero {
  padding: clamp(8px, 1vw, 16px);
  padding-top: 0;
}

.hero__marco {
  position: relative;
  height: calc(100svh - clamp(8px, 1vw, 16px));
  border-radius: clamp(16px, 2vw, 32px);
  overflow: clip;
  isolation: isolate;
  display: grid;
  align-content: end;
}

/* El póster va de fondo del contenedor, no solo como atributo del <video>: si el
   video se oculta (movimiento reducido) o tarda en llegar, la portada nunca se
   ve vacía — se ve la misma escena, quieta. */
.hero__medio {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url("public/media/editorial/taller-fondo.jpg") center / cover no-repeat;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__medio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Arranca apenas ampliada y se asienta: el encuadre "respira" al cargar. */
  animation: mg-asentar 2.4s var(--mg-ease) both;
}

/* Grano de película. Es una textura SVG incrustada, no un archivo: no pesa, no
   pide un viaje a la red y no puede romperse. Lo que hace es quitarle a la foto
   el acabado plástico de imagen generada — un poco de suciedad la vuelve
   fotografía. */
.hero__grano {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .5;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E");
}

/* El velo que garantiza contraste sin importar la foto que entre después.
   Va oscuro por abajo, que es donde se apoya la tipografía gigante, y deja
   limpia la parte alta de la imagen. */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(23,21,15,.30) 0%, rgba(23,21,15,0) 26%,
                    rgba(23,21,15,.20) 58%, rgba(23,21,15,.72) 100%);
}

/* ── El pie: la tipografía gigante y la columna de al lado ───────────────── */
.hero__pie {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: clamp(16px, 2vw, 32px);
  padding: 0 clamp(14px, 2vw, 40px) clamp(10px, 1.4vh, 18px);
}

@media (min-width: 1024px) {
  .hero__pie {
    grid-template-columns: 8fr 4fr;
    gap: clamp(24px, 3vw, 56px);
  }
}

/* La marca a tamaño de cartel. El interlineado por debajo de 1 y el tracking
   negativo son lo que la convierten en una MANCHA gráfica en vez de una
   palabra: así se lee como identidad, no como encabezado. */
.hero__marca {
  margin: 0;
  color: var(--mg-fondo);
  font-family: var(--mg-font-display);
  font-weight: 500;
  font-size: clamp(4rem, 20vw, 19rem);
  line-height: .85;
  letter-spacing: -.06em;
  text-wrap: nowrap;
}

.hero__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2vh, 22px);
  padding-bottom: clamp(14px, 3vh, 42px);
}

.hero__lede {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(.86rem, 1.02vw, 1rem);
  line-height: 1.45;
  color: rgba(250, 247, 241, .86);
  text-wrap: pretty;
}

/* ── Botón de pastilla ────────────────────────────────────────────────────
   Al pasar el cursor la separación crece y el disco escala: el gesto empuja la
   flecha hacia afuera, que es la dirección a la que lleva el enlace. Eso es
   movimiento con significado, no adorno. */
.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 22px;
  border-radius: 999px;
  background: var(--mg-fondo);
  color: var(--mg-tinta);
  font-family: var(--mg-font-sans);
  font-size: .84rem;
  font-weight: 500;
  text-decoration: none;
  transition: gap var(--mg-dur-corta) var(--mg-ease),
              transform var(--mg-dur-tap) var(--mg-ease);
}

.pastilla__disco {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;          /* con el padding izquierdo da un alto táctil de 46px */
  border-radius: 50%;
  background: var(--mg-tinta);
  color: var(--mg-fondo);
  transition: transform var(--mg-dur-corta) var(--mg-ease);
}

.pastilla__disco svg { width: 15px; height: 15px; }

@media (hover: hover) and (pointer: fine) {
  .pastilla:hover { gap: 16px; }
  .pastilla:hover .pastilla__disco { transform: scale(1.12); }
}

.pastilla:active { transform: scale(.97); }

/* ── WordsPullUp: cada palabra sube desde detrás de su propia línea ──────── */
.palabra {
  display: inline-block;
  overflow: hidden;       /* recorta: la palabra aparece POR DETRÁS del borde */
  vertical-align: bottom;
  padding-bottom: .06em;  /* sitio para las colas de la g y la p */
}

.palabra__int {
  display: inline-block;
  position: relative;
  transform: translateY(105%);
  opacity: 0;
}

[data-palabras].es-visible .palabra__int {
  animation: mg-subir 600ms cubic-bezier(.16, 1, .3, 1) both;
}

.palabra__ast {
  position: absolute;
  top: .1em;
  right: -.34em;
  font-size: .3em;
  color: var(--mg-oro-claro);
}

@keyframes mg-subir {
  from { transform: translateY(105%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes mg-asentar {
  from { transform: scale(1.09); }
  to   { transform: scale(1); }
}

@keyframes mg-hilo {
  0%        { transform: scaleY(0);   opacity: 0; }
  35%       { transform: scaleY(1);   opacity: 1; }
  70%, 100% { transform: scaleY(1);   opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BOTONES — rectos, de línea, el relleno solo para la acción principal.
   ════════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;               /* área táctil ≥44px */
  padding: 0 30px;
  /* En página clara el botón de oro sobre crema no tiene fuerza. La acción
     principal va en tinta llena: máximo contraste y menos ruido de color. */
  border: 1px solid var(--mg-tinta);
  border-radius: 0;
  background: var(--mg-tinta);
  color: var(--mg-fondo);
  font-family: var(--mg-font-sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  /* Propiedades exactas, nunca `all`: `all` transiciona cosas que no quieres
     y cuesta caro. Solo transform y opacity/color viven en el compositor. */
  transition: background var(--mg-dur-corta) ease,
              border-color var(--mg-dur-corta) ease,
              color var(--mg-dur-corta) ease,
              transform var(--mg-dur-tap) var(--mg-ease);
}

/* El hover se activa al TOCAR en un móvil y se queda pegado. Detrás de esta
   consulta, solo lo dispara un cursor real. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--mg-oro); border-color: var(--mg-oro); }
  .btn--fantasma:hover {
    background: var(--mg-tinta);
    border-color: var(--mg-tinta);
    color: var(--mg-fondo);
  }
}

/* Retroceso al presionar. Es el detalle que hace sentir que la página SÍ te
   escuchó, y funciona igual con dedo que con mouse. */
.btn:active { transform: scale(.97); }

.btn--fantasma {
  background: transparent;
  color: var(--mg-tinta);
  border-color: rgba(23, 21, 15, .28);
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--mg-oro);
  outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════════════════════
   TARJETAS — la imagen manda; el texto se retira.
   ════════════════════════════════════════════════════════════════════════════ */

.card, .grid > a {
  background: transparent;
  border: 0;
  border-radius: 0;
}

.card img, .grid > a img {
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--mg-ease), opacity var(--mg-dur-corta) linear;
}

/* Las tarjetas del blog ya no muestran la portada compuesta de 1200×630 sino la
   FOTOGRAFÍA cuadrada del artículo, así que la proporción vuelve a ser una
   decisión de diseño y no una restricción del archivo: 3:2, el encuadre de
   revista. Las de producto se recortan a retrato, que es como se mira una joya. */
.card--post img    { aspect-ratio: 3 / 2; }
.card--producto img { aspect-ratio: 4 / 5; }

@media (hover: hover) and (pointer: fine) {
  .card:hover img, .grid > a:hover img { transform: scale(1.035); }
}

/* La tarjeta entera es un enlace: también responde al presionarse. */
.card { transition: transform var(--mg-dur-tap) var(--mg-ease); }
.card:active { transform: scale(.993); }

/* Agotado: se apaga la foto en vez de taparla con una etiqueta gritona. */
[data-stock="0"] img, .is-agotado img { opacity: .5; filter: saturate(.5); }

/* ════════════════════════════════════════════════════════════════════════════
   SCROLL-EXPAND — el hero que se abre con el scroll (post y ficha).
   styles.css lo dejó con velo negro al 55%, de la versión oscura. Sobre fotos
   claras eso ensucia la imagen y encima el titular es tinta: el velo tiene que
   ser de LUZ para que el texto siga legible sin apagar la foto.
   ════════════════════════════════════════════════════════════════════════════ */

/* El velo tiene que garantizar contraste sin borrar la foto. Al 58% sobre una
   imagen ya de tonos altos la dejaba casi blanca: se perdía la fotografía, que
   es lo que da el tono editorial. Baja al mínimo que sostiene el texto. */
.sxm__bg::after {
  background: linear-gradient(to bottom,
              rgba(250, 247, 241, .34) 0%,
              rgba(250, 247, 241, .18) 45%,
              rgba(250, 247, 241, .46) 100%);
}

/* El componente de referencia parte el título en dos mitades que se separan al
   abrirse. Eso funciona con una MARCA de dos palabras; con un titular de
   sesenta caracteres a 80px, las mitades se desbordan por los lados y la
   tarjeta queda encajada en medio. Aquí el titular es más chico, envuelve, y
   cada mitad tiene un ancho tope para que no invada el centro. */
.sxm__title {
  color: var(--mg-tinta);
  flex-wrap: wrap;
  gap: .2em .4em;
  padding-inline: clamp(16px, 4vw, 72px);
  font-size: clamp(1.35rem, 3.1vw, 2.7rem);
  line-height: 1.06;
  /* La sombra dura venía del fondo negro; sobre crema se ve como mugre. */
  text-shadow: 0 1px 14px rgba(250, 247, 241, .85);
}

/* En ARTÍCULO y FICHA el titular sale de encima de la foto y se pone debajo.
   Las mitades voladoras son un recurso de marca: se leen como mancha gráfica
   cuando dicen "Mal Gusto", y chocan contra la tarjeta cuando dicen "Guía
   Michelin México 2026: la estrella que cambió de taquería". Centrado sobre el
   mismo eje que la tarjeta, el choque es inevitable, no un ajuste de tamaño.
   La foto sigue abriéndose con el scroll, que es lo que valía del patrón. */
body[data-view="post"] .sxm__title,
body[data-view="producto"] .sxm__title {
  position: static;
  inset: auto;
  margin-top: clamp(20px, 3vh, 36px);
  max-width: 22ch;
  text-shadow: none;
  /* Las mitades ya no vuelan: juntas forman el titular y se leen de corrido. */
  transform: none !important;
}

body[data-view="post"] .sxm__a,
body[data-view="post"] .sxm__b,
body[data-view="producto"] .sxm__a,
body[data-view="producto"] .sxm__b {
  max-width: none;
  transform: none !important;
}

/* El itálico dorado sobre foto clara se perdía; dentro del titular ya sobre
   fondo crema, el oro tipográfico sí pasa. */
body[data-view="post"] .sxm__b,
body[data-view="producto"] .sxm__b { color: var(--mg-oro); }

@media (max-width: 720px) {
  .sxm__a, .sxm__b { max-width: 100%; }
  .sxm__title { font-size: clamp(1.2rem, 5.4vw, 1.9rem); }
}
.sxm__b      { color: var(--mg-oro); }   /* el oro tipográfico, legible en claro */
.sxm__pista  { color: var(--mg-tinta-2); }

.sxm__media {
  /* La sombra fuerte es de fondo negro; en claro basta un filete y una sombra
     corta, o la tarjeta parece pegada con photoshop. */
  box-shadow: 0 24px 60px rgba(23, 21, 15, .16);
  outline: 1px solid rgba(23, 21, 15, .06);
  outline-offset: -1px;
}

.sxm__skip {
  color: var(--mg-tinta);
  border-color: rgba(23, 21, 15, .28);
  background: rgba(250, 247, 241, .8);
}

/* ════════════════════════════════════════════════════════════════════════════
   VITRINA — el scroll-expand de la Tienda, en la portada.
   La pista alta es lo que da el recorrido: mientras la sección atraviesa la
   pantalla, el escenario se queda fijo y el media se abre. Nada de bloquear la
   rueda — el usuario nunca pierde el control del scroll.
   ════════════════════════════════════════════════════════════════════════════ */

.vitrina {
  position: relative;
  height: 220vh;            /* el recorrido disponible para abrirse */
  padding: 0 clamp(8px, 1vw, 16px);
}

.vitrina__fijo {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: clip;
  border-radius: clamp(16px, 2vw, 32px);
}

.vitrina .sxm {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.vitrina .sxm__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
}

/* CONTRASTE. El velo general del scroll-expand es de LUZ, porque en el artículo
   y en la ficha el fondo es una foto clara y el texto va en tinta. Aquí el
   fondo es el taller, que mide 44/255 de brillo: la tinta sobre él daba 1.31:1,
   o sea invisible. Así que en la vitrina se invierte — velo oscuro y texto
   crema — y el velo se declara en vez de confiar en la foto, para que siga
   funcionando si mañana se cambia la imagen. */
.vitrina .sxm__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(23, 21, 15, .40) 0%,
              rgba(23, 21, 15, .28) 45%,
              rgba(23, 21, 15, .62) 100%);
}

.vitrina .sxm__title { color: var(--mg-fondo); }
.vitrina .sxm__b     { color: var(--mg-oro-claro); }
.vitrina .sxm__pista { color: rgba(250, 247, 241, .82); }

/* El contenido que revela: entra cuando el media terminó de abrirse. */
[data-scroll-expand-content] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity var(--mg-dur) var(--mg-ease),
              transform var(--mg-dur) var(--mg-ease);
}

[data-scroll-expand-content].is-visible {
  opacity: 1;
  transform: none;
}

.seccion--revista .seccion__head { margin-bottom: clamp(8px, 1.5vh, 20px); }

/* ════════════════════════════════════════════════════════════════════════════
   ESCENA — el marco con fondo animado de la Revista.
   Mismo lenguaje que la portada: marco redondeado con aire crema alrededor,
   grano encima y un velo que garantiza contraste. Cambia que aquí el contenido
   va CENTRADO y el alto lo marca el coverflow, no la pantalla.
   ════════════════════════════════════════════════════════════════════════════ */

.escena { padding: clamp(8px, 1vw, 16px); padding-top: 0; }

.escena__marco {
  position: relative;
  border-radius: clamp(16px, 2vw, 32px);
  overflow: clip;
  isolation: isolate;
  padding: clamp(96px, 13vh, 150px) 0 clamp(30px, 4vh, 52px);
}

/* Cada apartado trae su póster. Va de fondo del contenedor y no solo como
   atributo del <video>: si el video se retira por movimiento reducido o tarda
   en llegar, se ve la misma escena quieta en vez de un hueco. */
.escena__medio {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: center / cover no-repeat;
}

.seccion--revista ~ * .escena__medio,
.escena .escena__medio { background-image: var(--escena-poster); }

body[data-view="blog"]   .escena { --escena-poster: url("public/media/editorial/revista-fondo.jpg"); }
body[data-view="tienda"] .escena { --escena-poster: url("public/media/editorial/tienda-fondo.jpg"); }

.escena__lede {
  max-width: 56ch;
  margin: clamp(14px, 2vh, 22px) auto 0;
  font-size: clamp(.86rem, 1.02vw, 1rem);
  line-height: 1.55;
  color: rgba(250, 247, 241, .84);
  text-wrap: pretty;
}

/* Ningún apartado lleva ya contenido dentro del marco, así que sin un alto
   mínimo se encoge a la altura del texto y se lee como banner, no como escena. */
.escena--tienda .escena__marco,
body[data-view="blog"] .escena__marco {
  min-height: 64svh;
  display: grid;
  align-content: center;
  padding-bottom: clamp(56px, 8vh, 96px);
}

/* El coverflow ahora vive fuera del marco, sobre el fondo crema de la página:
   su tipografía vuelve al color por defecto. */
.seccion--revista .cf__titulo { color: var(--mg-tinta); }
.seccion--revista .cf__cat    { color: var(--mg-oro); }

.escena__video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Más cerrado que el del hero: aquí encima van tarjetas claras y texto, así que
   la foto tiene que retroceder más para no competir con ellas. */
.escena__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(23,21,15,.66) 0%, rgba(23,21,15,.44) 42%,
                    rgba(23,21,15,.62) 100%);
}

.escena__cabeza {
  position: relative;
  text-align: center;
  padding: 0 clamp(20px, 5vw, 88px);
}

.escena__titulo {
  margin: .3em 0 0;
  font-family: var(--mg-font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 5rem);
  line-height: .96;
  letter-spacing: -.02em;
  color: var(--mg-fondo);
  text-wrap: balance;
}

.escena__cabeza .kicker { color: var(--mg-oro-claro); }

.escena__cf { position: relative; margin-top: clamp(18px, 3vh, 40px); }

/* Sobre el fondo oscuro de la escena, el texto de la lámina y los puntos van
   en claro; heredan tinta por defecto y se perderían. */
.escena .cf__titulo { color: var(--mg-fondo); }
.escena .cf__cat    { color: var(--mg-oro-claro); }
.escena .cf__punto::after { background: var(--mg-fondo); }

@media (prefers-reduced-motion: reduce) {
  .escena__video { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   COVERFLOW — la portada de la Revista.
   El JS solo escribe transform, opacity y z-index. Todo lo demás vive aquí, y
   sin JS las láminas siguen siendo enlaces en fila que se pueden recorrer.
   ════════════════════════════════════════════════════════════════════════════ */

.cf { --cf-card: clamp(190px, 26vw, 330px); position: relative; width: 100%; }

/* Las láminas del anillo se abren más allá del ancho de la pantalla y creaban
   barra horizontal. `clip` por eje es justo para esto: recorta a los lados y
   deja que las sombras sigan saliendo por arriba y abajo. Con `hidden` no se
   puede — el navegador convierte el otro eje en `auto` y reaparece la barra. */
.cf.es-activo {
  overflow-x: clip;
  overflow-y: visible;
}

.cf__pista {
  display: flex;
  gap: clamp(12px, 2vw, 24px);
  overflow-x: auto;
  padding: 40px clamp(20px, 5vw, 88px);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cf__pista::-webkit-scrollbar { display: none; }
.cf__lamina { flex: 0 0 var(--cf-card); scroll-snap-align: center; }

/* Con JS montado el carril deja de ser una fila con scroll y pasa a ser el
   escenario 3D: las láminas se apilan en el centro y el script las coloca. */
.cf.es-activo .cf__pista {
  display: block;
  position: relative;
  height: calc(var(--cf-card) * 1.34);
  overflow: visible;            /* que las sombras no se recorten */
  padding: 44px 0 24px;
  transform-style: preserve-3d;
  touch-action: pan-y;          /* el arrastre horizontal es nuestro */
  cursor: grab;
  outline: none;
}
.cf.es-activo.es-arrastrando .cf__pista { cursor: grabbing; }

.cf.es-activo .cf__lamina {
  position: absolute;
  left: 50%;
  top: 44px;
  width: var(--cf-card);
  will-change: transform, opacity;
  /* El JS pinta cada frame; sin transición aquí, o pelearían entre sí. */
  transition: none;
}

.cf__lamina {
  display: block;
  text-decoration: none;
  color: inherit;
  user-select: none;
  -webkit-user-drag: none;
}

.cf__marco {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: clamp(10px, 1.2vw, 18px);
  background: var(--mg-fondo-2);
  box-shadow: 0 26px 60px rgba(23, 21, 15, .22);
}

.cf__marco img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cf__texto { padding: 16px 2px 0; }

.cf__cat {
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--mg-oro);
}

.cf__titulo {
  margin: .35em 0 0;
  font-family: var(--mg-font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.1;
  color: var(--mg-tinta);
}

/* Solo la del centro se lee entera; las de los lados acompañan. */
.cf.es-activo .cf__texto { opacity: 0; transition: opacity var(--mg-dur-corta) ease; }
.cf.es-activo .cf__lamina.es-centro .cf__texto { opacity: 1; }

.cf__puntos {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: clamp(14px, 2vh, 26px);
}

.cf__punto {
  width: 22px; height: 22px;      /* área táctil; el punto pintado es el ::after */
  padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}

.cf__punto::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mg-tinta);
  opacity: .28;
  transition: opacity var(--mg-dur-corta) ease, transform var(--mg-dur-corta) var(--mg-ease);
}

.cf__punto.es-activo::after { opacity: 1; transform: scale(1.4); }

.cf__pista:focus-visible { outline: 2px solid var(--mg-oro); outline-offset: 6px; }

/* ════════════════════════════════════════════════════════════════════════════
   VIDEO DENTRO DEL ARTÍCULO
   A diferencia de los fondos de portada —que son decorado y van en bucle mudo—
   este es contenido: lleva controles, no arranca solo y solo carga sus metadatos
   hasta que alguien le da play. Un artículo con tres videos que se precargan
   solos son decenas de megas que el lector paga sin haberlos pedido.
   ════════════════════════════════════════════════════════════════════════════ */

.figura--video { margin: clamp(24px, 4vh, 44px) 0; }

.figura--video video {
  width: 100%;
  display: block;
  background: var(--mg-tinta);
  border-radius: var(--mg-radio);
  box-shadow: var(--mg-sombra-fuerte);
}

/* ════════════════════════════════════════════════════════════════════════════
   CARRUSEL — la sesión de fotos dentro de la tarjeta.
   El carril es scroll nativo con ajuste magnético: se desliza con el dedo sin
   una línea de JS, y el script solo le suma los puntos y el teclado.
   ════════════════════════════════════════════════════════════════════════════ */

.carrusel { position: relative; overflow: hidden; }

.carrusel__carril {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Deja al navegador el gesto vertical y quita el retardo de 300ms al tocar. */
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: contain;
}

.carrusel__carril::-webkit-scrollbar { display: none; }

.carrusel__carril > img {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
}

.carrusel__puntos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;   /* el botón sí los recupera, el hueco no */
}

.carrusel__punto {
  pointer-events: auto;
  width: 22px;
  height: 22px;           /* área táctil real; el punto pintado es el ::after */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.carrusel__punto::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  /* Las fotos de la sesión son claras, así que los puntos van oscuros. El halo
     blanco los rescata si caen sobre una zona de sombra. */
  background: rgba(23, 21, 15, .38);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
  transition: background var(--mg-dur-corta) ease,
              transform var(--mg-dur-corta) var(--mg-ease);
}

.carrusel__punto.es-activo::after {`n  background: var(--mg-tinta);
  transform: scale(1.5);
}

/* La sesión es luminosa y cálida; la tarjeta le pone un marco claro para que la
   foto no flote sobre el negro como un recorte. */
.card--producto .carrusel,
.card--producto > .card__img { background: #EFE9DF; }

/* ════════════════════════════════════════════════════════════════════════════
   REVELADO AL SCROLL — lo aplica reveal.js
   ════════════════════════════════════════════════════════════════════════════ */

[data-revelar] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity var(--mg-dur) var(--mg-ease),
              transform var(--mg-dur) var(--mg-ease);
  transition-delay: var(--mg-retraso, 0ms);
}

[data-revelar].es-visible {
  opacity: 1;
  transform: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — obligatorio. Nada se mueve, todo se ve.
   ════════════════════════════════════════════════════════════════════════════ */

/* Menos movimiento no significa CERO movimiento: un desvanecido de opacidad no
   marea a nadie y sigue explicando el cambio de estado. Lo que se quita es el
   desplazamiento, la escala y el bucle infinito. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, background-color, border-color, color !important;
    transition-duration: 160ms !important;
  }
  [data-revelar]   { opacity: 1; transform: none; }
  .hero__medio img { animation: none; transform: none; }
  .card:active, .btn:active, .pastilla:active { transform: none; }

  /* El video de fondo se retira y queda su póster, que ya es el fondo del
     contenedor: misma escena, sin una sola cosa moviéndose. */
  .hero__video { display: none; }

  /* Las palabras no suben: aparecen. El recorte se levanta para que nada quede
     escondido detrás de su propio borde. */
  .palabra      { overflow: visible; }
  .palabra__int { transform: none; opacity: 1; animation: none; }
}