/* ═══════════════════════════════════════════════════════════
   Dubai Global Dental Summit — hoja de estilos
   Mobile-first. Tokens → base → componentes → utilidades.
   ═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   TEMAS · cuatro paletas, todas derivadas del brochure.
   Colores muestreados del propio PDF:
     oro del logotipo #d79901 · azul noche #002040
     violeta #304060 · naranja atardecer #c07010 · arena #c09070
   Los tokens son ROLES, no colores literales: --navy-* es
   "superficie" y --gold-* es "acento", aunque el tema sea claro.
   ══════════════════════════════════════════════════════════ */

/* ── 1 · FORMAL — navy y oro discreto (la del brochure, sobria) ── */
:root,
[data-tema='formal'] {
  --navy-900: #0a1424;  --navy-800: #101e36;  --navy-700: #172947;
  --navy-600: #21375a;  --navy-500: #2d4670;
  --gold-600: #b08a35;  --gold-500: #c9a24d;  --gold-400: #d9b668;  --gold-300: #e8ce95;

  --cream: #f4eee2;  --text: #f2f4f8;  --muted: #a9b4c7;
  --line: rgba(201,162,77,.22);

  --surf-0: #0a1424;
  --surf-1: #101e36;
  --surf-2: #101e36;
  --surf-tarjeta: #101e36;
  --chip-bg: #f4eee2;

  --fondo-rgb: 10,20,36;   --cabecera-rgb: 10,20,36;
  --grad-cta: linear-gradient(135deg, #c9a24d, #dcbc7a);
  --grad-retrato: linear-gradient(160deg, #21375a, #101e36);
  --duo-a: rgba(201,162,77,.50);  --duo-b: rgba(23,41,71,.72);
  --halo: rgba(217,182,104,.30);
  --sombra-acento: rgba(201,162,77,.50);
  --destello: rgba(232,206,149,.16);
}

/* ── 2 · ATARDECER — azul noche, violeta, naranja y arena ──
   Cada sección toma un color distinto de la portada del brochure. */
[data-tema='atardecer'] {
  --navy-900: #0d1430;  --navy-800: #182046;  --navy-700: #2a2456;
  --navy-600: #3d2a5e;  --navy-500: #55356a;
  --gold-600: #c05f0c;  --gold-500: #e07b18;  --gold-400: #f59a34;  --gold-300: #ffbe66;

  --cream: #ffeedb;  --text: #f7f2ff;  --muted: #bdb4d8;
  --line: rgba(245,154,52,.30);

  --surf-0: #0d1430;
  --surf-1: linear-gradient(150deg, #182046 0%, #2c2456 55%, #3a2652 100%);
  --surf-2: linear-gradient(150deg, #2a2456 0%, #4a2c4e 45%, #6b3a30 100%);
  --surf-tarjeta: #1a2148;
  --chip-bg: #ffeedb;

  --fondo-rgb: 13,20,48;   --cabecera-rgb: 13,20,48;
  --grad-cta: linear-gradient(135deg, #e07b18 0%, #f59a34 55%, #ff7a55 100%);
  --grad-retrato: linear-gradient(160deg, #4a2c4e, #182046);
  --duo-a: rgba(224,123,24,.58);  --duo-b: rgba(42,36,86,.62);
  --halo: rgba(245,154,52,.34);
  --sombra-acento: rgba(224,123,24,.55);
  --destello: rgba(255,190,102,.20);
}

/* ── 3 · NOCHE DORADA — azul casi negro con el oro del logotipo ──
   El contraste del Burj Khalifa de noche: azul #002040 y oro #d79901. */
[data-tema='noche'] {
  --navy-900: #030d1c;  --navy-800: #06182f;  --navy-700: #0a2440;
  --navy-600: #103252;  --navy-500: #1a4468;
  --gold-600: #a97600;  --gold-500: #d79901;  --gold-400: #eeb52a;  --gold-300: #ffd569;

  --cream: #fdf3dd;  --text: #eef4fb;  --muted: #a3b6cb;
  --line: rgba(215,153,1,.32);

  --surf-0: #030d1c;
  --surf-1: linear-gradient(145deg, #06182f 0%, #0a2440 60%, #123528 100%);
  --surf-2: linear-gradient(145deg, #0a2440 0%, #24324a 40%, #5c4728 100%);
  --surf-tarjeta: #071b34;
  --chip-bg: #fdf3dd;

  --fondo-rgb: 3,13,28;   --cabecera-rgb: 3,13,28;
  --grad-cta: linear-gradient(135deg, #d79901 0%, #eeb52a 50%, #ffd569 100%);
  --grad-retrato: linear-gradient(160deg, #14395c, #06182f);
  --duo-a: rgba(215,153,1,.60);  --duo-b: rgba(6,24,47,.60);
  --halo: rgba(238,181,42,.36);
  --sombra-acento: rgba(215,153,1,.55);
  --destello: rgba(255,213,105,.22);
}

/* ── 4 · ORO CLARO — crema y arena con el oro del logotipo ──
   Tema claro. El hero sigue oscuro sobre la foto; el resto abre en claro. */
[data-tema='oro'] {
  --navy-900: #fbf7ee;  --navy-800: #f4ecdb;  --navy-700: #ebdfc6;
  --navy-600: #dfcda8;  --navy-500: #c9b085;
  /* En claro el oro también hace de TEXTO, así que la escala baja para
     cumplir 4.5:1 sobre la crema. El oro brillante del logo (#d79901)
     se reserva para superficies y degradados, nunca para tipografía. */
  --gold-600: #6b4b00;  --gold-500: #7d5800;  --gold-400: #8a6200;  --gold-300: #6f4e00;

  --cream: #2b2318;
  --text: #1b2130;
  --muted: #565d6c;
  --line: rgba(122,86,0,.34);

  --surf-0: #fbf7ee;
  --surf-1: linear-gradient(150deg, #f7f0e0 0%, #f1e6cf 60%, #ecdcb9 100%);
  --surf-2: linear-gradient(150deg, #f4ecdb 0%, #eedec0 45%, #e6cf9e 100%);
  --surf-tarjeta: #ffffff;
  --chip-bg: #ffffff;

  --fondo-rgb: 251,247,238;   --cabecera-rgb: 8,16,30;   /* barra oscura sobre el sitio claro */
  --grad-cta: linear-gradient(135deg, #8f6600 0%, #a97600 55%, #7a5600 100%);
  --grad-retrato: linear-gradient(160deg, #e8d9b8, #f4ecdb);
  --duo-a: rgba(215,153,1,.50);  --duo-b: rgba(90,70,30,.35);
  --halo: rgba(169,118,0,.26);
  --sombra-acento: rgba(122,86,0,.38);
  --destello: rgba(255,213,105,.18);
  --shadow: 0 18px 46px -14px rgba(90,70,35,.32);
}

/* El hero va siempre sobre fotografía: sus tokens no dependen del tema */
:root {
  --hero-rgb: 8,16,30;
  --hero-text: #f6f2ea;
  --hero-muted: #c3ccdb;
  --hero-line: rgba(255,255,255,.20);
  --hero-acento: #e0b86a;
  --hero-acento-claro: #f2d79c;
}

/* El encabezado y el hero se pintan SOBRE la fotografía, así que redefinen
   los tokens de color dentro de su propio ámbito. Sin esto, un tema claro
   dejaría texto oscuro sobre el velo oscuro de la foto. */
.header,
.hero {
  --text:     var(--hero-text);
  --muted:    var(--hero-muted);
  --cream:    var(--hero-text);
  --gold-400: var(--hero-acento);
  --gold-300: var(--hero-acento-claro);
  --line:     var(--hero-line);
}

:root {

  /* Tipografía */
  --font-sans:   'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Great Vibes', 'Snell Roundhand', cursive;

  /* Escala fluida */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-xl:   clamp(1.3rem,  1.15rem + 0.7vw,  1.6rem);
  --fs-2xl:  clamp(1.7rem,  1.4rem  + 1.4vw,  2.5rem);
  --fs-3xl:  clamp(2.2rem,  1.7rem  + 2.4vw,  3.75rem);
  --fs-hero: clamp(2.5rem,  1.6rem  + 4.4vw,  5.5rem);

  /* Espaciado */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;    --space-9: 6rem;

  --radius:    14px;
  --radius-lg: 22px;
  --shadow:    0 18px 50px -12px rgba(0,0,0,.55);

  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── Reset y base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  /* compensa el header sticky al saltar a un ancla */
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  transition: background-color .5s var(--ease), color .5s var(--ease);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--surf-0);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 { line-height: 1.15; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Salta al contenido — sólo visible con teclado */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold-500); color: var(--navy-900);
  padding: var(--space-3) var(--space-5); font-weight: 700;
  border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 768px) { .wrap { width: min(100% - 4rem, var(--wrap)); } }

.section { padding-block: var(--space-8); }
@media (min-width: 768px) { .section { padding-block: var(--space-9); } }

/* ── Tipografía de apoyo ───────────────────────────────── */
.kicker {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-400);
}
.script { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; }

.section-head { margin-bottom: var(--space-6); }
.section-title { font-size: var(--fs-2xl); }
.section-sub { color: var(--muted); margin-top: var(--space-3); max-width: 58ch; font-size: var(--fs-lg); }

.gold { color: var(--gold-400); }

/* ── Botones ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px;                      /* objetivo táctil cómodo */
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: .04em;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}
.btn--primary { background: var(--grad-cta); color: var(--navy-900); }
.btn--primary:hover { background: var(--gold-300); }
.btn--ghost { border-color: var(--line); color: var(--text); background: rgba(255,255,255,.04); }
.btn--ghost:hover { border-color: var(--gold-400); background: rgba(201,162,77,.12); }
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; }

/* ── Header ────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(var(--hero-rgb),.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.header[data-scrolled='true'] { border-bottom-color: var(--line); background: rgba(var(--cabecera-rgb),.96); }
.header__inner { display: flex; align-items: center; gap: var(--space-4); min-height: 4.5rem; }
.header__logo { display: flex; align-items: center; flex: 1; }
.header__logo img { height: 46px; width: auto; }
@media (min-width: 1024px) { .header__logo img { height: 54px; } }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: var(--space-5); list-style: none; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text);
  border-bottom: 2px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav__link:hover { color: var(--gold-400); border-bottom-color: var(--gold-400); }

.header__actions { display: flex; align-items: center; gap: var(--space-3); }

.langswitch {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding-inline: var(--space-3);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.langswitch:hover { color: var(--gold-400); border-color: var(--gold-400); }

.header .btn { display: none; }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
}
.burger svg { width: 22px; height: 22px; }
.burger__close { display: none; }
.burger[aria-expanded='true'] .burger__open { display: none; }
.burger[aria-expanded='true'] .burger__close { display: block; }

@media (min-width: 1024px) {
  .nav { display: block; }
  .header .btn { display: inline-flex; }
  .burger { display: none; }
}

/* Menú móvil */
.mobilenav {
  position: fixed; inset: 4.5rem 0 auto; z-index: 99;
  background: var(--navy-800); border-bottom: 1px solid var(--line);
  padding: var(--space-5) 0 var(--space-6);
  transform: translateY(-120%); visibility: hidden;
  transition: transform .32s var(--ease), visibility .32s;
  max-height: calc(100dvh - 4.5rem); overflow-y: auto;
}
.mobilenav[data-open='true'] { transform: translateY(0); visibility: visible; }
.mobilenav__list { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
.mobilenav__link {
  display: block; padding: var(--space-4) var(--space-2);
  text-decoration: none; font-size: var(--fs-lg); font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.mobilenav__link:hover { color: var(--gold-400); }
.mobilenav .btn { margin-top: var(--space-5); }
@media (min-width: 1024px) { .mobilenav { display: none; } }

/* ── Hero ──────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; display: grid; align-items: center;
        min-height: calc(100dvh - 4.5rem); padding-block: var(--space-8) var(--space-7); overflow: hidden; }
/* El fondo es más alto que el hero para que el parallax no descubra los bordes */
.hero__bg {
  position: absolute; left: 0; right: 0; top: -8%; height: 116%; z-index: -2;
  will-change: transform;
}
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  transform: scale(1.06);
  animation: hero-entrada 1.9s cubic-bezier(.16,.84,.32,1) forwards;
}
/* Tras la entrada, una deriva casi imperceptible mantiene viva la imagen */
@keyframes hero-entrada { to { transform: scale(1); animation-timing-function: ease-in-out; } }
.hero__bg img.deriva { animation: hero-deriva 28s ease-in-out infinite alternate; }
@keyframes hero-deriva {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.05) translate3d(-1.2%, -1%, 0); }
}

/* Barrido de luz dorada, una sola vez al cargar */
.hero__destello {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.hero__destello::before {
  content: ''; position: absolute; top: -60%; bottom: -60%; width: 55%;
  background: linear-gradient(100deg, transparent, var(--destello) 45%, rgba(255,255,255,.10) 55%, transparent);
  filter: blur(28px);
  transform: translateX(-160%) rotate(12deg);
  animation: hero-barrido 2.6s .55s cubic-bezier(.3,.7,.3,1) forwards;
}
@keyframes hero-barrido { to { transform: translateX(320%) rotate(12deg); } }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(var(--hero-rgb),.72) 0%, rgba(var(--hero-rgb),.55) 42%, rgba(var(--hero-rgb),.96) 100%),
    radial-gradient(ellipse at 50% 42%, rgba(var(--hero-rgb),0) 0%, rgba(var(--hero-rgb),.5) 100%);
}
.hero__inner { display: grid; gap: var(--space-5); justify-items: start; }
/* Entrada escalonada: cada bloque sube y aparece en secuencia */
.hero__inner > * { animation: hero-sube .85s cubic-bezier(.16,.84,.32,1) backwards; }
.hero__inner > :nth-child(1) { animation-delay: .10s; }
.hero__inner > :nth-child(2) { animation-delay: .20s; }
.hero__inner > :nth-child(3) { animation-delay: .30s; }
.hero__inner > :nth-child(4) { animation-delay: .40s; }
.hero__inner > :nth-child(5) { animation-delay: .50s; }
.hero__inner > :nth-child(6) { animation-delay: .60s; }
@keyframes hero-sube { from { opacity: 0; transform: translateY(18px); } }

/* El título es el candidato a LCP. Se anima SÓLO con transform: un elemento
   en opacity:0 cuenta como "no pintado" y retrasaría la métrica ~700 ms. */
.hero__inner > .hero__title { animation-name: hero-sube-plano; }
@keyframes hero-sube-plano { from { transform: translateY(18px); } }
.hero__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border: 1px solid var(--line); border-radius: 999px;
  background: rgba(var(--hero-rgb),.5); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-300);
}
.hero__title {
  color: var(--hero-text);
  font-size: var(--fs-hero); font-weight: 300; letter-spacing: -.03em; line-height: .95;
  text-transform: uppercase;
}
.hero__title strong { display: block; font-weight: 800; }
.hero__lema { font-size: var(--fs-xl); color: var(--hero-text); max-width: 22ch; font-weight: 400; }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); color: var(--hero-text); font-weight: 600; }
.hero__meta span { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__meta svg { width: 18px; height: 18px; color: var(--gold-400); flex-shrink: 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); width: 100%; }
.hero__cta .btn { flex: 1 1 auto; }
@media (min-width: 640px) { .hero__cta .btn { flex: 0 0 auto; } }

/* Cuenta regresiva */
.countdown { display: grid; gap: var(--space-3); }
.countdown__label { font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--hero-muted); }
.countdown__grid { display: flex; gap: var(--space-2); }
.countdown__cell {
  min-width: 68px; padding: var(--space-3) var(--space-2);
  background: rgba(var(--hero-rgb),.55); border: 1px solid var(--hero-line); border-radius: var(--radius);
  text-align: center;
}
.countdown__num { display: block; font-size: var(--fs-xl); font-weight: 800; color: var(--gold-300); font-variant-numeric: tabular-nums; }
.countdown__unit { display: block; font-size: var(--fs-xs); color: var(--hero-muted); text-transform: uppercase; letter-spacing: .08em; }
/* La fecha exacta siempre está en el DOM como texto, no sólo en el contador */
.countdown__exact { font-size: var(--fs-sm); color: var(--hero-muted); }

/* ── Cifras ────────────────────────────────────────────── */
.stats { background: var(--surf-1); border-block: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); padding-block: var(--space-6); }
@media (min-width: 768px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; }
.stat__num { display: block; font-size: var(--fs-2xl); font-weight: 800; color: var(--gold-400); line-height: 1; }
.stat__label { display: block; margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--muted); }

/* ── Intro ─────────────────────────────────────────────── */
.intro__grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .intro__grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-8); align-items: center; } }
.intro__title { font-size: var(--fs-2xl); }
.intro__body { display: grid; gap: var(--space-4); color: var(--muted); font-size: var(--fs-lg); }
/* Revelado editorial: una cortinilla abre la imagen de abajo hacia arriba mientras la
   foto asienta su escala, y un marco dorado se desplaza detrás. Al hacer scroll la foto
   se mueve dentro de su ventana (parallax interno), como si fuera un mirador. */
