/* ==========================================================================
   PATRŌNUS MÉXICO · FPV — Sistema de diseño
   Monocromático absoluto. Cero color de acento.
   El único color permitido en pantalla es el que traiga una fotografía real.
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */
:root {
  /* Paleta (sección 4.1 del prompt maestro) */
  --ink:        #1D1D1F;   /* Negro tinta — texto, títulos, iconografía */
  --void:       #0A0A0B;   /* Negro profundo — fondo de los bloques oscuros.
                              Más hondo que el negro tinta a propósito: el texto
                              usa #1D1D1F porque el negro puro cansa al leer,
                              pero un FONDO necesita profundidad para que el
                              blanco encima se sienta luminoso y no gris. */
  --white:      #FFFFFF;   /* Fondo primario */
  --oro:        #C9A44C;   /* Dorado Patrōnus — aprobado por Daniel el 21 sept 2026.
                              Único acento de color propio de la marca. Solo con
                              razón (fase activa, columna vertebral, folio de un
                              diploma). Nunca repartido como decoración. DISENO.md §10 */
  --fog:        #F5F5F7;   /* Gris niebla — fondos secundarios, tarjetas */
  --gray:       #6E6E73;   /* Gris medio — texto secundario, metadatos.
                              (Antes #86868B: ~3.9:1 sobre blanco, no
                              alcanzaba el mínimo de 4.5:1 para texto chico.) */
  --line:       #D2D2D7;   /* Gris línea — divisores de 1px */

  /* --- RITMO VERTICAL: solo 4 pasos reales ------------------------------
     Antes había 10 valores distintos (8/16/24/32/40/48/64/80/96/128) usados
     en 591 lugares del sitio, cada uno decidido a mano. Diez ritmos distintos
     no se leen como un sistema: se leen como desorden, que es exactamente
     lo que se sentía al hacer scroll.

     Ahora los tokens COLAPSAN sobre 4 pasos. Los nombres --s1..--s10 se
     conservan (los usan 591 llamadas que no hace falta tocar), pero varios
     apuntan al mismo valor real. El resultado: el ojo reconoce un ritmo,
     no diez excepciones.

         PASO 1 ·  8px  → pegado: después de una etiqueta, dentro de un par
         PASO 2 · 16px  → cercano: entre elementos de un mismo grupo
         PASO 3 · 32px  → separado: entre grupos dentro de una sección
         PASO 4 · 64px  → bloque: entre bloques mayores

     Regla para el futuro: si un espaciado nuevo no cae en uno de estos 4,
     no se inventa un valor — se elige el más cercano. */
  --s1:  8px;   --s2: 16px;  --s3: 16px;  --s4: 32px;  --s5: 32px;
  --s6: 64px;   --s7: 64px;  --s8: 64px;  --s9: 96px;  --s10: 96px;

  /* Retícula */
  --wrap:        1240px;   /* 12 columnas escritorio */
  --wrap-narrow:  720px;   /* medida de lectura */
  --gutter:       clamp(20px, 5vw, 40px);
  --col-gap:      24px;

  /* Tipografía fluida */
  --t-display: clamp(2.75rem, 7vw, 5.25rem);
  --t-h1:      clamp(2.25rem, 5.2vw, 3.75rem);
  --t-h2:      clamp(1.75rem, 3.4vw, 2.5rem);
  --t-h3:      clamp(1.25rem, 2.1vw, 1.5rem);
  --t-h4:      clamp(1.0625rem, 1.5vw, 1.1875rem);
  --t-lead:    clamp(1.125rem, 1.9vw, 1.375rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-micro:   0.8125rem;

  /* Movimiento */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --header-h: 74px;
}

/* --- 2. RESET ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--ink); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--gutter); z-index: 999;
  background: var(--ink); color: var(--white);
  padding: 12px 20px; text-decoration: none; font-size: var(--t-small);
}
.skip-link:focus { top: 12px; }

/* --- 3. TIPOGRAFÍA ------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); letter-spacing: -0.02em; }
h3 { font-size: var(--t-h3); letter-spacing: -0.015em; line-height: 1.25; }
h4 { font-size: var(--t-h4); letter-spacing: -0.01em; line-height: 1.35; font-weight: 600; }

.display {
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.lead {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
}

/* Mayúsculas pequeñas con tracking — SOLO etiquetas cortas */
.label {
  font-size: var(--t-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gray);
  display: inline-block;
}
.label--ink { color: var(--ink); }

.meta { font-size: var(--t-small); color: var(--gray); line-height: 1.5; }
.muted { color: var(--gray); }

/* --- 4. LAYOUT ----------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* La medida de lectura se logra limitando el CONTENIDO, no encogiendo el
   contenedor. Antes .wrap--narrow reducía la caja y la recentraba, así que
   el borde izquierdo del texto saltaba hacia adentro al pasar de una sección
   ancha a una de lectura — y ese salto, repetido al hacer scroll, es lo que
   se percibe como "sin orden" aunque cada sección se vea bien por separado.
   Ahora la caja exterior es idéntica en todas las secciones (misma columna
   vertebral) y solo el texto de adentro se limita a la medida legible. */
.wrap--narrow { max-width: var(--wrap); }
.wrap--narrow > * { max-width: calc(var(--wrap-narrow)); }

/* UN solo relleno de sección. Antes había dos (.section y .section--tight)
   mezclados sin criterio, así que la distancia entre secciones cambiaba de
   forma aleatoria al hacer scroll. Ahora --tight existe solo por
   compatibilidad con el marcado ya escrito, pero vale lo mismo: el ritmo
   entre secciones es constante en todo el sitio. */
.section,
.section--tight { padding-block: clamp(var(--s6), 7vw, var(--s9)); }
.section--fog { background: var(--fog); }
.section--edge { border-top: 1px solid var(--line); }

.stack > * + * { margin-top: var(--s3); }
.stack-lg > * + * { margin-top: var(--s6); }

.grid {
  display: grid;
  gap: var(--s5) var(--col-gap);
  grid-template-columns: repeat(12, 1fr);
}
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

.rule { height: 1px; background: var(--line); border: 0; }

/* --- 5. HEADER / NAV ----------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
}
.header__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.header__logo img { height: 38px; width: auto; }
.header__logo span {
  font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink);
  padding-left: 12px; margin-left: 4px;
  border-left: 1px solid var(--line);
}

.nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.nav a {
  font-size: var(--t-small);
  font-weight: 400;
  text-decoration: none;
  color: var(--ink);
  opacity: 0.72;
  transition: opacity 0.25s var(--ease);
  position: relative;
  padding-block: 4px;
}
.nav a:hover { opacity: 1; }
.nav a[aria-current="true"] { opacity: 1; font-weight: 500; }
.nav a[aria-current="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--ink);
}

.burger { display: none; width: 40px; height: 40px; margin-right: -8px; }
.burger span {
  display: block; width: 20px; height: 1px; background: var(--ink); margin-inline: auto;
  transition: transform 0.3s var(--ease), opacity 0.2s linear;
}
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

.nav-mobile {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--white);
}
.nav-mobile ul { list-style: none; }
.nav-mobile li + li { border-top: 1px solid var(--line); }
.nav-mobile a {
  display: block; padding: 18px 0; text-decoration: none;
  font-size: 1.25rem; font-weight: 400; letter-spacing: -0.01em;
}
.nav-mobile.is-open { display: block; }

/* --- 6. BOTONES Y ENLACES ------------------------------------------------ */
/* Una sola acción primaria por pantalla. */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--white);
  padding: 14px 28px; border-radius: 999px;
  font-size: var(--t-small); font-weight: 500; text-decoration: none;
  transition: opacity 0.25s var(--ease);
}
.btn:hover { opacity: 0.86; }
.btn svg { transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--ghost {
  background: none; color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--ink); opacity: 1; }

/* Excepción documentada a "cero color de acento" (DISENO.md §9): opciones
   alternas reales de compra en Amazon/AliExpress, con el color de cada marca.
   Solo aparecen cuando el producto de verdad se vende ahí — nunca decorativas. */
.btn-row {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s2);
}
.btn--amazon {
  background: #131921; color: #FF9900;
  box-shadow: inset 0 -3px 0 #FF9900;
}
.btn--amazon:hover { background: #232F3E; }
.btn--aliexpress {
  background: #ffffff; color: var(--ink);
  border-color: #E62E04;
  gap: 8px;
}
.btn--aliexpress:hover { background: #fff7f5; border-color: #C92600; }
.btn-logo {
  height: 18px;
  width: auto;
  vertical-align: middle;
  display: inline-block;
}
.link-arrow--aliexpress {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.link-arrow--aliexpress .btn-logo { height: 14px; }
@media (max-width: 480px) {
  .btn-row { flex-direction: column; }
  .btn-row .btn { justify-content: center; }
}

.link {
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: border-color 0.25s var(--ease);
}
.link:hover { border-color: var(--ink); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font-weight: 500; font-size: var(--t-small);
}
.link-arrow svg { transition: transform 0.3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* Enlace de afiliado — marcado, nunca disfrazado */
.affiliate-note { font-size: var(--t-micro); color: var(--gray); margin-top: 10px; }

/* --- 7. INDICADOR DE FASE (hilo narrativo, sección 5.1) ------------------ */
.phase-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--t-micro); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--gray);
  padding: 6px 14px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
a.phase-tag:hover { border-color: var(--ink); color: var(--ink); }
.phase-tag__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); flex: 0 0 auto; }
/* Fase activa: dentro de la página de una fase, su etiqueta va en dorado.
   Primer uso del acento de marca (21 sept 2026). */
.phase-tag.phase-tag--oro, .page-head .phase-tag.phase-tag--oro, .page-head a.phase-tag--oro:hover { border-color: var(--oro); color: var(--oro); }
.phase-tag--oro .phase-tag__dot, .page-head .phase-tag.phase-tag--oro .phase-tag__dot { background: var(--oro); }

/* --- 8. BREADCRUMB ------------------------------------------------------- */
.crumbs { font-size: var(--t-micro); color: var(--gray); letter-spacing: 0.02em; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs i { font-style: normal; margin-inline: 8px; opacity: 0.5; }

/* --- 9. PROSA ------------------------------------------------------------ */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s3); }
.prose h2 { margin-top: var(--s8); }
.prose h3 { margin-top: var(--s6); }
.prose h2 + p, .prose h3 + p, .prose h2 + ul, .prose h3 + ul { margin-top: var(--s2); }
.prose p { text-wrap: pretty; }
.prose ul, .prose ol { padding-left: 1.15em; }
.prose li + li { margin-top: 10px; }
.prose li::marker { color: var(--gray); }
.prose a { text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color 0.25s var(--ease); }
.prose a:hover { border-color: var(--ink); }
.prose strong { font-weight: 600; }
.prose blockquote {
  border-left: 1px solid var(--line);
  padding-left: var(--s3);
  color: var(--gray);
  font-weight: 300;
  font-size: var(--t-lead);
  line-height: 1.45;
}
.prose figure { margin-block: var(--s5); }
.prose figcaption { font-size: var(--t-micro); color: var(--gray); margin-top: 12px; }

/* --- 10. CALLOUT / NOTA -------------------------------------------------- */
.callout {
  background: var(--fog);
  padding: var(--s4);
  border-radius: 4px;
}
.callout .label { margin-bottom: var(--s1); }
.callout p + p { margin-top: var(--s2); }
.callout--outline { background: none; border: 1px solid var(--line); }

.disclaimer {
  font-size: var(--t-small);
  color: var(--gray);
  line-height: 1.55;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s3);
}
.disclaimer a { color: var(--ink); }

/* --- 11. TABLAS DE SPECS ------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll > table { min-width: 520px; }

table.specs { font-size: var(--t-small); }
table.specs th, table.specs td {
  text-align: left; vertical-align: top;
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--line);
}
table.specs thead th {
  font-size: var(--t-micro); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--gray);
  padding-bottom: 12px;
}
table.specs tbody th { font-weight: 500; width: 30%; }
table.specs td { color: var(--gray); }
table.specs td strong, table.specs td b { color: var(--ink); font-weight: 500; }
table.specs tbody tr:last-child th, table.specs tbody tr:last-child td { border-bottom: 0; }

/* --- 12. TARJETAS -------------------------------------------------------- */
/* Sin bordes gruesos ni sombras: separación por espacio o línea de 1px. */
.card {
  display: flex; flex-direction: column;
  text-decoration: none;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  transition: border-color 0.3s var(--ease);
  height: 100%;
}
.card:hover { border-top-color: var(--ink); }
.card:hover .card__title { opacity: 0.6; }
.card__title { font-size: var(--t-h4); font-weight: 600; letter-spacing: -0.012em; transition: opacity 0.25s var(--ease); }
.card__desc { font-size: var(--t-small); color: var(--gray); margin-top: 10px; line-height: 1.5; }
.card__foot { margin-top: auto; padding-top: var(--s3); font-size: var(--t-micro); color: var(--gray); letter-spacing: 0.02em; }

/* Tarjeta de producto con imagen */
.pcard { display: flex; flex-direction: column; text-decoration: none; height: 100%; }
/* Sin fondo propio: la foto flota directo sobre el blanco de la sección.
   Antes tenía --fog aquí y se veía una caja gris detrás de cada producto,
   incluso con foto ya recortada — un recuadro que nadie pidió. */
