/* ==========================================================================
   SOMA 2027 — hoja de estilos principal
   --------------------------------------------------------------------------
   Índice:
     1. Tokens            color, tipografía, espacio, radios, movimiento
     2. Base              reset, tipografía base, enlaces, foco
     3. Utilidades        .wrap, .sr-only, .skip, .dark, cabecera de sección
     4. Componentes       .btn, .btn-icon, .link-arrow, .card
     5. Secciones         cabecera, hero, intro, qué, tú decides, sectores,
                          a qué vienes, sede, banda CTA, pie, páginas, showroom
     6. Animaciones       aparición al hacer scroll, hover, reduced motion
     7. Responsive        ≤1199 tablet · ≤767 móvil

   Regla de oro: aquí no se escriben tamaños, colores ni espaciados a mano.
   Todo sale de los tokens del bloque 1. Si falta un valor, se añade un token.
   Los tokens de tipografía y de espacio se llaman por su tamaño en escritorio
   (--fs-24 son 24 px, --sp-32 son 32 px) y cambian de valor en cada breakpoint.
   ========================================================================== */

/* ══════════════════════════ 1. TOKENS ══════════════════════════

   Tres capas, de abajo arriba:

     1. PRIMITIVAS   el valor a secas: --fs-24, --sp-32, --ink
     2. ROLES        para qué sirve: --t-title-1, --rhythm-section, --dur-2
     3. COMPONENTES  botón, tarjeta, carrusel: eligen rol, nunca valor

   Regla: si un componente necesita un número que no existe, se añade aquí.
   Nunca se escribe un tamaño, un color ni un espaciado a mano en el resto
   de la hoja.

   La tipografía va en pares, como en el sistema de Apple: cada tamaño lleva
   su interlineado y su tracking. Cuanto más grande la letra, más se cierra
   la línea y más se aprieta el espaciado; cuanto más pequeña, más se abre,
   hasta llegar a 0 en el texto de lectura seguida.
   ========================================================================== */

:root{
  /* — Color — */
  --ink:#00001F;                     /* azul casi negro: texto y fondos oscuros */
  --deep:#000316;                    /* fondo del pie y de la sede */
  --lime:#B5FF1F;                    /* verde de marca */
  --lime-hover:#C6FF57;              /* verde aclarado: hover de botones lima */
  --paper:#FFFFFF;
  --paper-2:#F1F2F4;                 /* relleno suave: huecos de foto y estados vacíos */
  --ink-hover:#0A0A3A;               /* azul aclarado: hover de botones oscuros */
  --line:rgba(0,0,31,.15);           /* filetes sobre claro */
  --line-dark:rgba(255,255,255,.22); /* filetes sobre oscuro */
  --ink-70:rgba(0,0,31,.72);         /* texto secundario sobre claro */
  --ink-55:rgba(0,0,31,.55);         /* etiquetas y microtexto */
  --white-88:rgba(255,255,255,.88);  /* texto secundario sobre oscuro */
  --white-60:rgba(255,255,255,.60);  /* etiquetas sobre oscuro */

  /* — Tipografía · familia — */
  --f:'Inter','Helvetica Neue',Arial,system-ui,sans-serif;
  --disp:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;

  /* — Tipografía · escala de Atlassian —
     Los tokens del Atlassian Design System: heading.xxlarge 32/36 · xlarge
     28/32 · large 24/28 · medium 20/24 · small 16/20 · body.large 16/24 ·
     body 14/20 · body.small 12/16. Llevados al lienzo de 1920: en un portátil
     de 1440 el lienzo va al 75 %, así que el cuerpo de 21 se ve a 15,75 ≈ 16
     px reales, el tamaño de lectura larga de Atlassian.
     caption 16 · footnote 16 · subhead 18 · callout 19 · body 21
     body large 24 · headline 24 · title-3 28 · title-2 32 · title-1 40
     title xl 64 · large title 48 · display 88 (cifras Impact) */
  --type-display:88px;
  --type-lockup:68px;
  --type-title-xl:64px;
  --type-large-title:48px;
  --type-title-1:40px;
  --type-title-2:32px;
  --type-title-3:28px;
  --type-headline:24px;
  --type-body-lg:24px;
  --type-body:21px;
  --type-callout:19px;
  --type-subhead:18px;
  --type-footnote:16px;
  --type-caption:16px;

  /* Aliases: los nombres antiguos apuntan a la escalera nueva */
  --fs-display:var(--type-display);
  --fs-70:var(--type-large-title);
  --fs-55:40px;
  --fs-48:var(--type-title-2);
  --fs-36:var(--type-title-3);
  --fs-28:var(--type-headline);
  --fs-24:var(--type-body);
  --fs-20:var(--type-callout);
  --fs-18:var(--type-subhead);
  --fs-13:var(--type-footnote);

  /* — Tipografía · interlineado (el par de cada tamaño, como en Atlassian) —
     Los valores son los de sus tokens: XXL 32/36, M 20/24, body 14/20,
     body.large 16/24. Cuanto más grande la letra, más se cierra la línea. */
  --lh-display:1;      /* cifras y rótulos */
  --lh-title:1.12;     /* titulares: XXL 32/36 */
  --lh-heading:1.2;    /* títulos de tarjeta: M 20/24 */
  --lh-lead:1.43;      /* entradillas: body 14/20 */
  --lh-body:1.5;       /* lectura seguida: body.large 16/24 */
  --lh-loose:1.6;      /* párrafos largos en móvil */
  --lh-ui:1;           /* botones, navegación, píldoras */

  /* — Tipografía · tracking —
     Un solo valor para toda la escala: −4 %. Es el cierre de la marca y se
     mantiene igual en titulares y en cuerpo; las versales siguen abiertas. */
  --ls-display:-.04em;
  --ls-xl:-.04em;
  --ls-lg:-.04em;
  --ls-md:-.04em;
  --ls-sm:-.04em;
  --ls-body:-.04em;
  --ls-caps:.06em;

  /* Alias con los nombres antiguos, para no romper nada */
  --ls:var(--ls-body);
  --ls-tight:var(--ls-md);
  --lh-tight:var(--lh-title);
  --lh-snug:var(--lh-heading);

  /* — Tipografía · roles —
     Lo que se usa al montar una pieza. Cada rol tiene su clase .t-* con
     tamaño, interlineado, tracking y peso ya emparejados. */
  --t-display:var(--type-display);
  --t-title-xl:var(--type-title-xl);
  --t-large-title:var(--type-large-title);
  --t-title-1:var(--type-title-1);
  --t-title-2:var(--type-title-2);
  --t-title-3:var(--type-title-3);
  --t-headline:var(--type-headline);
  --t-body-lg:var(--type-body-lg);
  --t-body:var(--type-body);
  --t-callout:var(--type-callout);
  --t-subhead:var(--type-subhead);
  --t-footnote:var(--type-footnote);
  --t-caption:var(--type-caption);

  /* — Espacio · escala de Atlassian (base 8 px) —
     Los tokens space.025 a space.1000 tal cual: 2 · 4 · 6 · 8 · 12 · 16 ·
     20 · 24 · 32 · 40 · 48 · 64 · 80. No hay valores fuera de la escala: si
     falta uno, se usa el escalón de al lado, nunca un número suelto. */
  --sp-2:2px;
  --sp-4:4px;
  --sp-6:6px;
  --sp-8:8px;
  --sp-12:12px;
  --sp-16:16px;
  --sp-20:20px;
  --sp-24:24px;
  --sp-32:32px;
  --sp-40:40px;
  --sp-48:48px;
  --sp-64:64px;
  --sp-80:80px;

  /* — Espacio · ritmo —
     Cuatro distancias con nombre, todas de la escala de Atlassian. Todo lo
   vertical del sitio sale de aquí:
       rhythm-section  aire arriba y abajo de una sección
       rhythm-block    entre bloques dentro de una sección
       rhythm-head     de la cabecera de sección a su contenido
       rhythm-stack    entre párrafos, títulos y datos */
  --rhythm-section:var(--sp-80);    /* space.1000 */
  --rhythm-block:var(--sp-64);      /* space.800 */
  --rhythm-head:var(--sp-40);       /* space.500 */
  --rhythm-stack:var(--sp-24);      /* space.300 */
  --sec-y:var(--rhythm-section);
  --head-gap:var(--rhythm-head);

  /* — Medida de lectura —
     Ninguna columna de texto pasa de aquí: es lo que hace legible un párrafo
     largo y lo que separa una web acabada de un prototipo. */
  --measure:60ch;
  --measure-wide:76ch;

  /* — Medidas de composición — */
  --wrap:1520px;
  --wrap-pad:var(--sp-32);   /* margen de escritorio de la rejilla de Atlassian */
  --hr:1px;

  /* — Radios — */
  --r-pill:100px;
  --r-card:25px;
  --r-md:10px;
  --r-sm:8px;

  /* — Iconos —
     Lucide: caja de 24 x 24 con trazo de 2. El tamaño se hereda del texto
     (em) salvo cuando el icono manda, que usa estos tres pasos. */
  --ico-stroke:2;
  --ico-16:16px;
  --ico-20:20px;
  --ico-24:24px;

  /* — Elevación — cuatro niveles, sin valores intermedios — */
  --shadow-1:0 2px 8px rgba(0,3,22,.06);
  --shadow-2:0 10px 30px rgba(0,0,31,.10);
  --shadow-3:0 16px 44px rgba(0,0,31,.18);
  --shadow-4:0 24px 56px -20px rgba(0,3,22,.45);
  --shadow-hd:var(--shadow-2);
  --shadow-hd-scrolled:var(--shadow-3);

  /* — Botones — */
  --btn-h:56px;
  --btn-px:28px;
  --btn-fs:20px;
  --btn-gap:12px;
  --btn-h-sm:40px;
  --btn-px-sm:24px;
  --btn-fs-sm:16px;
  --btn-h-xs:44px;

  /* Texto de formularios: 16 px como mínimo para que iOS no haga zoom */
  --fs-input:16px;

  /* — Movimiento —
     Cinco duraciones y cuatro curvas. El sitio entero usa estas: no hay
     transiciones con números sueltos. --e-out-expo arranca deprisa y frena
     largo: es la curva del revelado y del paralaje. */
  --dur-1:140ms;
  --dur-2:220ms;
  --dur-3:320ms;
  --dur-4:560ms;
  --dur-5:760ms;
  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-out-expo:cubic-bezier(.16,1,.3,1);
  --e-out-back:cubic-bezier(.34,1.28,.44,1);
  --e-in-out:cubic-bezier(.45,.05,.55,.95);
  --ease:var(--e-out);
  --t-fast:var(--dur-1);
  --t:var(--dur-2);
  --t-slow:var(--dur-5);

  /* — Runtime (nav.js) — */
  --z:1;
}

/* ══════════════════════════ 2. BASE ══════════════════════════ */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  background:var(--deep);
  /* El suavizado se añade tras cargar (html.is-smooth): si está desde el
     principio, el navegador anima también la posición restaurada al recargar
     y se ve el salto desde arriba. */

  scroll-padding-top:150px;   /* los anclajes no quedan bajo la cabecera fija */
}

body{
  zoom:var(--z);
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f);font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p{margin:0;font-weight:inherit}
button,input{font:inherit;letter-spacing:inherit;color:inherit}

/* Foco visible y coherente en todo el sitio */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-sm);
}
.dark a:focus-visible,.dark button:focus-visible,
.ft a:focus-visible,.ft button:focus-visible,.ft input:focus-visible{
  outline-color:var(--lime);
}

/* ══════════════════════════ 3. UTILIDADES ══════════════════════════ */

.wrap{
  width:var(--wrap);
  max-width:calc(100% - var(--wrap-pad) * 2);
  margin-inline:auto;
}

/* — Roles tipográficos (escala de Atlassian) —
   La forma corta de aplicar la tipografía del sistema: clase y nada más.
   Cada clase trae tamaño, interlineado, tracking y peso, así que no hay que
   recordar números al montar un bloque nuevo. */
.t-display{font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:800}
.t-large-title{font-size:var(--t-large-title);line-height:var(--lh-title);letter-spacing:var(--ls-xl);font-weight:700}
.t-title-1{font-size:var(--t-title-1);line-height:var(--lh-title);letter-spacing:var(--ls-lg);font-weight:700}
.t-title-2{font-size:var(--t-title-2);line-height:var(--lh-title);letter-spacing:var(--ls-md);font-weight:700}
.t-title-3{font-size:var(--t-title-3);line-height:var(--lh-heading);letter-spacing:var(--ls-md);font-weight:700}
.t-headline{font-size:var(--t-headline);line-height:var(--lh-heading);letter-spacing:var(--ls-sm);font-weight:700}
.t-lead{font-size:var(--t-body-lg);line-height:var(--lh-lead);letter-spacing:var(--ls-md);font-weight:500}
.t-body-lg{font-size:var(--t-body-lg);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-weight:400}
.t-body{font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-weight:400}
.t-callout{font-size:var(--t-callout);line-height:var(--lh-lead);letter-spacing:var(--ls-sm);font-weight:500}
.t-subhead{font-size:var(--t-subhead);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-weight:400;color:var(--ink-70)}
.t-footnote{font-size:var(--t-footnote);line-height:1.4;letter-spacing:var(--ls-body)}
.t-eyebrow{font-size:var(--t-footnote);line-height:1.4;letter-spacing:var(--ls-caps);text-transform:uppercase;font-weight:600;color:var(--ink-55)}
.t-caption{font-size:var(--t-caption);line-height:1.4;letter-spacing:0;font-weight:500}

/* — Iconos (Lucide, ISC) —
   Van inline: cada icono es un <svg class="ico"> con sus trazos dentro, sin
   fichero externo ni <use>. Así pinta igual con file://, en Safari y sin JS.
   Hereda el color del texto y el tamaño de la tipografía (1em), salvo que el
   contexto fije un paso (--ico-16/20/24). Trazo de 2 sobre la caja de 24. */
.ico{
  display:inline-block;flex:none;vertical-align:-.14em;
  width:1em;height:1em;overflow:visible;
  fill:none;stroke:currentColor;
  stroke-width:var(--ico-stroke);
  stroke-linecap:round;stroke-linejoin:round;
}

.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{position:absolute;left:-9999px;top:0;background:var(--lime);color:var(--ink);padding:var(--sp-12) var(--sp-16);z-index:100}
.skip:focus{left:var(--sp-12);top:var(--sp-12)}

.dark{background:var(--ink);color:#fff}
.dark .deck{color:rgba(255,255,255,.88)}

/* Cabecera de sección: título a la izquierda, entradilla a la derecha */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42ch);align-items:start;gap:var(--sp-64)}
.sec-head h2{font-size:var(--fs-70);font-weight:700;line-height:var(--lh-title);letter-spacing:var(--ls-xl);text-wrap:balance}
/* Entradilla de la derecha del título: va un paso por encima del cuerpo, como
   el lead de una sección. Los párrafos de dentro (tarjetas, listas) sí son
   cuerpo: 21. El orden es entradilla 24 → cuerpo 21, nunca al revés. */
.deck{font-size:var(--t-body-lg);font-weight:600;line-height:var(--lh-lead);letter-spacing:var(--ls-body);max-width:44ch}

/* ══════════════════════════ 4. COMPONENTES ══════════════════════════ */

/* — Botón —
   Una sola forma para todos: misma altura, radio, hueco al icono, tipografía
   y animación. Solo cambia el color de fondo.
   Uso: class="btn btn--lime"  ·  variantes: btn--white · btn--ink
                                 tamaños:   btn--sm (cabecera) · btn--xs (formulario) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-gap);
  height:var(--btn-h);padding:0 var(--btn-px);
  border:0;border-radius:var(--r-pill);
  font-family:inherit;font-size:var(--btn-fs);font-weight:700;line-height:1;
  letter-spacing:var(--ls);white-space:nowrap;text-align:center;
  cursor:pointer;
  transition:background-color var(--t) var(--ease),
             color var(--t) var(--ease),
             transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.btn svg{width:1em;height:1em;flex:none;transition:transform var(--t) var(--ease)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px rgba(255,255,255,.7)}

.btn--lime{background:var(--lime);color:var(--ink)}
.btn--lime:hover{background:var(--lime-hover)}
.btn--white{background:var(--paper);color:var(--ink)}
.btn--white:hover{background:#F1F1F1}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--ink-hover)}
/* Botón Programa de la cabecera: negro con texto lima */
.btn--prog{background:var(--ink);color:var(--lime)}
.btn--prog:hover{background:var(--ink-hover);color:var(--lime)}
/* Contorno: para fondos lima, donde un segundo botón relleno competiría con el
   primero. El borde va por dentro (box-shadow) para no cambiar la altura. */
.btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 3px var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 3px var(--ink)}

/* Tamaño pequeño: píldora de la cabecera. Mismo formato que el resto, más
   compacto: sin versales ni tracking distinto, solo escala. */
.btn--sm{
  height:var(--btn-h-sm);padding:0 var(--btn-px-sm);gap:var(--sp-8);
  font-size:var(--btn-fs-sm);
}
.btn--sm svg{display:none}

/* Tamaño mínimo: envío del formulario del pie */
.btn--xs{height:var(--btn-h-xs);padding:0 var(--sp-24);font-size:var(--fs-input);letter-spacing:0;text-transform:none}

/* — Botón de icono (flecha de las tarjetas) — */
.btn-icon{
  position:absolute;right:var(--sp-16);bottom:var(--sp-16);
  width:80px;height:80px;border-radius:var(--r-md);
  display:grid;place-items:center;
  background:var(--lime);color:var(--ink);
  transition:background-color var(--t) var(--ease),transform var(--t) var(--ease);
}
.btn-icon svg{width:24px;height:24px;transition:transform var(--t) var(--ease)}
.btn-icon:hover{background:var(--lime-hover)}

/* — Enlace con flecha (subrayado) — */
.link-arrow{
  display:inline-flex;align-items:center;gap:var(--sp-16);
  margin-top:var(--sp-48);padding-bottom:var(--sp-4);
  font-size:var(--fs-24);font-weight:700;letter-spacing:var(--ls-body);
  border-bottom:3px solid currentColor;
}
.link-arrow{transition:color var(--t) var(--ease)}
.link-arrow svg{width:.8em;height:.8em;flex:none;transition:transform var(--t) var(--ease)}
.link-arrow:hover svg{transform:translateX(6px)}

/* — Volver arriba —
   Burbuja que sale pegada del canto derecho: entra desde fuera de pantalla con
   la forma de gota, se estira mínimamente y acaba redonda. La muestra
   animations.js a partir de 600 px de scroll. */
.to-top{
  position:fixed;right:var(--sp-32);bottom:var(--sp-32);z-index:55;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink);color:var(--lime);
  box-shadow:0 12px 28px rgba(0,0,31,.26);
  transform-origin:100% 60%;
  visibility:hidden;opacity:0;pointer-events:none;
  /* Guardada fuera del canto y con la forma de la gota que se pega a él */
  transform:translateX(150%) scale(.82);
  border-radius:64% 18% 18% 64% / 56% 24% 24% 56%;
  /* Salida: deshace el camino de la entrada en 420 ms. El velo de opacidad
     arranca con retraso para que la gota se vea salir antes de apagarse, y
     visibility espera al final: mientras tanto la burbuja sigue ocupando su
     sitio y no hay salto. */
  transition:transform 420ms cubic-bezier(.45,.05,.55,.95),
             border-radius 420ms var(--ease),
             opacity 260ms var(--ease) 160ms,
             visibility 0s linear 420ms,
             background-color var(--t) var(--ease),color var(--t) var(--ease);
}
/* Entrada: se descuelga del borde con un rebote corto y la forma se redondea.
   La transición se escribe en el estado visible, así el navegador usa esta
   curva al entrar y la de arriba al salir: un solo gesto, simétrico. */
.to-top.is-on{
  visibility:visible;opacity:1;pointer-events:auto;
  transform:none;border-radius:50%;
  transition:transform 560ms cubic-bezier(.34,1.28,.44,1),
             border-radius 560ms cubic-bezier(.34,1.28,.44,1),
             opacity 300ms var(--ease),
             visibility 0s linear 0s,
             background-color var(--t) var(--ease),color var(--t) var(--ease);
}
.to-top:hover{background:var(--lime);color:var(--ink)}
.to-top svg{width:var(--ico-20);height:var(--ico-20);transition:none}

/* — Tarjeta — */
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);
  border-radius:var(--r-card);padding:var(--sp-20);
}
/* Rótulo de la tarjeta: el mismo tipo de letra que las temáticas («Pilates»),
   no Impact. La caja se ajusta a la palabra: ni ancho ni alto fijos. */
.card-label{
  position:absolute;top:19px;left:50%;transform:translateX(-50%);
  width:max-content;max-width:calc(100% - var(--sp-32));height:auto;
  padding:14px 30px;display:grid;place-items:center;
  background:var(--paper);border-radius:0 0 12px 12px;
  font-family:var(--f);font-weight:800;font-size:var(--fs-36);
  line-height:1;letter-spacing:-.02em;text-align:center;text-transform:uppercase;
}.card-img{width:100%;height:auto;object-fit:cover;border-radius:var(--r-md);aspect-ratio:710/430}
.card-body{position:relative;flex:0 0 auto;padding:var(--sp-24) 0 var(--sp-24) var(--sp-16)}
.card-body h3{font-size:var(--fs-36);font-weight:700;line-height:var(--lh-heading);letter-spacing:var(--ls-md)}
.card-body p{margin-top:var(--sp-24);max-width:575px;font-size:var(--t-body);font-weight:400;line-height:var(--lh-body)}
.card-wide .card-body{padding-right:110px}

/* ══════════════════════════ 5. SECCIONES ══════════════════════════ */

/* ——— CABECERA — píldora blanca (Figma: Header 10:4790 · 1862×79, radio 150) ——— */
.hd{position:fixed;z-index:60;top:32px;left:29px;right:29px;height:64px;border-radius:var(--r-pill);overflow:visible;background:var(--paper);border:1px solid rgba(0,0,31,.07);box-shadow:var(--shadow-hd);transition:box-shadow var(--t) var(--ease),height var(--dur-3) var(--e-out),top var(--dur-3) var(--e-out)}
.hd.is-scrolled{box-shadow:var(--shadow-hd-scrolled)}
/* En el Congreso la cabecera va de cristal sobre la foto, como en el diseño:
   velo blanco translúcido, texto blanco y el wordmark invertido. Al bajar,
   recupera la píldora blanca del resto del sitio para seguir siendo legible. */
.hd-in{height:100%;display:flex;align-items:center;padding:0 var(--wrap-pad);color:var(--ink)}
.hd-logo{flex:none;display:flex;align-items:center;justify-content:center;align-self:center;height:auto;line-height:0}
.logo-wm{display:block;width:68px;height:auto}
.hd-nav{margin-left:91px}
.hd-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:26px;height:26px;padding:0;background:none;border:0;cursor:pointer}
.hd-burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}

.nav-list{display:flex;align-items:center;gap:var(--sp-40)}
.nav-list a{position:relative;display:inline-block;font-size:var(--fs-20);font-weight:700;line-height:1;letter-spacing:var(--ls);white-space:nowrap}
/* subrayado que crece desde la izquierda */
.nav-list a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t) var(--ease);
}
.nav-list a:hover::after,.nav-list a:focus-visible::after,.nav-list a[aria-current="page"]::after{transform:scaleX(1)}

.hd-right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-16)}
/* La píldora de la cabecera va en versales */
.hd-right .btn{text-transform:uppercase}
/* Selector de idioma: desplegable con bandera y código (ES / EN / PT).
   Sustituye a la fila de banderas: mismo formato en escritorio y en móvil. */
.lang-pick{position:relative;flex:none}
.lang-pick summary{
  display:flex;align-items:center;gap:var(--sp-8);
  height:40px;padding:0 var(--sp-12);
  border:1px solid rgba(0,0,31,.16);border-radius:var(--r-pill);
  font-size:var(--fs-18);font-weight:700;line-height:1;letter-spacing:var(--ls);
  cursor:pointer;list-style:none;user-select:none;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease);
}
.lang-pick summary::-webkit-details-marker{display:none}
.lang-pick summary:hover,.lang-pick[open] summary{background:rgba(0,0,31,.05);border-color:rgba(0,0,31,.3)}
.lang-pick summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.lang-code{font-variant-numeric:tabular-nums}
.lang-chev{width:12px;height:12px;flex:none;color:var(--ink-55);stroke-width:2.4;transition:transform var(--t) var(--ease)}
.lang-pick[open] .lang-chev{transform:rotate(180deg)}
.lang-menu{
  position:absolute;right:0;top:calc(100% + var(--sp-8));z-index:10;
  min-width:208px;margin:0;padding:var(--sp-8);list-style:none;
  background:var(--paper);border:1px solid rgba(0,0,31,.09);border-radius:var(--r-md);
  box-shadow:0 18px 44px rgba(0,0,31,.18);
}
.lang-menu a{
  display:flex;align-items:center;gap:var(--sp-12);
  padding:var(--sp-12);border-radius:var(--r-sm);
  font-size:var(--fs-18);font-weight:600;line-height:1;white-space:nowrap;
}
.lang-menu a b{margin-left:auto;font-size:var(--fs-13);font-weight:700;letter-spacing:.04em;color:rgba(0,0,31,.45)}
.lang-menu a:hover,.lang-menu a[aria-current]{background:rgba(0,0,31,.05)}
.lang-menu .flag svg{width:20px;height:13px}
.flag{display:block;line-height:0;opacity:.85;transition:opacity var(--t) var(--ease)}
.flag.is-on,.flag:hover{opacity:1}
.flag svg{width:18px;height:12px;border-radius:1.5px}

/* ——— HERO — vídeo vertical de fondo que ocupa el primer viewport ———
   El vídeo (9:16) cubre todo el ancho con `object-fit: cover`: en pantallas
   anchas se recorta por arriba y por abajo, nunca queda banda a los lados. */
.hero{
  position:relative;overflow:hidden;height:calc(var(--vh,100vh) / var(--z));max-height:1400px;
  display:flex;justify-content:center;background:var(--deep);
}
.hero-media{position:absolute;inset:0;overflow:hidden;background:var(--deep) url('../img/hero-poster.jpg') center/cover no-repeat}
.hero-video{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:transparent}
.hero-video-main{object-fit:cover;object-position:center 50%}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,rgba(0,3,22,.58) 0%,rgba(0,3,22,.46) 32%,rgba(0,3,22,.50) 68%,rgba(0,3,22,.66) 100%),
  radial-gradient(64% 56% at 50% 52%,rgba(0,3,22,.42) 0%,rgba(0,3,22,.20) 76%,rgba(0,3,22,.28) 100%)}
.hero-inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;
  padding:0 var(--sp-24);text-shadow:0 2px 22px rgba(0,3,22,.55);
}
.hero-logo{width:470px}
.hero-dates{margin-top:var(--sp-48);font-size:var(--fs-36);font-weight:600;line-height:1.01;letter-spacing:var(--ls-md)}
.hero-soon{margin-top:var(--sp-48);font-size:var(--fs-48);font-weight:600;line-height:1.1;letter-spacing:var(--ls-lg);color:var(--lime)}
.hero-note{margin-top:var(--sp-8);font-size:var(--fs-24);font-weight:600;line-height:1.2;letter-spacing:var(--ls-body)}

/* ——— INTRO + CIFRAS ——— */
.intro{padding:var(--sec-y) 0}
.intro-lead{margin:0 auto var(--rhythm-block);max-width:var(--measure);text-align:center;font-size:var(--t-title-3);font-weight:600;line-height:var(--lh-lead);letter-spacing:var(--ls-md)}
.intro-lead .hl{background:linear-gradient(transparent 58%,var(--lime) 58%,var(--lime) 94%,transparent 94%);padding:0 3px}
.intro-title{margin-left:200px;max-width:var(--measure);font-weight:400;font-size:var(--t-body-lg);line-height:var(--lh-body)}
.intro-title b,.intro-text b{font-weight:700}
.intro-text{margin-left:200px;margin-top:var(--rhythm-stack);max-width:var(--measure-wide);font-weight:400;font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-70)}
.intro-text p + p{margin-top:var(--sp-16)}
.stats{margin-top:calc(var(--sp-80) + var(--sp-32));display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-64)}
.stats li{text-align:center}
.stats b{display:block;font-family:var(--disp);font-weight:400;font-size:var(--fs-display);line-height:calc(var(--fs-display) * .93);letter-spacing:-.03em}
.stats span{display:block;margin-top:var(--sp-24);font-size:var(--fs-24);font-weight:700;line-height:var(--lh-snug);letter-spacing:var(--ls-body)}

/* ——— ¿QUÉ ENCONTRARÁS? ——— */
.what{
  padding:var(--sec-y) 0;
  background:
    radial-gradient(1000px 900px at -4% 58%,rgba(163,255,60,.55) 0%,rgba(0,0,31,0) 62%),
    radial-gradient(800px 600px at 55% -10%,rgba(70,255,190,.10) 0%,rgba(0,0,31,0) 60%),
    linear-gradient(160deg,#070B1B 0%,#03040C 100%);
}
.what .sec-head h2{flex:none}
.what h2 > span{display:block}
.what h2 .line2{display:flex;align-items:baseline;gap:0}
.what h2 .line2 .wm{display:block;flex:none;width:2.214em;height:auto;margin-left:.25em;margin-right:.06em;margin-bottom:-.024em}
.cards{margin-top:var(--sp-80);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-20)}

/* ——— TÚ DECIDES ——— */
.decide{padding:var(--sec-y) 0}
.decide-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--sp-64);align-items:start;width:var(--wrap);max-width:calc(100% - var(--wrap-pad) * 2);margin-inline:auto}
.decide-title{position:relative;isolation:isolate;font-size:var(--type-large-title);font-weight:700;line-height:var(--lh-title);letter-spacing:var(--ls-xl);text-wrap:balance}
.decide-title .oval{position:absolute;left:-.2em;top:-.22em;width:5.2em;height:auto;z-index:-1;pointer-events:none}
.decide-title .line{display:block;white-space:nowrap}
.decide-copy p{font-size:var(--t-body);line-height:var(--lh-body);margin-bottom:var(--rhythm-stack);color:var(--ink-70)}
.decide-copy p b{font-weight:600}
.decide-copy .btn{margin-top:var(--sp-48)}