.intro__media {
  position: relative; margin: 0;
  /* aire para que el marco desplazado no se corte */
  padding: 0 var(--space-5) var(--space-5) 0;
}
.intro__media.reveal { opacity: 1; transform: none; }   /* el revelado lo hace la cortinilla */

.intro__marco {
  position: absolute; inset: var(--space-5) 0 0 var(--space-5);
  border: 1.5px solid var(--gold-500); border-radius: var(--radius-lg);
  opacity: 0; transform: translate(-16px, -16px);
  transition: opacity .9s .35s var(--ease), transform 1.1s .35s var(--ease);
  pointer-events: none;
}
.intro__media[data-visible='true'] .intro__marco { opacity: 1; transform: none; }

.intro__ventana {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4/3;                       /* la ventana fija la proporción */
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.25s var(--ease);
}
@media (min-width: 900px) { .intro__ventana { aspect-ratio: 3/4; } }
.intro__media[data-visible='true'] .intro__ventana { clip-path: inset(0 0 0 0); }

.intro__media img {
  /* absoluta y sobredimensionada: así el parallax nunca descubre un borde */
  position: absolute; inset: -6% 0; width: 100%; height: 112%;
  object-fit: cover; display: block;
  transform: scale(1.14) translate3d(0, var(--py, 0px), 0);
  transition: transform 1.6s var(--ease);
}
.intro__media[data-visible='true'] img { transform: scale(1) translate3d(0, var(--py, 0px), 0); }