.pcard__media {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
/* Producto recortado: flota centrado, con un margen de 3% por lado (94%
   de llenado). inset (no width/height en %) porque un % de alto no
   resuelve bien contra un hijo de grid con place-items:center — mismo
   problema que .ph--bleed ya resolvía así: la imagen quedaba descentrada
   verticalmente, desbordando por abajo del marco. */
.pcard__media img, .pcard__media svg {
  position: absolute; inset: 3%; width: 94%; height: 94%; object-fit: contain;
  transition: transform 0.6s var(--ease);
}
/* Portada de software (simulador): es un rectángulo de arte, no un objeto
   recortado. En la tarjeta chica (4:3, parecido al origen cuadrado) el
   recorte es leve y se ve bien a marco completo. */
.pcard__media--bleed img {
  inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.pcard:hover .pcard__media img, .pcard:hover .pcard__media svg { transform: scale(1.035); }
.pcard__body { padding-top: var(--s3); }
.pcard__name { font-size: var(--t-h4); font-weight: 600; letter-spacing: -0.012em; }
.pcard__spec { font-size: var(--t-small); color: var(--gray); margin-top: 6px; line-height: 1.5; }
.pcard__price { font-size: var(--t-small); margin-top: 10px; }

/* Lista numerada tipo índice */
.index-list { border-top: 1px solid var(--line); }
.index-list__item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--s3);
  align-items: baseline;
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: opacity 0.25s var(--ease);
}
.index-list__item:hover { opacity: 0.58; }
.index-list__num { font-size: var(--t-micro); color: var(--gray); letter-spacing: 0.1em; }
.index-list__desc { font-size: var(--t-small); color: var(--gray); margin-top: 4px; max-width: 62ch; }
.index-list__aside { font-size: var(--t-micro); color: var(--gray); letter-spacing: 0.06em; text-align: right; white-space: nowrap; }

/* --- 13. HERO SPOTLIGHT (referencia Animation_prompt) -------------------- */
.hero {
  position: relative;
  min-height: min(88vh, 800px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--fog);
}
.hero__layers { position: absolute; inset: 0; }
.hero__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
/* Velo de legibilidad: garantiza contraste del titular sobre cualquier
   imagen que Daniel ponga después, sin oscurecerla ni teñirla. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255,255,255,0.96) 0%,
    rgba(255,255,255,0.88) 34%,
    rgba(255,255,255,0.45) 58%,
    rgba(255,255,255,0) 78%);
}
/* Hero con alas (22 sept 2026): tres fotogramas completos superpuestos —
   reposo, águila y avión. Solo cambia cuál se ve; nunca se recorta ni se
   coloca nada, por eso no puede volver a haber piezas descolocadas.
   La lupa revela solo el círculo bajo el cursor (80px de radio) en el fotograma activo
   mediante clip-path dinámico calculado en JavaScript. */
/* 22 sept 2026 — tercera vuelta a este bloque, dos bugs de golpe:
   1) Carga en frío / táctil: la capa arrancaba en opacity:1 y el recorte lo
      pintaba el JS, que en celular NUNCA corre (gate `hover:hover`) y en
      escritorio no arranca hasta el primer pointermove. Resultado: en celular
      las dos fotos completas quedaban SIEMPRE encimadas sobre el dron en
      reposo; en escritorio se veían un instante antes de mover el cursor.
      Arreglo: opacity:0 aquí mismo, el JS la sube a la fuerza que le toque.
      Sin JS (celular, sin hover), simplemente nunca se ve — correcto.
   2) "Cortes raros" al cruzar el centro: antes cada capa tenía su PROPIO
      radio de máscara creciendo/encogiendo sobre el mismo punto — dos círculos
      de tamaño distinto centrados igual dibujan un "ojo de buey" (anillo de
      avión, anillo de águila). Ahora las dos comparten el MISMO círculo fijo
      (ver loop() en patronus.js) y lo que cambia es la OPACIDAD: una ventana
      redonda fija bajo el cursor donde las dos fotos se disuelven entre sí. */
.hero__layer--alas {
  opacity: 0;
  z-index: 2;
}
/* Linterna: luz suave que sigue al cursor sobre las nubes (el vértigo); está DEBAJO de las alas pero ENCIMA del fondo. */
.hero__luz {
  position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.15) 45%, rgba(255,255,255,0) 70%);
  mix-blend-mode: screen; opacity: 0; transition: opacity 0.4s var(--ease);
}
.hero.is-armed .hero__luz { opacity: 1; }

.hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: clamp(var(--s6), 8vw, var(--s9));
}
.hero__eyebrow { margin-bottom: var(--s3); }
.hero__title { max-width: 16ch; }
.hero__sub { max-width: 48ch; margin-top: var(--s4); }
.hero__cta { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; }
.hero__hint {
  position: absolute; right: var(--gutter); bottom: var(--s4); z-index: 2;
  font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray);
}
@media (hover: none) { .hero__hint { display: none; } }

/* Reveal de texto palabra por palabra con blur */
.word { display: inline-block; opacity: 0; will-change: transform, filter; }
.is-revealed .word { animation: wordIn 0.55s var(--ease) forwards; }
@keyframes wordIn {
  from { opacity: 0; transform: translateY(12px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}

/* Entrada por escala + rotación */
.scale-in { opacity: 0; }
.is-revealed .scale-in { animation: scaleIn 1.2s var(--ease) 0.15s forwards; }
@keyframes scaleIn {
  from { opacity: 0; transform: scale(1.07) rotate(0.6deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

/* FadeIn escalonado al entrar en viewport (referencia 3D Portfolio) */
.fade-in { opacity: 0; transform: translateY(24px); }
.fade-in.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--delay, 0s);
}

/* --- 14. ROADMAP (Home, sección 5.2) ------------------------------------ */
.roadmap__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 1fr);
  gap: var(--col-gap);
  position: relative;
}
.roadmap__track::before {
  content: ""; position: absolute; top: 4px; left: 0; right: 0;
  height: 1px; background: var(--line);
}
.roadmap__node { position: relative; padding-top: var(--s4); text-decoration: none; display: block; }
.roadmap__node::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 9px; height: 9px; border-radius: 50%;
  /* var(--ink) se autoajusta solo: negro en fondo claro, blanco en fondo
     oscuro. La pareja background/border con --white se cambió aquí porque
     --white deja de significar "blanco literal" dentro de .section--dark
     (se convierte en el color de fondo invertido) — usarlo como si fuera un
     blanco fijo es justo el bug que apagó este punto en las secciones negras. */
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}
.roadmap__node:hover::before { background: var(--ink); transform: scale(1.3); }
.roadmap__node:hover .roadmap__name { opacity: 0.6; }
.roadmap__node .label { display: block; margin-bottom: 8px; }
.roadmap__name { font-size: var(--t-h4); font-weight: 600; letter-spacing: -0.012em; transition: opacity 0.25s var(--ease); }
.roadmap__note { font-size: var(--t-micro); color: var(--gray); margin-top: 8px; line-height: 1.5; }
.roadmap__fork { border-top: 1px solid var(--line); margin-top: var(--s7); padding-top: var(--s5); }

/* --- 15. TARJETAS APILADAS (Empieza Aquí, referencia 3D Portfolio) ------- */
.stack-card__slot { height: 88vh; min-height: 560px; position: relative; }
.stack-card {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  /* Blanco LITERAL, no var(--white): esta tarjeta es una isla de lectura que
     debe verse igual sin importar si la sección de alrededor es clara u
     oscura (section--dark redefine --white como el color invertido, no como
     "blanco de verdad" — usarlo aquí apagaba la tarjeta en fondo negro). */
  background: #FFFFFF; color: #1D1D1F;
  /* Y como es una isla blanca dentro de una sección que puede ser negra,
     sus HIJOS también necesitan volver a los tokens de fondo claro — si no,
     heredan --line/--gray ya invertidos por .section--dark (blancos
     traslúcidos) y se vuelven invisibles sobre esta tarjeta blanca. */
  --line: #D2D2D7; --gray: #86868B; --fog: #F5F5F7; --ink: #1D1D1F;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(var(--s4), 4vw, var(--s7));
  transform-origin: top center;
  will-change: transform;
}
.stack-card__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s2); padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
}
/* 21 sept 2026 (Daniel): el número de fase era gris hairline (#D2D2D7, peso 200)
   y se perdía — "escondido". Ahora es negro y pesado: es la columna vertebral
   de la escuela, no un adorno. */
.stack-card__num { font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; color: var(--ink); }

/* Tarjetas alternadas (21 sept 2026, aprobado por Daniel): fase 0 blanca,
   fase 1 negra, fase 2 blanca, fase 3 negra. Ritmo negro/blanco = la
   estructura de la escuela se VE. La negra reinvierte sus tokens hijos. */
.stack-card--negra {
  background: var(--void); color: #FFFFFF;
  --ink: #FFFFFF; --line: rgba(255,255,255,0.2); --gray: rgba(255,255,255,0.72); --fog: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
}
.stack-card--negra h2, .stack-card--negra .lead { color: #FFFFFF; }
.stack-card--negra .label { color: rgba(255,255,255,0.62); }
.stack-card--negra .btn { background: #FFFFFF; color: var(--void); }

/* Columna vertebral: una línea a la izquierda que une las cuatro fases,
   con un punto dorado por fase. Dice "esto es UN camino" sin decirlo. */
.stack-cards { position: relative; padding-left: 44px; }
.stack-cards::before {
  content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 1px;
  background: var(--line);
}
.stack-card__slot::before {
  content: ""; position: absolute; left: -38px; top: calc(var(--header-h) + 32px + 14px);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--oro); border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px var(--oro);
  z-index: 1;
}
@media (max-width: 1023px) {
  .stack-cards { padding-left: 32px; }
  .stack-cards::before { left: 8px; }
  .stack-card__slot::before { left: -29px; width: 9px; height: 9px; }
}
@media (max-width: 767px) {
  /* En móvil las tarjetas ya no son sticky: el punto se ancla al inicio real de cada tarjeta. */
  .stack-card__slot::before { top: 22px; }
}
.stack-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s6); margin-top: var(--s4); }
.stack-card__list { list-style: none; font-size: var(--t-small); }
.stack-card__list li { padding-block: 11px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--s2); }
.stack-card__list li span:last-child { color: var(--gray); text-align: right; }

/* --- 16. PLANO TÉCNICO / DESPIECE (sección 4.4) -------------------------- */
.blueprint {
  background: var(--fog);
  border-radius: 4px;
  padding: clamp(var(--s3), 3vw, var(--s5));
}
.blueprint svg { width: 100%; height: auto; }
.blueprint__caption {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2);
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line);
  font-size: var(--t-micro); color: var(--gray); letter-spacing: 0.08em; text-transform: uppercase;
}
/* Etiquetas del plano: se ocultan en pantallas chicas y se sustituyen por lista legible */
.blueprint__legend { display: none; margin-top: var(--s3); }
.blueprint__legend dl { display: grid; grid-template-columns: 30px 1fr; gap: 10px var(--s2); font-size: var(--t-small); }
.blueprint__legend dt { color: var(--gray); }
.blueprint__legend dd { color: var(--ink); }

/* --- 17. SIGUIENTE PASO / SIGUE LEYENDO (secciones 5.1 y 5.4) ----------- */
.next-step {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(var(--s4), 4vw, var(--s6));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3) var(--s5);
  text-decoration: none;
  transition: border-color 0.3s var(--ease);
}
.next-step:hover { border-color: var(--ink); }
.next-step__title { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.015em; margin-top: 10px; max-width: 28ch; }
.next-step__why { font-size: var(--t-small); color: var(--gray); margin-top: 10px; max-width: 52ch; }
.next-step__arrow { flex: 0 0 auto; }
.next-step:hover .next-step__arrow svg { transform: translateX(5px); }
.next-step__arrow svg { transition: transform 0.3s var(--ease); }

.keep-reading { border-top: 1px solid var(--line); padding-top: var(--s5); }

/* --- 18. SELECTOR INTERACTIVO (Home, sección 5.4.4) --------------------- */
.selector { border-top: 1px solid var(--line); }
.selector__opt {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s3);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding-left 0.35s var(--ease), opacity 0.25s var(--ease);
}
.selector__opt:hover { padding-left: 12px; }
.selector__q { font-size: clamp(1.125rem, 2.4vw, 1.5rem); font-weight: 400; letter-spacing: -0.015em; }
.selector__a { font-size: var(--t-micro); color: var(--gray); text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; }

/* --- 19. MARQUEE (referencia 3D Portfolio, velocidad ligada al scroll) -- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: var(--s3); }
.marquee__row { display: flex; width: max-content; will-change: transform; }
.marquee__item {
  font-size: clamp(1.375rem, 3.6vw, 2.5rem); font-weight: 200; letter-spacing: -0.03em;
  color: var(--gray); white-space: nowrap; display: flex; align-items: center; gap: var(--s6);
  padding-right: var(--s6);
}
.marquee__item::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--line); flex: 0 0 auto; }

/* --- 20. FOOTER ---------------------------------------------------------- */
/* El pie va en negro profundo SIEMPRE: es lo último que ve el lector y es
   donde la marca debe cerrar en su color base. Hereda las inversiones de
   .section--dark, así que tarjetas, divisores y enlaces funcionan solos. */
.footer {
  padding-block: var(--s9) var(--s7);
  background: var(--void); color: #FFFFFF;
  --fog: rgba(255,255,255,0.06);
  --line: rgba(255,255,255,0.16);
  --gray: rgba(255,255,255,0.58);
  --ink: #FFFFFF;
}
.footer h4 { color: rgba(255,255,255,0.58); }
.footer__legal, .footer__bottom { color: rgba(255,255,255,0.52); }
.footer__legal a, .footer__bottom a { color: #FFFFFF; }
.footer__sig img { height: 76px; width: auto; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s6) var(--col-gap); }
.footer h4 { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.14em; color: var(--gray); font-weight: 500; margin-bottom: var(--s2); }
.footer ul { list-style: none; font-size: var(--t-small); }
.footer li + li { margin-top: 10px; }
.footer a { text-decoration: none; opacity: 0.8; transition: opacity 0.25s var(--ease); }
.footer a:hover { opacity: 1; }
.footer__sig { margin-bottom: var(--s3); }
.footer__sig img { height: 60px; width: auto; }
.footer__legal {
  margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--line);
  font-size: var(--t-micro); color: var(--gray); line-height: 1.65; max-width: 82ch;
}
.footer__legal + .footer__legal { margin-top: var(--s3); padding-top: 0; border-top: 0; }
.footer__bottom {
  margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  justify-content: space-between; font-size: var(--t-micro); color: var(--gray);
}