/* ——— DOS SECTORES · OCHO TEMÁTICAS ——— */
.sectors{position:relative;padding:var(--sec-y) 0;background:linear-gradient(115deg,#CBFF5C 0%,#B8FF26 42%,#A2F400 100%);isolation:isolate}
.sectors::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url('../img/sectors-edge.png') right center/190px 100% no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent calc(100% - 210px),rgba(0,0,0,.45) calc(100% - 110px),#000 100%);
  mask-image:linear-gradient(90deg,transparent calc(100% - 210px),rgba(0,0,0,.45) calc(100% - 110px),#000 100%);
}
.sectors .sec-head h2{flex:none}
.sector-grid{margin-top:var(--head-gap);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-32)}
.sector{position:relative;overflow:hidden;border-radius:30px;background:#000;color:#fff;box-shadow:0 10px 12px rgba(0,0,0,.25);width:100%;height:auto;aspect-ratio:743/470}
/* El arte del panel se escala por ancho (100% auto): al bajar el alto del
   sector se recorta por abajo en vez de deformarse. */
.sector-bg{position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat;background-position:top left;background-size:100% auto}
.sector--health .sector-bg{background-image:url('../img/health-panel.png')}
.sector--business .sector-bg{background-image:url('../img/business-top.png');height:246px;background-size:100% 246px}
.sector-head{position:absolute;left:0;right:0;top:0;height:102px;display:flex;align-items:flex-start;justify-content:center}
.sector--health .sector-head{padding-top:33px}
.sector--health .sector-head img{width:227px;height:41px}
.sector--business .sector-head{padding-top:30px}
.sector--business .sector-head img{width:292px;height:auto}

/* Tarjetas de temática: el rótulo es tipografía gráfica, con tamaños propios */
.tema-grid{position:absolute;left:20px;right:20px;top:102px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;padding:0}
.tema{position:relative;display:block;width:auto;height:104px;border-radius:var(--r-md);overflow:hidden;background:var(--paper) url('../img/tema-card.png') center/100% 100% no-repeat;color:var(--ink);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.tema span{position:absolute;left:24px;top:12px;font-size:var(--fs-18);line-height:1.25;letter-spacing:-.01em;font-weight:600}
.tema b{position:absolute;left:24px;top:42px;font-family:var(--f);font-weight:800;font-size:36px;line-height:42px;letter-spacing:-.02em;text-transform:uppercase}
.tema i{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:5px;background:#000;color:#fff;display:grid;place-items:center;font-style:normal}
.tema i svg{width:14px;height:14px}
.sectors .btn{margin-top:var(--head-gap)}

/* ——— ¿A QUÉ VIENES? ——— */
.why{padding:var(--sec-y) 0}
.why-head{position:relative}
.why-head h2{position:relative;isolation:isolate;display:inline-block}
/* El trazo se mide en em, no en píxeles: así mide siempre lo mismo que el
   titular, cambie el tamaño que cambie en cada breakpoint. 7,3 em es el ancho
   del texto más un 5 % de vuelo por cada lado. */
.why-head img.mark{position:absolute;left:-.04em;top:.20em;width:7.3em;height:auto;z-index:-1;pointer-events:none}
.why-grid{margin-top:var(--head-gap);border-top:var(--hr) solid var(--line);padding-top:var(--head-gap);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-64)}
.why-grid article{position:relative;padding-left:53px;display:flex;flex-direction:column}
.why-grid article::before{content:"";position:absolute;left:0;top:26px;bottom:0;width:var(--hr);background:var(--line)}
.why-grid article:first-child{padding-left:0}
.why-grid article:first-child::before{display:none}
.why-grid h3{font-size:var(--fs-36);font-weight:700;line-height:var(--lh-heading);letter-spacing:var(--ls-md);max-width:373px}
.why-grid p{margin-top:var(--rhythm-stack);max-width:var(--measure);font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-70);flex:1 1 auto}
/* Los enlaces de cada bloque se apoyan en el mismo pie: el párrafo absorbe el
   aire sobrante y el texto de cabecera puede medir distinto sin desalinear. */
.why-grid .link-arrow{align-self:flex-start}

/* ——— SEDE ——— */
.venue{padding:var(--sec-y) 0;background:var(--deep)}
.venue .sec-head h2{flex:none}
.venue-grid{margin-top:var(--sp-80);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--sp-48);align-items:start;width:100%}
.venue-info h3{font-size:var(--fs-55);font-weight:700;line-height:var(--lh-title);letter-spacing:var(--ls-xl)}
.venue-list{margin-top:var(--sp-48);border-top:var(--hr) solid var(--line-dark);padding-top:var(--head-gap)}
.venue-row{display:grid;grid-template-columns:127px 1fr;gap:var(--sp-8);margin-bottom:var(--sp-32)}
.venue-row dt{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-18);line-height:1.3;font-weight:500;color:#fff}
.venue-row dt .ico{width:var(--ico-16);height:var(--ico-16);color:var(--white-60);stroke-width:1.9}
.venue-row dd{margin:0;font-size:var(--fs-18);line-height:1.3;color:rgba(255,255,255,.85)}
.venue-row dd b{display:block;font-size:var(--fs-28);line-height:var(--lh-snug);font-weight:600;color:var(--lime);margin-bottom:var(--sp-4)}
/* isolation:isolate encierra los z-index de Leaflet: el pie del mapa nunca
   puede quedar por encima de la cabecera al hacer scroll. */
.venue-map{position:relative;isolation:isolate;width:100%}
.venue-map-canvas{position:relative;z-index:0;isolation:isolate;display:block;width:100%;height:auto;border-radius:var(--r-md);overflow:hidden;background:#EAE6DC url('../img/map.png') center/100% 100% no-repeat;aspect-ratio:710/563}
/* position:absolute + inset:0 para que el mapa mida siempre lo que el recuadro,
   incluso en móvil, donde la altura sale de aspect-ratio (100% daría 0). */
.venue-map-canvas .leaflet-container{position:absolute;inset:0;border-radius:var(--r-md);background:#F4F4F2}
/* Acabado mínimo: teselas en gris claro. Solo afecta a la capa de teselas,
   así el polígono lima y el pin conservan su color. */
.venue-map-canvas .leaflet-tile-pane{filter:grayscale(1) brightness(1.05) contrast(.92)}
.venue-map-canvas .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.75)}
.venue-map-canvas .leaflet-bar a{color:var(--deep)}
.venue-map-foot{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  height:44px;padding:0 var(--sp-24);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);
  background:rgba(0,0,20,.72);border-radius:0 0 var(--r-md) var(--r-md);
  font-size:var(--fs-18);line-height:1;color:#fff;
}
.venue-map-foot a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Pin del pabellón: punto lima con anillo oscuro y pulso muy suave */
.map-pin{position:relative;width:18px;height:18px}
.map-pin::before,.map-pin::after{content:'';position:absolute;inset:0;border-radius:50%}
.map-pin::before{background:var(--ink);border:3px solid #fff;box-sizing:border-box}
.map-pin::after{border:2px solid var(--ink);animation:map-pulse 3.2s ease-out infinite}
@keyframes map-pulse{
  0%{transform:scale(1);opacity:.85}
  70%,100%{transform:scale(2.3);opacity:0}
}
@media (prefers-reduced-motion:reduce){.map-pin::after{animation:none;opacity:0}}

/* ——— BANDA CTA ——— */
.cta-band{background:var(--lime);padding:var(--sec-y) 0}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-64)}
.cta-copy h2{font-size:var(--fs-70);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-xl);max-width:1000px;text-wrap:balance}
.cta-copy p{margin-top:var(--rhythm-stack);max-width:var(--measure);font-size:var(--t-body);font-weight:400;line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.cta-in .btn{flex:none}

/* ——— PIE ——— */
.ft{background:var(--deep);color:#fff;padding:var(--sp-80) 0 var(--sp-24)}
.ft-top{display:grid;grid-template-columns:1.25fr .75fr .85fr 1.15fr;gap:var(--sp-64)}
.ft-brand img{width:190px;height:auto}
.ft-social{margin-top:var(--sp-24);display:flex;gap:var(--sp-16);flex-wrap:wrap;color:rgba(255,255,255,.75)}
.ft-social a{display:block;line-height:0;transition:color var(--t) var(--ease),transform var(--t) var(--ease)}
.ft-social a:hover{color:#fff}
.ft-social svg{display:block}
.ft-col h2{
  margin-bottom:var(--sp-16);font-size:var(--fs-13);font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.ft-col li a{display:block;padding:7px 0;font-size:var(--fs-20);color:rgba(255,255,255,.92);transition:color var(--t) var(--ease)}
.ft-col li a:hover{color:var(--lime)}
.ft-venue p{font-size:var(--t-body);line-height:var(--lh-body);color:rgba(255,255,255,.78)}
.ft-venue b{color:#fff;font-weight:600}
.ft-mail{margin-top:var(--sp-12)}
.ft-mail a{display:inline-flex;align-items:center;gap:var(--sp-8)}
.news{display:flex;gap:var(--sp-8);margin-top:var(--sp-16)}
.news input{flex:1;min-width:0;height:var(--btn-h-xs);background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-pill);padding:0 18px;font-size:var(--fs-input)}
.news input::placeholder{color:rgba(255,255,255,.55)}
.ft-bottom{
  display:flex;justify-content:space-between;gap:var(--sp-16);flex-wrap:wrap;
  margin-top:var(--sp-48);padding-top:var(--sp-24);
  border-top:var(--hr) solid var(--line-dark);
  font-size:var(--fs-13);color:rgba(255,255,255,.65);
}
.ft-legal{display:flex;gap:var(--sp-16);flex-wrap:wrap}
.ft-bottom a:hover{color:#fff}

/* ——— PÁGINAS INTERIORES ——— */
.page-simple{padding:200px 0 var(--sp-80)}
.page-title{font-size:var(--fs-70);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-xl);margin-bottom:var(--sp-24)}
.page-content{max-width:var(--measure-wide);font-size:var(--t-body);line-height:var(--lh-body)}

/* ——— SHOWROOM ———
   Cinco bloques: hero con foto, entradilla con trazo, qué hay dentro (oscuro),
   tres perfiles y cierre lima. Todo con las piezas y los tokens del sistema. */
.ph-hero{
  position:relative;display:flex;align-items:flex-end;
  min-height:440px;padding:0 0 var(--sp-80);
  background:var(--deep) url('../img/hero-showroom.jpg') center/cover no-repeat;color:#fff;
}
/* Velo suave: la foto ya viene oscura por la izquierda; esto solo asegura el texto */
.ph-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,3,22,.70) 0%,rgba(0,3,22,.36) 52%,rgba(0,3,22,.08) 100%);
}
.ph-hero .wrap{position:relative;z-index:1}
.ph-hero-dates{margin-top:var(--sp-48);font-size:var(--fs-36);font-weight:600;line-height:var(--lh-heading)}

/* Entradilla: titular con trazo a la izquierda, párrafo a la derecha.
   El trazo se mide contra el bloque de las tres palabras y no contra la
   columna: así envuelve el texto igual en escritorio que en móvil. */
.ph-title{flex:none}
.ph-title-in{position:relative;display:inline-block;isolation:isolate}
/* El bucle va ceñido a las letras: 104 % de ancho deja un 2 % de aire por
   lado y el alto sale del propio trazo. Antes iba al 118 % y flotaba. */
.ph-title .oval{position:absolute;left:-2%;top:-4%;width:104%;max-width:none;height:auto;z-index:-1;pointer-events:none}
.ph-head .deck{margin-top:var(--sp-32);font-size:var(--t-body-lg);font-weight:600;line-height:var(--lh-lead);max-width:var(--measure)}

/* Qué hay dentro: cuatro bloques con filetes + foto a la derecha */
.ph-dark{padding:var(--sec-y) 0;background:var(--deep)}
.ph-dark .deck{font-size:var(--t-body-lg);font-weight:600;line-height:var(--lh-lead);max-width:var(--measure)}
.ph-dark-grid{margin-top:var(--sp-80);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--sp-48);align-items:start}
.ph-list li{padding:var(--sp-32) 0;border-bottom:var(--hr) solid var(--line-dark)}
.ph-list li:first-child{padding-top:0}
.ph-list li:last-child{padding-bottom:0;border-bottom:0}
.ph-list h3{font-size:var(--fs-36);font-weight:700;line-height:var(--lh-heading);letter-spacing:var(--ls-md);color:var(--lime)}
.ph-list p{margin-top:var(--sp-16);font-size:var(--t-body);line-height:var(--lh-body);color:rgba(255,255,255,.92)}
.ph-figure{width:100%;height:auto;object-fit:cover;border-radius:var(--r-md);aspect-ratio:710/524}

/* Tres perfiles: la tercera columna ocupa el aire que sobra para que el
   titular largo quepa en una línea, como en el diseño. */
.ph-aud{padding:var(--sec-y) 0}
.ph-aud-title{max-width:1114px;font-size:var(--fs-70);font-weight:700;line-height:var(--lh-title);letter-spacing:var(--ls-xl);text-wrap:balance}
.ph-aud .why-grid{grid-template-columns:406px 406px 1fr;margin-top:var(--sp-64)}
/* Los tres titulares van en una línea, como en el diseño: la tercera columna
   es la que se queda con el aire sobrante. */
.ph-aud .why-grid h3{max-width:none;white-space:normal}
/* Trazo lima bajo la frase: escala con el titular y nunca se descuadra */
.ph-brush{background:url('../img/mark-cita.png') left bottom/100% auto no-repeat;padding-bottom:.05em;white-space:nowrap}

/* Cierre lima: texto a la izquierda, dos botones alineados al pie de la derecha */
.ph-cta-in{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-64)}
.ph-cta-copy h2{font-size:var(--fs-70);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-xl)}
.ph-cta-copy p{margin-top:var(--sp-40);max-width:770px;font-size:var(--t-body);font-weight:400;line-height:var(--lh-body)}
.ph-cta-actions{display:flex;gap:var(--sp-24);flex:none}

/* ——— CONGRESO ———
   Misma gramática que la portada y el Showroom: hero con foto del pabellón,
   entradilla a dos columnas, el dato de horas, dos sectores (la pieza de la
   portada, sin tocar), ponentes, cinco temas y el cierre con el programa 2026. */

/* Hero: el texto va al ras de la rejilla, como en el Showroom */
/* Fondo exportado del frame «Rediseño · Congreso» (nodo 10:2639): ya trae el
   degradado dentro, así que no se le añade ningún velo encima. */
.cg-hero{background-image:url('../img/hero-congreso.png');background-position:center;background-size:cover}
.cg-hero::before{background:none}
/* Lockup «SOMA / Congreso»: el wordmark del sitio en blanco y el nombre del
   evento en bold. Es la misma pieza en la portada del Congreso y del Showroom. */
/* Lockup del hero: el wordmark y la palabra comparten línea base y altura de
   mayúscula (76 px de Inter ≈ 55 de asta, como el logo de 56), así «SOMA /
   Showroom» se lee como una sola pieza alineada. */
.lockup{display:flex;align-items:baseline;gap:var(--sp-16);color:#fff}
.lockup-wm{width:auto;height:56px}
.lockup-slash,.lockup-tag{font-size:var(--type-lockup);font-weight:700;line-height:1;letter-spacing:-.03em}
.lockup-slash{opacity:.8;font-weight:500}

/* Dos columnas del diseño: 550 de titular y 675 de texto, con el aire justo
   para que el párrafo acabe en el mismo borde derecho que el resto de bloques */
.cg-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);justify-content:space-between;align-items:start;gap:var(--sp-48)}
.cg-h2{font-size:var(--fs-70);font-weight:700;line-height:var(--lh-title);letter-spacing:var(--ls-xl);text-wrap:balance}
.cg-copy{font-size:var(--t-body);font-weight:400;line-height:var(--lh-body);color:var(--ink-70)}
.cg-copy p + p{margin-top:var(--sp-24)}
.cg-copy b{font-weight:700}
/** Subrayado de rotulador bajo «decidir mejor.»: la misma pincelada que
    «¿A qué vienes?» y el Showroom, no un trazo dibujado aparte. */
.cg-underline{background:url('../img/mark-cita.png') left bottom/100% auto no-repeat;padding-bottom:.05em;white-space:nowrap;display:inline-block}

/* —80 horas—: el dato, centrado y con el trazo del sistema detrás */
.cg-dato{margin-top:var(--sp-80);text-align:center}
.cg-dato-num{font-size:var(--fs-display);font-weight:800;line-height:1;letter-spacing:-.045em}
/* El trazo del rotulador: una pincelada con cola que sobresale por los lados
   del texto. Es un SVG, no un PNG estirado, para que las puntas irregulares
   no se deformen al cambiar el tamaño de letra. */
.cg-brush{position:relative;isolation:isolate;padding:0 .04em;white-space:nowrap;display:inline-block}
/* La pincelada de «¿A qué vienes?» del Inicio, la misma imagen, detrás de la cifra:
   natural, sin estirar, empezando un poco antes de la cifra y con la cola por la derecha. */
.cg-brush-mark{position:absolute;left:-2.5%;top:29%;width:106%;height:auto;max-width:none;z-index:-1;pointer-events:none}
.cg-dato-sub{margin-top:var(--sp-8);font-size:var(--t-body);font-weight:700;line-height:var(--lh-snug)}
.cg-dato-note{max-width:900px;margin:var(--sp-32) auto 0;font-size:var(--t-body);font-weight:400;line-height:var(--lh-body)}

/* ——— PONENTES ———
   Carrusel de fichas tal como está en el diseño: retrato recortado más ancho
   que la placa, placa verde montada encima y barra de posición debajo. La fila
   se sale por la derecha para que se entienda que sigue, y la barra sirve
   también para moverse (clic, arrastre o flechas con el foco). */
/* La tira mide lo mismo que la columna: el aire de la izquierda y el de la
   derecha son exactamente el mismo (el margen del contenedor). */
.cg-voices{padding:var(--sec-y) 0 calc(var(--sec-y) + var(--sp-16));--cg-card:342px;--cg-gap:98px;--cg-bleed:0px;--cg-end:0px}
/* El trazo va pegado a las palabras: como el h2 es una columna de rejilla,
   justify-self lo encoge al texto en vez de estirarlo a todo el ancho. */
.cg-brush-h{background:url('../img/mark-cita.png') left bottom/100% auto no-repeat;padding-bottom:.05em;white-space:nowrap;display:inline-block;justify-self:start;width:max-content;max-width:100%}
/* Carrusel: la tira se sale por la derecha para que se entienda que sigue y
   los dos cantos se apagan con una neblina hacia el blanco, sin corte. */
.cg-speakers{
  display:flex;align-items:flex-start;gap:var(--cg-gap);
  margin-right:calc(-1 * var(--cg-bleed));
  margin-top:var(--sp-80);
  overflow-x:auto;scroll-snap-type:none;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;cursor:grab;
  /* El desbordamiento horizontal se queda en la tira: al llegar al final, la
     rueda y el dedo siguen bajando la página, no se quedan enganchados. */
  overscroll-behavior-x:contain;touch-action:pan-x pan-y;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 48px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 48px),transparent 100%);
}
/* Con la tira desplazada también se apaga el canto izquierdo: así en reposo la
   primera ficha se ve entera y al moverse no hay ningún corte. */