/* ── Ejes temáticos ────────────────────────────────────── */
.ejes__grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .ejes__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ejes__grid { grid-template-columns: repeat(3, 1fr); } }
.eje {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5); background: var(--surf-tarjeta);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.eje:hover { border-color: var(--gold-400); transform: translateY(-3px); }
.eje__icon { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center;
             background: rgba(201,162,77,.12); border-radius: 12px; color: var(--gold-400); }
.eje__icon svg { width: 22px; height: 22px; }
.eje__text { font-weight: 600; font-size: var(--fs-lg); }

/* ── Por qué asistir ───────────────────────────────────── */
.porque { background: var(--surf-2); }
.porque__grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .porque__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .porque__grid { grid-template-columns: repeat(4, 1fr); } }
.porque__item { padding-top: var(--space-4); border-top: 2px solid var(--gold-500); }
.porque__num { font-size: var(--fs-sm); font-weight: 800; color: var(--gold-400); font-variant-numeric: tabular-nums; }
.porque__title { font-size: var(--fs-lg); margin-block: var(--space-2); }
.porque__text { color: var(--muted); font-size: var(--fs-sm); }

/* ── Ponentes ──────────────────────────────────────────── */
.ponentes__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 640px)  { .ponentes__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
@media (min-width: 1024px) { .ponentes__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .ponentes__grid { grid-template-columns: repeat(5, 1fr); } }

.ponente { text-align: center; }

/* Los retratos viven en duotono navy-dorado y recuperan el color al activarse.
   Unifica 20 fotos de fuentes y luces distintas, y da el look de cartel del congreso. */
.ponente__photo {
  position: relative;
  isolation: isolate;                    /* confina el mix-blend-mode a la tarjeta */
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--grad-retrato); border: 1px solid var(--line);
  transition: border-color .45s var(--ease), transform .45s var(--ease),
              box-shadow .45s var(--ease);
}
.ponente__photo img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(.94);
  transition: filter .55s var(--ease), transform .6s var(--ease);
}