/* --- 21. PLACEHOLDERS DE IMAGEN ----------------------------------------- */
.ph {
  position: relative;
  background: var(--fog);
  display: grid; place-items: center;
  border-radius: 4px;
  overflow: hidden;
}
/* Fotos reales: se ven COMPLETAS, nunca recortadas — igual que las tarjetas
   de producto (sección 12). No sabemos de antemano si Daniel va a subir una
   foto vertical, horizontal o cuadrada, así que en vez de forzar un recorte
   que puede cortar el dron o descentrarlo, el espacio se adapta a la foto:
   la muestra entera, centrada, con aire de fondo gris niebla alrededor. */
.ph img { max-width: 96%; max-height: 96%; width: auto; height: auto; object-fit: contain; }
/* contain, no cover: en un marco tan panorámico (16:7) como el de la ficha
   grande, recortar una portada cuadrada pierde más de la mitad de su alto
   -- ahí fue donde el logo de Liftoff se cortó a la mitad. Con contain se ve
   completa, con el propio fondo oscuro de la sección como marco natural.

   POSITION:ABSOLUTE, no width/height:100% — .ph es "display:grid;
   place-items:center", y con center (en vez de stretch) los hijos de un
   grid se dimensionan a su propio contenido, así que "height:100%" no
   tenía contra qué resolverse y la imagen se salía por su tamaño real
   (1160×1160 en una caja de 1160×508), y el overflow:hidden del padre la
   recortaba en silencio. inset:0 no depende de ese cálculo: siempre llena
   el bloque de relleno del ancestro posicionado más cercano, sin ambigüedad. */
.ph--bleed img {
  position: absolute; inset: 0;
  max-width: none; max-height: none; width: 100%; height: 100%;
  object-fit: contain;
}
.ph--wide { aspect-ratio: 16 / 9; }
.ph--square { aspect-ratio: 1 / 1; }
.ph--sponsor { aspect-ratio: 3 / 1; }
.ph--sponsor img { max-width: 78%; max-height: 60%; }

/* --- 22. BREAKPOINTS (sección 10.1) ------------------------------------- */

/* Tablet: 768–1024px — retícula intermedia de 6-8 columnas */
@media (max-width: 1024px) {
  :root { --col-gap: 20px; }
  .col-3 { grid-column: span 6; }
  .col-4 { grid-column: span 6; }
  .col-5, .col-7 { grid-column: span 12; }
  .col-6, .col-8 { grid-column: span 12; }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
  /* El plano técnico no debe quedar ilegible en tablet */
  .bp-callouts { display: none; }
  .blueprint__legend { display: block; }
  .stack-card__grid { gap: var(--s4); }
  .stack-card__slot { height: 80vh; min-height: 520px; }
}

/* Celular: 360–480px (y hasta 767) */
@media (max-width: 767px) {
  :root { --header-h: 64px; }
  .nav { display: none; }
  .burger { display: block; }
  .col-3, .col-4 { grid-column: span 12; }

  /* El roadmap pasa de horizontal a vertical */
  .roadmap__track {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 0;
    padding-left: var(--s4);
  }
  .roadmap__track::before { top: 10px; bottom: 10px; left: 4px; right: auto; width: 1px; height: auto; }
  .roadmap__node { padding-top: 0; padding-block: var(--s3); }
  .roadmap__node::before { top: calc(var(--s3) + 5px); left: calc(var(--s4) * -1); }
  .roadmap__node + .roadmap__node { border-top: 1px solid var(--line); }

  .stack-card__slot { height: auto; min-height: 0; margin-bottom: var(--s3); }
  .stack-card { position: static; transform: none !important; }
  .stack-card__grid { grid-template-columns: 1fr; }
  .next-step { flex-direction: column; align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .index-list__item { grid-template-columns: 32px 1fr; }
  .index-list__aside { grid-column: 2; text-align: left; margin-top: 6px; }
  table.specs th, table.specs td { padding: 14px 16px 14px 0; }
  table.specs tbody th { width: 38%; }
  .hero { min-height: 76vh; }
  .hero__layer { object-position: 62% 30%; }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.8) 38%,
      rgba(255,255,255,0.96) 62%);
  }
}

@media (max-width: 400px) {
  :root { --gutter: 20px; }
  .header__logo span { display: none; }
}

/* --- 23. MOVIMIENTO REDUCIDO -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .word, .fade-in, .scale-in { opacity: 1 !important; transform: none !important; filter: none !important; }
  .stack-card { position: static; transform: none !important; }
  .stack-card__slot { height: auto; min-height: 0; margin-bottom: var(--s3); }
  .hero__layer--alas { display: none; }
  .marquee__row { transform: none !important; }
}


/* --- 25. BLOQUES OSCUROS -------------------------------------------------
   Patrōnus es base negra con contrastes blancos. El sitio alterna bloques
   claros y oscuros para dar ritmo: el ojo descansa en el claro y se detiene
   en el oscuro. Regla de uso: el bloque oscuro se reserva para momentos de
   ÉNFASIS (una afirmación, una cifra, una advertencia), nunca para lectura
   larga — un reglamento de AFAC en blanco sobre negro cansa a los tres
   párrafos, y esas guías son lo más importante del sitio.

   Los tokens se invierten dentro del bloque, así que todo lo que ya existe
   (tarjetas, tablas, etiquetas, divisores) funciona adentro sin tocarlo. */
.section--dark {
  background: var(--void);
  color: #FFFFFF;
  /* Invierte el sistema completo: gris niebla y gris línea se vuelven
     transparencias del blanco, para que no aparezcan grises "sucios". */
  --fog: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.2);
  /* Subido de 0.58 a 0.72: en texto chico (etiquetas, meta, descripciones)
     un gris tenue junto a un título blanco se percibe como si desapareciera,
     aunque el contraste técnico ya pasara. Más presencia, no más ruido. */
  --gray: rgba(255, 255, 255, 0.72);
  --ink: #FFFFFF;
  --white: #1D1D1F;
}
.section--dark .lead,
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #FFFFFF; }
.section--dark .label { color: rgba(255, 255, 255, 0.58); }
.section--dark .meta, .section--dark .muted { color: rgba(255, 255, 255, 0.58); }
.section--dark table.specs td { color: rgba(255, 255, 255, 0.72); }
.section--dark table.specs thead th { color: rgba(255, 255, 255, 0.58); }