.cg-speakers.is-moved{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);
}
/* Aire al final de la tira: al llegar al tope, la última ficha queda entera. */
.cg-speakers::after{content:"";flex:0 0 var(--cg-end)}
.cg-speakers::-webkit-scrollbar{display:none}
.cg-speakers.is-drag,.cg-speakers.is-glide{cursor:grabbing;scroll-snap-type:none}
.cg-speaker{flex:0 0 var(--cg-card)}
/* El retrato es más ancho que la placa y se sale por los dos lados */
/* Retrato del frame: 270 x 350, centrado y sin salirse de la ficha (342) */
.cg-speaker img{display:block;width:calc(var(--cg-card) * .7714);max-width:100%;margin:0 auto;
  aspect-ratio:270 / 350;height:auto;object-fit:contain;object-position:50% 100%}
/* Placa: verde profundo, brillo lima en el borde inferior y un velo diagonal */
.cg-plaque{
  position:relative;z-index:1;margin-top:0;height:77px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 var(--sp-16);border-radius:var(--r-md);text-align:center;color:#fff;
  /* Fondo del frame «Diseño cards»: negro con la imagen al 80 % */
  background:url('../img/figma-plaque-a.png?v=20261138') center/100% 100% no-repeat,#000;
  box-shadow:0 18px 28px -16px rgba(0,3,22,.55),inset 0 0 0 1px rgba(255,255,255,.10),inset 0 -4px 12px -5px rgba(181,255,31,.6);
}
/* Las dos imágenes de placa del diseño alternan uno sí uno no. */
.cg-speaker:nth-child(even) .cg-plaque{background-image:url('../img/figma-plaque-b.png?v=20261138')}
.cg-plaque b{font-size:var(--fs-24);font-weight:700;line-height:1.05;letter-spacing:-.04em}
.cg-plaque span{margin-top:var(--sp-4);font-size:var(--fs-18);font-weight:600;line-height:1.05;color:var(--lime)}
/* Barra de posición: mide lo que se ve y se puede arrastrar */
.cg-progress{position:relative;width:300px;height:6px;margin:var(--sp-64) auto 0;border-radius:3px;background:rgba(0,0,31,.14);cursor:pointer;touch-action:none}
.cg-progress:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.cg-progress i{position:absolute;left:0;top:0;bottom:0;width:150px;border-radius:3px;background:var(--ink);transition:transform var(--t) var(--ease)}

/* ——— CINCO TEMAS ———
   Titular lima a la izquierda y descripción a la derecha, separados por filetes:
   la misma lectura que la lista del Showroom, en dos columnas. */
.cg-temas{padding:var(--sec-y) 0;background:var(--deep)}
.cg-temas .sec-head h2{flex:none}
.cg-temas .deck{max-width:var(--measure)}
.cg-tema-list{margin-top:var(--head-gap);border-top:var(--hr) solid var(--line-dark)}
.cg-tema-list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:center;padding:var(--sp-32) 0;border-bottom:var(--hr) solid var(--line-dark)}
.cg-tema-list h3{font-size:var(--fs-36);font-weight:700;line-height:var(--lh-heading);letter-spacing:var(--ls-md);color:var(--lime)}
/* Es cuerpo de texto: mismo tamaño que el resto de la lectura, no una etiqueta */
.cg-tema-list p{max-width:520px;font-size:var(--t-body);font-weight:400;line-height:var(--lh-body);color:rgba(255,255,255,.9)}

/* ——— EL DE 2027 ———
   El año va rodeado con el óvalo del sistema, el mismo de «Tú decides». */
.cg-2027{padding:calc(var(--sec-y) + var(--sp-24)) 0}
.cg-ring{position:relative;display:inline-block;isolation:isolate}
/* El óvalo abraza la cifra: un 8 % más ancho que el número y 1,6 veces su alto,
   centrado y con la inclinación del trazo. Va por detrás del texto. */
/* El óvalo abraza la cifra con el mismo margen arriba que abajo. El ancho y el
   alto se calculan sobre la caja del texto más 0,14 em por lado: el marco se
   ajusta solo al tamaño de la cifra, sin cortarla por arriba. */
.cg-ring img{position:absolute;left:-.07em;top:-.06em;width:calc(100% + .14em);height:calc(100% + .12em);max-width:none;z-index:-1;pointer-events:none}
.cg-2027 .cg-copy p{line-height:var(--lh-snug)}
.cg-2027 .cg-copy p + p{color:rgba(0,0,31,.72)}
.cg-2027-actions{display:flex;justify-content:flex-end;margin-top:var(--sp-48)}
.cg-cta .cta-copy h2{max-width:860px}

/* — Hover de las piezas pulsables —
   Solo cambia el color: nada se eleva y nada se desplaza. La misma duración y
   la misma curva para todas, así el gesto sigue siendo uno.
   La única pieza que se mueve es la burbuja de volver arriba, que entra y sale
   del canto: ese movimiento es su razón de ser, no un adorno del hover. */
.btn,
.btn-icon{
  transition:background-color var(--t) var(--ease),
             color var(--t) var(--ease),
             transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
a.tema,
.ft-social a{
  transition:background-color var(--t) var(--ease),
             color var(--t) var(--ease),
             transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}

/* Todos los botones responden igual: la pieza sube 2 px, la sombra se abre y
   el icono avanza. Sin icono (la píldora de la cabecera) la subida y la sombra
   siguen ahí, así que también se nota. Las cards suben un poco más. */
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -8px rgba(0,3,22,.28)}
.btn:active{transform:translateY(0) scale(.99);box-shadow:0 6px 14px -8px rgba(0,3,22,.3)}
.btn:hover svg{transform:translateX(4px)}
.btn--line:hover{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 3px var(--ink),0 12px 24px -8px rgba(0,3,22,.28)}
.btn-icon:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(0,3,22,.3)}
.btn-icon:hover svg{transform:translate(3px,-3px)}
a.tema:hover{transform:translateY(-4px);box-shadow:0 18px 32px -16px rgba(0,3,22,.4)}
.ft-social a:hover{transform:translateY(-3px)}
.to-top:hover{transform:scale(1.06)}

/* ══════════════════════════ 6. ANIMACIONES ══════════════════════════ */

/* Aparición al entrar en pantalla.
   animations.js marca .rv y añade .is-in en cuanto el bloque asoma por el 92 %
   inferior de la ventana. El movimiento arranca cuando ya se está viendo y
   termina solo: siempre llega a opacidad 1, también en el pie, donde el scroll
   se acaba y una animación atada al desplazamiento se quedaría a medias. */
.rv{opacity:0;transition:opacity var(--dur-5) var(--e-out-expo),translate var(--dur-5) var(--e-out-expo),filter var(--dur-4) var(--e-out-expo);transition-delay:calc(var(--i,0) * 70ms);filter:blur(6px)}
/* Tres movimientos, no uno para todo:
   up    sube 24 px (listas, columnas que entran en escalera)
   fade  solo fundido (cabeceras, bloques anchos: lo más discreto)
   left  entra desde la izquierda (columna de texto junto a imagen) */
.rv[data-reveal="up"]{translate:0 var(--sp-24)}
.rv[data-reveal="left"]{translate:calc(var(--sp-24) * -1) 0}
.rv.is-in{opacity:1;translate:none;filter:none}

/* Un botón que además aparece conserva su animación propia: el revelado le
   mueve la opacidad y la entrada, nada más. */
.rv.btn,
.rv.btn-icon,
.rv.btn,
.rv.btn-icon,
.rv.link-arrow{
  transition:background-color var(--t) var(--ease),
             color var(--t) var(--ease),
             transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease),
             opacity var(--t-slow) var(--ease),
             translate var(--t-slow) var(--ease);
  transition-delay:0s;
}
.rv a.tema{
  transition:background-color var(--t) var(--ease),
             color var(--t) var(--ease),
             transform var(--t) var(--ease),
             box-shadow var(--t) var(--ease),
             opacity var(--t-slow) var(--ease),
             translate var(--t-slow) var(--ease);
  transition-delay:0s;
}

/* Al imprimir, todo visible (la animación deja el contenido oculto hasta verse) */
@media print{
  .rv{opacity:1;transform:none;translate:none}
  .hd{position:static}
}

/* Con movimiento reducido no se oculta nada ni se mueve nada */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.is-smooth{scroll-behavior:smooth}
  .rv{opacity:1;translate:none;transition:none;animation:none}
  .to-top{transform:none;border-radius:50%;transition:none}
  .btn:hover,.btn-icon:hover,.tema:hover,.ft-social a:hover,.to-top:hover{transform:none}
  .btn:hover svg,.btn-icon:hover svg{transform:none}
  .btn:hover{box-shadow:none}
}

/* ——— Cambio de página ———
   Cruce entre documentos con View Transitions: el navegador funde la página que
   sale con la que entra y la cabecera se queda quieta, así que no hay velo ni
   destello de color. Sin valores de token aquí: los pseudo-elementos de la
   transición no heredan custom properties y la animación se quedaría sin efecto. */
@view-transition{navigation:auto}

/* La cabecera se nombra para que no se cruce consigo misma: es lo único que
   permanece, como el marco de la página mientras cambia el contenido. */
.hd{view-transition-name:site-header}

/* Saliente 280 ms, entrante 380 ms: el cruce dura lo justo para leerse suave y
   termina antes de que se note la espera. */
::view-transition-old(root){animation:vt-out 110ms cubic-bezier(.4,0,.6,1) both}
::view-transition-new(root){animation:vt-in 240ms cubic-bezier(.22,.61,.36,1) both}
::view-transition-group(root){animation-duration:240ms}
::view-transition-group(site-header){animation-duration:110ms}
@keyframes vt-out{to{opacity:0;filter:blur(8px)}}
@keyframes vt-in{from{opacity:0}}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  ::view-transition-group(site-header){animation:none}
}


/* La píldora tiene un solo tamaño: al bajar solo cambia la sombra. Nada de la
   cabecera (logo, enlaces, botones) se reescala con el scroll. */

/* Paralaje del hero: la foto se mueve a un 18 % del scroll y el texto al 6 %,
   con la opacidad cayendo. Lo mueve animations.js en un solo rAF. */
.hero-media,.hero-inner{will-change:transform}

/* Las tarjetas y los enlaces con flecha dejan ver el icono al pasar */
.tema i .ico{transition:transform var(--dur-2) var(--e-out)}
.tema:hover i .ico{transform:translate(2px,-2px)}
.link-arrow{border-bottom-color:currentColor;transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}

@media (prefers-reduced-motion:reduce){
  .hero-media,.hero-inner{will-change:auto;transform:none !important;opacity:1 !important}
  .rv{filter:none}
}

/* ══════════════════════════ 7. RESPONSIVE ══════════════════════════ */

/* Por debajo de 360 px la píldora no admite logo + selector + botón + menú:
   se oculta solo el selector para no romper la cabecera. */
@media (max-width:359px){
  .lang-pick{display:none}
}

/* ═══════════ TABLET ≤1199 ═══════════
   El lienzo de 1920 escalado dejaría la tipografía a la mitad en este tramo,
   así que aquí la página se reflowea: cabecera pegajosa con menú, rejillas a
   una columna y tokens algo menores. Debajo de 767 se afina en el bloque siguiente. */
/* ══════════════════════════ INFORMACIÓN ══════════════════════════ */

/* Dos columnas: texto a la izquierda, tarjeta o lista a la derecha. El mismo
   reparto se repite en «Cómo llegar» y en «Accesibilidad». */
.info-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--sp-48);align-items:start}
.info-venue,.info-acc,.info-contact{padding:var(--sec-y) 0}
.info-text{margin-top:var(--sp-24);max-width:var(--measure);font-size:var(--t-body);font-weight:400;line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--ink-70)}
.info-copy .btn{margin-top:var(--sp-32)}

/* Tarjeta de datos: el mismo listado de la sede, sobre papel y con filete. */
.info-card{border:var(--hr) solid var(--ink);border-radius:var(--r-card);padding:var(--sp-32)}
.venue-list--light{margin-top:0;padding-top:0;border-top:0}
.venue-list--light .venue-row{grid-template-columns:104px minmax(0,1fr);gap:var(--sp-16);margin-bottom:var(--sp-24)}
.venue-list--light .venue-row:last-child{margin-bottom:0}
.venue-list--light dt{font-size:var(--fs-13);font-weight:400;color:var(--ink-70)}
.venue-list--light dd{font-size:var(--fs-13);color:var(--ink-70)}
.venue-list--light dd b{font-size:var(--fs-28);color:var(--ink)}

/* Cuatro accesos: título grande, medio y descripción, con filetes verticales. */
.info-dark{background:var(--deep);padding:var(--sec-y) 0}
.ways{margin-top:var(--sp-80);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:var(--hr) solid var(--line-dark)}
.way{padding:var(--sp-32) var(--sp-24);border-left:var(--hr) solid var(--line-dark)}
.way:first-child{border-left:0;padding-left:0}
.way-k{display:block;font-size:var(--fs-55);font-weight:700;line-height:1;letter-spacing:var(--ls-xl);color:var(--lime)}
.way-t{display:block;margin-top:var(--sp-12);font-size:var(--t-body-lg);font-weight:600;line-height:var(--lh-snug);color:var(--lime)}
.way p{margin-top:var(--sp-16);font-size:var(--t-body);font-weight:400;line-height:var(--lh-body);color:rgba(255,255,255,.78)}

/* El mapa de la sede, en formato banda. */
.venue-map--wide{margin-top:var(--sp-80)}
.venue-map--wide .venue-map-canvas{aspect-ratio:20/7}
.venue-map-tag{position:absolute;left:50%;top:50%;transform:translate(14px,-50%);z-index:2;display:inline-flex;align-items:center;padding:var(--sp-8) var(--sp-16);border-radius:var(--r-pill);background:var(--ink);color:var(--paper);border:2px solid var(--paper);font-size:var(--fs-13);font-weight:600;white-space:nowrap;box-shadow:var(--shadow-2);pointer-events:none}

/* Horario sobre lima: titular y párrafos a la izquierda, tabla a la derecha. */
.info-lime{background:var(--lime);padding:var(--sec-y) 0}
.hours-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--sp-48);align-items:center}
.hours-copy p{margin-top:var(--sp-16);max-width:var(--measure);font-size:var(--t-body);font-weight:400;line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.hours-table{width:100%;border-collapse:collapse;font-size:var(--t-body);line-height:var(--lh-body)}
.hours-table th{font-weight:500;text-align:left;padding-bottom:var(--sp-16);border-bottom:var(--hr) solid rgba(0,3,22,.28)}
.hours-table thead th{font-size:var(--fs-13);color:rgba(0,3,22,.62)}
.hours-table tbody th,.hours-table td{padding:var(--sp-16) 0;border-bottom:var(--hr) solid rgba(0,3,22,.16);font-weight:600}


/* Necesidades de acceso: fila con el dato a la derecha. */
.acc-list{border-top:var(--hr) solid var(--line)}
.acc-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-24);padding:var(--sp-20) 0;border-bottom:var(--hr) solid var(--line);font-size:var(--t-body);line-height:var(--lh-body)}
.acc-list b{font-size:var(--fs-24);font-weight:600;white-space:nowrap}

/* Prensa: texto sobre negro y tarjeta de papel con la vía directa. */
.info-press{background:var(--deep);padding:var(--sec-y) 0}
.press-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:var(--sp-64);align-items:start}
.info-press h2{color:#fff}
.press-copy p{margin-top:var(--sp-24);max-width:var(--measure);font-size:var(--t-body);font-weight:400;line-height:var(--lh-body);color:rgba(255,255,255,.82)}
.press-copy .btn{margin-top:var(--sp-32)}
.press-card{background:var(--paper);color:var(--ink);border-radius:var(--r-card);padding:var(--sp-40)}
.press-card h3{font-size:var(--fs-36);font-weight:700;line-height:var(--lh-heading);letter-spacing:var(--ls-md)}
.press-card p{margin-top:var(--sp-16);font-size:var(--t-body);font-weight:400;line-height:var(--lh-body);color:var(--ink-70)}
.press-card .btn{margin-top:var(--sp-24)}
.press-mail{display:block;margin-top:var(--sp-16);font-size:var(--fs-13);color:var(--ink-70);text-decoration:none}

/* Tres vías de contacto, separadas por filetes verticales. */
.info-cols{margin-top:var(--head-gap);border-top:var(--hr) solid var(--line);padding-top:var(--head-gap);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-64)}
.info-cols article{position:relative;padding-left:53px;display:flex;flex-direction:column}
.info-cols article::before{content:"";position:absolute;left:0;top:26px;bottom:0;width:var(--hr);background:var(--line)}
.info-cols article:first-child{padding-left:0}
.info-cols article:first-child::before{display:none}
.info-cols h3{font-size:var(--fs-36);font-weight:700;line-height:var(--lh-heading);letter-spacing:var(--ls-md);max-width:373px}
.info-cols p{margin-top:var(--rhythm-stack);max-width:var(--measure);font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-70);flex:1 1 auto}
.info-cols .link-arrow{align-self:flex-start}

