/* Sitio del Congreso — identidad Santa Marta 2027 (guía visual del cliente, oct. 2026):
   azul noche #07264D + turquesa Caribe #3EA8C1, acento arena #E5CC9C, tipografía Poppins,
   profundidad por sombras en capas, movimiento decelerado (ease-out-expo). */
:root {
  color-scheme: light;
  --ink: #07264D;         /* azul noche: menú, pie, títulos, fondos de alto contraste */
  --ink-2: #242B56;       /* azul profundo: subtítulos, fechas */
  --ink-3: #07264D;       /* antes era un azul más oscuro fuera de paleta: ahora el mismo azul noche */
  --teal: #3EA8C1;        /* turquesa principal: acentos y CTA (texto oscuro encima) */
  --lav: #E5CC9C;         /* arena: acentos especiales, nunca dominante */
  --bone: #FEFEFE;        /* blanco cálido: fondo principal */
  --bone-2: color-mix(in srgb, #80CADA 22%, #FEFEFE); /* tinte de #80CADA al 22 % sobre #FEFEFE (opaco, para que sirva también en --onda) */
  --text: #07264D;
  --teal-ink: #006288;    /* azul Caribe: texto de acento y enlaces sobre claro (AA 6,7:1) */
  --muted: rgba(7,38,77,.75); /* #07264D al 75 %: ≥ 5,7:1 sobre bone, bone-2, blanco y tintes claros */
  --line: rgba(7,38,77,.12);
  --card: #ffffff;
  --caribe: #006288;
  --azul-medio: #265F98;
  --turq-claro: #80CADA;
  --turq-caribe: #49B8C9;
  --asoreuma: #CA3C28;    /* solo identificación puntual de ASOREUMA */
  /* alias heredados */
  --iris-pulse: #3EA8C1;
  --iris-border: rgba(62,168,193,.35);
  --iris-glow: #006288;
  --cyan-soft: #49B8C9;
  --lilac: #E5CC9C;

  /* type scale fluido */
  /* escala de la guía del cliente: H1 34–64 px, H2 hasta 46 px, H3 24–30 px, intro 19–22 px */
  --step-hero: clamp(2.125rem, 1.4rem + 3vw, 4rem);
  --step-h2:   clamp(1.75rem, 1.2rem + 1.6vw, 2.875rem);
  --step-h3:   clamp(1.375rem, 1.1rem + .6vw, 1.875rem);
  --step-lead: clamp(1.125rem, 1rem + .35vw, 1.375rem);

  /* easings */
  --e-expo: cubic-bezier(.16, 1, .3, 1);
  --e-quint: cubic-bezier(.22, 1, .36, 1);
  --e-std: cubic-bezier(.4, 0, .2, 1);

  /* sombras en capas tintadas de azul */
  --sh-1: 0 1px 2px rgba(7,38,77,.06), 0 2px 4px rgba(7,38,77,.05);
  --sh-2: 0 2px 4px rgba(7,38,77,.06), 0 8px 18px rgba(7,38,77,.08);
  --sh-3: 0 4px 10px rgba(7,38,77,.06), 0 18px 40px rgba(7,38,77,.12), 0 2px 6px rgba(7,38,77,.04);
  --sh-glow: 0 0 0 1px rgba(62,168,193,.25), 0 12px 46px rgba(62,168,193,.3);

  --radius: 14px;
  --radius-lg: 22px;
  --maxw: 1200px;
  /* botón Inscríbase y menú alineados con el borde derecho del contenido */
  --borde-fijo: max(24px, calc((100% - var(--maxw)) / 2 + 24px));
  --serif: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
/* menú abierto: la página deja de desplazarse y su barra desaparece; se compensa su ancho para que nada salte */
html.scroll-lock { overflow: hidden; }
html.scroll-lock body { padding-right: var(--sbw, 0px); }
html.scroll-lock .burger { right: calc(var(--borde-fijo) + var(--sbw, 0px)); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 400; background: #fff; color: var(--ink); font-weight: 700; padding: 12px 18px; border-radius: 100px; box-shadow: var(--sh-3); transition: top .25s var(--e-expo); }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }
main { display: block; }
main:focus { outline: none; }
body {
  margin: 0; background: var(--bone); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3 {
  font-family: var(--sans); font-weight: 700; margin: 0;
  line-height: 1.12; letter-spacing: -.02em; text-wrap: balance;
}
body { font-weight: 400; }
h3 { font-weight: 600; }
/* acento: azul Caribe sobre fondos claros (el turquesa no alcanza contraste AA sobre blanco); turquesa sobre azul noche */
.em { font-style: normal; color: var(--teal-ink); }
.dark .em, .oscura .em, .hero .em, .page-hero .em, .final .em, .cinema .em, .menu-overlay .em, footer .em { color: var(--teal); }
.em-lav { font-style: normal; color: var(--lav); }
/* caja de resaltado punteada (dispositivo firma Impilo) — solo palabra del hero */
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

/* grano global */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 8; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section-pad { padding-block: clamp(5.5rem, 3.5rem + 8vw, 11rem); }
.eyebrow {
  font-family: var(--sans); font-size: .76rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--teal-ink);
  display: inline-flex; align-items: center; gap: .7rem;
}
.eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; display: inline-block; }
.head-block { max-width: 34ch; margin-bottom: 3.5rem; }
.head-block h2 { font-size: var(--step-h2); margin-top: 1.1rem; }
.head-block p { color: var(--muted); margin-top: 1.1rem; font-size: var(--step-lead); max-inline-size: 46ch; text-wrap: pretty; }
/* título a la izquierda + descripción a la derecha (llena el ancho, evita el hueco lateral) */
.head-block--split { max-width: none; display: grid; grid-template-columns: 1.15fr .85fr; column-gap: 56px; align-items: end; }
.head-block--split .eyebrow { grid-column: 1 / -1; }
.head-block--split h2 { grid-column: 1; margin-top: 1rem; max-inline-size: 18ch; }
.head-block--split p { grid-column: 2; align-self: end; margin-top: 0; max-inline-size: 40ch; }
@media (max-width: 820px){ .head-block--split { grid-template-columns: 1fr; } .head-block--split p { grid-column: 1; margin-top: 1rem; } }

/* bloques oscuros */
.dark { background: var(--ink); color: #fff; }
.dark .head-block p { color: rgba(255,255,255,.72); }
.dark .eyebrow, .hero .eyebrow, .stream .eyebrow, .cinema .eyebrow, .final .eyebrow { color: var(--teal); }

/* ---------- WebGL (escena 3D de partículas, fondo del hero) ---------- */
/* capas del hero: degradado iris (0) → video en pantalla (0) → velo (1) → partículas WebGL (2) → aura (2) → texto (3) */
#webgl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: none; }
body.webgl-on #webgl { display: block; }
section { position: relative; z-index: 1; }
footer { position: relative; z-index: 1; }
/* secciones claras opacas para que el WebGL solo se vea en el hero */
#cifras, #sobre, #keynotes, #ponentes, #tarifas, #sede, #sponsors { background: var(--bone); }

/* ---------- reading progress ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--teal); z-index: 120; box-shadow: 0 0 14px rgba(62,168,193,.8); transform-origin: left; }

/* ---------- header ---------- */
/* barra superior fija: transparente sobre el hero, vidrio iris al desplazarse (legible sobre secciones claras y oscuras) */
header.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 0 8px;
  border-bottom: 1px solid transparent;
  transition: background .45s var(--e-std), border-color .45s, box-shadow .45s;
}
header.nav.solid { background: rgba(7,38,77,.9); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: rgba(255,255,255,.1); box-shadow: 0 8px 30px rgba(7,38,77,.22); }
/* el botón de menú (fijo) queda alineado con el borde derecho del contenido; la barra le reserva su hueco */
header.nav .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding-inline: 24px 84px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #fff; line-height: 1.15; }
.brand .mark { width: 30px; height: 30px; flex: none; }
.brand small { display: block; font-weight: 500; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; opacity: .68; }
.nav-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.nav-login { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.88); font-size: .9rem; font-weight: 600; padding: 10px 14px; border-radius: 100px; transition: color .3s, background .3s; }
.nav-login svg { width: 18px; height: 18px; flex: none; display: none; }
.nav-login:hover { color: #fff; background: rgba(255,255,255,.12); }
.btn.nav-cta { padding: 10px 20px; font-size: .86rem; white-space: nowrap; }
@media (max-width: 560px) {
  header.nav .nav-inner { gap: 8px; padding-inline: 16px 70px; }
  .brand { gap: 8px; font-size: .92rem; }
  .brand .mark { width: 26px; height: 26px; }
  .brand small { display: none; }
  .nav-actions { gap: 4px; }
  .nav-login { padding: 0; width: 40px; height: 40px; justify-content: center; }
  .nav-login svg { display: block; }
  .nav-login span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .btn.nav-cta { padding: 9px 14px; font-size: .82rem; }
}
@media (max-width: 345px) { .brand > span { display: none; } }
.nav-links { display: flex; gap: 30px; align-items: center; font-size: .9rem; font-weight: 500; }
.nav-links a { color: rgba(255,255,255,.82); background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .4s var(--e-expo), color .3s; padding-bottom: 2px; }
header.nav.solid .nav-links a { color: var(--text); }
.nav-links a:hover { background-size: 100% 1px; color: var(--teal); }
@media (max-width: 880px) { .nav-links { display: none; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-weight: 600; font-size: .92rem;
  padding: 14px 26px; border-radius: 100px; border: 1px solid transparent; cursor: pointer;
  transition: box-shadow .4s var(--e-expo), background .3s, color .3s, border-color .3s;
  will-change: transform;
}
.btn .lbl { display: inline-block; }
/* CTA turquesa con texto azul noche (5,4:1); el blanco sobre turquesa no es legible */
.btn-primary { background: var(--teal); color: var(--ink); box-shadow: 0 8px 24px -10px rgba(62,168,193,.7); }
.btn-primary:hover { background: var(--turq-caribe); box-shadow: 0 10px 30px -8px rgba(62,168,193,.85); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { border-color: #fff; }
header.nav.solid .btn-ghost { color: var(--ink); border-color: rgba(7,38,77,.3); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-2); box-shadow: var(--sh-2); }

/* ---------- preloader ---------- */
/* la animación CSS retira el preloader sola aunque no llegue a ejecutarse ningún script */
.preloader { position: fixed; inset: 0; z-index: 200; background: var(--ink); display: grid; place-items: center; transition: transform .9s cubic-bezier(.76,0,.24,1), visibility 0s .9s; animation: preloaderOut .9s cubic-bezier(.76,0,.24,1) 2.2s forwards; }
.preloader.done { transform: translateY(-101%); visibility: hidden; }
@keyframes preloaderOut { to { transform: translateY(-101%); visibility: hidden; } }
.preloader svg { width: 118px; height: 118px; }
.preloader path, .preloader circle { stroke: var(--teal); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: flex; align-items: center; position: relative; overflow: hidden; color: #fff; padding: 120px 0 60px; }
#gradient-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-fallback { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 15% 5%, var(--ink-2) 0%, var(--ink) 46%, var(--ink-3) 100%); }
/* el video (fondo oscuro, trazos luminosos) se funde en modo "screen" sobre el degradado iris: deja ver las partículas WebGL encima */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; mix-blend-mode: screen; opacity: .55; }
/* velo oscuro: más denso del lado del texto para que se lea sobre el video */
.hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(7,38,77,.55) 0%, rgba(7,38,77,.25) 70%, rgba(7,38,77,0) 100%), linear-gradient(180deg, rgba(7,38,77,.55) 0%, rgba(7,38,77,.62) 55%, rgba(7,38,77,.9) 100%); }
.aura { position: absolute; inset: -10%; z-index: 2; pointer-events: none; background: radial-gradient(55% 45% at 30% 10%, rgba(62,168,193,.22), transparent 70%), radial-gradient(50% 45% at 85% 85%, rgba(128,202,218,.2), transparent 70%), radial-gradient(40% 40% at 70% 30%, rgba(0,98,136,.16), transparent 70%); animation: auraMove 18s ease-in-out infinite alternate; }
@keyframes auraMove { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 50% { transform: translate3d(4%, 3%, 0) scale(1.12); } 100% { transform: translate3d(-2%, 4%, 0) scale(1.05); } }
.hero .wrap { position: relative; z-index: 3; width: 100%; }
.hero-copy { will-change: transform, opacity; }
.hero h1 { font-size: var(--step-hero); line-height: 1.1; letter-spacing: -.02em; }
.hero { padding: calc(env(safe-area-inset-top, 0px) + 96px) 0 44px; align-items: flex-start; }
@media (max-width: 560px) { .hero { padding-top: calc(env(safe-area-inset-top, 0px) + 88px); } }

.line-mask { display: block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.08em; }
.line-mask > span { display: block; }
/* subtítulo + botones en una misma fila */
.hero-lower { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 1.6rem; flex-wrap: wrap; }
.hero-sub { margin-top: 0; font-size: var(--step-lead); color: rgba(255,255,255,.82); max-inline-size: 52ch; }
.hero-sub b { color: #fff; font-weight: 600; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; flex: none; }

/* countdown grande, a lo ancho, debajo de todo */
.countdown { display: flex; justify-content: flex-start; align-items: baseline; gap: clamp(18px, 4vw, 52px); width: 100%; margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.18); }
.cd-cell { text-align: center; }
.cd-num { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 5.4vw, 4rem); line-height: 1; font-variant-numeric: tabular-nums; display: inline-block; }
.cd-lbl { font-size: clamp(.58rem, .9vw, .7rem); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 8px; }
.cd-sep { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2.4rem); color: var(--teal); align-self: center; }
@media (max-width: 560px){ .cd-sep{ display:none; } .countdown{ gap:6px; justify-content: space-between; } }
.cd-state { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 4vw, 2.6rem); letter-spacing: -.02em; line-height: 1.1; display: flex; align-items: center; gap: .6em; }
.cd-state::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(62,168,193,.6); animation: livePulse 1.8s ease-out infinite; flex: none; }
.cd-state.is-over::before { animation: none; background: var(--lilac); }
@keyframes livePulse { to { box-shadow: 0 0 0 .7em rgba(62,168,193,0); } }