/* El botón primario se invierte: blanco sólido sobre el negro. */
.section--dark .btn { background: #FFFFFF; color: #1D1D1F; }
.section--dark .btn--ghost { background: none; color: #FFFFFF; border-color: rgba(255,255,255,0.28); }
.section--dark .btn--ghost:hover { border-color: #FFFFFF; }

/* Divisores y tarjetas dentro del bloque oscuro */
.section--dark .card { border-top-color: rgba(255,255,255,0.16); }
.section--dark .card:hover { border-top-color: #FFFFFF; }
.section--dark .next-step { border-color: rgba(255,255,255,0.16); }
.section--dark .next-step:hover { border-color: #FFFFFF; }
.section--dark .callout { background: rgba(255,255,255,0.06); }
.section--dark .callout--outline { background: none; border-color: rgba(255,255,255,0.16); }
.section--dark .disclaimer { border-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.58); }
.section--dark .disclaimer a, .section--dark .prose a { color: #FFFFFF; border-bottom-color: rgba(255,255,255,0.32); }
.section--dark .phase-tag { border-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.72); }
.section--dark .phase-tag__dot { background: #FFFFFF; }
.section--dark .selector__opt { border-bottom-color: rgba(255,255,255,0.16); }
.section--dark .index-list, .section--dark .index-list__item { border-color: rgba(255,255,255,0.16); }
.section--dark .rule { background: rgba(255,255,255,0.16); }
.section--dark .ph, .section--dark .pcard__media { background: rgba(255,255,255,0.06); }

/* Cifra grande de énfasis — el uso natural del bloque oscuro */
.stat { display: grid; gap: var(--s2); }
.stat__num {
  font-size: clamp(3rem, 9vw, 6rem); font-weight: 200;
  letter-spacing: -0.05em; line-height: 0.95;
}
.stat__label { font-size: var(--t-small); color: var(--gray); max-width: 34ch; }


/* --- 26. DICCIONARIO DESPLEGABLE ----------------------------------------
   50 términos en tabla saturan la vista. Plegados se leen como un índice y
   el lector abre solo lo que no entiende. Usa <details> nativo: funciona
   sin JavaScript y es accesible por teclado sin que tengamos que hacer nada. */
.terms { border-top: 1px solid var(--line); }
.term { border-bottom: 1px solid var(--line); }
.term__name {
  list-style: none; cursor: pointer;
  padding-block: var(--s3);
  font-size: var(--t-h4); font-weight: 500; letter-spacing: -0.01em;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  transition: opacity 0.25s var(--ease);
}
.term__name::-webkit-details-marker { display: none; }
.term__name:hover { opacity: 0.55; }
.term__name::after {
  content: ""; flex: 0 0 auto;
  width: 11px; height: 11px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.35s var(--ease-out);
  opacity: 0.5;
}
.term[open] .term__name::after { transform: rotate(-135deg) translate(-2px, -2px); opacity: 1; }
.term[open] .term__name { padding-bottom: var(--s2); }
.term__def {
  font-size: var(--t-body); color: var(--gray);
  max-width: 62ch; padding-bottom: var(--s3);
  animation: termIn 0.35s var(--ease-out);
}
@keyframes termIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.term[hidden] { display: none !important; }

/* Buscador del diccionario */
.buscador { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
.buscador__input {
  flex: 1 1 320px; min-width: 0;
  font: inherit; font-size: var(--t-lead); font-weight: 300;
  color: var(--ink); background: none;
  border: 0; border-bottom: 1px solid var(--line);
  padding: var(--s2) 0;
  transition: border-color 0.3s var(--ease);
}
.buscador__input::placeholder { color: var(--gray); }
.buscador__input:focus { outline: none; border-bottom-color: var(--ink); }
.buscador__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.buscador__estado { white-space: nowrap; }
.glos-grupo[hidden] { display: none !important; }

/* --- 27. TÉRMINO EXPLICADO EN LÍNEA -------------------------------------
   Dentro de cualquier texto del sitio, la primera vez que aparece una
   palabra del diccionario se vuelve tocable: abre su definición ahí mismo,
   sin sacar al lector de donde va leyendo. Si el JavaScript no carga, la
   palabra se queda como texto normal — no se rompe nada. */
.termino {
  font: inherit; color: inherit; cursor: help;
  border-bottom: 1px dotted var(--gray);
  padding: 0; background: none;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.termino:hover { border-bottom-color: var(--ink); background: var(--fog); }
.termino[aria-expanded="true"] { background: var(--fog); border-bottom-style: solid; }
.termino__pop {
  display: block; margin-block: var(--s2);
  padding: var(--s3);
  background: var(--fog); border-radius: 4px;
  font-size: var(--t-small); color: var(--ink);
  animation: termIn 0.3s var(--ease-out);
}
.termino__pop b { display: block; font-weight: 600; margin-bottom: 4px; }
.termino__pop a { font-size: var(--t-micro); color: var(--gray); }
/* Sobre fondo negro (encabezado de página, bloques oscuros) el gris niebla
   de hover dejaría texto blanco sobre claro: se usa un velo blanco tenue.
   La caja de definición sigue siendo clara con texto tinta — legible en
   los dos fondos — y su enlace no hereda el blanco de .section--dark .prose a. */
.page-head .termino:hover, .section--dark .termino:hover,
.page-head .termino[aria-expanded="true"], .section--dark .termino[aria-expanded="true"] {
  background: rgba(255,255,255,0.12); border-bottom-color: #FFFFFF;
}
.page-head .termino { border-bottom-color: rgba(255,255,255,0.5); }
.section--dark .termino { border-bottom-color: rgba(255,255,255,0.5); }
/* Literales a propósito: dentro de .page-head y .section--dark los tokens
   --ink y --fog se redefinen a blanco/translúcido, y la caja debe seguir
   siendo clara con texto tinta. */
.page-head .termino__pop, .section--dark .termino__pop { color: #1D1D1F; background: #F5F5F7; }
.page-head .termino__pop a, .section--dark .termino__pop a, .section--dark .prose .termino__pop a { color: #6E6E73; border-bottom-color: #D2D2D7; }


/* --- 28. ALTERNATIVAS ----------------------------------------------------
   Tres columnas de opción, separadas por línea de 1px. Sin tarjetas con
   sombra: el mismo lenguaje de divisores que el resto del sitio.           */
.alts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.alt {
  display: grid; align-content: start; gap: 10px;
  padding: var(--s4) var(--s4) var(--s5) 0;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: opacity 0.3s var(--ease), padding-left 0.35s var(--ease);
}
.alt + .alt { padding-left: var(--s4); border-left: 1px solid var(--line); }
.alt:hover { opacity: 0.55; }
.alt__meta { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.14em; color: var(--gray); }
.alt__name { font-size: var(--t-h4); font-weight: 600; letter-spacing: -0.012em; }
.alt__why { font-size: var(--t-small); color: var(--gray); line-height: 1.5; }
.alt__price { font-size: var(--t-small); margin-top: 4px; }
@media (max-width: 900px) {
  .alts { grid-template-columns: 1fr; }
  .alt + .alt { padding-left: 0; border-left: 0; }
}

/* --- 29. AVISO DE AGOTADO ------------------------------------------------ */
.agotado {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--gray); border: 1px solid var(--line);
  padding: 6px 14px; border-radius: 999px;
}
.agotado::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gray); }

/* --- 30. ENCABEZADO OSCURO DE PÁGINA -------------------------------------
   Cada página abre con un bloque negro. Es lo que le da al sitio su base de
   marca sin volver ilegible el contenido largo: el negro enmarca, el blanco
   sostiene la lectura. */
.page-head {
  background: var(--void); color: #FFFFFF;
  --fog: rgba(255,255,255,0.06);
  --line: rgba(255,255,255,0.16);
  --gray: rgba(255,255,255,0.58);
  --ink: #FFFFFF;
  padding-block: clamp(var(--s7), 8vw, var(--s10)) clamp(var(--s7), 8vw, var(--s9));
  position: relative; overflow: hidden;
}
.page-head h1, .page-head .lead { color: #FFFFFF; }
.page-head .crumbs, .page-head .meta { color: rgba(255,255,255,0.58); }
.page-head .crumbs a:hover { color: #FFFFFF; }
.page-head .phase-tag { border-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.75); }
.page-head .phase-tag__dot { background: #FFFFFF; }
/* Retícula técnica de fondo, apenas visible: recuerda el plano de despiece
   sin competir con el texto. */
.page-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 90% at 82% 20%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 82% 20%, #000 0%, transparent 72%);
}
.page-head > * { position: relative; z-index: 1; }

/* --- 31. HERO OSCURO ------------------------------------------------------ */
.hero--dark { background: var(--void); }
.hero--dark .hero__title, .hero--dark .hero__sub { color: #FFFFFF; }
.hero--dark .hero__sub strong { color: #FFFFFF; }
.hero--dark .label, .hero--dark .hero__hint { color: rgba(255,255,255,0.6); }
.hero--dark .btn { background: #FFFFFF; color: var(--void); }
.hero--dark .link-arrow { color: #FFFFFF; }
.hero--dark .hero__scrim {
  background: linear-gradient(100deg,
    rgba(10,10,11,0.94) 0%,
    rgba(10,10,11,0.84) 30%,
    rgba(10,10,11,0.36) 46%,
    rgba(10,10,11,0) 58%);
}
/* Portada con alas (22 sept 2026): las dos capas son composiciones
   centradas (dron / alas sobre las mismas nubes), no fotos con foco a la
   derecha. Centro real para que las alas y la bandera queden completas. */
.hero--dark .hero__layer { object-position: center center; }
@media (max-width: 767px) {
  .hero--dark .hero__scrim {
    background: linear-gradient(180deg,
      rgba(10,10,11,0.5) 0%, rgba(10,10,11,0.82) 38%, rgba(10,10,11,0.96) 62%);
  }
}

/* --- 32. ALTERNATIVAS, CORREGIDO -----------------------------------------
   Antes se veían pegadas y no se entendía que fueran tres cosas distintas.
   Ahora cada una es una tarjeta con su propio aire y una flecha que dice
   claramente que se puede tocar. */
.alts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); border-top: 0; }
.alt {
  display: grid; align-content: start; gap: 10px;
  padding: var(--s4);
  border: 1px solid var(--line); border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.alt + .alt { padding-left: var(--s4); border-left: 1px solid var(--line); }
.alt:hover { opacity: 1; border-color: var(--ink); transform: translateY(-3px); }
.alt__arrow {
  margin-top: var(--s2); display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--gray);
}
.alt:hover .alt__arrow { color: var(--ink); }
@media (max-width: 900px) {
  .alts { grid-template-columns: 1fr; }
  .alt + .alt { padding-left: var(--s4); border-left: 1px solid var(--line); }
}

/* --- 33. CLOSE-UP DE PRODUCTO -------------------------------------------- */
.closeup { background: var(--void); border-radius: 6px; overflow: hidden; }
.closeup img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* --- 34. MICRO-INTERACCIONES ---------------------------------------------
   Movimiento con peso físico, no transiciones genéricas. La curva
   cubic-bezier(0.32,0.72,0,1) arranca rápido y frena suave: se siente como
   un objeto con masa, no como una animación de plantilla.
   Todo respeta prefers-reduced-motion (bloque 23). */
:root { --spring: cubic-bezier(0.32, 0.72, 0, 1); }

/* El botón se hunde al presionarlo, como una tecla real */
.btn, .btn--ghost {
  transition: transform 0.45s var(--spring), opacity 0.3s var(--ease), background 0.3s var(--ease);
}
.btn:active, .btn--ghost:active { transform: scale(0.975); }

/* La flecha dentro del botón vive en su propio círculo y se mueve en diagonal */
.btn svg, .link-arrow svg { transition: transform 0.45s var(--spring); }
.btn:hover svg { transform: translate(4px, -1px); }
.link-arrow:hover svg { transform: translate(5px, -1px); }

/* Tarjetas: se levantan apenas, con la línea superior encendiéndose */
.card { transition: border-top-color 0.4s var(--spring), transform 0.45s var(--spring); }
.card:hover { transform: translateY(-4px); }

.pcard { transition: transform 0.5s var(--spring); }
.pcard:hover { transform: translateY(-5px); }
.pcard__media img, .pcard__media svg { transition: transform 0.7s var(--spring); }
.pcard:hover .pcard__media img, .pcard:hover .pcard__media svg { transform: scale(1.05); }

/* El bloque de "siguiente paso" empuja su flecha al acercarse el cursor */
.next-step { transition: border-color 0.4s var(--spring), transform 0.45s var(--spring); }
.next-step:hover { transform: translateY(-3px); }
.next-step:hover .next-step__arrow svg { transform: translate(7px, -2px); }

/* Nodo del roadmap: el punto se llena y el texto se adelanta */
.roadmap__node { transition: transform 0.45s var(--spring); }
.roadmap__node:hover { transform: translateY(-3px); }

/* Opción del selector: la flecha entra desde la izquierda */
.selector__opt { transition: padding-left 0.5s var(--spring), background 0.35s var(--ease); }
.selector__opt:hover { padding-left: 16px; background: var(--fog); }

/* Término del diccionario: el acordeón se abre con peso */
.term__name::after { transition: transform 0.5s var(--spring), opacity 0.3s var(--ease); }

/* Enlaces del pie: subrayado que crece de izquierda a derecha */
.footer a { position: relative; }
.footer a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: currentColor;
  transition: right 0.45s var(--spring);
}
.footer a:hover::after { right: 0; }

/* Fila de la tabla de specs: se ilumina al pasar, para leer sin perder el renglón */
table.specs tbody tr { transition: background 0.25s var(--ease); }
table.specs tbody tr:hover { background: var(--fog); }


/* --- 35. ÍCONOS DE PLACEHOLDER SOBRE FONDO OSCURO -------------------------
   iconoCategoria() dibuja SVG con colores fijos (#1D1D1F / #86868B) pensados
   para fondo blanco. Ahora que muchas rejillas de producto viven en
   .section--dark, esos trazos oscuros casi desaparecen sobre negro. Se
   remapean por atributo — sin tocar el generador de SVG ni duplicar código. */
.section--dark svg[stroke="#1D1D1F"],
.section--dark svg [stroke="#1D1D1F"] { stroke: #FFFFFF; }
.section--dark svg[stroke="#86868B"],
.section--dark svg [stroke="#86868B"] { stroke: rgba(255,255,255,0.55); }
.section--dark svg[fill="#1D1D1F"],
.section--dark svg [fill="#1D1D1F"] { fill: #FFFFFF; }


/* --- 36. ALTERNATIVAS COMPACTAS (junto al botón de compra) --------------- */
.alt-compacto { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.alt-compacto ul { list-style: none; margin-top: var(--s2); }
.alt-compacto li {
  display: flex; justify-content: space-between; gap: var(--s2);
  padding-block: 8px; font-size: var(--t-small);
  border-bottom: 1px solid var(--line);
}
.alt-compacto li:last-child { border-bottom: 0; }
.alt-compacto a { text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color 0.25s var(--ease); }
.alt-compacto a:hover { border-color: var(--ink); }
.alt-compacto li span:last-child { color: var(--gray); white-space: nowrap; }

/* --- 37. REFACCIONES ------------------------------------------------------
   Tarjeta de refacción (/refacciones/<grupo>/): foto o icono a la izquierda,
   texto a la derecha, separada por la misma línea de 1px que el resto de
   tarjetas. Sin fondo, sin sombra, sin botón: los enlaces de tienda son
   texto discreto para no poner treinta acciones primarias en una página.
   Espaciados: solo los 4 pasos de DISENO.md §1.                            */
.rcard {
  display: grid; grid-template-columns: 176px 1fr; gap: var(--s3);
  align-content: start;
  padding-top: var(--s3); border-top: 1px solid var(--line);
  transition: border-color 0.3s var(--ease);
}
.rcard:hover { border-top-color: var(--ink); }
/* Sin fondo propio: la foto flota directo sobre el blanco de la sección —
   mismo ajuste que .pcard__media (sección 12): un --fog aquí se ve como una
   caja gris detrás de cada producto, incluso ya recortado. */
.rcard__media {
  aspect-ratio: 1 / 1;
  position: relative; overflow: hidden;
  border-radius: 4px;
}
.rcard__media img, .rcard__media svg {
  position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain;
  transition: transform 0.6s var(--ease);
}
.rcard:hover .rcard__media img, .rcard:hover .rcard__media svg { transform: scale(1.035); }
.rcard__body { display: flex; flex-direction: column; min-width: 0; }
.rcard__name { font-size: var(--t-h4); font-weight: 600; letter-spacing: -0.012em; }
.rcard__when { font-size: var(--t-small); color: var(--gray); line-height: 1.5; margin-top: var(--s1); }
.rcard__list { margin-top: var(--s1); padding-left: 1.1em; font-size: var(--t-small); line-height: 1.5; }
.rcard__list li + li { margin-top: var(--s1); }
.rcard__list li::marker { color: var(--gray); }
.rcard__fits { font-size: var(--t-micro); color: var(--gray); margin-top: var(--s3); line-height: 1.6; }
.rcard__fits a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color 0.25s var(--ease); }
.rcard__fits a:hover { border-color: var(--ink); }
.rcard__fits i { font-style: normal; margin-inline: 8px; opacity: 0.5; }
.rcard__shops {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
  margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line);
  font-size: var(--t-micro);
}
.rcard__shops .link-arrow { font-size: var(--t-micro); }
.rcard__pendiente { font-size: var(--t-micro); color: var(--gray); line-height: 1.5; }
/* Ancla de tarjeta: al llegar desde la tabla de compatibilidad, la tarjeta
   no debe quedar escondida bajo el header pegajoso. */
.rcard[id] { scroll-margin-top: calc(var(--header-h) + var(--s3)); }

/* Kit de campo (índice de refacciones): lista numerada dentro de un callout */
.kit { padding-left: 1.4em; font-size: var(--t-small); line-height: 1.5; }
.kit li + li { margin-top: var(--s1); }
.kit li::marker { color: var(--gray); font-variant-numeric: tabular-nums; }
.kit a { text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color 0.25s var(--ease); }
.kit a:hover { border-color: var(--ink); }

@media (max-width: 767px) {
  .rcard { grid-template-columns: 1fr; }
  .rcard__media { aspect-ratio: 16 / 9; }
}
/* "Más opciones": las tiendas 3 y 4 se pliegan. Mismo peso que un enlace de
   texto, sin caja ni flecha extra — la decisión se lee en dos enlaces. */
.rcard__more { display: inline; }
.rcard__more summary {
  display: inline; cursor: pointer; list-style: none;
  font-size: var(--t-micro); color: var(--gray);
  border-bottom: 1px solid var(--line); transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.rcard__more summary::-webkit-details-marker { display: none; }
.rcard__more summary:hover { color: var(--ink); border-color: var(--ink); }
.rcard__more[open] summary { display: none; }
.rcard__more-list { display: contents; }

/* --- 38. PORTADA POR SECCIÓN (slot opcional) ------------------------------
   Imagen "silueta en la oscuridad" detrás del encabezado negro de una
   página interior. Solo aparece si existe el archivo (ver encabezado() en
   components.js). El velo garantiza el contraste del título igual que en el
   hero; la retícula técnica se apaga para no ensuciar la foto.            */
.page-head > .page-head__portada {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 78% center;
}
.page-head > .page-head__scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(10,10,11,0.94) 0%, rgba(10,10,11,0.86) 36%, rgba(10,10,11,0.5) 60%, rgba(10,10,11,0.1) 82%);
}
.page-head.has-portada::after { display: none; }
@media (max-width: 767px) {
  /* En móvil no hay columna izquierda/derecha: el texto ocupa todo el ancho,
     así que "cover" agrandaba la pieza hasta que dejaba de leerse como objeto
     (quedaba como una mancha oscura de fondo). "contain" la muestra completa
     y a su tamaño real — más chica, más clara — con el resto del marco en el
     mismo negro del bloque, invisible. Ajuste de Daniel, 20 sept 2026. */
  .page-head > .page-head__portada {
    object-fit: contain; object-position: 88% 38%;
  }
  .page-head > .page-head__scrim {
    background: linear-gradient(180deg, rgba(10,10,11,0.32) 0%, rgba(10,10,11,0.6) 40%, rgba(10,10,11,0.94) 78%);
  }
}

/* --- 39. GESTOS (micro-gestos sobre bloques oscuros) ----------------------
   Humo, barrido y pulso. Reglas del sistema en DISENO.md §11: uno a la vez,
   se apagan fuera de pantalla, nunca con prefers-reduced-motion. El lienzo
   vive DEBAJO del contenido (z-index 0) y nunca captura el puntero.       */
[data-gesto-host] { position: relative; }
.section--dark[data-gesto-host] > .wrap { position: relative; z-index: 1; }
.gesto-canvas {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
}
.hero--dark > .gesto-canvas { z-index: 1; }
/* Barrido: una luz fina recorre el borde superior del bloque, una sola vez. */
.gesto-barrido::before {
  content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 1px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
  animation: gesto-barrido 2.6s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
@keyframes gesto-barrido { to { left: 100%; } }

/* --- 40. CALCULADORA DE COSTO REAL ----------------------------------------
   Un número grande, tres decisiones, un desglose. Estilo Apple: sin caja
   sobre caja, sin color. Reusa .callout y .specs para lo demás.           */
.calc { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s6); align-items: start; }
.calc__form { display: grid; gap: var(--s4); }
.calc__field { display: grid; gap: var(--s1); }
.calc__field label { font-size: var(--t-small); color: var(--gray); }
.calc__field input[type="number"], .calc__field select {
  font: inherit; font-size: var(--t-h4); font-weight: 500; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: var(--s1) 0; border-radius: 0; width: 100%;
  transition: border-color 0.25s var(--ease);
}
.calc__field input[type="number"]:focus, .calc__field select:focus { outline: none; border-bottom-color: var(--ink); }
.calc__field input[type="number"]::-webkit-outer-spin-button,
.calc__field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc__field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.calc__seg { display: flex; border-bottom: 1px solid var(--line); }
.calc__seg label {
  flex: 1; text-align: center; cursor: pointer; padding: var(--s2) 0;
  font-size: var(--t-small); color: var(--gray); position: relative;
  transition: color 0.25s var(--ease);
}
.calc__seg input { position: absolute; opacity: 0; pointer-events: none; }
.calc__seg span { display: block; position: relative; }
.calc__seg span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--s2) - 1px); height: 2px;
  background: var(--ink); transform: scaleX(0); transition: transform 0.35s var(--spring);
}
.calc__seg input:checked + span { color: var(--ink); font-weight: 600; }
.calc__seg input:checked + span::after { transform: scaleX(1); }
.calc__seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 4px; }
.calc__check { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-small); color: var(--gray); cursor: pointer; }
.calc__check input { width: 16px; height: 16px; accent-color: var(--ink); }
.calc__out { display: grid; gap: var(--s4); }
.calc__big { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 200; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.calc__big small { font-size: 0.42em; font-weight: 400; color: var(--gray); letter-spacing: 0; margin-left: 0.2em; }
.calc__range { font-size: var(--t-small); color: var(--gray); }
.calc__rows { display: grid; gap: 0; border-top: 1px solid var(--line); }
.calc__row { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.calc__row span:first-child { color: var(--gray); }
.calc__note { font-size: var(--t-small); color: var(--gray); line-height: 1.5; }
.calc__note strong { color: var(--ink); }
@media (max-width: 767px) { .calc { grid-template-columns: 1fr; } }

/* --- 41. CONTINUAR DONDE TE QUEDASTE (rastro con memoria) ------------------ */
.continuar {
  display: none; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) 0; border-bottom: 1px solid var(--line);
  font-size: var(--t-small); color: var(--gray);
}
.continuar.is-on { display: flex; }
.continuar a { color: var(--ink); text-decoration: none; }
.continuar button { font: inherit; font-size: var(--t-micro); color: var(--gray); background: none; border: 0; cursor: pointer; }
.continuar button:hover { color: var(--ink); }

/* --- 47. CIFRAS ATREVIDAS Y NÚMEROS GRANDES ---------------------------------
   Daniel (21 sept, noche): la página se sentía blanca y gris. Permiso
   explícito para "números atrevidos, más grandes de lo normal, variaciones
   de tamaño y contrastes estratégicos". Reglas: el número grande siempre
   dice algo real de esa página; peso 200 en negro (la finura hace elegante
   lo enorme); dorado solo en la cifra que manda. */
.stat__num--xl { font-size: clamp(3.75rem, 12vw, 8.5rem); letter-spacing: -0.055em; line-height: 0.9; }
.stat__num--xl.stat__num--texto { font-size: clamp(2rem, 5.5vw, 3.75rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; padding-top: 0.15em; }
.stat__num--xl small { font-size: 0.32em; font-weight: 400; letter-spacing: 0; color: var(--gray); margin-left: 0.15em; }
.cifras .stat { gap: var(--s3); }
/* Dos negros seguidos (encabezado + cifras): una línea fina los separa. */
.page-head + .cifras { border-top: 1px solid rgba(255,255,255,0.12); }
.cifras .stat__label { max-width: 26ch; }
/* Índice con número grande y negro (refacciones): el orden es el mensaje. */
.index-list--xl .index-list__item { grid-template-columns: 96px 1fr auto; align-items: start; padding-block: var(--s4); }
.index-list--xl .index-list__num { font-size: clamp(2.25rem, 6vw, 4rem); font-weight: 700; color: var(--ink); letter-spacing: -0.04em; line-height: 0.9; }
.index-list--xl .index-list__item:hover .index-list__num { color: var(--oro); }
@media (max-width: 767px) {
  .index-list--xl .index-list__item { grid-template-columns: 64px 1fr; }
  .index-list--xl .index-list__aside { grid-column: 2; text-align: left; white-space: normal; }
}

/* --- 42. MARCO DORADO PRO ----------------------------------------------------
   Regla de Daniel (21 sept 2026, README §8.15): lo PRO se identifica desde el
   primer pixel con un marco dorado y la etiqueta "PRO", y se muestra completo
   (con datos de ejemplo). El pie "Se desbloquea con Patrōnus PRO" se apaga
   cuando <body> lleva .is-pro (assets/js/pro-core.js). Mientras está
   bloqueado, el cuerpo no recibe clics ni selección: no hay "clic → candado",
   el lector sabe qué es antes de tocar. Segundo uso del acento dorado. */
.pro-marco {
  position: relative;
  border: 1px solid var(--oro);
  border-radius: 6px;
  padding: var(--s5);
  background: #FFFFFF;
}
.section--dark .pro-marco { background: rgba(255,255,255,0.03); }
.pro-marco--compacto { padding: var(--s3); border-radius: 4px; }
.pro-marco__tag {
  position: absolute; top: -10px; left: var(--s4);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em;
  color: var(--oro); background: #FFFFFF;
  padding: 2px 10px; line-height: 1.3;
}
.section--dark .pro-marco__tag { background: var(--void); }
.pro-marco--compacto .pro-marco__tag { left: var(--s3); }
.pro-marco__ejemplo {
  position: absolute; top: -10px; right: var(--s4);
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray); background: #FFFFFF; padding: 2px 8px; line-height: 1.3;
}
.section--dark .pro-marco__ejemplo { background: var(--void); }
.pro-marco--compacto .pro-marco__ejemplo { right: var(--s3); }
.pro-marco__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4);
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--t-small); color: var(--gray);
}
.pro-marco__pie p { max-width: 52ch; }
.pro-marco__pie strong { color: var(--ink); }
.pro-marco--compacto .pro-marco__pie { margin-top: var(--s3); padding-top: var(--s2); font-size: var(--t-micro); }
.pro-marco--compacto .pro-marco__pie .btn { padding: 10px 18px; font-size: var(--t-micro); }
/* Bloqueado: el contenido se ve, no se opera. */
body:not(.is-pro) .pro-marco__body { pointer-events: none; user-select: none; }
/* Daniel, 22 sept 2026: lo PRO se ve borroso. Se intuye que hay gráficas,
   mapas y fichas, pero nada se lee: "un mundo inalcanzable a menos que
   pagues". Al pasar el cursor aclara apenas, para invitar sin regalar.
   El pie ("Se desbloquea con PRO") y la etiqueta quedan nítidos. */
body:not(.is-pro) .pro-marco__body:not(.pro-marco__body--nitido) {
  filter: blur(7px) saturate(0.85);
  opacity: 0.82;
  transition: filter 0.6s var(--ease), opacity 0.6s var(--ease);
}
body:not(.is-pro) .pro-marco:hover .pro-marco__body:not(.pro-marco__body--nitido) { filter: blur(5px) saturate(0.9); opacity: 0.9; }
body:not(.is-pro) .pro-marco__body [data-pro-only] { opacity: 0.45; }
/* PRO activo: fuera el pie y la etiqueta "ejemplo". */
body.is-pro .pro-marco__pie, body.is-pro .pro-marco__ejemplo { display: none; }

/* Señal discreta en la parte gratis: "existe una versión PRO". */
.pro-hint {
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--s5); font-size: var(--t-small); color: var(--gray);
}
.pro-hint__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--oro); flex: 0 0 auto; }
.pro-hint a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.pro-hint a:hover { border-color: var(--ink); }
body.is-pro .pro-hint { display: none; }