@media (max-width:1199px){
  :root{
    /* Escala de Atlassian para tablet: cuerpo 18, titulares 40/36/32/26 */
    --type-display:48px;
    --type-lockup:40px;
    --type-title-xl:52px;
    --type-large-title:40px;
    --type-title-1:36px;
    --type-title-2:32px;
    --type-title-3:26px;
    --type-headline:22px;
    --type-body-lg:21px;
    --type-body:18px;
    --type-callout:17px;
    --type-subhead:16px;
    --type-footnote:14px;
    --type-caption:13px;
    --fs-55:32px;

    --btn-h:54px;
    --btn-px:28px;
    --btn-fs:18px;
    --btn-h-sm:38px;
    --btn-px-sm:22px;
    --btn-fs-sm:14px;

    --wrap-pad:var(--sp-32);
    --rhythm-section:var(--sp-64);
    --rhythm-block:var(--sp-48);
    --rhythm-head:var(--sp-32);
  }

  html{scroll-padding-top:110px}
  body{font-size:var(--t-body)}
  .wrap{width:auto;max-width:none;padding-inline:var(--wrap-pad)}
  /* En el hero, .wrap es hijo de un flex: con width:auto se encogía al ancho
     del logo y quedaba centrado. Aquí sí ocupa todo el ancho y va a la izquierda. */
  .ph-hero .wrap{width:100%}
  .decide-grid{width:auto;max-width:none;padding-inline:var(--wrap-pad)}

  /* La cabecera pasa a pegajosa y el menú a desplegable */
  .hd{position:sticky;top:20px;left:auto;right:auto;height:64px;margin:20px 20px -84px;overflow:visible}
  .hd-in{position:relative;padding:0 var(--sp-24)}
  /* El logo vuelve al flujo: con el selector de idioma y el botón en versales
     no cabe posicionado en absoluto sin pisar el grupo de la derecha. */
  .hd-logo{display:block;height:auto}
  .logo-wm{width:60px}
  .hd-burger{display:flex}
  .hd-nav{display:none;margin-left:0}
  .hd.is-open{border-radius:26px}
  .hd.is-open .hd-nav{
    display:block;position:absolute;left:0;right:0;top:calc(100% + 10px);
    background:var(--paper);border-radius:var(--r-card);
    padding:var(--sp-12) 26px var(--sp-16);
    box-shadow:0 18px 44px rgba(0,0,31,.20);border:1px solid rgba(0,0,31,.07);
  }
  .hd.is-open .nav-list{display:block}
  .hd.is-open .nav-list li+li{border-top:var(--hr) solid rgba(0,0,31,.08)}
  .hd.is-open .nav-list a{display:block;padding:var(--sp-16) 0;font-size:var(--fs-18);line-height:1.1}
  .hd.is-open .nav-list a::after{display:none}
  .hd.is-open .hd-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hd.is-open .hd-burger span:nth-child(2){opacity:0}
  .hd.is-open .hd-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hd-right{gap:var(--sp-16)}
  .flag svg{width:16px;height:11px}

  .hero-logo{width:320px}
  .hero-dates{margin-top:36px;line-height:1.08}
  .hero-soon{margin-top:var(--sp-32);line-height:1.1}
  .hero-note{margin-top:var(--sp-8);line-height:1.3}

  .intro-lead{margin:0 0 var(--sp-64);text-align:left;max-width:none;line-height:1.25}
  .intro-title,.intro-text{margin-left:0;max-width:none;line-height:1.4}
  .intro-text{margin-top:var(--sp-24)}
  .stats{margin-top:var(--sp-48);grid-template-columns:1fr 1fr;gap:var(--sp-32)}
  .stats b{line-height:1}
  .stats span{margin-top:var(--sp-12)}

  .sec-head{grid-template-columns:1fr;gap:var(--sp-24)}
  .sec-head h2,.what .sec-head h2,.sectors .sec-head h2,.venue .sec-head h2{width:auto}
  .deck{width:auto;max-width:none;margin-top:0;line-height:1.28}

  .cards{margin-top:var(--sp-48);grid-template-columns:1fr;gap:var(--sp-20)}
  .card-img{width:100%;height:auto;aspect-ratio:710/430}
  .card-body{padding:var(--sp-20) 0 0}
  .card-body h3{line-height:1.2}
  .card-body p{margin-top:var(--sp-12);line-height:1.35}
  .btn-icon{width:64px;height:64px;right:var(--sp-20);bottom:var(--sp-20)}
  .card-wide .card-body{padding-right:96px}

  .decide-grid{grid-template-columns:1fr;gap:var(--sp-48)}
  .decide-title{line-height:1.1}
  /* El titular se parte solo: en una columna el nowrap del lienzo desbordaría */
  .decide-title .line{white-space:normal}
  .decide-copy p{line-height:1.28;margin-bottom:18px}
  .decide-copy .btn{margin-top:var(--sp-12)}

  .sector-grid{margin-top:var(--sp-32);grid-template-columns:1fr;gap:var(--sp-24)}
  /* Sin alto de lienzo: en una columna el sector crece con sus tarjetas, así
     no queda aire muerto debajo ni se recorta el contenido. */
  .sector{width:100%;height:auto;aspect-ratio:auto;padding-bottom:var(--sp-20)}
  .sector--business .sector-bg{height:200px;background-size:100% 200px}
  .sector-head{position:relative;height:auto;padding:var(--sp-32) 0 18px}
  .sector--health .sector-head{padding-top:var(--sp-32)}
  .sector--business .sector-head{padding-top:26px}
  .sector--health .sector-head img{width:180px;height:33px}
  .sector--business .sector-head img{width:230px;height:auto}
  .tema-grid{position:static;grid-template-columns:1fr 1fr;gap:14px;padding:0 var(--sp-16)}
  .tema{width:auto;height:104px}
  .tema span{left:18px;top:var(--sp-12);font-size:var(--fs-13);line-height:1.25;letter-spacing:-.03em}
  .tema b{left:18px;top:auto;bottom:14px;font-size:32px;line-height:38px;letter-spacing:-1px}
  .tema i{width:32px;height:32px;right:var(--sp-12);top:var(--sp-12)}
  .tema i svg{width:14px;height:14px}
  .sectors .btn{margin-top:var(--sp-32)}

  /* El filete es el borde superior del artículo: sin margen arriba quedaba
     pegado al párrafo anterior. Aire arriba (40) y debajo del filete (24). */
  .why-grid,.info-cols{margin-top:var(--sp-40);padding-top:0;grid-template-columns:1fr;gap:var(--sp-40);border-top:0}
  .why-grid article,.info-cols article{border-left:0;border-top:var(--hr) solid var(--line);padding:var(--sp-24) 0 0}
  .why-grid h3,.info-cols h3{line-height:1.2;max-width:none}
  .why-grid p,.info-cols p{margin-top:var(--sp-16);max-width:none;line-height:1.28}
  .link-arrow{margin-top:var(--sp-20);font-size:var(--fs-18)}

  .venue-grid{margin-top:var(--sp-48);grid-template-columns:1fr;gap:var(--sp-32)}
  .venue-info h3{line-height:var(--lh-snug)}
  .venue-list{margin-top:var(--sp-32);padding-top:var(--sp-32)}
  .venue-row{margin-bottom:22px}
  .venue-map{width:100%}
  .venue-map-canvas{width:100%;height:auto;aspect-ratio:710/563}

  .cta-in{flex-direction:column;align-items:flex-start;gap:var(--sp-24)}
  .cta-copy p{line-height:1.3}

  .ft-top{grid-template-columns:1fr 1fr;gap:var(--sp-32)}

  .ph-hero{min-height:320px;padding:0 0 var(--sp-48)}
  .ph-hero-dates{margin-top:var(--sp-24)}
  .ph-title{width:auto}
  .ph-head .deck{width:auto;margin-top:var(--sp-24);font-size:var(--fs-24)}
  .ph-dark .deck{width:auto;font-size:var(--fs-24)}
  .ph-dark-grid{grid-template-columns:1fr;gap:var(--sp-32);margin-top:var(--sp-48)}
  .ph-figure{width:100%;height:auto;aspect-ratio:710/524}
  .ph-aud-title{max-width:none}
  .ph-aud .why-grid{grid-template-columns:1fr;margin-top:var(--sp-40)}
  .ph-aud .why-grid h3{white-space:normal}
  .ph-cta-in{flex-direction:column;align-items:flex-start;gap:var(--sp-32)}

  .page-simple{padding:140px 0 var(--sp-64)}
}

/* ═══════════ MÓVIL ≤767 ═══════════ */
@media (max-width:767px){
  :root{
    /* Escala de Atlassian para móvil: cuerpo 17, por encima del mínimo de 16 */
    --type-display:40px;
    --type-lockup:32px;
    --type-title-xl:40px;
    --type-large-title:36px;
    --type-title-1:32px;
    --type-title-2:28px;
    --type-title-3:24px;
    --type-headline:20px;
    --type-body-lg:19px;
    --type-body:17px;
    --type-callout:16px;
    --type-subhead:15px;
    --type-footnote:13px;
    --type-caption:13px;
    --fs-55:28px;

    --btn-h:48px;
    --btn-px:22px;
    --btn-fs:16px;
    --btn-h-sm:36px;
    --btn-px-sm:18px;
    --btn-fs-sm:13px;

    --wrap-pad:var(--sp-32);
    --rhythm-section:var(--sp-48);
    --rhythm-block:var(--sp-40);
    --rhythm-head:var(--sp-24);
  }

  html{scroll-padding-top:90px}
  body{font-size:var(--t-body)}

  .hd{top:12px;height:56px;margin:12px 16px -68px}
  .hd-in{padding:0 var(--sp-16)}
  .hd-logo img{width:44px}
  .logo-wm{width:56px;height:auto}
  .hd-right{gap:10px;margin-left:auto}
  .hd-right .btn{padding:0 var(--sp-12)}
  .hd.is-open{border-radius:26px}
  .hd.is-open .hd-nav{padding:var(--sp-12) 22px var(--sp-16);border-radius:26px}
  .hd.is-open .nav-list a{padding:14px 0;font-size:var(--fs-20);line-height:1.1}
  .hd.is-open .hd-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hd.is-open .hd-burger span:nth-child(2){opacity:0}
  .hd.is-open .hd-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* Selector de idioma compacto, a la izquierda de «Lista de espera» */
  .lang-pick summary{height:36px;gap:6px;padding:0 var(--sp-8);font-size:var(--fs-13)}
  .lang-pick .flag svg{width:16px;height:11px}
  /* En móvil el desplegable se abre hacia la derecha: alineado a la derecha
     del selector se salía por el borde izquierdo de la pantalla. */
  .lang-menu{left:0;right:auto;min-width:190px}
  .lang-menu a{font-size:var(--fs-24)}
  .flag svg{width:18px;height:12px}

  .btn--xs{height:var(--btn-h-xs);padding:0 var(--sp-16)}
  .to-top{width:48px;height:48px;right:var(--sp-16);bottom:var(--sp-16)}
  .to-top svg{width:18px;height:18px}

  .hero{height:auto;min-height:calc(100vh / var(--z));padding:0}
  .hero-inner{justify-content:center;padding:0 var(--sp-24)}
  .hero-logo{width:215px}
  .hero-dates{margin-top:26px;line-height:1.25}
  .hero-soon{margin-top:var(--sp-24);line-height:1.1}
  .hero-note{margin-top:7px;line-height:1.3}

  .intro-lead{font-size:var(--fs-36);line-height:1.3;margin-bottom:var(--sp-32)}
  .intro-title,.intro-text{font-size:var(--fs-24);line-height:var(--lh-loose)}
  .stats{grid-template-columns:1fr 1fr;gap:var(--sp-24);margin-top:var(--sp-32)}
  .stats b{line-height:.95}
  .stats span{margin-top:var(--sp-8);font-size:var(--fs-18);line-height:1.3}

  .what h2 .line2 .wm{margin-left:.25em;margin-right:.06em;margin-bottom:-.024em}

  .cards{margin-top:var(--head-gap);gap:var(--sp-16)}
  .card{border-radius:18px;padding:14px}
  .card-label{top:10px;padding:10px 22px;border-radius:0 0 10px 10px}
  .card-img{border-radius:var(--r-sm)}
  .card-body{padding:14px 0 0}
  .card-body h3{line-height:1.15}
  .card-body p{margin-top:var(--sp-12);line-height:1.3}
  .card-wide .card-body{padding-right:74px}
  .btn-icon{width:54px;height:54px;right:14px;bottom:14px}
  .btn-icon svg{width:18px;height:18px}

  .decide-title{line-height:1.1}
  .decide-title .oval{top:-.3em;left:-.22em}
  .decide-copy p{line-height:1.4}

  .tema-grid{grid-template-columns:1fr 1fr;gap:10px;padding:0 var(--sp-12)}
  .tema{height:74px;border-radius:var(--r-sm)}
  .tema span{left:var(--sp-12);top:9px;font-size:var(--fs-13);line-height:1.25}
  .tema b{left:var(--sp-12);top:auto;bottom:10px;font-size:25px;line-height:28px;letter-spacing:-.7px}
  .tema i{width:26px;height:26px;right:var(--sp-8);top:9px;border-radius:4px}
  .tema i svg{width:12px;height:12px}
  .sector{border-radius:20px;padding-bottom:var(--sp-16)}
  .sector--business .sector-bg{height:150px;background-size:100% 150px}
  .sector-head{padding:var(--sp-24) 0 14px}
  .sector--health .sector-head{padding-top:var(--sp-24)}
  .sector--business .sector-head{padding-top:18px}
  .sector--health .sector-head img{width:140px;height:26px}
  .sector--business .sector-head img{width:180px;height:auto}

  .why-grid p,.info-cols p{line-height:1.4}
  .link-arrow{font-size:var(--fs-24);border-bottom-width:2px}

  .venue-row{grid-template-columns:96px 1fr;gap:var(--sp-8)}
  .venue-row dd b{line-height:1.24}
  .why-grid article::before,.info-cols article::before{display:none}
  .venue-map-canvas{aspect-ratio:710/490}
  .venue-map-foot{height:38px;padding:0 14px;font-size:var(--fs-18);white-space:nowrap}

  .cta-in h2{line-height:1.1}
  .cta-copy p{margin-top:14px;line-height:var(--lh-loose)}

  .ft{padding:var(--sp-32) 0 var(--sp-16)}
  .ft-top{grid-template-columns:1fr 1fr;gap:26px 20px}
  .ft-brand{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16)}
  .ft-brand img{width:112px}
  .ft-social{margin-top:0;gap:14px}
  .ft-col h2{margin-bottom:10px}
  .ft-col li a{padding:5px 0}
  .ft-venue{grid-column:1 / -1;border-top:var(--hr) solid var(--line-dark);padding-top:22px}
  .ft-venue p{line-height:1.4}
  .ft-mail{margin-top:10px}
  .news{margin-top:var(--sp-12)}
  .ft-bottom{margin-top:var(--sp-24);font-size:var(--fs-13);gap:var(--sp-12)}
  .ft-legal{gap:var(--sp-8) 14px}

  /* Hero compacto: mismo formato que en escritorio (logo, entradilla y fechas
     al ras de la rejilla) pero a menor escala y sin aire de más. */
  .ph-hero{min-height:250px;padding:0 0 var(--sp-32)}
  .ph-hero-dates{font-size:var(--fs-24);line-height:1.25}
  .ph-hero-dates{margin-top:var(--sp-12)}
  /* El salto fijo de la entradilla de perfiles sobra en una columna */
  .ph-br{display:none}
  .ph-list li{padding:var(--sp-24) 0}
  .ph-cta-actions{flex-wrap:wrap;gap:var(--sp-12)}

  .page-simple{padding:110px 0 var(--sp-32)}
  .page-title{line-height:1.1}
  .page-content{font-size:var(--fs-24)}
}