/* Capa de duotono */
.ponente__photo::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(155deg, var(--duo-a), var(--duo-b));
  mix-blend-mode: color;
  transition: opacity .55s var(--ease);
}

/* Halo dorado que sigue al cursor */
.ponente__photo::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              var(--halo), transparent 62%);
  opacity: 0; transition: opacity .4s var(--ease);
}

/* ── Escritorio con puntero fino: se activa al pasar el cursor ── */
@media (hover: hover) and (pointer: fine) {
  .ponente:hover .ponente__photo,
  .ponente:focus-within .ponente__photo {
    transform: translateY(-6px); border-color: var(--gold-400);
    box-shadow: 0 22px 48px -18px var(--sombra-acento);
  }
  .ponente:hover .ponente__photo img,
  .ponente:focus-within .ponente__photo img { filter: none; transform: scale(1.05); }
  .ponente:hover .ponente__photo::after,
  .ponente:focus-within .ponente__photo::after { opacity: 0; }
  .ponente:hover .ponente__photo::before,
  .ponente:focus-within .ponente__photo::before { opacity: 1; }
}

/* ── Táctil: no hay cursor, así que el color se revela al entrar en pantalla ── */
@media (hover: none) {
  .ponente[data-visible='true'] .ponente__photo img { filter: none; }
  .ponente[data-visible='true'] .ponente__photo::after { opacity: 0; }
  /* pequeño escalonado por columna para que la reja no cambie de golpe */
  .ponente:nth-child(2n) .ponente__photo img,
  .ponente:nth-child(2n) .ponente__photo::after { transition-delay: .12s; }
}
.ponente__nombre { display: block; font-family: var(--font-script); font-size: var(--fs-xl);
                   color: var(--gold-300); line-height: 1.1; margin-top: var(--space-3); }