/* Botón dorado: solo para la compra de PRO. Negro sobre dorado. */
.btn--oro { background: var(--oro); color: #1D1D1F; }
.btn--oro:hover { opacity: 0.9; }
.section--dark .btn--oro { background: var(--oro); color: #1D1D1F; }
.btn.is-off, .btn[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }
.calc__note.is-error { color: var(--ink); font-weight: 500; }
.stat__num--oro { color: var(--oro); }
.stat__num--texto { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; padding-top: 0.3em; }

/* --- 43. BITÁCORA ------------------------------------------------------------ */
.bit-resumen { display: grid; gap: var(--s6); }
.bit-perfil { display: flex; align-items: center; gap: var(--s4); }
.bit-avatar {
  position: relative; width: 72px; height: 72px; border-radius: 50%; flex: 0 0 auto;
  background: var(--fog); border: 1px solid var(--line); cursor: pointer; overflow: hidden;
  display: grid; place-items: center; font-size: 1.5rem; font-weight: 300; color: var(--gray);
  transition: border-color 0.25s var(--ease);
}
.bit-avatar:hover { border-color: var(--ink); }
.bit-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bit-avatar img[hidden], .bit-avatar span[hidden] { display: none; }
.bit-perfil__datos { display: grid; gap: 4px; min-width: 0; }
.bit-nombre {
  font: inherit; font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.015em; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid transparent; padding: 2px 0; width: 100%; max-width: 22ch;
  transition: border-color 0.25s var(--ease);
}
.bit-nombre:hover, .bit-nombre:focus { outline: none; border-bottom-color: var(--line); }
.bit-nombre::placeholder { color: var(--gray); font-weight: 300; }
.bit-cifras .stat__num { font-weight: 300; }

.bit-form-wrap { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s6); align-items: start; }
.bit-form input[type="text"], .bit-form input[type="date"], .bit-form input[type="number"] {
  font: inherit; font-size: var(--t-h4); font-weight: 500; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: var(--s1) 0; border-radius: 0; width: 100%;
  transition: border-color 0.25s var(--ease);
}
.bit-form input:focus { outline: none; border-bottom-color: var(--ink); }
.bit-form input::placeholder { color: var(--gray); font-weight: 300; }
.bit-form input[type="file"], .calc__field input[type="file"] { font-size: var(--t-small); color: var(--gray); padding: var(--s1) 0; }
.bit-form__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.bit-form .pro-marco { margin-top: var(--s2); }

.bit-lista-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.bit-lista { list-style: none; }
.bit-vuelo {
  display: grid; grid-template-columns: 84px 1fr auto 32px; gap: var(--s3); align-items: start;
  padding-block: var(--s3); border-bottom: 1px solid var(--line);
}
.bit-vuelo:has(.bit-vuelo__foto) { grid-template-columns: 64px 84px 1fr auto 32px; }
.bit-vuelo__foto { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }
.bit-vuelo__fecha { font-size: var(--t-micro); color: var(--gray); letter-spacing: 0.04em; padding-top: 4px; white-space: nowrap; }
.bit-vuelo__cuerpo { min-width: 0; }
.bit-vuelo__cuerpo strong { display: block; font-weight: 600; }
.bit-vuelo__dron { display: block; font-size: var(--t-small); color: var(--gray); margin-top: 2px; }
.bit-vuelo__nota { font-size: var(--t-small); color: var(--gray); margin-top: 6px; max-width: 60ch; }
.bit-vuelo__min { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; padding-top: 2px; }
.bit-vuelo__borrar {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid transparent;
  color: var(--gray); font-size: 1.1rem; line-height: 1; display: grid; place-items: center;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.bit-vuelo__borrar:hover { border-color: var(--line); color: var(--ink); }
.bit-vuelo.is-confirm .bit-vuelo__borrar { width: auto; padding: 0 12px; border-radius: 999px; border-color: var(--ink); color: var(--ink); font-size: var(--t-micro); font-weight: 500; }
.bit-vacio { margin-top: var(--s4); color: var(--gray); font-size: var(--t-small); max-width: 52ch; }
.bit-vacio[hidden] { display: none; }

.bit-respaldo { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s6); align-items: start; }
.bit-respaldo__acciones { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.bit-respaldo__acciones .calc__note { flex-basis: 100%; }

/* Estadísticas: barras horizontales monocromáticas; el dorado marca la más alta. */
.bit-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s6); }
.bit-stats__col { display: grid; gap: var(--s2); align-content: start; }
.bit-stats__fila { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.bit-dato { display: grid; gap: 4px; }
.bit-dato strong { font-weight: 500; font-size: var(--t-small); }
.bit-stats__acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.bit-barras { display: grid; gap: 10px; }
.bit-barra { display: grid; grid-template-columns: minmax(64px, 30%) 1fr auto; gap: var(--s2); align-items: center; font-size: var(--t-small); }
.bit-barra__nombre { color: var(--gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bit-barra__pista { height: 6px; background: rgba(0,0,0,0.06); border-radius: 3px; overflow: hidden; }
.bit-barra__fill { display: block; height: 100%; background: var(--ink); border-radius: 3px; transition: width 0.6s var(--ease-out); }
.bit-barra:first-child .bit-barra__fill { background: var(--oro); }
.bit-barra__valor { font-variant-numeric: tabular-nums; color: var(--gray); white-space: nowrap; }
.bit-barras--meses .bit-barra { grid-template-columns: 32px 1fr auto; }
.bit-barras--meses .bit-barra:first-child .bit-barra__fill { background: var(--ink); }

/* Vista de impresión (PDF con marca): oculta en pantalla. */
.bit-print { display: none; }

/* --- 44. DIPLOMAS ------------------------------------------------------------ */
.diploma-card {
  position: relative; display: grid; gap: var(--s2); align-content: start;
  padding: var(--s4); border: 1px solid var(--line); border-radius: 6px;
  transition: border-color 0.4s var(--ease);
}
.diploma-card.is-conquistado { border-color: var(--oro); }
.diploma-card.is-conquistado::after {
  content: "Conquistado"; position: absolute; top: -10px; right: var(--s3);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--oro); background: #FFFFFF; padding: 2px 8px;
}
.diploma-card__nombre { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.02em; }
.diploma-card__frase { font-size: var(--t-small); color: var(--gray); }
.diploma-card__barra { height: 4px; background: var(--fog); border-radius: 2px; overflow: hidden; margin-top: var(--s2); }
.diploma-card__barra span { display: block; height: 100%; width: 0; background: var(--oro); border-radius: 2px; transition: width 0.8s var(--ease-out); }
.diploma-card__estado { font-size: var(--t-micro); color: var(--gray); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.diploma-gen { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s6); align-items: start; }
.diploma-preview { background: var(--void); border-radius: 4px; overflow: hidden; }
.diploma-preview canvas { width: 100%; height: auto; display: block; }
.diploma-gen__form select, .diploma-gen__form input[type="text"] {
  font: inherit; font-size: var(--t-h4); font-weight: 500; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: var(--s1) 0; width: 100%; border-radius: 0;
}
.diploma-gen__form input:focus, .diploma-gen__form select:focus { outline: none; border-bottom-color: var(--ink); }

/* --- 45. DÓNDE VOLAR (mapa) -------------------------------------------------- */
.mapa {
  position: relative; height: clamp(360px, 56vh, 620px);
  background: var(--void); border-radius: 6px; overflow: hidden; isolation: isolate;
}
.mapa__fallback {
  position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; text-align: center;
  color: #FFFFFF; padding: var(--s4); pointer-events: none;
}
.mapa__fallback .label, .mapa__fallback .meta { color: rgba(255,255,255,0.6); }
.mapa .leaflet-container { font-family: inherit; background: var(--void); }
/* OSM es de colores; aquí se vuelve negro y gris. Solo el fondo: los pines y
   círculos van en otros panes y no se tocan. */
.mapa .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(0.72) contrast(1.15); }
.mapa .leaflet-control-zoom a { background: #1D1D1F; color: #FFFFFF; border-color: rgba(255,255,255,0.14); }
.mapa .leaflet-control-zoom a:hover { background: #2A2A2D; }
.mapa .leaflet-bar { border: 0; box-shadow: none; }
.mapa .leaflet-control-attribution { background: rgba(10,10,11,0.7); color: rgba(255,255,255,0.55); font-size: 10px; }
.mapa .leaflet-control-attribution a { color: rgba(255,255,255,0.75); }
.mapa__marker span {
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle, var(--oro) 0 4px, rgba(201,164,76,0.28) 5px, transparent 9px);
  box-shadow: 0 0 0 1px rgba(201,164,76,0.6);
}
.mapa__popup .leaflet-popup-content-wrapper { background: #1D1D1F; color: #FFFFFF; border-radius: 4px; box-shadow: none; font-size: var(--t-small); }
.mapa__popup .leaflet-popup-content { margin: 12px 16px; line-height: 1.45; }
.mapa__popup .leaflet-popup-content a { color: var(--oro); text-decoration: none; }
.mapa__popup .leaflet-popup-tip { background: #1D1D1F; }
.mapa__tip { background: #1D1D1F; color: #FFFFFF; border: 0; border-radius: 3px; font-size: var(--t-micro); box-shadow: none; }
.mapa__tip::before { border-top-color: #1D1D1F; }
.mapa__leyenda { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s3); font-size: var(--t-small); color: var(--gray); }
.mapa__leyenda span { display: inline-flex; align-items: center; gap: 10px; }
.mapa__pin { width: 10px; height: 10px; border-radius: 50%; background: var(--oro); }
.mapa__zona { width: 14px; height: 14px; border-radius: 50%; border: 1px dashed var(--gray); background: rgba(0,0,0,0.05); }

.spots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--col-gap); margin-top: var(--s5); }
.spot { display: grid; gap: var(--s3); align-content: start; }
.spot__head { display: grid; gap: var(--s1); }
.spot__nombre { font-size: var(--t-h3); cursor: pointer; }
.spot__nombre:hover { opacity: 0.6; }
.spot__resumen { font-size: var(--t-small); }
.spot__ficha { display: grid; gap: var(--s2); }
.spot__ficha div { display: grid; grid-template-columns: 112px 1fr; gap: var(--s2); font-size: var(--t-small); }
.spot__ficha dt { color: var(--gray); }
.spot__ficha dd { line-height: 1.5; }

/* --- 46. PÁGINA PRO ---------------------------------------------------------- */
.pro-precio { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: end; }
.pro-precio__num { font-size: clamp(3rem, 9vw, 6rem); font-weight: 200; letter-spacing: -0.05em; line-height: 0.95; margin-top: var(--s2); white-space: nowrap; }
.pro-precio__num small { font-size: 0.3em; font-weight: 400; color: var(--gray); letter-spacing: 0.04em; margin-left: 0.1em; }
.pro-precio__cta { display: grid; justify-items: start; }
.pro-item { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }
.pro-item__num { font-size: var(--t-micro); color: var(--oro); letter-spacing: 0.14em; font-weight: 600; }
.pro-item p { font-size: var(--t-small); color: var(--gray); max-width: 44ch; }
.pro-datos { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s6); align-items: start; }
.pro-codigo { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s6); align-items: start; }
.pro-codigo input[type="text"] {
  font: inherit; font-size: var(--t-h4); font-weight: 500; color: var(--ink); letter-spacing: 0.06em;
  background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: var(--s1) 0; width: 100%; border-radius: 0;
}
.pro-codigo input:focus { outline: none; border-bottom-color: var(--ink); }
.pro-codigo form[hidden], .pro-activo[hidden] { display: none; }
.pro-activo { position: relative; border: 1px solid var(--oro); border-radius: 6px; padding: var(--s4); display: grid; gap: var(--s2); background: #FFFFFF; }
.pro-activo .pro-marco__tag { background: #FFFFFF; }
.pro-activo code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-small); letter-spacing: 0.06em; background: var(--fog); padding: 2px 8px; border-radius: 3px; }
.pro-activo button.link { font-size: var(--t-small); color: var(--gray); align-self: start; justify-self: start; }
.pro-gracias { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s6); align-items: start; }
.pro-gracias__codigo { display: grid; gap: var(--s3); justify-items: start; padding: var(--s4); border: 1px solid var(--oro); border-radius: 6px; }
.pro-gracias__codigo code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(1rem, 2.2vw, 1.5rem); letter-spacing: 0.06em; font-weight: 500; overflow-wrap: anywhere; }
.pro-pasos { padding-left: 1.2em; margin-top: var(--s3); display: grid; gap: var(--s2); font-size: var(--t-small); }
.pro-pasos li::marker { color: var(--oro); font-weight: 600; }