/* ═══════════ CONGRESO · tablet ≤1199 ═══════════
   Un solo carril: el titular encima y el texto debajo. Las fichas de ponentes
   pasan a una tira que se desliza, y los cinco temas, a una columna. */
@media (max-width:1199px){
  .lockup{gap:var(--sp-12)}
  .lockup-wm{height:32px}
  .lockup-slash,.lockup-tag{font-size:var(--type-lockup)}

  .cg-split{grid-template-columns:1fr;gap:var(--sp-32)}
  .cg-copy p + p{margin-top:var(--sp-16)}

  .cg-dato{margin-top:var(--sp-64)}
  .cg-dato-note{max-width:none}

  .cg-voices{--cg-card:300px;--cg-gap:var(--sp-24);--cg-bleed:0px;--cg-end:40px}
  .cg-speakers{margin-top:var(--sp-48)}
  .cg-speaker img{width:calc(var(--cg-card) * .7714);margin:0 auto}
  .cg-plaque{height:68px;margin-top:0}
  .cg-plaque b{font-size:var(--fs-20)}
  .cg-plaque span{font-size:var(--fs-13)}
  .cg-progress{width:220px;margin-top:var(--sp-40)}

  .cg-temas .sec-head h2,.cg-temas .deck{width:auto}
  .cg-tema-list li{grid-template-columns:1fr;gap:var(--sp-12);padding:var(--sp-24) 0}
  .cg-tema-list p{max-width:none}

  .cg-2027-actions{margin-top:var(--sp-32)}
}

/* ═══════════ CONGRESO · móvil ≤767 ═══════════ */
@media (max-width:767px){
  .lockup-wm{height:26px}
  .cg-voices{--cg-card:248px;--cg-gap:var(--sp-20);--cg-end:0px}
  .cg-speaker img{width:calc(var(--cg-card) * .7714);margin:0 auto}
  .cg-plaque{height:62px;margin-top:0}
  .cg-2027-actions .btn{width:100%}
}

/* ═══════════ EXPOSITORES ═══════════
   Sectores, partners, catálogo de 2026 desplegable, ficha de marca y cierre.
   Todo con las piezas del sistema: mismos filetes, mismos roles de texto. */

/* Hero: la misma pieza que Showroom y Congreso, con la foto del pabellón */
/* ——— HEROES DE SECCIÓN · frames de Figma ———
   En el diseño la foto no va a sangre: es una pieza de 1302×540 anclada al
   borde derecho sobre el negro, con su degradado ya horneado en la imagen.
   El velo de .ph-hero::before no se usa aquí: lo trae la propia foto. */
.ex-hero,.xp-hero,.gl-hero,.in-hero,.pg-hero{
  background-color:var(--deep);background-position:right center;
  background-size:auto 100%;background-repeat:no-repeat;
}
.ex-hero{background-image:url('../img/hero-expositores.jpg')}
.xp-hero{background-image:url('../img/hero-exponer.jpg')}
.gl-hero{background-image:url('../img/hero-galeria.jpg')}
.in-hero{background-image:url('../img/hero-informacion.jpg')}
.pg-hero{background-image:url('../img/hero-programa.jpg')}
.ex-hero::before,.xp-hero::before,.gl-hero::before,.in-hero::before,.pg-hero::before{background:none}

/* Siete sectores: dos columnas con filetes, como el frame */
.ex-sectors{margin-top:var(--head-gap);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:var(--hr) solid var(--line)}
.ex-sector{margin:0;padding:var(--sp-32) var(--sp-32) var(--sp-32) 0;border-bottom:var(--hr) solid var(--line);font-size:var(--type-headline);font-weight:700;line-height:var(--lh-heading);letter-spacing:var(--ls-md)}
.ex-sector:nth-child(even){padding-left:var(--sp-32);padding-right:0;border-left:var(--hr) solid var(--line)}
.ex-note{margin-top:var(--sp-24);font-size:var(--type-footnote);font-style:italic;line-height:var(--lh-body);color:var(--ink-55)}

/* Partners */
.ex-partners{margin-top:var(--head-gap);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-40);align-items:center}
.ex-partners img{width:100%;max-width:200px;height:auto;object-fit:contain}

/* Desplegable de marcas 2026 */
.ex-drop-head{margin-top:var(--sp-48);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-48)}
.ex-drop-head .ex-note{margin-top:0;max-width:560px}
.ex-toggle{flex:none}
.ex-chev{width:14px;height:14px;transition:transform var(--t) var(--ease)}
.ex-toggle[aria-expanded="true"] .ex-chev{transform:rotate(180deg)}
.ex-brands-wrap{margin-top:var(--sp-48)}
.ex-brands-lead{margin-bottom:var(--sp-24);font-size:var(--type-footnote);color:var(--ink-55)}
.ex-brands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:var(--hr) solid var(--line);border-left:var(--hr) solid var(--line)}
.ex-brands li{display:grid;place-items:center;min-height:160px;padding:var(--sp-16);border-right:var(--hr) solid var(--line);border-bottom:var(--hr) solid var(--line)}
.ex-brands img{max-width:98%;max-height:88px;width:auto;height:auto;object-fit:contain}

/* Cada marca, con su ficha */
.ex-ficha-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--sp-64);align-items:start}
.ex-ficha-h{font-size:var(--fs-70);font-weight:700;line-height:var(--lh-title);letter-spacing:var(--ls-xl);color:#fff;text-wrap:balance}
.ex-ficha-copy{margin-top:var(--sp-24);max-width:560px;font-size:var(--t-body);line-height:var(--lh-body);color:rgba(255,255,255,.78)}
.ex-ficha-btn{margin-top:var(--sp-48)}
.ex-ficha-list{margin:0;padding:0;list-style:none}
.ex-ficha-list li{padding:var(--sp-32) 0;border-top:var(--hr) solid var(--line-dark)}
.ex-ficha-list li:first-child{padding-top:0;border-top:0}
.ex-ficha-list h3{font-size:var(--type-headline);font-weight:700;color:var(--lime)}
.ex-ficha-list p{margin-top:var(--sp-8);font-size:var(--t-body);line-height:var(--lh-body);color:rgba(255,255,255,.72)}

@media (max-width:1199px){
  .ex-sectors{grid-template-columns:1fr}
  .ex-sector{padding-right:0}
  .ex-sector:nth-child(even){padding-left:0;border-left:0}
  .ex-partners{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-32)}
  .ex-brands{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ex-brands li{min-height:132px;padding:var(--sp-16)}
  .ex-brands img{max-height:76px}
  .ex-drop-head{flex-direction:column;align-items:flex-start;gap:var(--sp-24)}
  .ex-ficha-grid{grid-template-columns:1fr;gap:var(--sp-48)}
  .ex-ficha-btn{margin-top:var(--sp-32)}
}

@media (max-width:767px){
  .ex-brands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ex-brands li{min-height:112px}
  .ex-brands img{max-height:64px}
  /* En móvil el botón cierra el bloque: primero el titular y su texto, luego
     los tres apartados y al final la llamada. El div se disuelve para que sus
     hijos se ordenen junto a la lista, sin duplicar el marcado. */
  .ex-ficha-grid{row-gap:0}
  .ex-ficha-grid>div{display:contents}
  .ex-ficha-grid .ex-ficha-list{order:2;margin-top:var(--sp-32)}
  .ex-ficha-grid .ex-ficha-btn{order:3;margin-top:var(--sp-40);justify-self:start}
}

/* La pincelada de «¿A qué vienes?» detrás de la segunda línea del titular.
   Se mide en % del propio texto y se centra en la línea, así encaja igual a
   cualquier tamaño; el z-index negativo la deja debajo de las letras. */
.ex-mark{position:relative;isolation:isolate;display:inline-block;white-space:nowrap}
.ex-mark img.mark{position:absolute;left:-.03em;top:50%;width:106%;height:auto;max-width:none;z-index:-1;transform:translateY(-50%);pointer-events:none}
/* Óvalo de rotulador detrás de una frase: el mismo trazo de Inicio, estirado
   al ancho y alto reales del texto para que lo abrace en cualquier escala. */
.oval-wrap{position:relative;isolation:isolate;display:inline-block}
.oval-wrap .oval{position:absolute;left:-4%;top:-27%;width:108%;height:154%;max-width:none;z-index:-1;pointer-events:none}
.oval-wrap--block .oval{left:-3%;top:-9%;width:106%;height:118%}
/* Pincelada de rotulador detrás de una frase: el trazo existente se estira al
   ancho real del texto, así encaja igual en una línea que en dos. */
.mk-brush{background:url('../img/mark-vienes.png') center/106% 100% no-repeat;padding:0 .04em;margin:0 -.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ——— EXPONER ———
   Las tres láminas del Figma: hero con foto de pabellón, una intro con tres
   razones, el bloque oscuro del formulario y las modalidades de stand. Los h2
   de sección van a --type-title-xl (64), un paso por encima del resto del
   sitio, como en el diseño; en tablet y móvil bajan con la escala. */
.xp-sec{padding:var(--sec-y) 0}.sec-h2-xl{font-size:var(--type-large-title);line-height:var(--lh-title);letter-spacing:var(--ls-xl);font-weight:700;text-wrap:balance}

/* Tres razones: filete superior continuo y separadores entre columnas */
.xp-facts{margin-top:var(--head-gap);padding-top:var(--head-gap);border-top:var(--hr) solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-40)}
.xp-facts>div{padding-left:var(--sp-40);border-left:var(--hr) solid var(--line)}
.xp-facts>div:first-child{padding-left:0;border-left:0}
.xp-facts h3{font-size:var(--fs-36);font-weight:700;line-height:var(--lh-heading);letter-spacing:var(--ls-md)}
.xp-facts p{margin-top:var(--sp-16);max-width:34ch;font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--ink-70)}

/* Bloque oscuro: copy a la izquierda, tarjeta blanca a la derecha */
.xp-form-sec{padding:var(--sec-y) 0;background:var(--deep);color:#fff}
.xp-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,608px);gap:var(--sp-80);align-items:center}
.xp-lead{margin-top:var(--sp-48);max-width:34ch;font-size:var(--t-body-lg);font-weight:600;line-height:var(--lh-lead);letter-spacing:var(--ls-body)}
.xp-text{margin-top:var(--sp-24);max-width:44ch;font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:rgba(255,255,255,.92)}
.xp-text a{color:var(--lime);text-decoration:underline;text-underline-offset:.2em}

.xp-card{position:relative;padding:var(--sp-32);border-radius:12px;background:var(--paper);color:var(--ink)}
.xp-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-16)}
.xp-field{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}
.xp-field--full{grid-column:1/-1}
.xp-field label{font-size:var(--fs-13);font-weight:700;line-height:1.4;letter-spacing:var(--ls-body)}
.xp-req{color:#D92D20}
.xp-field input,.xp-field textarea{width:100%;height:56px;padding:0 var(--sp-16);font:inherit;font-size:var(--fs-13);letter-spacing:var(--ls-body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.xp-field textarea{height:124px;min-height:124px;padding:var(--sp-12) var(--sp-16);line-height:1.45;resize:vertical}
.xp-field input::placeholder,.xp-field textarea::placeholder{color:var(--ink-55)}
.xp-field input:hover,.xp-field textarea:hover{border-color:rgba(0,0,31,.32)}
.xp-field input:focus,.xp-field textarea:focus{border-color:var(--ink)}
.xp-field input:focus-visible,.xp-field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.xp-field input[aria-invalid="true"],.xp-field textarea[aria-invalid="true"]{border-color:#D92D20;box-shadow:0 0 0 1px #D92D20}
.xp-err{margin:0;font-size:var(--fs-13);line-height:1.35;color:#D92D20}

/* Casilla de privacidad: el input real queda oculto pero sigue siendo el foco */
.xp-check{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--sp-12);align-items:start;font-size:var(--fs-13);font-weight:400;line-height:1.45;color:var(--ink-70);cursor:pointer}
.xp-check input{position:absolute;width:0;height:0;opacity:0}
.xp-check-box{display:grid;place-items:center;width:20px;height:20px;margin-top:2px;border:1px solid var(--line);border-radius:4px;background:var(--paper);transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease)}
.xp-check-box svg{width:14px;height:14px;fill:none;stroke:var(--paper);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--t) var(--ease)}
.xp-check input:checked+.xp-check-box{background:var(--ink);border-color:var(--ink)}
.xp-check input:checked+.xp-check-box svg{opacity:1}
.xp-check input:focus-visible+.xp-check-box{outline:2px solid var(--ink);outline-offset:2px}
.xp-check a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.xp-check input[aria-invalid="true"]+.xp-check-box{border-color:#D92D20;box-shadow:0 0 0 1px #D92D20}

.xp-submit{grid-column:1/-1;width:100%;margin-top:var(--sp-8)}
.xp-note{grid-column:1/-1;margin:0;text-align:center;font-size:var(--fs-13);line-height:1.4;color:var(--ink-55)}

/* Confirmación: aparece ENCIMA del formulario, dentro de la misma tarjeta. El
   formulario no se desmonta, solo se cubre, para que la tarjeta no encoja y el
   aviso entre y salga como una capa. */
.xp-form.is-covered{visibility:hidden}
.xp-ok{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:var(--sp-16);padding:var(--sp-32);border-radius:inherit;background:var(--paper);text-align:center;opacity:0;transform:translateY(8px);transition:opacity .26s var(--ease),transform .26s var(--ease);pointer-events:none}
.xp-ok.is-open{opacity:1;transform:none;pointer-events:auto}
.xp-ok:focus{outline:none}
@media (prefers-reduced-motion:reduce){.xp-ok{transition:none;transform:none}}
.xp-ok-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--lime);color:var(--ink)}
.xp-ok-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.xp-ok h3{font-size:var(--fs-36);font-weight:700;line-height:var(--lh-heading);letter-spacing:var(--ls-md)}
.xp-ok p{max-width:30ch;font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--ink-70)}
.xp-ok p b{color:var(--ink);font-weight:700;overflow-wrap:anywhere}

/* Modalidades de stand */
.xp-stand-grid{margin-top:var(--head-gap);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-24)}
.xp-stand-grid img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-md)}
.xp-stand-grid h3{margin-top:var(--sp-24);font-size:var(--fs-28);font-weight:700;line-height:var(--lh-heading);letter-spacing:var(--ls-md)}
.xp-stand-grid p{margin-top:var(--sp-16);font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--ink-70)}
.xp-stand-foot{display:flex;justify-content:flex-end;margin-top:var(--sp-40)}

@media (max-width:1199px){.sec-h2-xl{font-size:var(--type-large-title)}
  .xp-form-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-48)}
  .xp-lead{margin-top:var(--sp-32)}
  .xp-card{max-width:608px}
}
@media (max-width:1023px){
  .xp-facts{grid-template-columns:minmax(0,1fr);gap:0}
  .xp-facts>div{margin-top:var(--sp-24);padding:var(--sp-24) 0 0;border-left:0;border-top:var(--hr) solid var(--line)}
  .xp-facts>div:first-child{margin-top:0;padding-top:0;border-top:0}
  .xp-stand-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-48)}
  .xp-stand-foot{justify-content:flex-start}
}
@media (max-width:767px){.sec-h2-xl{font-size:var(--type-large-title)}
  .xp-form{grid-template-columns:minmax(0,1fr)}
  .xp-card{padding:var(--sp-24)}
  .xp-ok{padding:var(--sp-24) var(--sp-16)}
}

/* ——— GALERÍA ———
   Mosaico de tres columnas sobre un módulo fijo: la mayoría de las fotos ocupan
   una celda, pero algunas doblan ancho (panorámicas del pabellón) o ancho y alto
   (las que abren cada tramo). `dense` recoloca las piezas para que no queden
   huecos aunque el orden cambie. */
.gl-grid{margin-top:var(--head-gap);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:320px;grid-auto-flow:dense;gap:var(--sp-16)}
.gl-item{position:relative;margin:0;overflow:hidden;border-radius:var(--r-md);background:var(--line)}
.gl-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gl-item:hover img{transform:scale(1.03)}
.gl-item--wide{grid-column:span 2}
.gl-item--full{grid-column:1/-1}
.gl-item--big{grid-column:span 2;grid-row:span 2}

@media (max-width:1199px){
  .gl-grid{grid-auto-rows:280px}
}
@media (max-width:1023px){
  .gl-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:240px}
  .gl-item--wide{grid-column:auto}
}
@media (max-width:767px){
  .gl-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:var(--sp-8)}
  .gl-item--wide,.gl-item--full,.gl-item--big{grid-column:auto;grid-row:auto}
  .gl-item img{height:auto;aspect-ratio:3/2}
}