.ponente__apellido { display: block; font-size: var(--fs-lg); font-weight: 800;
                     text-transform: uppercase; letter-spacing: -.01em; }
.ponente__conf { display: block; margin-top: var(--space-2); font-size: var(--fs-xs);
                 color: var(--muted); line-height: 1.45; }

/* ── Programa ──────────────────────────────────────────── */
.programa { background: var(--surf-1); }
.programa__nota {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin-bottom: var(--space-5); padding: var(--space-4);
  background: rgba(201,162,77,.08); border-left: 3px solid var(--gold-500);
  border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--fs-sm); color: var(--cream);
}
.programa__nota svg { width: 20px; height: 20px; color: var(--gold-400); flex-shrink: 0; }
.programa__list { display: grid; gap: var(--space-3); }

.dia { background: var(--surf-0); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dia > summary {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); min-height: 64px;
  cursor: pointer; list-style: none; font-weight: 700;
  transition: background-color .2s var(--ease);
}
.dia > summary::-webkit-details-marker { display: none; }
.dia > summary:hover { background: rgba(201,162,77,.06); }
.dia__fecha {
  flex-shrink: 0; min-width: 74px; padding: var(--space-2) var(--space-3);
  background: var(--gold-500); color: var(--navy-900); border-radius: 8px;
  font-size: var(--fs-xs); font-weight: 800; text-align: center;
  text-transform: uppercase; letter-spacing: .06em;
}
.dia__titulo { flex: 1; font-size: var(--fs-lg); }
.dia__chevron { flex-shrink: 0; width: 20px; height: 20px; color: var(--gold-400); transition: transform .25s var(--ease); }
.dia[open] .dia__chevron { transform: rotate(180deg); }
.dia__body { padding: 0 var(--space-5) var(--space-5); display: grid; gap: var(--space-4); }