@media (max-width: 1023px) {
  .bit-stats__fila { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .bit-form-wrap, .bit-respaldo, .bit-stats, .diploma-gen, .pro-precio, .pro-datos, .pro-codigo, .pro-gracias, .spots { grid-template-columns: 1fr; }
  .bit-vuelo { grid-template-columns: 1fr auto 32px; }
  .bit-vuelo__fecha { grid-column: 1 / -1; padding-top: 0; }
  .bit-vuelo:has(.bit-vuelo__foto) { grid-template-columns: 56px 1fr auto 32px; }
  .bit-vuelo:has(.bit-vuelo__foto) .bit-vuelo__foto { width: 56px; height: 56px; grid-row: 1 / span 2; }
  .bit-vuelo:has(.bit-vuelo__foto) .bit-vuelo__fecha { grid-column: 2 / -1; }
  .pro-marco { padding: var(--s3); }
  .pro-marco__tag { left: var(--s3); }
  .pro-marco__ejemplo { right: var(--s3); }
  .spot__ficha div { grid-template-columns: 1fr; gap: 2px; }
  .mapa { height: 62vw; min-height: 300px; }
}

/* --- 48. TIANGUIS FPV --------------------------------------------------------
   /refacciones/ — la única sección que se permite sentirse tienda (README
   §8.20, DISENO.md §12). Piso de concreto real, papel picado, letreros
   pintados a mano por Daniel. Sigue siendo Patrōnus: Inter, el ritmo de 4
   pasos, y el dorado (--oro) SOLO en lo PRO. Los colores del papel picado
   viven únicamente dentro de .tianguis; ninguno sale de aquí.
   Todo lo de esta sección lleva prefijo tg- (tianguis) para no chocar con
   el resto del sistema. */

/* Etiqueta colgante del nav — en todas las páginas: "aquí se compra". */
.nav a.nav__con-etiqueta { position: relative; }
.nav-etiqueta {
  position: absolute; left: 50%; bottom: calc(100% - 2px);
  display: flex; flex-direction: column; align-items: center;
  transform: translateX(-50%) rotate(-7deg); transform-origin: 50% 0;
  pointer-events: none;
  animation: tg-etiqueta 5.5s ease-in-out infinite;
}
.nav-etiqueta i { display: block; width: 1px; height: 7px; background: rgba(29,29,31,0.35); }
.nav-etiqueta b {
  position: relative; display: block;
  font-size: 9.5px; font-weight: 700; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase;
  color: #1D1D1F; background: var(--oro);
  padding: 4px 7px 4px 10px; border-radius: 2px 6px 6px 2px; white-space: nowrap;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,0.3);
}
.nav-etiqueta b::before {
  content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: rgba(0,0,0,0.35);
}
@keyframes tg-etiqueta {
  0%, 100% { transform: translateX(-50%) rotate(-7deg); }
  50%      { transform: translateX(-50%) rotate(-4.5deg); }
}
.nav-mobile__etiqueta {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #1D1D1F; background: var(--oro); padding: 3px 8px; border-radius: 2px 6px 6px 2px;
  transform: rotate(-4deg);
}

/* La guía de cambio señala su pasillo del tianguis. */
.tg-guia-pasillo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); margin-top: var(--s3); }
.tg-guia-pasillo .label { width: 100%; }

/* El piso: una tira de ancho completo que solo se repite hacia abajo. */
.tianguis {
  --mx-turquesa: #2BC4CE; --mx-naranja: #FB9737; --mx-amarillo: #F5D547;
  --mx-verde: #5FBF6E;    --mx-morado: #B166D6;  --mx-papel: #FBF4E4;
  --piso: #17110D;        --puesto-ink: #241A10; --puesto-gris: #6B5C4B;
  /* Tokens del sitio, en clave de tianguis: lo que ya existe (migas,
     siguiente paso, aviso de afiliación) se lee sobre el piso sin tocarlo. */
  --ink: var(--mx-papel); --gray: rgba(251,244,228,0.72);
  --line: rgba(251,244,228,0.16); --fog: rgba(251,244,228,0.08);
  position: relative;
  color: var(--mx-papel);
  background-color: var(--piso);
  background-image:
    linear-gradient(rgba(23,17,13,0.28), rgba(23,17,13,0.42)),
    url('/assets/img/tianguis/piso.webp');
  background-repeat: no-repeat, repeat-y;
  background-size: cover, 100% auto;
  background-position: top, top;
}
.tianguis ::selection { background: var(--mx-amarillo); color: var(--puesto-ink); }
.tianguis :focus-visible { outline-color: var(--mx-amarillo); }
.tianguis img { height: auto; }

/* Papel picado real de Daniel, colgado arriba mientras caminas. */
.tg-banderines {
  position: sticky; top: var(--header-h); z-index: 20;
  display: flex; justify-content: center;
  pointer-events: none;
  transform-origin: 50% 0;
  transition: transform 0.6s var(--ease-out);
}
/* Al empezar a caminar se recogen a la mitad: siguen colgados arriba, pero
   ya no tapan el título del pasillo que pasa por debajo (con el header del
   sitio encima, a tamaño completo cubrían casi 250 px de pantalla). */
.tg-banderines.is-pegado { transform: scale(0.5); }
.tg-centinela { position: absolute; top: 48px; left: 0; width: 1px; height: 1px; pointer-events: none; }
.tg-banderines img {
  width: min(900px, 100%);
  transform-origin: 50% 0;
  animation: tg-mecer 6s ease-in-out infinite;
}
@keyframes tg-mecer { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }

/* Rótulos pintados a mano: escala única para todos (mural, títulos de
   pasillo, mapa, combo, "Aquí puro conocido"). Daniel (25 sept): "son
   rótulos, deben leerse como rótulos pintados". Dos opciones para elegir:
   grande (1.5×, la que va por defecto) y realmente grande (2×, con
   data-rotulos="enorme" en .tianguis). Cambiar de opción = cambiar el
   atributo en src/pages/tianguis.js. */
.tianguis { --tg-rotulo: 1.5; }
.tianguis[data-rotulos="enorme"] { --tg-rotulo: 2; }

/* La pared de la entrada: la foto de yeso sobre ladrillo que eligió Daniel,
   anclada arriba para que el mural quede sobre el tramo con más yeso; el
   ladrillo asoma abajo, como en una pared real. Sube por detrás de los
   banderines (que cuelgan de ella) y termina en un guardapolvo oscuro,
   donde empieza el piso del tianguis. */