/* — Información · adaptaciones — */
@media (max-width:1199px){
  .info-split,.hours-grid,.press-grid{gap:var(--sp-48)}
  .ways{grid-template-columns:repeat(2,minmax(0,1fr))}
  .way:nth-child(odd){border-left:0;padding-left:0}
  .way:nth-child(n+3){border-top:var(--hr) solid var(--line-dark)}
}
@media (max-width:1023px){
  .info-split,.hours-grid,.press-grid{grid-template-columns:1fr;gap:var(--sp-40)}
  .hours-table{margin-top:var(--sp-8)}
    .venue-map--wide .venue-map-canvas{aspect-ratio:16/9}
}
@media (max-width:767px){
  .ways{margin-top:var(--sp-48);grid-template-columns:1fr}
  .way{border-left:0;padding:var(--sp-24) 0;border-top:var(--hr) solid var(--line-dark)}
  .way:first-child{border-top:0;padding-top:0}
  .venue-map--wide{margin-top:var(--sp-48)}
  .venue-map--wide .venue-map-canvas{aspect-ratio:4/3}
  .venue-map-tag{display:none}
  .info-card{padding:var(--sp-24)}
  .venue-list--light .venue-row{grid-template-columns:88px 1fr;margin-bottom:var(--sp-20)}
  .press-card{padding:var(--sp-24)}
  .acc-list li{font-size:var(--fs-18)}
  .acc-list b{font-size:var(--fs-18)}
  }

/* ——— LISTA DE ESPERA ———
   La misma gramática que el resto: hero con foto y lockup, alta con tarjeta,
   las dos entradas, qué incluye, dudas y cierre lima. Las dos entradas se
   dibujan como en el diseño (tarjeta oscura con el mapa de curvas detrás),
   no como píldoras: son piezas de contenido, no botones. */

.wt-hero{background-image:url('../img/hero-visita.jpg')}
.wt-hero::before{background:linear-gradient(90deg,rgba(0,3,22,.88) 0%,rgba(0,3,22,.66) 44%,rgba(0,3,22,.34) 100%)}

/* Alta: titular con óvalo a la izquierda y tarjeta a la derecha */
.wt-signup{padding:var(--sec-y) 0}
.wt-signup-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,760px);gap:var(--sp-80);align-items:start}
.wt-copy{margin-top:var(--sp-48)}
.wt-copy p{max-width:34ch;font-size:var(--t-body-lg);font-weight:600;line-height:var(--lh-lead);letter-spacing:var(--ls-body)}
.wt-copy p + p{margin-top:var(--sp-24);font-weight:400;max-width:36ch;color:var(--ink-70)}
.wt-copy a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

.wt-card{position:relative;border:3px solid var(--ink);border-radius:15px;padding:var(--sp-40)}
.wt-card h3{font-size:var(--type-title-1);font-weight:600;line-height:var(--lh-heading);letter-spacing:var(--ls-md)}
.wt-card-sub{margin-top:var(--sp-8);font-size:var(--type-subhead);line-height:var(--lh-lead);color:var(--ink-70)}
.wt-form{margin-top:var(--sp-32);display:block}
.wt-form.is-covered{visibility:hidden}
.wt-form .xp-field label{font-weight:600;color:var(--ink)}
.wt-form .xp-submit{margin-top:var(--sp-24)}
.wt-card .xp-check{margin-top:var(--sp-20)}
.wt-note{margin-top:var(--sp-16);text-align:center;font-size:var(--fs-13);line-height:1.4;color:var(--ink-55)}

/* Dos entradas: réplica 1:1 de los frames «entrada 19» y «entrada 9».
   Cada texto y cada botón va en absoluto sobre un lienzo de 750 x 713 que se
   escala con --k (1px del diseño), así que la tarjeta es idéntica al Figma a
   cualquier ancho. */