.bloque { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,.07); }
@media (min-width: 640px) { .bloque { grid-template-columns: 140px 1fr; gap: var(--space-4); } }
.bloque__hora { font-weight: 700; color: var(--gold-400); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.bloque__items { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.bloque__items li { position: relative; padding-left: var(--space-5); color: var(--cream); font-size: var(--fs-sm); }
.bloque__items li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500);
}
.dia__cats { display: grid; gap: var(--space-2); }
.cat { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
       padding: var(--space-3) var(--space-4); background: rgba(201,162,77,.07);
       border-radius: var(--radius); font-size: var(--fs-sm); }
.cat__nivel { font-weight: 800; color: var(--gold-300); text-transform: uppercase;
              letter-spacing: .06em; font-size: var(--fs-xs); }
.cat__texto { color: var(--cream); }
.dia__opcional { font-size: var(--fs-sm); color: var(--muted); font-style: italic; }

/* ── Precios ───────────────────────────────────────────── */
.precios__grid { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .precios__grid { grid-template-columns: repeat(2, 1fr); } }
.paquete {
  display: flex; flex-direction: column;
  background: var(--surf-tarjeta); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-5); position: relative;
}
.paquete[data-destacado='true'] { border-color: var(--gold-500); box-shadow: 0 0 0 1px var(--gold-500) inset; }
@media (min-width: 900px) { .paquete[data-destacado='true'] { grid-column: 1 / -1; } }
.paquete__badge {
  position: absolute; top: calc(var(--space-4) * -1); left: var(--space-5);
  padding: var(--space-1) var(--space-4); background: var(--gold-500); color: var(--navy-900);
  border-radius: 999px; font-size: var(--fs-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
}
.paquete__title { font-size: var(--fs-xl); }
.paquete__desc { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--space-2); }
.paquete__opciones { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
@media (min-width: 900px) {
  .paquete[data-destacado='true'] .paquete__opciones { grid-template-columns: repeat(3, 1fr); }
}
.opcion {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); background: var(--surf-0);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius);
}
.opcion__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.opcion__nivel { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-sm); }
.opcion__precio { font-size: var(--fs-xl); font-weight: 800; color: var(--gold-300); font-variant-numeric: tabular-nums; white-space: nowrap; }
.opcion__precio small { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; margin-left: 2px; }
.opcion__detalle { color: var(--muted); font-size: var(--fs-sm); flex: 1; }
.opcion .btn { margin-top: var(--space-2); }
.precios__nota { margin-top: var(--space-5); font-size: var(--fs-sm); color: var(--muted); text-align: center; }