.tianguis { --tg-banderines-h: calc(min(900px, 100vw) * 0.192); }
.tg-pared {
  position: relative;
  margin-top: calc(var(--tg-banderines-h) * -1);
  padding-top: var(--tg-banderines-h);
  padding-bottom: 14px;
  /* 85 % / arriba: el tramo derecho superior de la foto es el de más yeso.
     Acercada 1.6×: el título cae sobre el yeso y el rayo baja al ladrillo. */
  background: #E4E2DE url('/assets/img/tianguis/pared.webp') 85% top / max(160%, 1400px) auto no-repeat;
  --ink: #1D1D1F; --gray: #4E4B47;
}
.tg-pared::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: linear-gradient(#3A342D, #1B1814);
  box-shadow: 0 -1px 0 rgba(255,255,255,0.35), 0 10px 24px rgba(0,0,0,0.45);
}
.tg-pared .crumbs { color: #4E4B47; padding-top: var(--s2); }
.tg-pared .crumbs a:hover { color: #1D1D1F; }
.tg-banderines img { filter: drop-shadow(0 6px 8px rgba(0,0,0,0.22)); }
.tg-mural { padding: var(--s4) var(--gutter) var(--s6); }
.tg-mural__titulo { text-align: center; }
/* Pintado sobre el muro, no pegado: multiply deja que el yeso se asome a
   través de la pintura. Sin sombra: la pintura no proyecta sombra. */
.tg-mural__titulo img {
  width: min(calc(540px * var(--tg-rotulo)), 96%); margin-inline: auto;
  mix-blend-mode: multiply;
}

/* Leyendas: la voz del tianguis, centradas y con peso. */
.tg-leyenda {
  font-size: var(--t-body); font-weight: 600; line-height: 1.5;
  color: var(--mx-papel); max-width: 46ch; margin: var(--s3) auto 0;
  text-align: center; text-wrap: pretty;
}
.tg-leyenda--entrada { margin-top: var(--s6); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); max-width: 48ch; }
.tg-eyebrow {
  display: block; text-align: center;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--oro);
}
.tg-eyebrow--papel { color: var(--mx-papel); }
.tg-portada { max-width: 640px; margin: var(--s4) auto 0; }
.tg-portada img { width: 100%; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.55)); }

/* Títulos pintados a mano: la imagen manda; el texto real va en .sr-only. */
.tg-titulo { display: flex; justify-content: center; align-items: center; gap: var(--s2); margin-top: var(--s1); }
.tg-titulo img { width: min(calc(var(--w, 360px) * var(--tg-rotulo)), 94%); filter: drop-shadow(0 5px 8px rgba(0,0,0,0.3)); }
.tg-titulo--doble img { width: min(calc(var(--w) * var(--tg-rotulo)), 44%); }
.tg-titulo__barra { font-size: calc(1.5rem * var(--tg-rotulo)); font-weight: 700; color: var(--mx-amarillo); }
.tg-titulo--mapa img { width: min(calc(520px * var(--tg-rotulo)), 96%); }
.tg-h2 {
  text-align: center; margin-top: var(--s1);
  font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.02em; color: var(--mx-papel);
}

/* Cifras sobre el piso: números enormes y finos, uno dorado (el que importa).
   Lleva los micro-gestos del sitio: aquí el humo se lee como el polvo del
   mercado. */
.tg-cifras { padding-block: var(--s6); }
.tg-cifras[data-gesto-host] > .wrap { position: relative; z-index: 1; }
.tg-cifras__fila {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4);
  padding-block: var(--s5); border-block: 1px solid var(--line);
}
.tg-cifra { display: grid; gap: var(--s2); justify-items: center; text-align: center; }
.tg-cifra__num {
  font-size: clamp(3.25rem, 9vw, 6.5rem); font-weight: 200; line-height: 0.9;
  letter-spacing: -0.05em; color: var(--mx-papel);
}
.tg-cifra--oro .tg-cifra__num { color: var(--oro); }
.tg-cifra__txt { font-size: var(--t-small); color: var(--gray); max-width: 28ch; line-height: 1.45; }

/* Mapa del tianguis */
.tg-mapa { padding-top: var(--s4); }
.tg-mapa__caja {
  max-width: 1000px; margin-inline: auto;
  padding: var(--s5) clamp(var(--s2), 3vw, var(--s4)) var(--s4);
  background: rgba(0,0,0,0.28); border: 1px solid var(--line); border-radius: 22px;
}
.tg-letrero-mapa {
  display: block; width: min(340px, 78%); margin: var(--s3) auto calc(var(--s4) * -1);
  position: relative; z-index: 2;
  transform-origin: 50% 0; transform: rotate(-4deg);
  filter: drop-shadow(0 14px 20px rgba(0,0,0,0.5));
  animation: tg-viento 6s ease-in-out infinite;
}

/* El tablero: el directorio de un mercado fino. Negro laqueado, doble
   filete dorado, letras blancas; ni un color más (decisión de Daniel, 25
   sept). Cada botón es una medida y lleva directo a su bloque. Al pasar el
   cursor, un solo gesto: el botón se levanta y su orilla se enciende en
   blanco. Con reduced-motion no se mueve, solo se enciende. */
.tg-tablero {
  list-style: none; position: relative;
  padding: var(--s2) clamp(var(--s2), 3vw, var(--s4));
  background: #0B0A09;
  border: 1px solid rgba(201,164,76,0.5); border-radius: 14px;
  box-shadow: inset 0 0 0 5px #0B0A09, inset 0 0 0 6px rgba(201,164,76,0.18), 0 28px 50px -30px rgba(0,0,0,0.85);
}
.tg-tablero__fila {
  display: grid; grid-template-columns: minmax(200px, 1fr) auto; align-items: center; gap: var(--s2) var(--s4);
  padding-block: var(--s3);
  scroll-margin-top: 120px;
}
.tg-tablero__fila + .tg-tablero__fila { border-top: 1px solid rgba(255,255,255,0.1); }
.tg-tablero__pasillo { display: flex; align-items: baseline; gap: var(--s2); text-decoration: none; color: #FFFFFF; }
.tg-tablero__num { font-size: 1.75rem; font-weight: 200; letter-spacing: -0.04em; line-height: 1; color: rgba(255,255,255,0.5); min-width: 2ch; transition: color 0.3s var(--ease); }
.tg-tablero__nombre { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.tg-tablero__pasillo:hover .tg-tablero__num { color: #FFFFFF; }
.tg-tablero__aqui { display: none; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oro); }
.tg-tablero__fila.is-aqui .tg-tablero__aqui { display: inline; }
.tg-tablero__fila.is-aqui .tg-tablero__num { color: var(--oro); }
.tg-tablero__medidas { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s1); }
.tg-tablero__boton {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 9px 16px; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 500; color: #FFFFFF; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.26); background: rgba(255,255,255,0.02);
  transition: transform 0.35s var(--ease-out), border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.35s var(--ease-out);
}
.tg-tablero__boton em { font-style: normal; font-size: 0.6875rem; color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; }
.tg-tablero__boton:hover, .tg-tablero__boton:focus-visible {
  transform: translateY(-2px);
  border-color: #FFFFFF; background: rgba(255,255,255,0.07);
  box-shadow: 0 10px 22px -12px rgba(0,0,0,0.9);
}
.tg-tablero__boton:focus-visible { outline: 1px solid #FFFFFF; outline-offset: 3px; }
.tg-tablero__boton:active { transform: translateY(0); }
.tg-tablero__boton--pro { color: var(--oro); border-color: rgba(201,164,76,0.55); letter-spacing: 0.12em; font-weight: 600; }
.tg-tablero__boton--pro:hover, .tg-tablero__boton--pro:focus-visible { border-color: var(--oro); background: rgba(201,164,76,0.08); }
.tg-mapa__pie { margin-top: var(--s3); text-align: center; font-size: var(--t-small); }
.tg-mapa__pie a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--mx-papel); border-bottom: 1px solid rgba(251,244,228,0.3); }
.tg-mapa__pie a:hover { border-color: var(--mx-papel); }

/* Color de cada bloque (borde de sus puestos y su número): papel picado. */
.tg-c-amarillo { --bc: var(--mx-amarillo); } .tg-c-turquesa { --bc: var(--mx-turquesa); }
.tg-c-naranja { --bc: var(--mx-naranja); }   .tg-c-verde { --bc: var(--mx-verde); }
.tg-c-morado { --bc: var(--mx-morado); }

/* Mesa del combo especial: no es pasillo ni es PRO. Vidrio esmerilado con
   acento turquesa (agua), sin textura literal. */
.tg-combo { padding-top: var(--s6); }
.tg-combo__mesa {
  position: relative; overflow: hidden; text-align: center;
  padding: var(--s5) clamp(var(--s2), 3vw, var(--s5));
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(43,196,206,0.12), rgba(43,196,206,0.03) 55%, rgba(43,196,206,0.07));
  border: 1px solid rgba(43,196,206,0.4);
  box-shadow: 0 0 0 1px rgba(43,196,206,0.1), inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 48px -26px rgba(0,0,0,0.65);
  --bc: rgba(43,196,206,0.8);
}
.tg-combo__mesa::before {
  content: ""; position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 240px; height: 150px; pointer-events: none;
  background: radial-gradient(ellipse, rgba(43,196,206,0.28), transparent 70%);
}
.tg-combo__eyebrow {
  position: relative; display: block;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mx-turquesa);
}
.tg-titulo--combo { position: relative; }
.tg-bloque { scroll-margin-top: 80px; }
.tg-combo__sub { position: relative; font-size: var(--t-small); color: rgba(251,244,228,0.78); max-width: 50ch; margin: var(--s2) auto 0; }
.tg-combo .tg-grid { position: relative; margin-top: var(--s4); text-align: left; }
.tg-combo__nota {
  position: relative; display: inline-block; margin-top: var(--s4);
  font-size: var(--t-micro); color: rgba(251,244,228,0.7);
  padding: var(--s1) var(--s3); border-radius: 999px;
  background: rgba(43,196,206,0.08); border: 1px solid rgba(43,196,206,0.25);
}
.tg-combo__nota b { color: var(--mx-turquesa); font-weight: 600; }

/* Pasillo */
.tg-pasillo { padding-top: calc(var(--s6) + var(--s4)); }
/* Anclas del mapa: el html ya reserva el header (scroll-padding); esto suma
   lo que ocupan los banderines recogidos, para que el título aterrice visible. */
.tg-pasillo, .tg-trastienda, .tg-combo, .tg-mapa { scroll-margin-top: 80px; }
.tg-pasillo__pila { position: relative; max-width: 520px; margin: var(--s4) auto 0; }
.tg-pasillo__pila-img { width: 100%; filter: drop-shadow(0 24px 30px rgba(0,0,0,0.5)); }

/* Cartulinas colgadas: el viento las mueve como pieza rígida (rotación 2D).
   Nunca 3D: deforma las letras (Daniel lo rechazó el 23 sept). Pueden
   empalmarse sobre la imagen: es una cartulina puesta, no un elemento de
   la retícula. */
.tg-letrero {
  position: absolute; z-index: 2; top: -10px; width: min(200px, 34%);
  transform-origin: 50% 0;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,0.5));
}
.tg-letrero--izq { left: 0; transform: rotate(5deg); animation: tg-viento-b 5.1s ease-in-out infinite; }
.tg-letrero--der { right: 0; transform: rotate(-6deg); animation: tg-viento-c 4.8s ease-in-out infinite; }
.tg-quieto { animation-play-state: paused !important; }
@keyframes tg-viento   { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(-2.3deg); } }
@keyframes tg-viento-b { 0%, 100% { transform: rotate(5deg); }  50% { transform: rotate(6.6deg); } }
@keyframes tg-viento-c { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(-4.3deg); } }

/* Bloque por tamaño */
.tg-bloque { margin-top: var(--s6); }
.tg-bloque__cab {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2);
  padding-bottom: var(--s2); margin-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.tg-bloque__num {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: 0.75rem; font-weight: 700; color: var(--puesto-ink); background: var(--bc);
}
.tg-bloque__nombre { font-size: var(--t-h4); font-weight: 600; color: var(--mx-papel); letter-spacing: -0.01em; }
.tg-bloque__meta { margin-left: auto; font-size: var(--t-micro); color: var(--gray); }
.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: var(--s2); }

/* Puesto: una tarjeta cálida, como iluminada, sobre el piso oscuro. El
   borde de arriba es el color de su bloque. Sin precio a propósito: el
   lector lo ve en la tienda, con sus ojos (decisión de Daniel, 11 sept). */
.tg-puesto {
  --ink: var(--puesto-ink); --gray: var(--puesto-gris); --line: rgba(36,26,16,0.14);
  position: relative; display: flex; flex-direction: column;
  padding: var(--s2); border-radius: 12px;
  background: var(--mx-papel); color: var(--puesto-ink);
  border-top: 3px solid var(--bc, var(--mx-amarillo));
  box-shadow: 0 10px 22px -12px rgba(0,0,0,0.5);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.tg-puesto:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(0,0,0,0.6); }
.tg-puesto__foto { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #FFFFFF; }
.tg-puesto__foto img, .tg-puesto__foto svg {
  position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain;
  transition: transform 0.6s var(--ease);
}
.tg-puesto:hover .tg-puesto__foto img { transform: scale(1.04); }
.tg-puesto__eyebrow {
  margin-top: var(--s2);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--puesto-gris); line-height: 1.35;
}
.tg-puesto__nombre { margin-top: 4px; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--puesto-ink); text-wrap: pretty; }
.tg-puesto__nota { margin-top: 4px; font-size: var(--t-micro); line-height: 1.45; color: var(--puesto-gris); }
.tg-puesto__pie { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); margin-top: auto; padding-top: var(--s2); }
.tg-puesto__otras { font-size: 0.75rem; color: var(--puesto-gris); }
.tg-puesto__otras a { color: var(--puesto-ink); text-decoration: none; border-bottom: 1px solid rgba(36,26,16,0.28); }
.tg-puesto__otras a:hover { border-color: var(--puesto-ink); }
.tg-puesto__guia { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; color: var(--puesto-gris); text-decoration: none; }
.tg-puesto__guia:hover { color: var(--puesto-ink); }
.tg-puesto__guia svg { transition: transform 0.3s var(--ease); }
.tg-puesto__guia:hover svg { transform: translateX(3px); }
.tg-puesto__pregon {
  position: absolute; z-index: 2; top: -10px; right: 10px;
  font-size: 0.6875rem; font-weight: 700; color: var(--puesto-ink);
  background: var(--mx-amarillo); padding: 3px 9px; border-radius: 6px;
  transform: rotate(3deg); box-shadow: 0 3px 6px rgba(0,0,0,0.35);
}