.wt-tickets-sec{padding:var(--sec-y) 0;background:var(--lime)}
.wt-tickets{margin-top:var(--head-gap);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px;max-width:1519px;margin-inline:auto}
.wt-tk{position:relative;container-type:inline-size;border-radius:20px;box-shadow:0 15px 20px rgba(0,0,0,.25)}
.wt-tk-in{position:relative;aspect-ratio:750/713;overflow:hidden;border-radius:20px;background:#000 no-repeat;background-size:100% 100%;color:#fff;--k:calc(100cqw / 750)}
.wt-tk--3 .wt-tk-in{background-image:url(../img/tickets/bg-tres-dias.jpg)}
.wt-tk--1 .wt-tk-in{background-image:url(../img/tickets/bg-un-dia.jpg)}
.wt-tk-in > *{position:absolute;margin:0}
.wt-tk-logo{left:calc(54*var(--k));top:calc(30*var(--k));width:calc(241*var(--k));height:auto}
/* Sello lima, rectángulo de 190 x 98 con radio 10 y texto en Impact */
.wt-tk-badge{left:calc(530*var(--k));top:calc(30*var(--k));display:flex;align-items:center;justify-content:center;width:calc(190*var(--k));height:calc(98*var(--k));padding:0 calc(12*var(--k));border-radius:calc(10*var(--k));background:var(--lime);color:var(--ink);text-align:center}
.wt-tk-badge span{font-family:var(--disp);font-size:calc(32*var(--k));line-height:calc(39*var(--k));letter-spacing:calc(-.64*var(--k));text-transform:uppercase;white-space:nowrap}
.wt-tk-kind{left:calc(54*var(--k));top:calc(148*var(--k));font-size:calc(30.44*var(--k));line-height:calc(36.84*var(--k));font-weight:900;letter-spacing:calc(-1.22*var(--k));color:var(--lime);text-transform:uppercase;white-space:nowrap}
.wt-tk-date{left:calc(54*var(--k));top:calc(188*var(--k));font-size:calc(26.14*var(--k));line-height:calc(31.63*var(--k));font-weight:700;letter-spacing:calc(-1.05*var(--k));color:#fff;white-space:nowrap}
/* Precio anterior con el trazo lima en diagonal del diseño */
.wt-tk-old{left:calc(457*var(--k));top:calc(189*var(--k));font-size:calc(58.16*var(--k));line-height:calc(70.39*var(--k));font-weight:700;color:#fff;white-space:nowrap}
.wt-tk-old s{position:relative;display:inline-block;text-decoration:none}
.wt-tk-old s::after{content:"";position:absolute;left:calc(6.6*var(--k));top:calc(63.9*var(--k));width:calc(115.2*var(--k));height:calc(5.8*var(--k));border-radius:calc(3*var(--k));background:var(--lime);transform:rotate(-29.9deg);transform-origin:0 50%}
.wt-tk-price{top:calc(229*var(--k));display:flex;align-items:center;height:calc(212*var(--k));font-size:calc(175*var(--k));font-weight:700;line-height:1;letter-spacing:-.07em;color:var(--lime)}
.wt-tk--3 .wt-tk-price{left:calc(220*var(--k));width:calc(310*var(--k))}
.wt-tk--1 .wt-tk-price{left:calc(257*var(--k));width:calc(236*var(--k));justify-content:center}
.wt-tk-inc{left:calc(243*var(--k));top:calc(425*var(--k));width:calc(263*var(--k));text-align:center;font-size:calc(28*var(--k));line-height:calc(33.89*var(--k));font-weight:800;letter-spacing:calc(-1.12*var(--k));text-transform:uppercase}
.wt-tk-inc b{display:block;font-size:calc(43*var(--k));line-height:calc(52.05*var(--k));font-weight:900;letter-spacing:calc(-1.72*var(--k));color:var(--lime)}
/* Botones: 700 x 64, radio 15, dentro a 25 del borde */
.wt-tk-btn{left:calc(25*var(--k));display:flex;align-items:center;justify-content:center;gap:calc(20*var(--k));width:calc(700*var(--k));height:calc(64*var(--k));border-radius:calc(15*var(--k));font-size:calc(26*var(--k));font-weight:700;line-height:1;letter-spacing:calc(-1.04*var(--k));text-decoration:none;text-transform:uppercase;transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.wt-tk-btn:focus-visible{outline:calc(3*var(--k)) solid #fff;outline-offset:calc(4*var(--k))}
.wt-tk-pack{top:calc(545*var(--k));border:calc(3*var(--k)) solid var(--lime);background:#000;color:#fff}
.wt-tk-pack em{font-style:normal;color:var(--lime)}
.wt-tk-buy{top:calc(624*var(--k));background:var(--lime);color:var(--ink);font-size:calc(28*var(--k));font-weight:800;letter-spacing:calc(-1.12*var(--k))}
.wt-tk-buy:focus-visible{outline-color:var(--ink)}
/* El hover no cambia el color de los botones: solo mueve el chevrón */
.wt-tk-pack:hover{background:#000;color:#fff}
.wt-tk-buy:hover{background:var(--lime);color:var(--ink)}
.wt-tk-chev{flex:none;width:calc(8*var(--k));height:calc(13.7*var(--k));transition:transform var(--t) var(--ease)}
.wt-tk-chev path{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.wt-tk-btn:hover .wt-tk-chev{transform:translateX(calc(4*var(--k)))}
.wt-tickets-foot{margin-top:var(--sp-40);text-align:center;font-size:var(--t-body);line-height:var(--lh-body)}
.wt-tickets-foot a{font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}

/* Lo que incluye: sobre negro, tres columnas con filetes */
.wt-includes{padding:var(--sec-y) 0;background:var(--deep);color:#fff}
.wt-includes .info-cols{margin-top:var(--head-gap);padding-top:var(--head-gap);border-top-color:var(--line-dark)}
.wt-includes .info-cols article::before{background:var(--line-dark)}
.wt-includes h3{color:var(--lime)}
.wt-includes .info-cols p{color:rgba(255,255,255,.82)}

/* Antes de comprar: titular a la izquierda y dudas a la derecha */
.wt-faq-sec{padding:var(--sec-y) 0}
.wt-faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,760px);gap:var(--sp-80);align-items:start}
.wt-faq-copy p{margin-top:var(--sp-24);font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-70)}
.wt-faq-copy a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.wt-faq{margin-top:0}
.wt-faq details{border-bottom:var(--hr) solid var(--line)}
.wt-faq details:first-child summary{padding-top:0}
.wt-faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-24);padding:var(--sp-20) 0;font-size:var(--fs-36);font-weight:700;line-height:var(--lh-heading);letter-spacing:var(--ls-md);color:var(--ink);cursor:pointer;list-style:none}
.wt-faq summary::-webkit-details-marker{display:none}
.wt-faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wt-faq summary svg{flex:none;width:22px;height:22px;stroke-width:2}
.wt-faq summary .wt-v{transition:opacity var(--t) var(--ease)}
.wt-faq details[open] summary .wt-v{opacity:0}
.wt-faq p{padding:0 0 var(--sp-24);max-width:60ch;font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-70)}
.wt-faq p a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

@media (max-width:1199px){
  .wt-signup-grid,.wt-faq-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-48)}
  .wt-copy{margin-top:0}
  .wt-copy p,.wt-copy p + p{max-width:none}
  .wt-card{max-width:608px;padding:var(--sp-32)}
  .wt-tickets{grid-template-columns:minmax(0,1fr);gap:var(--sp-24)}
  .wt-tk{width:100%;max-width:750px;margin-inline:auto}
  .wt-includes .info-cols{margin-top:var(--sp-40);padding-top:0;border-top:0}
  .wt-faq{margin-top:var(--sp-32)}
}

@media (max-width:767px){
  .wt-card{padding:var(--sp-24)}
  .wt-card h3{line-height:1.2}
  .wt-faq summary{padding:var(--sp-16) 0}
}

/* ══════════ PROGRAMA (frames 10:5373 y 14:7371) ══════════ */
.pg-hero{color:#fff}
.pg-sec{padding:var(--sec-y) 0}
.pg-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-40);flex-wrap:wrap}
.pg-title{font-size:var(--t-large-title);font-weight:800;line-height:var(--lh-title);letter-spacing:var(--ls-xl)}
.pg-title .ph-brush{z-index:0}
.pg-deck{margin-top:var(--sp-24);max-width:44ch;font-size:var(--t-body-lg);font-weight:600;line-height:var(--lh-lead);letter-spacing:var(--ls-body)}
.pg-dl{text-transform:none}
.pg-tabs{margin-top:var(--head-gap);display:flex;gap:var(--sp-32);border-bottom:var(--hr) solid var(--line)}
.pg-tab{position:relative;padding:0 0 var(--sp-16);background:none;border:0;cursor:pointer;font-size:var(--t-title-2);font-weight:500;line-height:var(--lh-heading);letter-spacing:var(--ls-md);color:var(--ink-40);opacity:.5;transition:color var(--t) var(--ease),opacity var(--t) var(--ease)}
.pg-tab:hover{color:var(--ink-70);opacity:.75}
.pg-tab.is-on{color:var(--ink);font-weight:700;opacity:1}
.pg-tab.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
.pg-filters{margin-top:var(--sp-32);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-32);flex-wrap:wrap}
.pg-filter{display:flex;align-items:center;gap:var(--sp-16);flex-wrap:wrap}
.pg-label{font-size:var(--t-body);color:var(--ink-55)}
.pg-chips{display:flex;gap:var(--sp-8);flex-wrap:wrap}
.pg-chip{height:var(--btn-h-xs);padding:0 var(--sp-20);border:var(--hr) solid var(--line);border-radius:var(--r-pill);background:#fff;font-size:var(--t-body);font-weight:500;line-height:1;color:var(--ink-70);cursor:pointer;transition:background-color var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease)}
.pg-chip:hover{border-color:var(--ink)}
.pg-chip.is-on{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:700}
/* Cada temática conserva su color en el filtro, como en la tabla */
.pg-chip--forum{background:#EBF1D9;border-color:#DDE8C2;color:#45571A}
.pg-chip--health{background:#E1ECF4;border-color:#CFE1EE;color:#20516F}
.pg-chip--wellness{background:#EFE4F3;border-color:#E3D3EA;color:#5C3170}
.pg-chip--forum:hover{border-color:#6B7F2A}
.pg-chip--health:hover{border-color:#2A6588}
.pg-chip--wellness:hover{border-color:#6B3A80}
.pg-chip--forum.is-on{background:#5F7326;border-color:#5F7326;color:#fff}
.pg-chip--health.is-on{background:#265C7D;border-color:#265C7D;color:#fff}
.pg-chip--wellness.is-on{background:#6B3A80;border-color:#6B3A80;color:#fff}
.pg-search{display:flex;align-items:center;gap:var(--sp-12);width:458px;max-width:100%;height:52px;padding:0 var(--sp-20);border:var(--hr) solid var(--line);border-radius:var(--r-md);background:#fff}
.pg-search svg{width:var(--ico-20);height:var(--ico-20);flex:none;fill:none;stroke:var(--ink-55);stroke-width:var(--ico-stroke);stroke-linecap:round}
.pg-search input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:var(--fs-input);color:var(--ink)}
.pg-meta{margin-top:var(--sp-40);display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-24);flex-wrap:wrap}
.pg-count{font-size:var(--t-body-lg);font-weight:600;letter-spacing:var(--ls-body)}
.pg-order{font-size:var(--t-body);color:var(--ink-55)}
/* Cada día abre con su banda oscura: entre 25 y 68 filas de filetes finos, el
   día tiene que verse antes de leerlo. Es la misma pieza en Programa y en la
   temática, así la tabla se lee igual en las dos. */
.pg-day{margin-top:var(--sec-y)}
.pg-day:first-child{margin-top:var(--head-gap)}
.pg-day-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-24);flex-wrap:wrap;padding:var(--sp-20) var(--sp-40);border-radius:var(--r-md);background:var(--deep);color:#fff}
.pg-day-head h2{font-size:var(--t-title-1);font-weight:700;line-height:var(--lh-title);letter-spacing:var(--ls-lg);color:#fff}
.pg-day-head span{font-size:var(--t-body);font-weight:600;color:var(--lime)}
.pg-thead,.pg-row{display:grid;grid-template-columns:96px minmax(0,1fr) 200px minmax(0,400px) 180px;gap:var(--sp-40);align-items:start}
/* La banda del día y los rótulos de columna no pueden ir pegados */
.pg-thead{padding:var(--sp-40) 0 var(--sp-12);border-bottom:var(--hr) solid var(--line)}
.pg-thead span{font-size:var(--t-footnote);font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-55)}
.pg-row{padding:var(--sp-24) 0;border-bottom:var(--hr) solid var(--line)}
.pg-hora{font-size:var(--t-body-lg);font-weight:700;line-height:var(--lh-heading)}
.pg-titulo{font-size:var(--t-body-lg);font-weight:600;line-height:var(--lh-heading);letter-spacing:var(--ls-body)}
.pg-esc{font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-70)}
.pg-pon{display:flex;flex-direction:column;gap:var(--sp-8);font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-55)}
.pg-ponente b{color:var(--ink);font-weight:700}
.pg-tem{display:flex;flex-direction:column;gap:var(--sp-8);align-items:flex-start}
.pg-pill{display:inline-block;padding:5px 13px;border-radius:var(--r-pill);font-size:var(--t-subhead);line-height:1.15}
.pg-pill--forum{background:#EBF1D9;color:#45571A}
.pg-pill--health{background:#E1ECF4;color:#20516F}
.pg-pill--wellness{background:#EFE4F3;color:#5C3170}
.pg-pro{display:flex;align-items:center;gap:6px;font-size:var(--t-footnote);color:var(--ink-55)}
.pg-pro svg{width:var(--ico-16);height:var(--ico-16);fill:none;stroke:currentColor;stroke-width:var(--ico-stroke);stroke-linecap:round}
.pg-source{margin-top:var(--sp-40);display:flex;justify-content:space-between;gap:var(--sp-24);font-size:var(--t-footnote);color:var(--ink-55);flex-wrap:wrap}
.pg-empty{padding:var(--sp-40) 0;font-size:var(--t-body-lg);color:var(--ink-55)}

/* Ponentes: recuadro de foto listo (si el dato trae `f`, se pinta la imagen;
   si no, quedan las iniciales) */
.pg-speakers{margin-top:var(--head-gap);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-16)}
.pg-sp{display:flex;align-items:flex-start;gap:var(--sp-16);padding:var(--sp-20);border:var(--hr) solid var(--line);border-radius:var(--r-md);background:#fff}
.pg-foto{position:relative;flex:none;width:88px;height:110px;border-radius:var(--r-sm);overflow:hidden;background:var(--paper-2);display:grid;place-items:center;font-size:var(--t-headline);font-weight:500;letter-spacing:.02em;color:var(--ink-55)}
.pg-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-foto img:not([src]),.pg-foto img[data-vacia]{display:none}
.pg-sp-copy h3{font-size:var(--t-body);font-weight:700;line-height:1.2;letter-spacing:var(--ls-body)}
.pg-sp-copy p{margin-top:4px;font-size:var(--t-footnote);line-height:1.35;color:var(--ink-55)}
.pg-sp-tags{margin-top:var(--sp-8);display:flex;gap:6px;flex-wrap:wrap}
.pg-sp-tags .pg-pill{padding:3px 9px;font-size:var(--t-footnote)}

/* Ficha emergente al pasar por un ponente de la tabla: pequeña, bajo el nombre */
.pg-tip{position:fixed;left:0;top:0;z-index:60;display:none;width:300px;max-width:calc(100vw - var(--sp-24));padding:var(--sp-12);gap:var(--sp-12);border:var(--hr) solid var(--line-dark);border-radius:var(--r-md);background:var(--ink);color:#fff;box-shadow:var(--shadow-3);pointer-events:none}
.pg-tip.is-on{display:flex;align-items:flex-start}
.pg-tip-foto{position:relative;flex:none;display:grid;place-items:center;width:48px;height:60px;border-radius:var(--r-sm);overflow:hidden;background:rgba(255,255,255,.10);font-size:var(--t-footnote);font-weight:500;color:var(--white-60)}
.pg-tip-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-tip-txt{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.pg-tip-txt b{font-size:var(--t-subhead);font-weight:700;line-height:var(--lh-heading);letter-spacing:var(--ls-body);color:#fff}
.pg-tip-rol{font-size:var(--t-footnote);line-height:1.3;color:var(--white-60)}
.pg-tip-tags{margin-top:var(--sp-6);display:flex;gap:var(--sp-4);flex-wrap:wrap}
.pg-tip-tags .pg-pill{padding:2px 8px;font-size:var(--t-caption)}
/* Sobre fondo oscuro, cada temática se aclara en vez de teñirse */
.pg-tip .pg-pill--forum{background:rgba(181,255,31,.16);color:#DCFF9B}
.pg-tip .pg-pill--health{background:rgba(126,190,240,.18);color:#B6DCF7}
.pg-tip .pg-pill--wellness{background:rgba(206,150,235,.18);color:#E3C3F2}

@media (max-width:1199px){
  .pg-thead,.pg-row{grid-template-columns:80px minmax(0,1fr) 160px minmax(0,300px) 150px;gap:var(--sp-24)}
  .pg-speakers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-tabs{margin-top:var(--sp-48)}
}
@media (max-width:767px){
  .pg-tab{font-size:var(--t-headline)}
  .pg-thead{display:none}
  /* Hora y escenario en la misma línea: se lee «12:15 · Escenario 1» y el
     titular queda debajo, a todo el ancho. */
  .pg-row{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"hora esc" "titulo titulo" "pon pon" "tem tem";gap:var(--sp-8) var(--sp-16);padding:var(--sp-20) 0;align-items:baseline}
  .pg-hora{grid-area:hora}
  .pg-esc{grid-area:esc;justify-self:end;text-align:right}
  .pg-titulo{grid-area:titulo}
  .pg-pon{grid-area:pon}
  .pg-tem{grid-area:tem}
  .pg-tem{flex-direction:row;align-items:center;gap:var(--sp-12)}
  .pg-speakers{grid-template-columns:minmax(0,1fr)}
  .pg-search{width:100%}
}

/* ══════════ TEMÁTICA · CONGRESO/PILATES (frame 40:9148) ══════════ */
/* El fondo del frame ya trae el degradado dentro (nodo 40:9152): negro de base
   y la foto anclada a la derecha, como en el diseño. Sin velo encima. */
/* Misma colocación que el resto de heroes: el texto se apoya en el pie del
   bloque, con el aire de --sp-80 debajo, en vez de quedar centrado. */
.tm-hero{background-color:var(--deep);background-image:url('../img/hero-pilates.jpg');background-position:right center;background-size:auto 100%;background-repeat:no-repeat}
.tm-hero::before{background:none}
.tm-intro{padding:var(--sec-y) 0}
.tm-intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,675px);grid-template-areas:"head note" "body note";align-items:start;gap:var(--sp-40) var(--sp-80)}
/* Tamaños del frame 40:9148: titular y «Voces» a 70, «Pilates en SOMA 2027» a 64.
   El resto del sitio usa la escala de 48; en esta capa manda el Figma. */
.tm-h2{grid-area:head;max-width:600px;font-size:var(--type-large-title);font-weight:700;line-height:var(--lh-title);letter-spacing:var(--ls-xl);text-wrap:balance}
/* El óvalo del sistema abraza la palabra, como el «2027» del Congreso */
.tm-ring{position:relative;display:inline-block;isolation:isolate}
.tm-ring img{position:absolute;left:-.07em;top:-.06em;width:calc(100% + .14em);height:calc(100% + .12em);max-width:none;z-index:-1;pointer-events:none}
/* La columna derecha entra un poco más abajo que el titular, como en el frame */
.tm-note{grid-area:note;max-width:675px;margin-top:var(--sp-24);font-size:var(--t-body-lg);line-height:var(--lh-body);color:var(--ink-70)}
.tm-note p + p{margin-top:var(--sp-24)}
.tm-body{grid-area:body;max-width:596px;font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-70)}

/* Tres fichas de ponente con las piezas del Congreso, repartidas a lo ancho */
.tm-voices{--cg-card:342px;padding:0 0 var(--sec-y)}
.tm-voices h2{font-size:var(--type-large-title)}
.tm-speakers{margin-top:var(--sp-64);display:grid;grid-template-columns:repeat(3,var(--cg-card));justify-content:space-evenly;align-items:start;gap:var(--sp-40);list-style:none}
.tm-speakers .cg-speaker{flex:none}

/* Tabla de la temática: hora, ponencia, ponentes y sello de la temática */
.tm-programa{padding:0 0 var(--sec-y)}
/* Mismo tamaño que el resto de cabeceras de sección del sitio, no una más grande */
.tm-h3{font-size:var(--type-large-title);font-weight:700;line-height:var(--lh-title);letter-spacing:var(--ls-xl);text-wrap:balance}
.tm-deck{margin-top:var(--sp-24);max-width:550px;font-size:var(--t-body-lg);font-weight:600;line-height:var(--lh-lead);letter-spacing:var(--ls-body)}
.tm-table{margin:var(--sp-24) 0 0;padding:0;list-style:none;border-top:var(--hr) solid var(--line)}
.tm-day{margin-top:var(--sp-48)}
/* Mismos rótulos que el programa, sobre la rejilla de esta tabla */
.tm-thead{grid-template-columns:96px minmax(0,1fr) 170px minmax(0,380px) 180px;gap:var(--sp-32);padding:var(--sp-40) 0 var(--sp-12)}
.tm-thead + .tm-table{margin-top:0;border-top:0}
.tm-row{display:grid;grid-template-columns:96px minmax(0,1fr) 170px minmax(0,380px) 180px;gap:var(--sp-32);align-items:start;padding:var(--sp-24) 0;border-bottom:var(--hr) solid var(--line)}
.tm-esc{font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-70)}
.tm-hora{font-size:var(--t-body-lg);font-weight:700;line-height:var(--lh-heading)}
.tm-titulo{max-width:470px;font-size:var(--t-body-lg);font-weight:600;line-height:var(--lh-heading);letter-spacing:var(--ls-body)}
.tm-pon{display:flex;flex-direction:column;gap:var(--sp-8);font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-55)}
.tm-pon b{color:var(--ink);font-weight:700}
.tm-tem{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-8)}
.tm-actions{margin-top:var(--sp-80);display:flex;justify-content:flex-end;align-items:center;gap:var(--sp-24);flex-wrap:wrap}


@media (max-width:1199px){
  .tm-intro-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "body" "note";gap:var(--sp-32)}
  .tm-note{margin-top:0}
  .tm-voices{--cg-card:280px}
  .tm-row{grid-template-columns:80px minmax(0,1fr) 150px minmax(0,240px) 140px;gap:var(--sp-24)}
  .tm-thead{grid-template-columns:80px minmax(0,1fr) 150px minmax(0,240px) 140px;gap:var(--sp-24)}
}
/* Entre 768 y 1023 las tres fichas de 280 no caben en una fila: pasan a columna */
@media (max-width:1023px){
  .tm-speakers{grid-template-columns:minmax(0,1fr);justify-content:stretch}
  .tm-speakers .cg-speaker{width:min(100%,342px);margin-inline:auto}
}
@media (max-width:767px){
  .tm-speakers{grid-template-columns:minmax(0,1fr);justify-content:stretch}
  .tm-speakers .cg-speaker{width:min(100%,342px);margin-inline:auto}
  /* Misma lectura que el programa en móvil: hora y escenario arriba. */
  .tm-row{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"hora esc" "titulo titulo" "pon pon" "tem tem";gap:var(--sp-8) var(--sp-16);padding:var(--sp-20) 0;align-items:baseline}
  .tm-hora{grid-area:hora}
  .tm-esc{grid-area:esc;justify-self:end;text-align:right}
  .tm-titulo{grid-area:titulo}
  .tm-pon{grid-area:pon}
  .tm-tem{grid-area:tem}
  .tm-titulo{max-width:none}
  .tm-tem{flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--sp-12)}
  .tm-actions{justify-content:center;gap:var(--sp-16)}
}

/* ══════════ PÁGINAS LEGALES ══════════
   Aviso legal, privacidad, cookies y condiciones comparten una sola pieza:
   titular, índice pegajoso y texto corrido a 76ch, con los mismos filetes
   finos del resto del sitio. */
.legal-eyebrow{display:block;font-size:var(--t-caption);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-55)}
.legal .page-title{margin-top:var(--sp-16);margin-bottom:0}
.legal-meta{margin-top:var(--sp-16);font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-55)}
.legal-grid{margin-top:var(--sp-64);display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--sp-80);align-items:start}
.legal-toc{position:sticky;top:120px}
.legal-toc-title{font-size:var(--t-caption);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-55)}
.legal-toc ol{margin-top:var(--sp-16);padding:0;list-style:none;border-top:var(--hr) solid var(--line)}
.legal-toc li{border-bottom:var(--hr) solid var(--line)}
.legal-toc a{display:block;padding:var(--sp-12) 0;font-size:var(--type-footnote);line-height:1.35;color:var(--ink-70);transition:color .2s}
.legal-toc a:hover{color:var(--ink)}
.legal-body{max-width:var(--measure-wide)}
.legal-body section{scroll-margin-top:140px}
.legal-body section + section{margin-top:var(--sp-64)}
.legal-body h2{font-size:var(--t-title-2);font-weight:700;line-height:var(--lh-title);letter-spacing:var(--ls-md);text-wrap:balance}
.legal-body h3{margin-top:var(--sp-32);font-size:var(--type-headline);font-weight:700;line-height:var(--lh-heading);letter-spacing:var(--ls-body)}
.legal-body p{margin-top:var(--sp-16)}
.legal-body ul{margin-top:var(--sp-16);padding-left:1.1em;list-style:disc}
.legal-body li{margin-top:var(--sp-8)}
.legal-body li::marker{color:var(--ink-55)}
.legal-body a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.legal-body strong{font-weight:700}
@media (max-width:1199px){
  .legal-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-40)}
  .legal-toc{position:static}
  .legal-toc ol{display:flex;flex-wrap:wrap;gap:0 var(--sp-24);border-top:0}
  .legal-toc li{border-bottom:0}
  .legal-toc a{padding:var(--sp-8) 0}
}
@media (max-width:767px){
  .legal-grid{margin-top:var(--sp-32)}
  .legal-toc{display:none}
  .legal-body section + section{margin-top:var(--sp-40)}
}

/* ══════════ AVISO DE COOKIES ══════════
   La misma pieza que el banner RGPD de somafit: aparece abajo hasta que el
   visitante acepta o rechaza, y no vuelve a molestar cuando ya hay elección.
   Se apoya en el sistema: papel blanco, filete fino, botón lima y botón de
   línea, con el texto a 62ch para que se lea de un vistazo. */
.ck{position:fixed;z-index:100;left:var(--sp-24);right:var(--sp-24);bottom:var(--sp-24);max-width:880px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-32);padding:var(--sp-20) var(--sp-24);background:var(--paper);border:var(--hr) solid var(--line);border-radius:var(--r-md);box-shadow:0 18px 48px rgba(0,0,31,.14);opacity:0;transform:translateY(14px);transition:opacity .25s ease,transform .25s ease}
.ck.is-in{opacity:1;transform:none}
.ck-txt{max-width:62ch;font-size:var(--t-body);line-height:var(--lh-body);color:var(--ink-70)}
.ck-txt a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.ck-acc{display:flex;flex:none;gap:var(--sp-12)}
.info-contact{scroll-margin-top:120px}
@media (max-width:767px){
  .ck{left:var(--sp-16);right:var(--sp-16);bottom:var(--sp-16);flex-direction:column;align-items:stretch;gap:var(--sp-16);padding:var(--sp-20)}
  .ck-acc .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){.ck{transition:none}}

/* ══════════ BOTÓN DE ICONO ══════════
   El círculo lima con la flecha que cierran las tarjetas de «Qué encontrarás».
   Componente del sistema, no un caso suelto: 64 px, radio completo, icono a
   24 y el mismo hover que el resto de botones lima. Sin texto, el nombre
   accesible viene del aria-label del enlace. */
.btn-icon{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--lime);color:var(--ink);transition:background-color var(--t) var(--ease)}
.btn-icon .ico{width:var(--ico-24);height:var(--ico-24);transition:transform var(--t) var(--ease)}
.btn-icon:hover{background:var(--lime-hover)}
.btn-icon:hover .ico{transform:translate(2px,-2px)}
.btn-icon:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* En la tarjeta vive en el hueco que ya reserva .card-body a la derecha */
.card-body .btn-icon{position:absolute;right:0;bottom:var(--sp-24)}
@media (max-width:767px){
  .btn-icon{width:48px;height:48px}
  .btn-icon .ico{width:var(--ico-20);height:var(--ico-20)}
  .card-body .btn-icon{bottom:var(--sp-16)}
}
/* El bloque de titular de las legales respira a la misma medida que el texto */
.legal-head{max-width:var(--measure-wide)}