.hand-art { will-change: transform; width: 170px; flex: none; align-self: flex-end; }
@media (max-width: 760px){ .hand-art { display: none; } }
.hand-art svg { width: 100%; height: auto; overflow: visible; }
.hand-art path { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hand-art .joint { fill: var(--teal); stroke: none; }
.flex-group { transform-origin: 50% 90%; }

.scroll-ind { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,.6); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; }
.scroll-ind .mouse { width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 12px; position: relative; }
.scroll-ind .mouse::after { content: ""; position: absolute; top: 6px; left: 50%; width: 3px; height: 6px; background: var(--teal); border-radius: 3px; transform: translateX(-50%); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0%{ opacity:0; transform: translate(-50%,0);} 40%{opacity:1;} 100%{ opacity:0; transform: translate(-50%,12px);} }

/* ---------- cifras ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 820px){ .stat-grid{ grid-template-columns: repeat(2,1fr);} }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 30px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--sh-1); transition: transform .5s var(--e-expo), box-shadow .5s var(--e-expo), border-color .5s; }
.stat:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: rgba(62,168,193,.35); }
.stat .num { font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.stat .num em { font-style: normal; color: var(--teal); }
.stat .lbl { margin-top: 12px; color: var(--muted); font-size: .94rem; }

/* ---------- sobre ---------- */
.sobre-grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: 60px; align-items: center; }
@media (max-width: 940px){ .sobre-grid{ grid-template-columns: 1fr; } }
.scrub { font-family: var(--serif); font-size: var(--step-h3); line-height: 1.34; letter-spacing: -.01em; }
.scrub .w { color: rgba(7,38,77,.24); transition: color .2s var(--e-std); }
.scrub .w.on { color: var(--ink); }
.parallax-frame { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; position: relative; box-shadow: var(--sh-3); }
.parallax-frame .inner { position: absolute; inset: -14%; background: radial-gradient(90% 70% at 20% 10%, rgba(62,168,193,.5), transparent 60%), radial-gradient(90% 80% at 90% 90%, rgba(128,202,218,.55), transparent 55%), linear-gradient(140deg, var(--ink-2), var(--ink)); will-change: transform; }
.parallax-frame .tag { position: absolute; left: 18px; bottom: 18px; z-index: 2; color:#fff; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; background: rgba(7,38,77,.5); backdrop-filter: blur(6px); padding: 9px 15px; border-radius: 100px; }

/* ---------- ejes: texto + orbital 3D en la misma fila (fallback: apilado) ---------- */
.ejes-split { padding-block: clamp(4rem, 3rem + 5vw, 7rem); }
.ejes-intro h2 { font-size: var(--step-h2); margin-top: 1rem; letter-spacing: -.02em; }
.ejes-intro p { color: rgba(255,255,255,.72); margin-top: 1rem; font-size: var(--step-lead); max-inline-size: 32ch; }
.ejes-intro .hint { margin-top: 1.5rem; color: rgba(255,255,255,.45); font-size: .82rem; max-inline-size: 28ch; }
.ejes-orbit { display: flex; gap: 24px; margin-top: 2.2rem; padding-bottom: 20px; overflow-x: auto; scroll-snap-type: x mandatory; }
.ejes-orbit::-webkit-scrollbar { height: 6px; }
.ejes-orbit::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 6px; }
.eje { flex: 0 0 300px; scroll-snap-align: start; background: rgba(36,43,86,.55); border: 1px solid var(--iris-border); border-radius: var(--radius-lg); padding: 30px; min-height: 290px; display: flex; flex-direction: column; transition: background .4s, border-color .4s; }
.eje:hover { background: rgba(62,168,193,.12); border-color: var(--teal); }
.eje .ico { width: 46px; height: 46px; margin-bottom: 20px; }
.eje .ico path, .eje .ico circle, .eje .ico line, .eje .ico rect { stroke: var(--teal); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.eje h3 { font-size: 1.35rem; }
.eje p { color: rgba(255,255,255,.68); font-size: .92rem; margin-top: 12px; }
.eje .idx { margin-top: auto; font-size: .72rem; letter-spacing: .2em; color: var(--lilac); }
/* modo orbital (desktop + movimiento): dos columnas, cards girando a la derecha */
.ejes-split.orbit-on { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 36px; height: 100svh; padding-block: 0; }
.ejes-split.orbit-on .ejes-intro { align-self: center; }
.ejes-split.orbit-on .ejes-orbit { position: relative; height: 82%; margin-top: 0; display: block; overflow: visible; padding: 0; perspective: 1300px; scroll-snap-type: none; }
.ejes-split.orbit-on .eje { position: absolute; top: 50%; left: 50%; flex: none; width: 264px; margin: 0; will-change: transform, opacity; backface-visibility: hidden; cursor: grab; }
@media (max-width: 980px){ .ejes-split.orbit-on { display: block; height: auto; padding-block: clamp(4rem,3rem+5vw,7rem); } }

/* ---------- ponentes ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 2.2rem; }
.chip { font-size: .84rem; font-weight: 600; padding: 9px 18px; border-radius: 100px; border: 1px solid var(--line); background: var(--card); cursor: pointer; transition: all .3s var(--e-expo); color: var(--muted); }
.chip.active, .chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
/* carrusel de ponentes (referencia team-02-pixa): fila simétrica, card central
   grande, laterales decrecen sin rotar ni encimarse; nombre/rol bajo la activa. */
.pc { position: relative; margin-top: 34px; }
.pc-viewport { position: relative; height: 360px; }
.pc-track { position: absolute; inset: 0; }
.pc-card { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 28px; overflow: hidden; background: var(--card); cursor: pointer; box-shadow: 0 22px 55px -24px rgba(7,38,77,.4); transform-origin: center center; will-change: transform, opacity; }
.pc-card.is-active { box-shadow: 0 34px 74px -22px rgba(7,38,77,.52); cursor: default; }
.pc-card .photo { position: absolute; inset: 0; }
.pc-card .photo .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); transition: transform .8s var(--e-expo); }
.pc-card.is-active .photo .bg { transform: scale(1.1); }
.pc-card .photo .glare { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(254,254,254,.55), transparent 46%); mix-blend-mode: screen; transition: opacity .3s; }
.pc-card .pc-cap { display: none; }
.pc-info { text-align: center; margin-top: 26px; min-height: 96px; }
.pc-name { font-size: 1.55rem; letter-spacing: -.02em; color: var(--ink); }
.pc-role { font-size: .95rem; color: var(--teal-ink); font-weight: 600; margin-top: 7px; }
.pc-more { margin-top: 15px; font-size: .82rem; font-weight: 600; padding: 9px 20px; border-radius: 100px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: all .3s var(--e-expo); }
.pc-more:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.pc-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 1.4rem; line-height: 1; display: grid; place-items: center; cursor: pointer; z-index: 20; box-shadow: var(--sh-1); transition: background .3s, color .3s, transform .3s var(--e-expo); }
.pc-nav:hover { background: var(--ink); color: #fff; transform: translateY(-50%) scale(1.08); }
.pc-nav.prev { left: 0; } .pc-nav.next { right: 0; }
/* fallback (movimiento reducido / pantalla estrecha): grilla limpia sin carrusel */
.pc.static-mode .pc-viewport { position: static; height: auto; }
.pc.static-mode .pc-track { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 18px; }
.pc.static-mode .pc-card { position: static; width: auto; height: auto; margin: 0; border-radius: 20px; }
.pc.static-mode .pc-card .photo { position: relative; aspect-ratio: 1/1; }
.pc.static-mode .pc-card .pc-cap { display: block; padding: 12px 15px; }
.pc.static-mode .pc-card .pc-cap b { display: block; font-size: .95rem; color: var(--ink); }
.pc.static-mode .pc-card .pc-cap span { display: block; font-size: .78rem; color: var(--teal-ink); font-weight: 600; margin-top: 3px; }
.pc.static-mode .pc-nav, .pc.static-mode .pc-info { display: none; }
.pc.static-mode .pc-card.is-hidden { display: none; }
@media (max-width: 520px){ .pc.static-mode .pc-track{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } }

/* modal */
.modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 24px; background: rgba(7,38,77,.5); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s, visibility 0s .35s; }
.modal.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s; }
.modal-card { background: var(--card); border-radius: var(--radius-lg); max-width: 480px; width: 100%; padding: 36px; box-shadow: var(--sh-3); transform: translateY(18px) scale(.97); transition: transform .45s var(--e-expo); }
.modal.open .modal-card { transform: none; }
.modal-card .avatar { width: 78px; height: 78px; border-radius: 20px; display: grid; place-items: center; font-family: var(--serif); font-size: 2rem; color: #fff; margin-bottom: 20px; }
.modal-card h3 { font-size: 1.7rem; }
.modal-card .flag { color: var(--teal-ink); font-weight: 600; margin: 8px 0 16px; }
.modal-card p { color: var(--muted); }
.modal-close { float: right; width: 40px; height: 40px; margin: -10px -10px 0 0; border-radius: 50%; font-size: 1.5rem; cursor: pointer; color: var(--muted); border: none; background: none; line-height: 1; }
.modal-close:hover { background: var(--bone); color: var(--ink); }

/* ---------- agenda ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tab { font-size: .88rem; font-weight: 600; padding: 11px 22px; border-radius: 100px; border: 1px solid var(--line); background: var(--card); cursor: pointer; transition: all .3s var(--e-expo); }
.tab.active { background: var(--iris-pulse); color: var(--ink); border-color: var(--iris-pulse); }
.salon-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 2rem; }
.salon-tab { font-size: .82rem; font-weight: 600; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line); background: transparent; cursor: pointer; transition: all .3s var(--e-expo); color: var(--muted); }
.salon-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.agenda-list { display: flex; flex-direction: column; gap: 12px; }
.agenda-note { margin-top: 1.6rem; color: var(--muted); font-size: .88rem; }
.talk { display: grid; grid-template-columns: 120px 1fr auto; gap: 22px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--sh-1); transition: border-color .4s, transform .4s var(--e-expo), box-shadow .4s; }
.talk:hover { border-color: var(--teal); transform: translateX(6px); box-shadow: var(--sh-2); }
@media (max-width: 720px){ .talk{ grid-template-columns: 1fr; gap: 8px; } }
.talk .time { font-family: var(--serif); font-size: 1.2rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.talk .t-title { font-weight: 600; }
.talk .t-sp { color: var(--muted); font-size: .9rem; margin-top: 3px; }
.badge { font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 100px; white-space: nowrap; }
.badge.pres { background: rgba(62,168,193,.15); color: var(--teal-ink); }
.badge.virt { background: rgba(229,204,156,.5); color: var(--ink); }
.badge.hib  { background: rgba(7,38,77,.1); color: var(--ink); }

/* ---------- tarifas ---------- */
.toggle-wrap { display: flex; justify-content: center; margin-bottom: 3rem; }
.toggle { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 100px; padding: 5px; position: relative; box-shadow: var(--sh-1); }
.toggle button { border: none; background: none; cursor: pointer; font-weight: 600; font-size: .92rem; padding: 11px 28px; border-radius: 100px; position: relative; z-index: 2; color: var(--muted); transition: color .3s; }
.toggle button.active { color: var(--ink); }
.toggle .slider { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); background: var(--iris-pulse); border-radius: 100px; transition: transform .45s var(--e-expo); z-index: 1; }
.toggle.virt .slider { transform: translateX(100%); }
.tarifas-grid { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 1000px){ .tarifas-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .tarifas-grid{ grid-template-columns: 1fr;} }
.price { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 24px; display: flex; flex-direction: column; box-shadow: var(--sh-1); transition: transform .5s var(--e-expo), box-shadow .5s var(--e-expo); }
.price:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.price.featured { position: relative; border: none; box-shadow: var(--sh-2); }
.price.featured::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1.5px; background: conic-gradient(from var(--a,0deg), var(--teal), var(--lav), var(--ink), var(--teal)); -webkit-mask: linear-gradient(#07264D 0 0) content-box, linear-gradient(#07264D 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 6s linear infinite; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --a: 360deg; } }
.price .tier { font-size: .72rem; color: var(--teal-ink); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; height: 1em; margin-bottom: 14px; }
.price .cat { font-weight: 700; font-size: 1.04rem; }
.price .amount { font-family: var(--serif); font-size: 2.1rem; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 14px; }
.price .amount small { font-family: var(--sans); font-size: .78rem; color: var(--muted); font-weight: 500; }
.price .amount .tbd { font-size: 1.3rem; }
.tarifas-grid { margin-inline: auto; }
.price .cur { font-size: .78rem; color: var(--muted); margin-top: 5px; }
.price ul { list-style: none; padding: 0; margin: 20px 0 24px; display: flex; flex-direction: column; gap: 10px; font-size: .88rem; color: var(--muted); }
.price li { display: flex; gap: 9px; align-items: flex-start; }
.price li svg { flex: none; margin-top: 3px; }
.price .btn { width: 100%; margin-top: auto; }
.cupon-note { text-align: center; margin-top: 1.8rem; color: var(--muted); font-size: .9rem; }
.cupon-note a { color: var(--iris-glow); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.virt-note { text-align: center; margin: -1.6rem auto 2.4rem; color: var(--muted); font-size: .88rem; max-inline-size: 62ch; }
.proof { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.3rem; padding: 9px 18px; border-radius: 100px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); font-size: .92rem; font-weight: 600; color: var(--ink); }
.proof::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(62,168,193,.2); }
.proof b { font-variant-numeric: tabular-nums; font-weight: 800; }
.final .proof { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #fff; box-shadow: none; margin-top: 1.6rem; }
.final .proof-row { display: block; }

/* ---------- transmisión ---------- */
.stream { background: var(--ink-3); color: #fff; overflow: hidden; }
.stream-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; }
@media (max-width: 900px){ .stream-grid{ grid-template-columns: 1fr; } }
.screens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 480px){ .screens{ grid-template-columns: 1fr; } }
.screen { aspect-ratio: 16/9; border-radius: var(--radius); position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(135deg, var(--ink-2), var(--ink)); display: grid; place-items: center; }
.screen::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(62,168,193,.06) 0 2px, transparent 2px 4px); }
.screen::after { content: ""; position: absolute; top: -60%; left: -30%; width: 55%; height: 220%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); transform: rotate(18deg); animation: scan 5s linear infinite; }
@keyframes scan { to { transform: translateX(291%) rotate(18deg); } }
.screen .s-label { position: relative; z-index: 2; text-align: center; }
.screen .s-label .n { font-family: var(--serif); font-size: 2rem; color: var(--teal); }
.screen .s-label .p { color: rgba(255,255,255,.6); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- sede ---------- */
.sede-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
@media (max-width: 900px){ .sede-grid{ grid-template-columns: 1fr; } }
.sede-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/2; box-shadow: var(--sh-3); }
.sede-photo .tag { position: absolute; left: 18px; bottom: 18px; z-index: 2; color: #fff; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; background: rgba(7,38,77,.5); backdrop-filter: blur(6px); padding: 9px 15px; border-radius: 100px; }
.sede-photo .place { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; text-align: center; color: #fff; pointer-events: none; }
.sede-photo .place b { display: block; font-size: clamp(1.8rem, 4.6vw, 3.2rem); font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.sede-photo .place span { display: block; margin-top: .7rem; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.sede-photo .inner { width: 100%; height: 120%; margin-top: -10%; background: radial-gradient(80% 60% at 70% 20%, rgba(128,202,218,.5), transparent 60%), linear-gradient(160deg, var(--ink-2), var(--ink) 70%); will-change: transform; }
.info-cards { display: flex; flex-direction: column; gap: 16px; }
.info-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--sh-1); }
.info-card h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; }
.info-card p { color: var(--muted); font-size: .92rem; margin-top: 7px; }

/* ---------- patrocinadores ---------- */
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #07264D 8%, #07264D 92%, transparent); mask: linear-gradient(90deg, transparent, #07264D 8%, #07264D 92%, transparent); }
.marquee-track { display: flex; gap: 64px; width: max-content; animation: slide 28s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.sponsor { font-family: var(--sans); font-weight: 600; font-size: 1.5rem; color: var(--muted); filter: grayscale(1); opacity: 1; transition: color .35s, filter .35s, opacity .35s; white-space: nowrap; }
.sponsor:hover { color: var(--ink); filter: none; opacity: 1; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 800px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 26px 8px; font-size: 1.12rem; font-weight: 600; font-family: var(--sans); color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq-q .plus { flex: none; width: 24px; height: 24px; position: relative; transition: transform .45s var(--e-expo); }
.faq-q .plus::before, .faq-q .plus::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--teal); border-radius: 2px; }
.faq-q .plus::before { width: 16px; height: 2px; transform: translate(-50%,-50%); }
.faq-q .plus::after { width: 2px; height: 16px; transform: translate(-50%,-50%); }
.faq-item.open .plus { transform: rotate(135deg); }
.faq-a { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .5s var(--e-expo), visibility 0s .5s; }
.faq-item.open .faq-a { visibility: visible; transition: max-height .5s var(--e-expo); }
.faq-a a { color: var(--iris-glow); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.faq-a p { padding: 0 8px 26px; color: var(--muted); }

/* ---------- CTA final + footer ---------- */
.final { min-height: 80svh; display: flex; align-items: center; position: relative; overflow: hidden; color: #fff; text-align: center; }
#gradient-canvas-2 { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.final .fallback { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 80% 15%, var(--ink-2), var(--ink) 55%, var(--ink-3)); }
.final .wrap { position: relative; z-index: 3; }
.final h2 { font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem); line-height: 1.1; max-inline-size: 16ch; margin-inline: auto; transform-origin: center center; will-change: transform; }
.final .btn { margin-top: 2.2rem; }

footer { background: var(--ink); color: rgba(255,255,255,.7); padding: 66px 0 42px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; }
@media (max-width: 760px){ .foot-grid{ grid-template-columns: 1fr; gap: 32px; } }
footer h4 { color: #fff; font-family: var(--sans); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
footer a { display: block; color: rgba(255,255,255,.7); padding: 4px 0; transition: color .3s; overflow-wrap: anywhere; }
footer a:hover { color: var(--teal); }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 46px; padding-top: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: rgba(255,255,255,.5); }

/* ---------- hero typing ---------- */
.hero-typed { margin-top: .7rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.8rem); color: var(--teal); min-height: 1.4em; }
.hero-typed .caret { display: inline-block; width: 2px; height: .95em; background: var(--teal); margin-left: 3px; vertical-align: -3px; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- mobile menu ---------- */
/* botón de menú flotante (sin header), pegado a la derecha */
.burger { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 14px); right: var(--borde-fijo); z-index: 120; width: 48px; height: 48px; padding: 0; border: none; cursor: pointer; border-radius: 50%; background: rgba(7,38,77,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--sh-2); transition: background .3s, transform .3s var(--e-expo); }
.burger:hover { background: rgba(7,38,77,.8); transform: translateY(-1px); }
.burger span { position: absolute; left: 14px; right: 14px; height: 2px; background: #fff; border-radius: 2px; transition: transform .4s var(--e-expo), opacity .3s; }
.burger span:nth-child(1) { top: 18px; } .burger span:nth-child(2) { top: 24px; } .burger span:nth-child(3) { top: 30px; }
body.menu-open .burger { background: rgba(7,38,77,.85); }
body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-overlay { position: fixed; inset: 0; z-index: 105; background: var(--ink); display: flex; flex-direction: column; justify-content: center; gap: .1rem; padding: calc(env(safe-area-inset-top, 0px) + 72px) 8vw 28px; opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden auto; overscroll-behavior: contain; transition: opacity .45s var(--e-expo), visibility 0s .45s; }
.menu-overlay::before { content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(38% 40% at 18% 28%, rgba(62,168,193,.32), transparent 62%), radial-gradient(42% 44% at 85% 72%, rgba(128,202,218,.3), transparent 62%), radial-gradient(34% 36% at 62% 15%, rgba(0,98,136,.26), transparent 62%);
  animation: auraMove 16s ease-in-out infinite alternate; animation-play-state: paused; }
body.menu-open .menu-overlay::before { animation-play-state: running; }
body.menu-open .menu-overlay { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .45s var(--e-expo); }
.menu-overlay > a { position: relative; z-index: 1; overflow: hidden; width: max-content; font-family: var(--serif); font-size: clamp(2.2rem, 9vw, 4rem); color: #fff; line-height: 1.16; padding: .04em 0; transition: transform .4s var(--e-expo), color .3s; }
.menu-overlay > a > span { display: block; transform: translateY(115%); transition: transform .65s var(--e-expo); }
body.menu-open .menu-overlay > a > span { transform: none; }
.menu-overlay > a::after { content: ""; position: absolute; left: 0; bottom: .06em; height: 3px; width: 0; background: var(--teal); transition: width .45s var(--e-expo); }
.menu-overlay > a:hover { transform: translateX(20px); color: var(--teal); }
.menu-overlay > a:hover::after { width: 100%; }
.menu-overlay > a:nth-child(1) > span { transition-delay: .10s } .menu-overlay > a:nth-child(2) > span { transition-delay: .17s } .menu-overlay > a:nth-child(3) > span { transition-delay: .24s } .menu-overlay > a:nth-child(4) > span { transition-delay: .31s } .menu-overlay > a:nth-child(5) > span { transition-delay: .38s } .menu-overlay > a:nth-child(6) > span { transition-delay: .45s }
.menu-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(1.2rem, 4vh, 2.4rem); opacity: 0; transform: translateY(14px); transition: opacity .5s var(--e-expo) .1s, transform .6s var(--e-expo) .1s; }
body.menu-open .menu-actions { opacity: 1; transform: none; transition-delay: .5s; }
@media (max-height: 560px) { .menu-overlay > a { font-size: clamp(1.5rem, 7vh, 2.4rem); } }

/* ---------- conferencias magistrales (header + stacking cards) ---------- */
.kn-head { max-width: 720px; margin: 0 auto 3.5rem; text-align: center; }
.kn-head .eyebrow { justify-content: center; }
.kn-head h2 { font-size: var(--step-h2); margin-top: 1rem; letter-spacing: -.02em; }
.kn-head p { color: var(--muted); margin: 1rem auto 0; font-size: var(--step-lead); max-inline-size: 44ch; }
.stack { display: flex; flex-direction: column; gap: 2.2rem; perspective: 2000px; }
.stack-card { position: sticky; top: calc(96px + var(--i, 0) * 26px); border-radius: var(--radius-lg); overflow: hidden; min-height: 56vh; display: flex; align-items: flex-start; padding: clamp(30px, 4vw, 56px); color: #fff; box-shadow: var(--sh-3); transform-origin: center top; will-change: transform, filter; }
.stack-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(7,38,77,.15), rgba(7,38,77,.8)); z-index: 1; }
.stack-card .sc-body { position: relative; z-index: 2; max-width: 640px; }
.stack-card .sc-num { font-family: var(--serif); font-size: 1rem; opacity: .7; letter-spacing: .05em; }
.stack-card .sc-cat { display: inline-block; margin: 14px 0; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: var(--teal); padding: 6px 14px; border-radius: 100px; }
.stack-card h3 { font-size: clamp(1.8rem, 4.4vw, 3.2rem); line-height: 1; }
.stack-card p { margin-top: 16px; color: rgba(255,255,255,.82); max-inline-size: 52ch; font-size: 1.02rem; }
.stack-card .sc-sp { margin-top: 18px; font-size: .9rem; color: var(--teal); font-weight: 600; letter-spacing: .04em; }


/* ---------- floating whatsapp + cursor ---------- */
.wa { position: fixed; right: 22px; bottom: calc(env(safe-area-inset-bottom,0px) + 22px); z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: var(--caribe); display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(0,98,136,.7); transform: scale(0); transition: transform .55s cubic-bezier(.34,1.56,.64,1); cursor: pointer; }
.wa.in { transform: scale(1); }
.wa:hover { transform: scale(1.08); }
.cursor { position: fixed; top: 0; left: 0; width: 30px; height: 30px; border: 1.5px solid var(--teal); border-radius: 50%; pointer-events: none; z-index: 300; transform: translate(-50%,-50%); transition: width .25s, height .25s, background .25s; mix-blend-mode: difference; }
.cursor.grow { width: 56px; height: 56px; background: rgba(62,168,193,.16); }
@media (max-width: 900px), (pointer: coarse) { .cursor { display: none; } }

/* ---------- sección cinemática (zoom / push-through) ---------- */
.cinema { position: relative; height: 100svh; overflow: hidden; background: var(--ink-3); }
.cinema-media { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform, opacity; transform-origin: center 42%; }
.cinema-bg { position: absolute; inset: 0; background:
    radial-gradient(55% 45% at 50% 40%, rgba(62,168,193,.4), transparent 62%),
    radial-gradient(60% 55% at 85% 90%, rgba(128,202,218,.35), transparent 60%),
    linear-gradient(160deg, var(--ink-2) 0%, var(--ink) 55%, var(--ink-3) 100%); }
.cinema-bg::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px);
  background-size: 26px 26px; mask: radial-gradient(70% 60% at 50% 45%, #07264D, transparent 75%); -webkit-mask: radial-gradient(70% 60% at 50% 45%, #07264D, transparent 75%); }
.cinema-word { position: relative; z-index: 2; text-align: center; color: #fff; padding: 0 24px; }
.cinema-word .eyebrow { color: var(--teal); justify-content: center; }
.cinema-word h2 { font-size: clamp(2.6rem, 8.5vw, 7rem); line-height: .96; margin-top: 1rem; }
.cinema-word h2 .em { color: var(--teal); }

/* ---------- toggle de animaciones (accesibilidad / demo) ---------- */
.motion-toggle { position: fixed; left: 20px; bottom: calc(env(safe-area-inset-bottom,0px) + 22px); z-index: 92; display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: .8rem; font-weight: 600; color: #fff; background: rgba(7,38,77,.9); border: 1px solid rgba(255,255,255,.18); padding: 11px 16px; border-radius: 100px; cursor: pointer; backdrop-filter: blur(8px); box-shadow: var(--sh-2); transition: background .3s, transform .3s var(--e-expo); }
.motion-toggle:hover { transform: translateY(-2px); background: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  :root:not(.fx-on) *, :root:not(.fx-on) *::before, :root:not(.fx-on) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  :root:not(.fx-on) .preloader { display: none; }
}



/* =====================================================================
   SITIO MULTIPÁGINA (brief ASOREUMA 2027)
   Lo de arriba es el CSS original de la landing; lo de abajo agrega
   el botón fijo, el menú de 13 páginas y los bloques de las páginas internas.
   ===================================================================== */
.claro { background: var(--bone); }
.claro-2 { background: var(--bone-2); }

/* ---------- botón fijo INSCRÍBASE (junto al menú) ---------- */
.cta-fija { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 18px); right: calc(var(--borde-fijo) + 60px); z-index: 120; padding: 11px 22px; font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; }
html.scroll-lock .cta-fija { right: calc(var(--borde-fijo) + 60px + var(--sbw, 0px)); }
body.menu-open .cta-fija { opacity: 0; pointer-events: none; }
@media (max-width: 560px) { .cta-fija { top: calc(env(safe-area-inset-top, 0px) + 19px); right: calc(var(--borde-fijo) + 56px); padding: 10px 16px; font-size: .74rem; } }

/* ---------- menú de 13 páginas: dos columnas en escritorio ---------- */
.menu-overlay { justify-content: flex-start; padding-top: calc(env(safe-area-inset-top, 0px) + 96px); }
.menu-overlay .menu-links { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: clamp(2rem, 7vw, 7rem); row-gap: .1rem; margin-block: auto; }
.menu-overlay .menu-links > a { position: relative; overflow: hidden; width: max-content; max-width: 100%; font-family: var(--serif); font-size: clamp(1.5rem, 1rem + 2.2vw, 2.7rem); color: #fff; line-height: 1.2; padding: .06em 0; transition: transform .4s var(--e-expo), color .3s; }
.menu-overlay .menu-links > a > span { display: block; transform: translateY(115%); transition: transform .65s var(--e-expo); }
body.menu-open .menu-overlay .menu-links > a > span { transform: none; }
.menu-overlay .menu-links > a::after { content: ""; position: absolute; left: 0; bottom: .06em; height: 2px; width: 0; background: var(--teal); transition: width .45s var(--e-expo); }
.menu-overlay .menu-links > a:hover { transform: translateX(14px); color: var(--teal); }
.menu-overlay .menu-links > a:hover::after, .menu-overlay .menu-links > a[aria-current="page"]::after { width: 100%; }
.menu-overlay .menu-links > a[aria-current="page"] { color: var(--teal); }
.menu-overlay .menu-links > a:nth-child(n) > span { transition-delay: calc(.06s + var(--n, 0) * .035s); }
@media (max-width: 720px) { .menu-overlay .menu-links { grid-template-columns: 1fr; } .menu-overlay .menu-links > a { font-size: clamp(1.35rem, 6.4vw, 2rem); } }
@media (max-height: 640px) and (min-width: 721px) { .menu-overlay .menu-links > a { font-size: clamp(1.2rem, 4.4vh, 1.9rem); } }
.menu-actions { margin-bottom: auto; }

/* ---------- portada del inicio ---------- */
.hero--inicio h1 { font-size: var(--step-hero); }
.hero-kicker { margin-top: 1.1rem; font-size: clamp(1.02rem, .9rem + .7vw, 1.5rem); font-weight: 600; color: #fff; letter-spacing: -.01em; }
.hero-kicker .em { color: var(--lav); }
.hero-lead { margin-top: 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 2.4rem; max-inline-size: 1040px; }
.hero-lead p { color: rgba(255,255,255,.78); font-size: clamp(.96rem, .9rem + .25vw, 1.08rem); line-height: 1.6; }
@media (max-width: 860px) { .hero-lead { grid-template-columns: 1fr; } }

/* ---------- cabecera de páginas internas ---------- */
.page-hero { position: relative; overflow: hidden; color: #fff; padding: calc(env(safe-area-inset-top, 0px) + 150px) 0 clamp(3.5rem, 2rem + 5vw, 6.5rem); background: var(--ink-3); }
.page-hero .fallback { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 15% 5%, var(--ink-2) 0%, var(--ink) 46%, var(--ink-3) 100%); }
.page-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; }
.page-hero .wrap { position: relative; z-index: 3; }
.page-hero .migas { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.page-hero .migas a { color: rgba(255,255,255,.8); }
.page-hero .migas a:hover { color: var(--teal); }
.page-hero h1 { font-size: var(--step-hero); line-height: 1.1; letter-spacing: -.02em; margin-top: 1.2rem; max-inline-size: 22ch; }
.page-hero .lead { margin-top: 1.4rem; font-size: var(--step-lead); color: rgba(255,255,255,.78); max-inline-size: 60ch; }

/* ---------- bloques de contenido ---------- */
.bloque { padding-block: clamp(4rem, 2.5rem + 5vw, 8rem); }
/* dos bloques seguidos del mismo fondo se leen como uno solo */
.bloque.claro + .bloque.claro, .bloque.claro-2 + .bloque.claro-2 { padding-top: 0; }
.prose { max-inline-size: 68ch; font-size: 1.06rem; color: var(--text); }
.prose p { color: var(--muted); margin-top: 1rem; }
.prose p:first-child { margin-top: 0; }
.prose h2 { font-size: var(--step-h3); margin: 2.6rem 0 0; }
.prose .destacado { color: var(--ink); font-weight: 600; font-size: var(--step-lead); }
.dark .prose, .dark .prose .destacado { color: #fff; }
.dark .prose p { color: rgba(255,255,255,.74); }
.dos-col { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .dos-col { grid-template-columns: 1fr; } }
.cita-grande { font-family: var(--serif); font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.2rem); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.dark .cita-grande { color: #fff; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.4rem; }
.btn-claro { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: var(--sh-1); }
.btn-claro:hover { border-color: var(--ink); }
.btn-borde { background: transparent; color: var(--ink); border-color: rgba(7,38,77,.3); }
.btn-borde:hover { border-color: var(--ink); background: rgba(7,38,77,.04); }
.btn[aria-disabled="true"] { opacity: .65; pointer-events: none; }

/* temas (chips informativos, no son botones) */
.temas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2rem; padding: 0; list-style: none; }
.temas li { font-size: .9rem; font-weight: 600; padding: 9px 18px; border-radius: 100px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.dark .temas li { background: rgba(36,43,86,.55); border-color: var(--iris-border); color: #fff; }

/* tarjetas genéricas */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.tarjeta { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: .7rem; transition: transform .5s var(--e-expo), box-shadow .5s var(--e-expo), border-color .5s; }
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: rgba(62,168,193,.35); }
.tarjeta h3 { font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.15; }
.tarjeta p { color: var(--muted); font-size: .95rem; }
.tarjeta .meta { display: grid; gap: .25rem; font-size: .88rem; color: var(--muted); margin-top: .3rem; }
.tarjeta .meta b { color: var(--ink); font-weight: 700; }
.tarjeta .acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: .8rem; }
.tarjeta .acciones .btn { padding: 11px 20px; font-size: .84rem; }
.tarjeta .ico { width: 44px; height: 44px; }
.tarjeta .ico * { stroke: var(--teal); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.estado { align-self: flex-start; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 100px; }
.estado.abierta { background: rgba(62,168,193,.15); color: var(--teal-ink); }
.estado.proximamente { background: rgba(229,204,156,.5); color: var(--ink); }
.estado.cerrada { background: rgba(7,38,77,.08); color: var(--muted); }

/* estado vacío / próximamente */
.vacio { border: 1.5px dashed rgba(7,38,77,.22); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); text-align: center; background: rgba(255,255,255,.55); }
.vacio .estado { display: inline-block; margin-bottom: 1rem; }
.vacio h3 { font-size: var(--step-h3); letter-spacing: -.02em; }
.vacio p { color: var(--muted); margin: .8rem auto 0; max-inline-size: 56ch; }
.dark .vacio { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.04); }
.dark .vacio p { color: rgba(255,255,255,.7); }

/* aviso importante */
.aviso { border-radius: var(--radius-lg); padding: clamp(24px, 3.4vw, 40px); background: var(--ink); color: #fff; box-shadow: var(--sh-3); position: relative; overflow: hidden; }
.aviso::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0%, rgba(62,168,193,.3), transparent 60%); pointer-events: none; }
.aviso > * { position: relative; }
.aviso h2, .aviso h3 { font-size: var(--step-h3); letter-spacing: -.02em; }
.aviso ul { margin: 1.2rem 0 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.aviso li { display: flex; gap: .8rem; align-items: flex-start; color: rgba(255,255,255,.86); }
.aviso li::before { content: ""; flex: none; width: 9px; height: 9px; margin-top: .5em; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(62,168,193,.2); }

/* fechas importantes */
.fechas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.fecha { padding: 26px 22px 26px 0; border-bottom: 1px solid var(--line); }
.fecha .n { font-size: .72rem; letter-spacing: .2em; color: var(--teal-ink); font-weight: 700; }
.fecha h3 { font-size: 1.12rem; margin-top: .6rem; letter-spacing: -.01em; line-height: 1.2; }
.fecha p { color: var(--muted); margin-top: .4rem; font-size: .92rem; }

/* documentos descargables */
.docs { display: grid; gap: 10px; }
.doc { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; }
.doc .nom { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.doc .nom svg { width: 26px; height: 26px; flex: none; }
.doc .nom svg * { stroke: var(--teal-ink); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.doc .btn { padding: 9px 18px; font-size: .8rem; }
.doc small { color: var(--muted); font-weight: 500; }

/* buscador y filtros */
.buscador { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 1.4rem; }
.buscador input[type="search"] { flex: 1 1 320px; min-width: 0; font: inherit; font-size: 1rem; padding: 14px 20px; border-radius: 100px; border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }
.buscador input[type="search"]:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 2rem; }
.filtros .grupo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtros .grupo + .grupo { padding-left: 14px; border-left: 1px solid var(--line); }
.filtros .etq { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-right: 4px; }
.sin-resultados { color: var(--muted); padding: 2rem 0; text-align: center; }

/* perfiles (conferencistas) */
.perfiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.perfil { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--sh-1); display: flex; flex-direction: column; }
.perfil .foto { aspect-ratio: 1/1; background: linear-gradient(140deg, var(--ink-2), var(--ink)); background-size: cover; background-position: center; }
.perfil .cuerpo { padding: 16px 18px 20px; display: grid; gap: .3rem; }
.perfil h3 { font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.2; }
.perfil .esp { color: var(--teal-ink); font-weight: 700; font-size: .84rem; }
.perfil .inst { color: var(--muted); font-size: .84rem; }

/* fichas (pósteres, hoteles) */
.fichas { display: grid; gap: 14px; }
.ficha { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; display: grid; grid-template-columns: 80px 1fr auto; gap: 20px; align-items: start; box-shadow: var(--sh-1); }
.ficha .num { font-family: var(--serif); font-size: 1.4rem; color: var(--teal-ink); font-variant-numeric: tabular-nums; }
.ficha h3 { font-size: 1.1rem; line-height: 1.25; letter-spacing: -.01em; }
.ficha .autores { color: var(--muted); font-size: .9rem; margin-top: .3rem; }
.ficha .acciones { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 760px) { .ficha { grid-template-columns: 1fr; } }

/* atractivos de Santa Marta */
.atractivos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.atractivo { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; color: #fff; display: flex; align-items: flex-end; padding: 22px; box-shadow: var(--sh-2); background: radial-gradient(90% 70% at 20% 10%, rgba(62,168,193,.45), transparent 60%), radial-gradient(90% 80% at 90% 90%, rgba(128,202,218,.5), transparent 55%), linear-gradient(150deg, var(--ink-2), var(--ink)); }
.atractivo:nth-child(2n) { background: radial-gradient(90% 70% at 80% 10%, rgba(128,202,218,.5), transparent 60%), radial-gradient(90% 80% at 10% 90%, rgba(62,168,193,.4), transparent 55%), linear-gradient(150deg, var(--ink), var(--ink-2)); }
.atractivo h3 { font-size: 1.35rem; line-height: 1.1; letter-spacing: -.02em; }
.atractivo .idx { position: absolute; top: 20px; left: 22px; font-size: .72rem; letter-spacing: .2em; color: var(--bone); }

/* aliados por categoría */
.cat-aliados + .cat-aliados { margin-top: 3rem; }
.cat-aliados h2 { font-size: var(--step-h3); letter-spacing: -.02em; margin-bottom: 1.2rem; }
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.logo-aliado { aspect-ratio: 3/2; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); display: grid; place-items: center; padding: 18px; }

/* contacto por áreas */
.contactos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.contacto { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--sh-1); display: grid; gap: .5rem; align-content: start; }
.contacto h3 { font-size: 1.1rem; letter-spacing: -.01em; }
.contacto p { color: var(--muted); font-size: .9rem; }
.contacto a.mail { color: var(--iris-glow); font-weight: 700; overflow-wrap: anywhere; }
.contacto .pend { color: var(--muted); font-size: .86rem; font-style: italic; }

/* modalidades (inscripciones) */
.modalidades { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .modalidades { grid-template-columns: 1fr; } }
.modalidad { border-radius: var(--radius-lg); padding: clamp(26px, 3.4vw, 40px); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-2); display: flex; flex-direction: column; gap: .8rem; }
.modalidad.oscura { background: var(--ink); color: #fff; border-color: var(--ink); }
.modalidad h2 { font-size: var(--step-h3); letter-spacing: -.02em; }
.modalidad p { color: var(--muted); }
.modalidad.oscura p { color: rgba(255,255,255,.76); }
.modalidad.oscura .eyebrow, .modalidad.oscura .em { color: var(--teal); }
.modalidad .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .2rem; }
.modalidad .chips span { font-size: .78rem; font-weight: 700; padding: 6px 12px; border-radius: 100px; background: rgba(62,168,193,.16); color: var(--teal); }
.modalidad:not(.oscura) .chips span { color: var(--teal-ink); }
.modalidad .btn { margin-top: auto; align-self: flex-start; }

/* pie de página del brief */
.foot-grid--sitio { grid-template-columns: 1.2fr 2fr; }
.foot-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
@media (max-width: 760px) { .foot-grid--sitio { grid-template-columns: 1fr; } .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.foot-lema { color: var(--teal); font-weight: 600; margin-top: .8rem; }
.foot-congresos { color: #fff; font-weight: 700; line-height: 1.35; }
/* rojo ASOREUMA: solo como marca puntual junto al nombre de la Asociación */
.foot-org { display: flex; align-items: center; gap: .6rem; }
.foot-org::before { content: ""; flex: none; width: 4px; height: 1.1em; border-radius: 2px; background: var(--asoreuma); }

/* menú: se lee por columnas (orden del brief) */
@media (min-width: 721px) { .menu-overlay .menu-links { grid-template-rows: repeat(7, auto); grid-auto-flow: column; } }
/* portada en teléfono: los botones bajan de línea y ocupan el ancho */
@media (max-width: 560px) {
  .hero-cta { flex: 1 1 100%; }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-lower { gap: 22px; }
}

/* ── Lenguaje gráfico de la identidad (guía del cliente): ondas del mar y del sombrero vueltiao, silueta de la Sierra ── */
/* Onda de cierre de las portadas: se tiñe del color de la sección siguiente */
.hero, .page-hero { --onda: var(--bone); }
.hero:has(+ .dark), .page-hero:has(+ .dark) { --onda: var(--ink); }
.hero:has(+ .claro-2), .page-hero:has(+ .claro-2) { --onda: var(--bone-2); }
.hero::after, .page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(28px, 4vw, 64px); z-index: 2; pointer-events: none;
  background: var(--onda);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C180 8 360 8 540 30 S900 60 1080 34 S1320 6 1440 22 V64 H0Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C180 8 360 8 540 30 S900 60 1080 34 S1320 6 1440 22 V64 H0Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
/* Silueta de la Sierra Nevada, muy sutil, detrás del título de las páginas internas */
.page-hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(110px, 16vw, 250px); z-index: 1; pointer-events: none; opacity: .09;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M0 220 V170 L120 140 L210 156 L330 96 L420 128 L520 60 L600 92 L690 20 L760 70 L820 48 L930 118 L1040 84 L1150 136 L1260 104 L1360 150 L1440 132 V220Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M0 220 V170 L120 140 L210 156 L330 96 L420 128 L520 60 L600 92 L690 20 L760 70 L820 48 L930 118 L1040 84 L1150 136 L1260 104 L1360 150 L1440 132 V220Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
/* Línea curva (franjas del sombrero) en lugar de la raya recta de los antetítulos */
.eyebrow::before {
  width: 34px; height: 8px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 8'%3E%3Cpath d='M1 4 C5 0 9 0 13 4 S21 8 25 4 S31 1 33 3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 8'%3E%3Cpath d='M1 4 C5 0 9 0 13 4 S21 8 25 4 S31 1 33 3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* Onda de entrada al cierre y al pie desde una sección clara */
.final::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(28px, 4vw, 64px); z-index: 2; pointer-events: none; background: var(--bone);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V30 C1260 58 1080 58 900 36 S540 6 360 30 S120 58 0 40Z'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V30 C1260 58 1080 58 900 36 S540 6 360 30 S120 58 0 40Z'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
}
/* Texto pequeño de acento sobre los degradados animados: turquesa claro (el turquesa base no alcanza 4,5:1 ahí) */
.final .eyebrow, .page-hero .migas a:hover, .hero .eyebrow { color: var(--turq-claro); }

/* Portada: el título arranca en la misma línea que "Inscríbase" y el menú (fijos a 14px, 48px de alto),
   centrado verticalmente con ellos; así toda la información, contador incluido, cabe en la primera pantalla. */
.hero.hero--inicio { padding-top: calc(env(safe-area-inset-top, 0px) + 14px); }
.hero--inicio #hero-title { margin-top: calc(28px - .55em); padding-right: 230px; }
@media (max-width: 860px) { .hero--inicio #hero-title { padding-right: 0; margin-top: 76px; } }

/* Portada en dos columnas: a la izquierda fecha, ciudad y botones; a la derecha una tarjeta con el contador
   y la introducción. En celular la introducción muestra el primer párrafo y el resto tras "Leer más". */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: clamp(24px, 4vw, 64px); align-items: end; margin-top: 1.8rem; }
.hero-izq .hero-cta { margin-top: 1.4rem; }
.hero-tarjeta { background: rgba(7,38,77,.55); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: clamp(18px, 1.6vw, 26px) clamp(20px, 2vw, 30px); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 20px 50px -24px rgba(7,38,77,.6); }
.hero-tarjeta .countdown { margin-top: 0; padding-top: 0; border-top: 0; justify-content: space-between; gap: 8px; }
.hero-tarjeta .cd-num { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.4rem); }
.hero-tarjeta .cd-sep { font-size: clamp(1.3rem, 1rem + 1vw, 2rem); }
.hero-tarjeta .hero-lead { display: block; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.16); max-inline-size: none; }
.hero-tarjeta .hero-lead p { font-size: clamp(.9rem, .85rem + .15vw, .98rem); line-height: 1.55; color: rgba(255,255,255,.8); }
.hero-tarjeta .hero-lead p + p { margin-top: .6rem; }
.hero-mas { display: none; }
@media (max-width: 860px) {
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 1.4rem; }
  .hero-izq, .hero-tarjeta { display: contents; }
  .hero-izq .hero-sub { order: 1; }
  .hero-tarjeta .countdown { order: 2; margin-top: 1rem; padding: 16px 18px; background: rgba(7,38,77,.55); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; }
  .hero-izq .hero-cta { order: 3; margin-top: 1.2rem; }
  .hero-tarjeta .hero-lead { order: 4; margin-top: 1.4rem; padding-top: 0; border-top: 0; }
  .hero-tarjeta .hero-lead p + p { display: none; }
  .hero-tarjeta .hero-lead.abierta p + p { display: block; }
  .hero-mas { order: 5; display: inline-flex; align-self: flex-start; align-items: center; gap: .4em; margin-top: .5rem; padding: 6px 0; background: none; border: 0; color: var(--turq-claro); font: 600 .95rem/1.2 inherit; font-family: inherit; cursor: pointer; }
  .hero-mas::after { content: "▾"; transition: transform .3s; }
  .hero-mas[aria-expanded="true"]::after { transform: rotate(180deg); }
}

/* Ajuste: lema en dos líneas; tarjeta del contador y bloque de fecha/botones más arriba (solo computador) */
@media (min-width: 861px) {
  .hero--inicio .hero-typed { max-inline-size: 25ch; }
  .hero--inicio .hero-grid { margin-top: 1.4rem; align-items: start; }
  .hero--inicio .hero-tarjeta { margin-top: -110px; }
  .hero--inicio .hero-izq { padding-top: .4rem; }
}

/* Revisión QA de paleta (2026-10-13): contraste AA sin salir de la paleta */
.modalidad.oscura .chips span { color: var(--turq-claro); }   /* #3EA8C1 sobre tinte oscuro daba 3,9:1 → #80CADA ≥ 7:1 */
.hero-typed { color: var(--turq-claro); }                      /* lema sobre video: #3EA8C1 bajaba a 3,6:1 en celular */