/* Botón de tienda. AliExpress conserva su color (excepción de DISENO.md §9). */
.tg-tienda {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; text-decoration: none;
  color: var(--puesto-ink); background: transparent; border: 1.5px solid var(--puesto-ink);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.15s var(--ease);
}
.tg-tienda:hover { background: var(--puesto-ink); color: var(--mx-papel); }
.tg-tienda:active { transform: scale(0.97); }
.tg-tienda--ali { background: #FFFFFF; color: #1D1D1F; border-color: #E62E04; }
.tg-tienda--ali:hover { background: #FFF7F5; color: #1D1D1F; border-color: #C92600; }
.tg-tienda .btn-logo { height: 14px; }
.tg-pendiente {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; color: var(--puesto-gris);
  border: 1.5px dashed rgba(36,26,16,0.3);
}
.tg-pendiente::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mx-naranja); }

/* Rincón PRO de cada pasillo: "Aquí puro conocido" — los favoritos de
   Patrōnus, en cajas CERRADAS. Daniel (25 sept): el borroso dejaba ver
   demasiado; "no quiero que se sepa qué hay dentro de cada box". Sin PRO se
   ve la caja (negra, listón dorado), su número y su leyenda; nada más. Con
   PRO la caja se abre: foto, nombre, por qué y link. El dorado es --oro,
   como todo lo que se paga en el sitio. */
.tg-vip {
  position: relative; overflow: hidden; text-align: center;
  margin-top: var(--s6); padding: var(--s5) clamp(var(--s2), 4vw, var(--s5));
  border-radius: 20px;
  background-color: rgba(0,0,0,0.42);
  background-image: linear-gradient(rgba(0,0,0,0.62), rgba(0,0,0,0.8)), var(--vip-bg, none);
  background-size: cover; background-position: center;
  border: 1px solid rgba(201,164,76,0.6);
  box-shadow: 0 0 0 1px rgba(201,164,76,0.14), inset 0 1px 0 rgba(255,255,255,0.05), 0 20px 40px -22px rgba(0,0,0,0.75);
  scroll-margin-top: 80px;
}
.tg-vip::before {
  content: ""; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; pointer-events: none;
  background: radial-gradient(circle, rgba(201,164,76,0.4) 0%, transparent 70%);
}
.tg-vip > * { position: relative; }
.tg-vip__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro); }
.tg-vip__titulo img { width: min(calc(220px * var(--tg-rotulo)), 70%); margin: var(--s1) auto 0; filter: drop-shadow(0 4px 7px rgba(0,0,0,0.3)); }
.tg-vip__sub { max-width: 44ch; margin: var(--s2) auto 0; font-size: var(--t-small); color: rgba(251,244,228,0.8); }
.tg-vip__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 240px)); justify-content: center;
  gap: var(--s4) var(--s3); margin-top: var(--s5); text-align: left;
}

/* La caja */
.tg-caja { position: relative; display: flex; flex-direction: column; gap: var(--s1); }
.tg-caja__tapa {
  position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,0.07), transparent 60%),
    linear-gradient(160deg, #1A1714, #0B0A09);
  border: 1px solid rgba(201,164,76,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 30px -18px rgba(0,0,0,0.9);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
/* Listón dorado en cruz, como caja de regalo sellada. */
.tg-caja__tapa::before, .tg-caja__tapa::after {
  content: ""; position: absolute; background: linear-gradient(90deg, #9C7B30, #D9BC70 50%, #9C7B30);
  opacity: 0.85;
}
.tg-caja__tapa::before { left: calc(50% - 5px); top: 0; bottom: 0; width: 10px; }
.tg-caja__tapa::after { top: calc(50% - 5px); left: 0; right: 0; height: 10px; background: linear-gradient(180deg, #9C7B30, #D9BC70 50%, #9C7B30); }
.tg-caja:hover .tg-caja__tapa { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 36px -18px rgba(0,0,0,0.95); }
.tg-caja__num { margin-top: var(--s1); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oro); }
.tg-caja__leyenda { font-size: var(--t-small); font-weight: 500; line-height: 1.4; color: var(--mx-papel); text-wrap: pretty; }
.tg-vip__badge {
  position: absolute; z-index: 2; top: -10px; right: 10px;
  font-size: 0.6875rem; font-weight: 700; color: #1D1D1F;
  background: var(--oro); padding: 3px 9px; border-radius: 6px;
  transform: rotate(3deg); box-shadow: 0 3px 6px rgba(0,0,0,0.35);
}
/* Adentro de la caja (solo con PRO) */
.tg-vip__capa { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); margin-top: var(--s1); }
.tg-vip__foto { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #FFFFFF; }
.tg-vip__foto img, .tg-vip__foto svg { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.tg-vip__nombre { font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: var(--mx-papel); }
.tg-vip__porque { font-size: 0.8125rem; line-height: 1.45; color: rgba(251,244,228,0.72); }
.tg-vip__capa .tg-tienda:not(.tg-tienda--ali) { color: var(--mx-papel); border-color: rgba(251,244,228,0.5); }
.tg-vip__capa .tg-pendiente { color: rgba(251,244,228,0.6); border-color: rgba(251,244,228,0.3); }
body:not(.is-pro) .tg-vip__capa { display: none; }
body.is-pro .tg-caja__tapa { display: none; }

.tg-vip__oferta { display: flex; flex-direction: column; align-items: center; gap: var(--s2); margin-top: var(--s5); }
.tg-vip__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px;
  font-size: var(--t-small); font-weight: 600; color: #1D1D1F; text-decoration: none;
  background: linear-gradient(155deg, #E3C77E, var(--oro) 55%, #AE8B38);
  box-shadow: 0 10px 22px -10px rgba(201,164,76,0.6), inset 0 1px 0 rgba(255,255,255,0.45);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.tg-vip__cta:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(201,164,76,0.7), inset 0 1px 0 rgba(255,255,255,0.45); }
.tg-vip__cta:active { transform: scale(0.98); }
.tg-vip__beneficios { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s2); font-size: 0.75rem; font-weight: 500; color: rgba(251,244,228,0.7); }
.tg-vip__beneficios li { display: inline-flex; align-items: center; gap: 6px; }
.tg-vip__beneficios li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--oro); }
.tg-vip__nota { max-width: 48ch; font-size: 0.75rem; line-height: 1.5; color: rgba(251,244,228,0.6); }
.tg-vip__eres { display: none; margin-top: var(--s4); font-size: var(--t-small); font-weight: 600; color: var(--oro); }
body.is-pro .tg-vip__oferta { display: none; }
body.is-pro .tg-vip__eres { display: block; }

/* Fin de pasillo: siempre puedes volver. */
.tg-fin { margin-top: var(--s5); }
.tg-fin__raya { display: flex; align-items: center; gap: var(--s2); }
.tg-fin__raya::before, .tg-fin__raya::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tg-fin__raya span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(251,244,228,0.5); }
.tg-fin__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s4); margin-top: var(--s2); font-size: var(--t-small); }
.tg-fin__nav a { display: inline-flex; align-items: center; gap: 6px; color: var(--mx-papel); text-decoration: none; border-bottom: 1px solid rgba(251,244,228,0.25); }
.tg-fin__nav a:hover { border-color: var(--mx-papel); }

/* La trastienda: carteles de papel pegados con cinta sobre el concreto. */
.tg-trastienda { padding-top: calc(var(--s6) + var(--s4)); }
.tg-cartel {
  --ink: var(--puesto-ink); --gray: var(--puesto-gris); --line: rgba(36,26,16,0.16);
  position: relative; margin-top: var(--s5);
  padding: var(--s4) clamp(var(--s2), 3vw, var(--s4)) var(--s3);
  background: var(--mx-papel); color: var(--puesto-ink);
  border-radius: 12px; box-shadow: 0 16px 32px -18px rgba(0,0,0,0.6);
}
.tg-cartel::before {
  content: ""; position: absolute; top: -10px; left: 50%; width: 86px; height: 22px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(245,213,71,0.6); box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.tg-cartel table.specs a { color: var(--puesto-ink); text-decoration: none; border-bottom: 1px solid rgba(36,26,16,0.25); }
.tg-cartel table.specs a:hover { border-color: var(--puesto-ink); }
.tg-cartel__pie { margin-top: var(--s3); font-size: var(--t-micro); color: var(--puesto-gris); max-width: 70ch; }
.tg-trastienda__par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: start; margin-top: var(--s5); }
.tg-cartel--lista { margin-top: 0; }
.tg-cartel__titulo { font-size: var(--t-h4); font-weight: 600; color: var(--puesto-ink); }
.tg-cartel__intro { margin-top: var(--s1); font-size: var(--t-small); color: var(--puesto-gris); }
.tg-cartel .kit { margin-top: var(--s3); }
.tg-cartel .kit a { color: var(--puesto-ink); border-bottom-color: rgba(36,26,16,0.25); }
.tg-guias__titulo { font-size: var(--t-h4); font-weight: 600; color: var(--mx-papel); }
.tg-guias__intro { margin-top: var(--s1); font-size: var(--t-small); color: var(--gray); }
.tg-guias__lista { list-style: none; margin-top: var(--s3); border-top: 1px solid var(--line); }
.tg-guias__lista a {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: baseline; gap: var(--s2);
  padding-block: 12px; border-bottom: 1px solid var(--line); text-decoration: none;
  transition: color 0.25s var(--ease);
}
.tg-guias__num { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; color: rgba(251,244,228,0.45); transition: color 0.25s var(--ease); }
.tg-guias__nombre { font-size: var(--t-small); font-weight: 500; }
.tg-guias__cada { font-size: 0.75rem; color: var(--gray); text-align: right; }
.tg-guias__lista a:hover .tg-guias__num { color: var(--mx-amarillo); }

/* Salida: lo de siempre (aviso, siguiente paso, sigue leyendo), sobre el piso. */
.tg-salida { padding-top: var(--s4); }
.tg-salida .section { padding-block: var(--s5); }
.tianguis .disclaimer { color: rgba(251,244,228,0.6); border-color: var(--line); }
.tianguis .disclaimer a { color: var(--mx-papel); }
.tianguis .next-step:hover { border-color: var(--mx-papel); }
.tianguis .card { border-top-color: var(--line); }
.tianguis .card:hover { border-top-color: var(--mx-papel); }

/* Términos del glosario sobre el piso: mismo trato que en los bloques negros. */
.tianguis .termino { border-bottom-color: rgba(251,244,228,0.5); }
.tianguis .termino:hover, .tianguis .termino[aria-expanded="true"] { background: rgba(255,255,255,0.12); border-bottom-color: var(--mx-papel); }
.tianguis .termino__pop { color: #1D1D1F; background: #F5F5F7; text-align: left; }
.tianguis .termino__pop a { color: #6E6E73; border-bottom-color: #D2D2D7; }

@media (max-width: 767px) {
  .tg-cifras__fila { grid-template-columns: 1fr; gap: var(--s4); }
  .tg-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .tg-puesto { padding: 12px; }
  .tg-puesto__nombre { font-size: 0.875rem; }
  .tg-tienda { padding: 7px 11px; font-size: 0.75rem; }
  .tg-bloque__meta { margin-left: 0; width: 100%; padding-left: calc(24px + var(--s1)); }
  .tg-trastienda__par { grid-template-columns: 1fr; }
  .tg-vip__grid { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .tg-tablero__fila { grid-template-columns: 1fr; }
  .tg-tablero__medidas { justify-content: flex-start; }
  .tg-letrero { width: min(150px, 36%); top: -6px; }
  .tg-pasillo, .tg-trastienda, .tg-combo, .tg-mapa, .tg-bloque, .tg-vip { scroll-margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-etiqueta, .tg-banderines img, .tg-letrero, .tg-letrero-mapa { animation: none !important; }
  .tg-tablero__boton:hover, .tg-tablero__boton:focus-visible, .tg-caja:hover .tg-caja__tapa { transform: none; }
  .tg-banderines { transition: none; }
}

/* --- 24. IMPRESIÓN ------------------------------------------------------- */
@media print {
  .header, .footer, .next-step, .hero__layers, .marquee { display: none; }
  body { font-size: 11pt; }
  .prose a { border: 0; text-decoration: underline; }

  /* PDF de la bitácora (PRO): al imprimir, solo la vista de impresión. */
  body.is-printing-bitacora main > *:not(.bit-print) { display: none !important; }
  body.is-printing-bitacora .bit-print { display: block; color: #1D1D1F; }
  .bit-print__head { display: flex; align-items: center; gap: 24pt; padding-bottom: 12pt; border-bottom: 1pt solid #C9A44C; margin-bottom: 18pt; }
  .bit-print__head img { height: 28pt; width: auto; }
  .bit-print__head h1 { font-size: 20pt; margin-top: 2pt; }
  .bit-print table.specs { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .bit-print table.specs th, .bit-print table.specs td { text-align: left; padding: 5pt 6pt; border-bottom: 0.5pt solid #D2D2D7; vertical-align: top; }
  .bit-print table.specs th { font-size: 8pt; text-transform: uppercase; letter-spacing: 0.1em; color: #6E6E73; }
  .bit-print__fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8pt; margin-top: 18pt; }
  .bit-print__fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .bit-print__fotos figcaption { font-size: 7.5pt; color: #6E6E73; margin-top: 3pt; }
  .bit-print__pie { margin-top: 18pt; padding-top: 8pt; border-top: 0.5pt solid #D2D2D7; font-size: 8pt; color: #6E6E73; }
}