/* ── Hands On ──────────────────────────────────────────── */
.handson__avisos { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.handson__avisos .programa__nota { margin-bottom: 0; }
.handson__avisos svg { width: 20px; height: 20px; }
.handson__list { display: grid; gap: var(--space-6); }
.curso {
  display: grid; gap: var(--space-5);
  background: var(--surf-tarjeta); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
@media (min-width: 900px) {
  .curso { grid-template-columns: 300px 1fr; gap: var(--space-6); padding: var(--space-5); align-items: start; }
  .curso__portada { position: sticky; top: 6rem; }
}
.curso__portada { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.curso__portada img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.curso__cuerpo { display: grid; gap: var(--space-4); align-content: start; justify-items: start; min-width: 0; }
.curso__titulo { font-size: var(--fs-xl); }
.curso__meta { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
               color: var(--cream); font-size: var(--fs-sm); font-weight: 600; }
.curso__meta li { display: inline-flex; align-items: center; gap: var(--space-2); }
.curso__meta svg { width: 18px; height: 18px; color: var(--gold-400); flex-shrink: 0; }
.curso__etiqueta { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.curso__ponentes ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-2); }
.curso__ponente { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); }
.curso__ponente img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--gold-500); }
.curso__ponente strong { color: var(--gold-300); }
.curso__compra {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4); background: var(--surf-0);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius);
}
.curso__monto { display: block; font-size: var(--fs-2xl); font-weight: 800; color: var(--gold-300);
                font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.1; }
/* La moneda va del mismo tamaño que la cifra: nadie debe leer dólares */
.curso__moneda { text-decoration: none; letter-spacing: .04em; }
.curso__moneda-nombre { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; margin-top: var(--space-1); }
.curso__detalle { width: 100%; }
.curso__detalle h4, .curso__subtitulo { font-size: var(--fs-base); color: var(--gold-300); }
.curso__texto { display: grid; gap: var(--space-3); }
.curso__texto p { color: var(--muted); font-size: var(--fs-sm); }
.curso__modulo { font-weight: 700; margin-bottom: var(--space-2); }
.handson__pie { display: grid; justify-items: center; gap: var(--space-3); margin-top: var(--space-6); text-align: center; }
.handson__pie .precios__nota { margin-top: 0; max-width: 60ch; }
.handson__pie .btn svg { width: 20px; height: 20px; }
.handson__pie .btn small { color: var(--muted); font-weight: 600; }
.handson__aviso { font-weight: 800; color: var(--gold-300); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-sm); }

/* ── Sede ──────────────────────────────────────────────── */
.sede { background: var(--surf-2); }
.sede__grid { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .sede__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.sede__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.sede__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.sede__nombre { font-size: var(--fs-2xl); margin-block: var(--space-2) var(--space-4); }
.sede__texto { color: var(--muted); font-size: var(--fs-lg); }

/* ── Pago ──────────────────────────────────────────────── */
.pago__grid { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .pago__grid { grid-template-columns: 1fr 1fr; } }
.card {
  background: var(--surf-tarjeta); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.card__title { font-size: var(--fs-lg); display: flex; align-items: center; gap: var(--space-3); }
.card__title svg { width: 22px; height: 22px; color: var(--gold-400); flex-shrink: 0; }
.card__text { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--space-3); }
.banco { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.banco__row { display: grid; gap: var(--space-1); padding-bottom: var(--space-3); border-bottom: 1px solid rgba(255,255,255,.07); }
.banco__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.banco__value { display: flex; align-items: center; gap: var(--space-3); justify-content: space-between; }
.banco__value code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: var(--fs-sm);
  color: var(--cream); word-break: break-all;
}
.copybtn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding-inline: var(--space-4);
  background: transparent; border: 1px solid var(--line); border-radius: 8px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.copybtn:hover { color: var(--gold-400); border-color: var(--gold-400); }
.copybtn[data-copied='true'] { color: var(--gold-300); border-color: var(--gold-400); }

/* ── Footer ────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding-block: var(--space-7) var(--space-6); }
.footer__grid { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1fr auto; align-items: center; } }
.footer__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.footer__logos img { height: 40px; width: auto; }
/* Los logos de los avales son oscuros: van sobre un chip claro
   para respetar los colores originales de cada marca. */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-3) var(--space-4);
  background: var(--chip-bg); border-radius: 12px;
}
.footer__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); width: 100%; }
.footer__bottom {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  font-size: var(--fs-sm); color: var(--muted);
}
.footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer__bottom a:hover { color: var(--gold-400); }

/* ── CTA flotante en móvil ─────────────────────────────── */
.stickycta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: rgba(var(--fondo-rgb),.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform .3s var(--ease);
}
.stickycta[data-visible='true'] { transform: translateY(0); }
@media (min-width: 1024px) { .stickycta { display: none; } }

/* ── Animaciones de entrada ────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal[data-visible='true'] { opacity: 1; transform: none; }

/* Respeta la preferencia del sistema: sin movimiento, estado final visible */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .stickycta { transform: translateY(0); }
  /* el efecto de las fotos es decorativo: se entrega el estado final */
  .ponente__photo img { filter: none !important; }
  .ponente__photo::after, .ponente__photo::before { opacity: 0 !important; }
  /* hero: imagen quieta y contenido a la vista, sin barrido */
  .hero__bg, .hero__bg img { animation: none !important; transform: none !important; }
  .hero__inner > * { animation: none !important; opacity: 1 !important; }
  .hero__destello { display: none !important; }
  /* intro: imagen abierta, marco en su sitio, sin parallax */
  .intro__ventana { clip-path: none !important; }
  .intro__media img { transform: none !important; }
  .intro__marco { opacity: .85 !important; transform: none !important; }
}

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