/* =========================================================================
   EXPO SALUD Y BIENESTAR DE GUERRERO — Sistema de diseño del sitio
   Sitio 1 de la Fábrica de Sitios KAMIOS (PLN-FSW-001, Ola C: a mano, sin abstraer).

   Tokens heredados del sistema PASSIA (tema "exposalud") para que el sitio del
   evento y la plataforma se vean como una sola cosa cuando se conecten.
   Cambiar de congreso = cambiar los valores del bloque :root y el evento.json.

   Cimiento EST-SIT-001: móvil primero (§4.2 r5) · foco visible y contraste AA
   (§4.2 r6) · movimiento reducido respetado · sin dependencias externas de JS.
   ========================================================================= */

/* Las tipografias YA NO se piden a Google (EST-TIP-001, SES-CMR-597). Viven en
   `publico/fuentes/` y se declaran en `fuentes.css`, que la plantilla carga
   ANTES que esta hoja.
   Aqui habia un `@import` a fonts.googleapis.com, que es la peor forma posible
   de cargarlas: el navegador tenia que bajar y leer ESTA hoja entera para recien
   entonces descubrir que faltaban las letras, y salir a otro servidor a
   buscarlas. Una fila india de tres pasos antes de poder leer una palabra. */

:root{
  --font-display:"Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "Consolas", monospace;

  --step--1: clamp(0.83rem, 0.79rem + 0.2vw, 0.94rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.1rem);
  --step-4:  clamp(2.4rem, 1.9rem + 3vw, 4.2rem);

  --sp-1:.35rem; --sp-2:.6rem; --sp-3:1rem; --sp-4:1.6rem; --sp-5:2.5rem; --sp-6:4rem;
  --radius:14px; --radius-sm:9px; --radius-lg:22px;
  --maxw:1180px;

  /* Marca del evento — MEDIDA del logotipo entregado (SES-CMR-508), no elegida.
     Cobertura real: #00AF6F 72.2 % · #009FF0 10.7 % · #29ACE4 8.8 % ·
     #007251 5.8 % · #005845 2.4 %.
     ⚠️ Los vivos dan 2.85:1 y 2.91:1 sobre blanco — NO son colores de texto.
     Van a fondo, degradado y decoración. Para texto, los profundos. */
  --vivo-verde:#00AF6F;   /* el dominante del logo — fondo y degradado */
  --vivo-azul:#009FF0;    /* la cruz del logo — acento y degradado */
  --vivo-azul-claro:#29ACE4;

  --brand:#007251;        /* verde profundo — 5.96:1, botones y texto */
  --brand-soft:#00AF6F;
  --accent:#00AF6F;       /* verde vivo del logo */
  --accent-2:#007251;
  --deep:#005845;         /* verde muy profundo — 8.46:1, banner y pie */
  --bg:#F1FBF6;
  --surface:#FBFFFE;
  --surface-2:#E2F6EC;

  /* Los tres degradados de la identidad. Uno por función, no por gusto. */
  --grad-vital:linear-gradient(135deg, var(--vivo-azul) 0%, var(--vivo-verde) 100%);
  --grad-profundo:linear-gradient(160deg, #005845 0%, #00674A 48%, #007251 100%);
  --grad-aire:linear-gradient(180deg, #FFFFFF 0%, #EAF7F1 100%);
  --ink:#0C2A38;
  --ink-soft:#40606C;
  --ink-faint:#6B8F98;
  --border:#CDEBDC;
  --border-str:#A6DCC2;
  --ok:#007251;
  --warn:#8A5A00;
  --shadow:0 1px 2px rgba(12,42,56,.06), 0 14px 34px -12px rgba(0,114,81,.26);
  --ring:#00725188;
  --on-brand:#FBFFFE;
}

/* ========================= Base ========================= */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* El atributo `hidden` pierde contra cualquier display explicito del mismo
   selector (LEC-UXD-006). Sin esta linea, .campo[hidden] sigue visible porque
   .campo declara display:flex. */
[hidden]{ display:none !important; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--step-0); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.14; font-weight:600; margin:0 0 .45em; letter-spacing:-.01em; }
h1{ font-size:var(--step-4); }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-2); }
h4{ font-size:var(--step-1); }
p{ margin:0 0 1em; max-width:68ch; }
ul,ol{ padding-left:1.15em; }
a{ color:var(--brand); text-underline-offset:3px; }
a:hover{ color:var(--accent-2); }
img{ max-width:100%; display:block; }
small{ font-size:var(--step--1); }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--sp-4); }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--ring); outline-offset:2px; border-radius:6px;
}
.saltar{
  position:absolute; left:-9999px; top:0; background:var(--brand); color:var(--on-brand);
  padding:.7rem 1.1rem; z-index:100; border-radius:0 0 var(--radius-sm) 0; font-weight:600;
}
.saltar:focus{ left:0; }

/* ========================= Componentes ========================= */
.eyebrow{
  font-family:var(--font-mono); font-weight:600; font-size:calc(var(--step--1)*.92);
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand);
  display:inline-flex; align-items:center; gap:.6em; margin-bottom:.7rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); }

.btn{
  --_bg:var(--brand); --_fg:var(--on-brand);
  display:inline-flex; align-items:center; gap:.5em; justify-content:center;
  min-height:48px; padding:.7rem 1.4rem; border-radius:var(--radius-sm);
  background:var(--_bg); color:var(--_fg); border:1px solid transparent;
  font-family:var(--font-body); font-weight:600; font-size:var(--step-0);
  cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow); color:var(--_fg); }
.btn--ghost{ --_bg:transparent; --_fg:var(--ink); border-color:var(--border-str); }
.btn--ghost:hover{ background:var(--surface-2); }
.btn--accent{ --_bg:var(--accent-2); --_fg:#FFFFFF; }
.btn--sobre-oscuro{ --_bg:#FFFFFF; --_fg:var(--deep); }
.btn--sm{ min-height:40px; padding:.45rem 1rem; font-size:var(--step--1); }

.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--sp-4); box-shadow:var(--shadow);
}
.badge{
  display:inline-flex; align-items:center; gap:.4em; padding:.2rem .7rem;
  border-radius:999px; font-size:var(--step--1); font-weight:600;
  background:var(--surface-2); color:var(--brand); border:1px solid var(--border);
}
.badge--accent{ background:#E6F4EA; color:var(--accent-2); border-color:transparent; }
.badge--aviso{ background:#FCF3E0; color:var(--warn); border-color:#EBD9B4; }

.grid{ display:grid; gap:var(--sp-4); }
.grid--2{ grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit, minmax(215px,1fr)); }
.stack > * + *{ margin-top:var(--sp-3); }
.muted{ color:var(--ink-soft); }
.center{ text-align:center; }
.pill-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.divider{ height:1px; background:var(--border); border:0; margin:var(--sp-5) 0; }

/* ========================= Encabezado ========================= */
.sitio-cab{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease-suave), box-shadow .25s var(--ease-suave),
             background .25s var(--ease-suave);
}
/* Al bajar, la cabecera se compacta y se separa del contenido con una sombra.
   Sin la sombra, el menu translucido flota sobre el texto y ninguno se lee. */
.sitio-cab[data-desplazado="true"]{
  border-bottom-color:var(--border);
  box-shadow:0 6px 24px -14px rgba(0,88,69,.5);
  background:color-mix(in oklab, var(--surface) 95%, transparent);
}
.sitio-cab__int{
  display:flex; align-items:center; gap:var(--sp-4); min-height:78px;
  transition:min-height .25s var(--ease-suave);
}
.sitio-cab[data-desplazado="true"] .sitio-cab__int{ min-height:62px; }

.marca{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); font-weight:700; font-family:var(--font-display); line-height:1.1; }
.marca__logo{ height:48px; width:auto; display:block; transition:height .25s var(--ease-suave); }
.sitio-cab[data-desplazado="true"] .marca__logo{ height:38px; }
@media (max-width:560px){ .marca__logo{ height:36px; } }
.marca__cruz{ width:34px; height:34px; flex:none; }
.marca__txt{ font-size:1.02rem; }
.marca__txt span{ display:block; font-size:.7rem; font-weight:500; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase; }

.nav{ margin-left:auto; display:flex; align-items:center; gap:.15rem; }
/* Pildoras en vez de subrayado: el area sensible es toda la pastilla, no una
   linea de texto de 2px (Ley de Fitts). */
.nav a:not(.btn){
  position:relative; text-decoration:none; color:var(--ink-soft);
  font-weight:500; font-size:var(--step--1);
  padding:.5rem .85rem; border-radius:999px;
  transition:color .18s var(--ease-suave), background .18s var(--ease-suave);
}
.nav a:not(.btn):hover{ color:var(--brand); background:color-mix(in oklab, var(--brand) 8%, transparent); }
.nav a:not(.btn)[aria-current="page"]{
  color:var(--brand); background:color-mix(in oklab, var(--brand) 11%, transparent); font-weight:600;
}
/* El punto marca la pagina actual sin depender solo del color (WCAG 1.4.1:
   el color no puede ser el unico portador de informacion). */
.nav a:not(.btn)[aria-current="page"]::after{
  content:""; position:absolute; left:50%; bottom:.18rem; translate:-50% 0;
  width:4px; height:4px; border-radius:50%; background:var(--accent);
}
.nav .btn{ margin-left:.5rem; box-shadow:0 6px 18px -10px rgba(0,114,81,.9); }

.nav__abrir{
  display:none; margin-left:auto; background:none;
  border:1px solid var(--border-str); border-radius:var(--radius-sm);
  min-height:44px; min-width:44px; cursor:pointer; color:var(--ink);
  transition:background .18s var(--ease-suave);
}
.nav__abrir:hover{ background:var(--surface-2); }

@media (max-width:860px){
  .nav__abrir{ display:inline-flex; align-items:center; justify-content:center; }
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--border);
    padding:var(--sp-3) var(--sp-4) var(--sp-4);
    box-shadow:0 18px 30px -22px rgba(0,88,69,.6);
  }
  .nav[data-abierto="true"]{ display:flex; animation:menu-baja .22s var(--ease-entrada) both; }
  @keyframes menu-baja{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
  .nav a:not(.btn){
    padding:.9rem .8rem; border-radius:var(--radius-sm);
    font-size:var(--step-0); border-bottom:1px solid var(--border);
  }
  .nav a:not(.btn)[aria-current="page"]::after{ left:auto; right:.9rem; bottom:auto; top:50%; translate:0 -50%; }
  .nav .btn{ margin:var(--sp-3) 0 0; }
}
@media (prefers-reduced-motion: reduce){
  .sitio-cab, .sitio-cab__int, .marca__logo, .nav a:not(.btn){ transition:none; }
  .nav[data-abierto="true"]{ animation:none; }
}

/* ========================= Portada ========================= */
.portada{
  background:var(--grad-profundo);
  color:#FFFFFF; padding:var(--sp-6) 0; position:relative; overflow:hidden;
}
.portada::after{
  content:""; position:absolute; right:-12%; top:-30%; width:60%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(0,175,111,.42) 0%, transparent 68%); pointer-events:none;
}
/* --- Portada con profundidad (SES-CMR-562) --------------------------------
   Formas, no fotografías: cuando lleguen las imágenes oficiales entran en
   `.portada__marco` y nada más cambia. Todo movimiento se apaga con
   `prefers-reduced-motion` — es un evento de salud con público mayor. */
.portada{ min-height:min(88vh, 760px); display:grid; align-content:center;
          grid-template-columns:minmax(0,1fr); gap:var(--sp-3); }
.portada__cuerpo{ position:relative; z-index:2; }
.portada__capas{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.portada__capas .forma{ position:absolute; display:block; will-change:transform; }

.forma--hoja-a{
  left:-6%; top:8%; width:min(46vw,420px); aspect-ratio:1/1.35;
  background:radial-gradient(ellipse at 30% 30%, rgba(0,175,111,.55), rgba(0,175,111,0) 70%);
  border-radius:60% 40% 55% 45% / 55% 50% 50% 45%; filter:blur(6px);
}
.forma--hoja-b{
  right:6%; bottom:-14%; width:min(52vw,520px); aspect-ratio:1/1.2;
  background:radial-gradient(ellipse at 60% 40%, rgba(41,172,228,.42), rgba(41,172,228,0) 72%);
  border-radius:45% 55% 40% 60% / 50% 45% 55% 50%; filter:blur(8px);
}
/* La cruz del logotipo, convertida en marca de agua geométrica. */
.forma--cruz{
  right:16%; top:14%; width:min(20vw,190px); aspect-ratio:1; opacity:.16;
  background:
    linear-gradient(#fff,#fff) center/28% 100% no-repeat,
    linear-gradient(#fff,#fff) center/100% 28% no-repeat;
  border-radius:12px; transform:rotate(-8deg);
}
.forma--anillo{
  left:12%; bottom:6%; width:min(26vw,240px); aspect-ratio:1; opacity:.22;
  border:2px solid rgba(143,227,200,.7); border-radius:50%;
}
.forma--reticula{
  inset:0; width:100%; height:100%; opacity:.10;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 10%, transparent 72%);
          mask-image:radial-gradient(ellipse at 50% 40%, #000 10%, transparent 72%);
}

/* Marco de la imagen oficial pendiente. */
.portada__marco{
  position:absolute; right:4%; top:50%; translate:0 -50%;
  width:min(34vw,400px); aspect-ratio:4/5; z-index:1; opacity:.9;
  border:1px solid rgba(255,255,255,.28); border-radius:var(--radius-lg);
  padding:10px; backdrop-filter:blur(2px); will-change:transform;
}
.marco__lienzo{
  position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:calc(var(--radius-lg) - 8px);
  background:linear-gradient(150deg, rgba(0,175,111,.30), rgba(0,90,150,.42));
}
.marco__blob{ position:absolute; border-radius:50%; filter:blur(10px); }
.marco__blob--1{ width:62%; aspect-ratio:1; left:-10%; top:8%;  background:rgba(0,175,111,.55); }
.marco__blob--2{ width:70%; aspect-ratio:1; right:-16%; bottom:-6%; background:rgba(41,172,228,.48); }
.marco__cruz{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:34%; aspect-ratio:1; opacity:.5;
  background:linear-gradient(#fff,#fff) center/30% 100% no-repeat,
             linear-gradient(#fff,#fff) center/100% 30% no-repeat;
  border-radius:10px;
}
/* Debajo de 1000px el marco compite con el texto: se retira. */
@media (max-width:1000px){
  .portada__marco{ display:none; }
  .portada{ min-height:auto; }
}
@media (prefers-reduced-motion: reduce){
  .portada__capas .forma, .portada__marco{ transform:none !important; transition:none !important; }
}

.portada h1{ color:#FFFFFF; max-width:16ch; }
.portada p{ color:#DDF2F4; font-size:var(--step-1); max-width:52ch; }
.portada .eyebrow{ color:#8FE3C8; }
.portada .eyebrow::before{ background:#8FE3C8; }
.portada__datos{ display:flex; flex-wrap:wrap; gap:var(--sp-4); margin:var(--sp-4) 0; }
.portada__dato{ border-left:3px solid rgba(255,255,255,.35); padding-left:.9rem; }
.portada__dato b{ display:block; font-family:var(--font-display); font-size:var(--step-1); }
.portada__dato span{ font-size:var(--step--1); color:#BFE4E8; }
.portada__acciones{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-4); }

/* ========================= Secciones ========================= */
.seccion{ padding:var(--sp-6) 0; }
.seccion--alt{ background:var(--surface); border-block:1px solid var(--border); }
.seccion__cab{ max-width:60ch; margin-bottom:var(--sp-5); }

.zona{ border-top:4px solid var(--brand); }
.zona--comunitaria{ border-top-color:var(--accent); }
.zona h3{ margin-bottom:.3em; }
.zona ul{ margin:0; padding-left:1.1em; color:var(--ink-soft); font-size:var(--step--1); }

.paquete{ display:flex; flex-direction:column; }
.paquete--destacado{ border-color:var(--brand); box-shadow:0 0 0 2px var(--brand), var(--shadow); }
.paquete__cinta{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:.5rem; }
.paquete__precio{ font-family:var(--font-display); font-size:var(--step-2); line-height:1; margin:.2em 0; }
.paquete__precio small{ font-size:var(--step--1); color:var(--ink-soft); font-family:var(--font-body); }
.paquete__lista{ list-style:none; padding:0; margin:var(--sp-3) 0 var(--sp-4); font-size:var(--step--1); }
.paquete__lista li{ padding-left:1.5em; position:relative; margin-bottom:.45em; color:var(--ink-soft); }
.paquete__lista li::before{ content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.paquete .btn{ margin-top:auto; }
.paquete--agotado{ opacity:.72; }

.tema{ display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-3) 0; border-bottom:1px solid var(--border); }
.tema:last-child{ border-bottom:0; }
.tema__hora{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--brand); flex:none; min-width:5.5rem; padding-top:.15rem; }
.tema b{ display:block; font-family:var(--font-display); font-size:var(--step-1); font-weight:600; }

.marcas{ display:flex; flex-wrap:wrap; gap:.5rem; }
.marcas span{ background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:.35rem .85rem; font-size:var(--step--1); color:var(--ink-soft); }

.aviso{
  border-left:4px solid var(--warn); background:#FCF8EE; padding:var(--sp-3) var(--sp-4);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:var(--step--1); color:#4A3A16;
}
.aviso p:last-child{ margin-bottom:0; }
.aviso b{ color:#3A2D0F; }

/* ========================= Formularios ========================= */
.forma{ max-width:640px; }
/* Trampa para automatas (SES-CMR-597). Se saca de la vista con posicion, NO con
   `display:none` ni `hidden`: el automata que mira el HTML descarta lo que esta
   declarado como oculto, y entonces la trampa no atrapa a nadie. Para la persona
   es invisible igual, y ademas lleva aria-hidden y tabindex -1 para que ni el
   lector de pantalla ni el tabulador la encuentren. */
.trampa{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.campo{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:var(--sp-3); }
.campo label{ font-weight:600; font-size:var(--step--1); color:var(--ink); }
.campo .ayuda{ font-size:calc(var(--step--1)*.94); color:var(--ink-soft); }
.campo input, .campo select, .campo textarea{
  min-height:48px; padding:.6rem .85rem; border-radius:var(--radius-sm);
  border:1px solid var(--border-str); background:var(--surface); color:var(--ink);
  font-family:var(--font-body); font-size:var(--step-0); width:100%;
}
.campo textarea{ min-height:120px; resize:vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus{ border-color:var(--brand); }
.campo--doble{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
@media (max-width:600px){ .campo--doble{ grid-template-columns:1fr; } }
.campo--check{ flex-direction:row; align-items:flex-start; gap:.6rem; }
.campo--check input{ min-height:auto; width:20px; height:20px; margin-top:.25rem; flex:none; }
.campo--check label{ font-weight:400; font-size:var(--step--1); color:var(--ink-soft); }
fieldset{ border:1px solid var(--border); border-radius:var(--radius); padding:var(--sp-4); margin:0 0 var(--sp-4); }
legend{ font-family:var(--font-display); font-weight:600; padding-inline:.5rem; }

/* ========================= Pie ========================= */
.pie{ background:var(--deep); color:#C8DDE8; padding:var(--sp-6) 0 var(--sp-4); }
.pie h4{ color:#FFFFFF; font-size:var(--step-0); }
.pie a{ color:#9FD7DC; }
.pie a:hover{ color:#FFFFFF; }
.pie__cols{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); }
.pie__cols ul{ list-style:none; padding:0; margin:0; font-size:var(--step--1); }
.pie__cols li{ margin-bottom:.45em; }
.pie__legal{ margin-top:var(--sp-5); padding-top:var(--sp-3); border-top:1px solid rgba(255,255,255,.15); font-size:var(--step--1); color:#8FAFBE; display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:space-between; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
}

/* ── Plano de stands ──────────────────────────────────────────────────────
   El unico momento realmente interactivo del sitio: el expositor decide
   mirando que hay libre y que hay al lado (PLN-ESG-001 §2 pregunta 6).
   Funciona sin JavaScript: el plano se ve y se lee igual; el JS solo agrega
   el panel de detalle. */
.visualmente-oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.plano__resumen{ margin:0 0 var(--sp-3); font-size:var(--step--1); color:var(--ink-soft); }
.plano__resumen b{ color:var(--ink); font-size:var(--step-0); }

.plano__leyenda{
  display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-4);
  list-style:none; padding:0; margin:0 0 var(--sp-4);
  font-size:var(--step--1); color:var(--ink-soft);
}
.plano__leyenda li{ display:flex; align-items:center; gap:var(--sp-2); }
.plano__muestra{
  width:1.1em; height:1.1em; border-radius:4px; border:1.5px solid var(--border-str);
  background:var(--surface); flex:none;
}
.plano__muestra[data-estado="apartado"]{ background:#FCF3E0; border-color:#E3C889; }
.plano__muestra[data-estado="vendido"]{ background:var(--surface-2); border-color:var(--border);
  background-image:repeating-linear-gradient(45deg,transparent 0 4px,rgba(12,42,56,.13) 4px 6px); }

.plano__lienzo{
  /* max-width + min-width:0 son lo que CONFINA el deslizamiento a esta caja.
     Sin ellos, la malla de 56rem empuja el ancho de la pagina entera y en
     telefono se desliza el sitio completo, no el plano. Medido en 390 px. */
  max-width:100%; min-width:0;
  overflow-x:auto; padding-bottom:var(--sp-2);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
}
/* La malla ES el plano: cada lugar se coloca en su columna y fila reales,
   tomadas del plano oficial de la organizadora. No es una lista con estilo. */
.plano__malla{
  display:grid; gap:6px; padding:var(--sp-4);
  grid-template-columns:repeat(var(--cols), minmax(4.6rem,1fr));
  grid-auto-rows:minmax(3.4rem,auto);
  min-width:56rem;
}
.plano__acceso{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
  border:1px dashed var(--border-str); border-radius:var(--radius-sm);
}
.lugar{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.1em; padding:var(--sp-2); text-align:center; cursor:pointer;
  font-family:var(--font-body); color:var(--ink); line-height:1.15;
  background:var(--surface); border:1.5px solid var(--border-str);
  border-radius:var(--radius-sm); transition:transform .12s ease, box-shadow .12s ease;
}
.lugar__rotulo{ font-size:.86rem; font-weight:650; }
.lugar__medida{ font-size:.66rem; color:var(--ink-faint); font-family:var(--font-mono); }
.lugar:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.lugar:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
.lugar[aria-pressed="true"]{ border-color:var(--brand); background:#E7F5F4;
  box-shadow:0 0 0 3px var(--ring); }
/* Ocupado: visible y enfocable, pero no elegible. La trama lo distingue sin
   depender del color. */
.lugar[data-estado="vendido"]{
  background:var(--surface-2); border-color:var(--border); color:var(--ink-soft);
  cursor:not-allowed;
  background-image:repeating-linear-gradient(45deg,transparent 0 6px,rgba(12,42,56,.10) 6px 9px);
}
.lugar[data-estado="reservado"]{
  background:#EFF6FB; border-color:#BBD6E6; color:var(--deep); cursor:default;
}
.lugar[data-estado="vendido"]:hover,.lugar[data-estado="reservado"]:hover{
  transform:none; box-shadow:none;
}
.plano__pie{ font-size:var(--step--1); margin:var(--sp-2) 0 0; }
@media (min-width:56em){ .plano__pie{ display:none; } }

.plano__detalle{
  margin-top:var(--sp-4); padding:var(--sp-4);
  background:var(--surface); border:1px solid var(--border);
  border-left:4px solid var(--brand); border-radius:var(--radius);
}
.plano__detalle h3{ margin:0 0 .2em; font-size:var(--step-1); }
.plano__detalle .stand-datos{
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4);
  margin:var(--sp-3) 0; font-size:var(--step--1); color:var(--ink-soft);
}
.plano__detalle .stand-datos b{ color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  .stand{ transition:none; }
  .stand:hover{ transform:none; }
}

/* --- Modalidad "solo espacio" y tarifas por convenio (SES-CMR-562) -------- */
.solo-espacio{
  margin-top:var(--sp-5); padding:var(--sp-4);
  border:1px dashed var(--linea, rgba(0,0,0,.18)); border-radius:var(--radius);
}
.solo-espacio__precios{ display:flex; flex-wrap:wrap; gap:var(--sp-4); margin:var(--sp-3) 0 var(--sp-4); }
.solo-espacio__opcion{ display:flex; align-items:baseline; gap:.6rem; }
.solo-espacio__precio{ font-family:var(--font-display); font-size:var(--step-1); }

.paquete__preventa{ margin:.15rem 0 0; font-size:var(--step--1); }
.aviso--preventa{ margin-top:var(--sp-4); }
/* El aviso de cupos va DESPUÉS de las fichas y no antes: se lee cuando la
   persona ya eligió a cuál quiere ir, que es cuando le importa el dato. */
.aviso--cupos{ margin-top:var(--sp-4); }

.convenios{ margin-top:var(--sp-5); }
.tabla-convenios{ width:100%; border-collapse:collapse; margin:var(--sp-3) 0; }
.tabla-convenios th, .tabla-convenios td{
  text-align:left; padding:.7rem .6rem; border-bottom:1px solid rgba(0,0,0,.10);
}
.tabla-convenios th{ font-family:var(--font-display); font-size:var(--step--1); text-transform:uppercase; letter-spacing:.04em; }
.tabla-convenios__precio{ font-family:var(--font-display); white-space:nowrap; }
.tabla-convenios tbody tr:last-child td{ border-bottom:0; }

.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;
}

/* --- Programa preliminar y ponentes confirmados (SES-CMR-562) ------------- */
.bloques, .ponentes-confirmados{ margin-top:var(--sp-5); }
.lista-bloques{ margin:0; padding-left:1.1em; }
.lista-bloques li{ margin-bottom:.35rem; }
.ponente h3{ font-size:var(--step-1); margin-bottom:.2rem; }
.ponente .badge{ margin-bottom:.6rem; }

/* =========================================================================
   HILOS DE ÁREA (DESIGN.md §2) — SES-CMR-562
   El sitio habla a cinco públicos y hasta ahora todos veían el mismo verde.
   Cada área recibe un acento propio de la MISMA paleta medida: cambia el
   acento, no cambia el sistema. Nunca el fondo completo de la página: cinco
   fondos distintos convierten un sitio en cinco sitios.
   ========================================================================= */
:root{
  --area-congreso:#007251;    --area-congreso-txt:#005845;
  --area-estudiante:#00AF6F;  --area-estudiante-txt:#007251;
  --area-publico:#009FF0;     --area-publico-txt:#0A5E85;
  --area-expositor:#005845;   --area-expositor-txt:#005845;
  --area-ponente:#29ACE4;     --area-ponente-txt:#0A5E85;

  /* Curvas: los objetos reales desaceleran, no rebotan. */
  --ease-suave:cubic-bezier(.22,1,.36,1);
  --ease-entrada:cubic-bezier(.16,1,.3,1);
}

/* Una sección declara su hilo con .hilo--<area>; los hijos lo heredan. */
.hilo--congreso { --hilo:var(--area-congreso);  --hilo-txt:var(--area-congreso-txt); }
.hilo--estudiante{--hilo:var(--area-estudiante);--hilo-txt:var(--area-estudiante-txt); }
.hilo--publico  { --hilo:var(--area-publico);   --hilo-txt:var(--area-publico-txt); }
.hilo--expositor{ --hilo:var(--area-expositor); --hilo-txt:var(--area-expositor-txt); }
.hilo--ponente  { --hilo:var(--area-ponente);   --hilo-txt:var(--area-ponente-txt); }

/* Cómo se manifiesta el hilo. El texto de párrafo NUNCA lo usa. */
[class*="hilo--"] .eyebrow{ color:var(--hilo-txt); }
[class*="hilo--"] .eyebrow::before{ background:var(--hilo); }
[class*="hilo--"] .badge{ background:color-mix(in oklab, var(--hilo) 14%, white);
                          color:var(--hilo-txt); border-color:transparent; }
[class*="hilo--"] .card{ border-top:3px solid var(--hilo); }
.franja-area{ height:4px; background:var(--hilo, var(--brand)); border-radius:2px; margin-bottom:var(--sp-3); }

/* --- Iconos de trazo ------------------------------------------------------
   Un solo grosor en todo el sitio (1.75 a 24px). Son decorativos: el
   significado va en el texto, por eso `aria-hidden` en la plantilla. */
.icono{ width:1.5em; height:1.5em; flex:none; stroke:currentColor; fill:none;
        stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.icono--area{ color:var(--hilo, var(--brand)); width:2.2em; height:2.2em; }
.con-icono{ display:flex; align-items:flex-start; gap:.7rem; }

/* --- Entradas al hacer scroll --------------------------------------------
   Sólo transform y opacity. Sin JS la clase nunca llega y el contenido se ve
   igual: la animación no puede ser condición para leer. */
.js-anim .aparece{ opacity:0; transform:translateY(18px); }
.js-anim .aparece.visible{ opacity:1; transform:none;
  transition:opacity .5s var(--ease-entrada), transform .5s var(--ease-entrada); }
.js-anim .aparece:nth-child(2).visible{ transition-delay:.06s; }
.js-anim .aparece:nth-child(3).visible{ transition-delay:.12s; }
.js-anim .aparece:nth-child(4).visible{ transition-delay:.18s; }

@media (prefers-reduced-motion: reduce){
  .js-anim .aparece{ opacity:1; transform:none; transition:none; }
}

/* --- Carrusel del marco (DESIGN.md §5) — SES-CMR-562 ---------------------- */
.carrusel{ position:relative; width:100%; height:100%; display:flex; flex-direction:column; }
.carrusel__pista{ position:relative; flex:1; min-height:0; }
.lamina{ position:absolute; inset:0; overflow:hidden;
         border-radius:calc(var(--radius-lg) - 8px); opacity:0;
         transition:opacity .7s cubic-bezier(.4,0,.2,1); }
.lamina.is-activa{ opacity:1; }
.lamina .marco__lienzo{ width:100%; height:100%; }
.marco__lienzo--publico{ background:linear-gradient(150deg, rgba(0,159,240,.34), rgba(0,88,69,.44)); }
.marco__lienzo--expositor{ background:linear-gradient(150deg, rgba(0,88,69,.52), rgba(41,172,228,.30)); }

.marco__grafico{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:46%; height:46%; stroke:#fff; fill:none; stroke-width:3.2;
  stroke-linecap:round; stroke-linejoin:round; opacity:.62;
}
.lamina__pie{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  margin:0; padding:2.2rem .85rem .7rem;
  color:#EAF7F1; font-size:var(--step--1); line-height:1.35;
  background:linear-gradient(to top, rgba(0,54,42,.92) 30%, rgba(0,54,42,0));
  border-radius:0 0 calc(var(--radius-lg) - 8px) calc(var(--radius-lg) - 8px);
}
.lamina__pie b{ display:block; font-family:var(--font-display); color:#fff; font-size:var(--step-0); }

.carrusel__mando{ display:flex; gap:.5rem; justify-content:center; padding:.7rem 0 .2rem; }
.carrusel__punto{
  /* El punto visible mide 9px pero el objetivo táctil son 44px: el área de
     toque se agranda con padding transparente, no el círculo. */
  width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center;
}
.carrusel__punto::after{
  content:""; width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.42); transition:background .2s var(--ease-suave), scale .2s var(--ease-suave);
}
.carrusel__punto:hover::after{ background:rgba(255,255,255,.72); }
.carrusel__punto.is-activo::after{ background:#fff; scale:1.35; }
.carrusel__punto:focus-visible{ outline:3px solid rgba(255,255,255,.85); outline-offset:-8px; border-radius:50%; }

/* En móvil el marco no se muestra, pero el carrusel sí tiene sentido:
   se convierte en una banda ancha bajo el texto. */
@media (max-width:1000px){
  .portada__marco{ display:block; position:static; translate:none; width:auto;
                   margin-top:var(--sp-4); aspect-ratio:16/10; }
  .portada{ min-height:auto; }
}
@media (prefers-reduced-motion: reduce){
  .lamina{ transition:none; }
}

/* --- Formulario guiado por pasos (DESIGN.md §7) — SES-CMR-562 -------------
   Un grupo de preguntas por pantalla. Sin JS los cuatro pasos quedan visibles
   y sigue siendo un formulario usable: la mejora es progresiva, no un requisito. */
.pasos__barra{
  display:flex; gap:.35rem; list-style:none; margin:0 0 var(--sp-4); padding:0;
  counter-reset:paso; flex-wrap:wrap;
}
.pasos__hito{
  flex:1 1 92px; display:flex; align-items:center; gap:.45rem;
  font-size:calc(var(--step--1)*.94); color:var(--ink-faint);
  padding-top:.55rem; border-top:3px solid var(--border);
  transition:color .25s var(--ease-suave), border-color .25s var(--ease-suave);
}
.pasos__hito span{
  width:22px; height:22px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--border); color:var(--surface); font-weight:700; font-size:.72rem;
  transition:background .25s var(--ease-suave);
}
.pasos__hito.is-activo{ color:var(--hilo-txt, var(--brand)); border-top-color:var(--hilo, var(--brand)); }
.pasos__hito.is-activo span{ background:var(--hilo, var(--brand)); }
.pasos__hito.is-hecho{ color:var(--ink-soft); border-top-color:var(--hilo, var(--brand)); }
.pasos__hito.is-hecho span{ background:var(--hilo, var(--brand)); }

.paso{ border:0; padding:0; margin:0; }
.paso.is-activo{ animation:paso-entra .35s var(--ease-entrada) both; }
@keyframes paso-entra{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:none; } }
.paso__titulo{ font-family:var(--font-display); font-size:var(--step-2); padding:0; margin-bottom:.2em; line-height:1.15; }
.paso__ayuda{ color:var(--ink-soft); font-size:var(--step--1); margin-bottom:var(--sp-4); }

/* La cuota se calcula a la vista: el visitante ve el precio mientras elige,
   no después de llenar todo el formulario. */
.cuota{
  display:block; margin-top:var(--sp-4); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius); border-left:4px solid var(--hilo, var(--brand));
  background:color-mix(in oklab, var(--hilo, var(--brand)) 8%, white);
  animation:paso-entra .3s var(--ease-entrada) both;
}
.cuota__etiqueta{ display:block; font-size:var(--step--1); color:var(--ink-soft); }
.cuota__cifra{ font-family:var(--font-display); font-size:var(--step-3); line-height:1.1; color:var(--hilo-txt, var(--brand)); }
.cuota__nota{ display:block; font-size:var(--step--1); color:var(--ink-soft); }

.resumen{ margin:0 0 var(--sp-4); display:grid; grid-template-columns:auto 1fr; gap:.5rem var(--sp-3); }
.resumen dt{ font-size:var(--step--1); color:var(--ink-soft); }
.resumen dd{ margin:0; font-weight:600; }
.resumen .resumen__total{ font-family:var(--font-display); font-size:var(--step-1); color:var(--hilo-txt, var(--brand)); }

.pasos__mando{ display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-4); }
.pasos__mando .btn{ flex:1 1 auto; min-width:140px; }
.pasos__cuenta{ font-size:var(--step--1); margin:.7rem 0 0; }

/* Un campo con error dice QUÉ hacer, no sólo que algo falló. */
.campo.tiene-error input, .campo.tiene-error select{ border-color:#B3261E; }
.campo__error{ display:block; color:#B3261E; font-size:var(--step--1); margin-top:.3rem; }

@media (prefers-reduced-motion: reduce){
  .paso.is-activo, .cuota{ animation:none; }
}

/* --- Tres puertas por público (SES-CMR-562) -------------------------------
   Idea tomada de medical-expo.com.mx (tres tarjetas de rol) y reimplementada
   con nuestros hilos de área. Quien llega no quiere leer el sitio: quiere
   saber por dónde entra. */
.seccion--puertas{ padding-top:var(--sp-5); padding-bottom:0; }
.puertas{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit, minmax(255px,1fr)); }
.puerta{
  display:block; text-decoration:none; color:var(--ink);
  background:var(--surface); border:1px solid var(--border);
  border-top:4px solid var(--hilo, var(--brand));
  border-radius:var(--radius); padding:var(--sp-4);
  transition:transform .22s var(--ease-suave), box-shadow .22s var(--ease-suave);
}
.puerta:hover, .puerta:focus-visible{ transform:translateY(-3px); box-shadow:var(--shadow); color:var(--ink); }
.puerta h2{ font-size:var(--step-1); margin:.6rem 0 .3rem; }
.puerta p{ color:var(--ink-soft); font-size:var(--step--1); margin-bottom:.8rem; }
.puerta__ir{ font-weight:600; color:var(--hilo-txt, var(--brand)); font-size:var(--step--1); display:inline-flex; gap:.35em; }
.puerta__ir::after{ content:"→"; transition:translate .22s var(--ease-suave); }
.puerta:hover .puerta__ir::after{ translate:4px 0; }

/* --- Cuenta regresiva ----------------------------------------------------- */
.reloj{ margin-top:var(--sp-4); display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.reloj__rotulo{ color:#BFE4E8; font-size:var(--step--1); text-transform:uppercase; letter-spacing:.14em; font-family:var(--font-mono); }
.reloj__cifras{ display:flex; gap:var(--sp-3); }
.reloj__cifras span{ display:flex; flex-direction:column; color:#BFE4E8; font-size:calc(var(--step--1)*.88); line-height:1.1; }
.reloj__cifras b{ font-family:var(--font-display); font-size:var(--step-2); color:#fff; font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce){
  .puerta{ transition:none; }
  .puerta:hover{ transform:none; }
  .puerta__ir::after{ transition:none; }
}

/* =========================================================================
   PORTADA v2 — el carrusel ES el fondo (SES-CMR-562)
   Antes vivía en un marco a la derecha que se ENCIMABA con los datos del
   evento (medido en captura de DrMoon: el pie tapaba «+1,600 Asistentes
   esperados»). Como fondo no hay nada que solapar, y es lo que se pidió:
   que las imágenes de la portada cambien con transición.
   ========================================================================= */
.portada__fondo{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.fondo__lamina{
  position:absolute; inset:0; opacity:0;
  background-color:#005845; background-size:cover; background-position:center;
  transition:opacity .9s cubic-bezier(.4,0,.2,1);
  will-change:opacity;
}
.fondo__lamina.is-activa{ opacity:1; }

/* Mientras no haya fotografías, cada lámina es una composición propia. En
   cuanto `imagen` traiga un archivo, el `background-image` en línea lo pisa. */
.fondo__lamina--congreso { background-image:radial-gradient(ellipse at 72% 28%, rgba(0,175,111,.55), transparent 62%), var(--grad-profundo); }
.fondo__lamina--publico  { background-image:radial-gradient(ellipse at 68% 34%, rgba(0,159,240,.48), transparent 64%), var(--grad-profundo); }
.fondo__lamina--expositor{ background-image:radial-gradient(ellipse at 78% 62%, rgba(41,172,228,.42), transparent 60%), var(--grad-profundo); }

/* El velo NO es decoración: es lo que garantiza que el texto siga legible
   sobre CUALQUIER fotografía que mande la organizadora. Sin él, una foto
   clara deja el titular blanco ilegible y reprueba GATE-02. */
.portada__velo{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(0,60,46,.86) 0%, rgba(0,60,46,.66) 46%, rgba(0,60,46,.34) 100%);
}
@media (max-width:900px){
  .portada__velo{ background:linear-gradient(180deg, rgba(0,60,46,.78) 0%, rgba(0,60,46,.88) 100%); }
}

/* Modo «la imagen ya trae el texto». El texto NO se elimina: se oculta a la
   vista y sigue en el código para lectores de pantalla y buscadores, que no
   pueden leer un texto incrustado dentro de una fotografía. */
.portada__cuerpo--sin-texto :is(h1, .portada__dato, .eyebrow, p:not(.reloj__rotulo)){
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.portada__cuerpo--sin-texto{ min-height:min(62vh,520px); display:flex; flex-direction:column; justify-content:flex-end; }

/* Puntos del carrusel al pie de la portada, fuera del camino del texto. */
.carrusel__mando--fondo{
  position:relative; z-index:2; justify-content:flex-start;
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--sp-4);
}

/* El marco lateral ya no existe: se retiran sus reglas para no dejar CSS
   muerto apuntando a nada. */
.portada__marco{ display:none !important; }

/* Los puntos se alinean con el texto de la portada, no al centro. La regla
   base `.carrusel__mando{justify-content:center}` competía con la misma
   especificidad; se resuelve dando contexto, no con !important. */
.portada .carrusel__mando--fondo{ justify-content:flex-start; }

/* --- Las dos puertas del registro (SES-PRY-588) ----------------------------
   Son <button>, no tarjetas con un enlace dentro: lo que hacen es cambiar el
   estado de esta misma página, y eso es un botón. Así el teclado, el lector de
   pantalla y el aria-expanded dicen la verdad sobre lo que ocurre.
   La elegida se marca con borde grueso Y con color: sólo con color no la
   distingue quien no ve bien los colores. */
.puertas-registro{
  display:grid; gap:var(--sp-4); margin-top:var(--sp-5);
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
}
.puerta-reg{
  display:flex; flex-direction:column; gap:.55rem; text-align:left;
  padding:var(--sp-5); border-radius:var(--radius); cursor:pointer;
  border:2px solid var(--border); background:var(--surface); color:inherit;
  font:inherit;
  transition:border-color .2s var(--ease-suave), transform .2s var(--ease-suave), box-shadow .2s var(--ease-suave);
}
.puerta-reg:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.puerta-reg.is-elegida{
  border-color:var(--hilo-txt, var(--brand));
  background:color-mix(in oklab, var(--hilo, var(--brand)) 8%, var(--surface));
}
.puerta-reg__titulo{
  display:block; font-family:var(--font-display); font-size:var(--step-1);
  line-height:1.2; margin-bottom:.35rem;
}
.puerta-reg__quien{ font-weight:600; font-size:var(--step--1); }
.puerta-reg__resumen{ font-size:var(--step--1); color:var(--ink-soft); }
.puerta-reg .btn{ margin-top:auto; align-self:flex-start; pointer-events:none; }
@media (prefers-reduced-motion: reduce){
  .puerta-reg{ transition:none; }
  .puerta-reg:hover{ transform:none; }
}

/* --- Botón flotante de WhatsApp (SES-PRY-588) ------------------------------
   Abajo a la derecha, que es donde la gente ya lo busca. En móvil se encoge a
   sólo el icono para no tapar contenido, y respeta el área segura de los
   teléfonos con muesca. El color es el verde de WhatsApp: aquí la marca ajena
   es la señal — un botón de WhatsApp en otro color no se reconoce. */
.flota-wa{
  position:fixed; right:1rem; z-index:60;
  bottom:calc(1rem + env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.1rem; border-radius:999px;
  background:#25D366; color:#0b3d1f; text-decoration:none;
  font-weight:700; font-size:var(--step--1);
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:transform .2s var(--ease-suave), box-shadow .2s var(--ease-suave);
}
.flota-wa:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.28); }
.flota-wa svg{ width:24px; height:24px; flex:none; }
@media (max-width:560px){
  .flota-wa{ padding:.85rem; }
  .flota-wa__texto{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
}
@media (prefers-reduced-motion: reduce){
  .flota-wa{ transition:none; }
  .flota-wa:hover{ transform:none; }
}

/* --- Beneficios de ser ponente (SES-PRY-588) -------------------------------
   La paloma se dibuja con ::before y no con un emoji: un emoji ✅ lo lee el
   lector de pantalla como «marca de verificación» delante de CADA renglón, y
   son siete renglones. Aquí el adorno es decorativo de verdad. */
.beneficios-ponente{
  margin-top:var(--sp-5); padding:var(--sp-5);
  border:1px solid var(--border); border-radius:var(--radius);
  background:color-mix(in oklab, var(--hilo, var(--brand)) 6%, var(--surface));
}
.beneficios-ponente h2{ margin-top:0; font-size:var(--step-2); }
.lista-palomas{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.lista-palomas li{ position:relative; padding-left:2rem; }
.lista-palomas li::before{
  content:""; position:absolute; left:0; top:.1em; width:1.3rem; height:1.3rem;
  border-radius:50%; background:var(--hilo-txt, var(--brand))
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.4 3.4L13 4.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / .85rem no-repeat;
}

/* --- Selector entre los dos programas (SES-PRY-588) ------------------------
   Va en las dos páginas de programa. La pestaña activa se marca con
   aria-current="page", así que el estilo cuelga del atributo y no de una clase
   que haya que acordarse de poner: si la página se copia mal, se nota. */
.cambia-programa{
  display:flex; flex-wrap:wrap; gap:.4rem; margin-top:var(--sp-4);
  padding:.35rem; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); width:fit-content; max-width:100%;
}
.cambia-programa a{
  padding:.5rem .9rem; border-radius:var(--radius-sm); text-decoration:none;
  font-weight:600; font-size:var(--step--1); color:var(--ink-soft);
}
.cambia-programa a:hover{ background:var(--surface-2); color:var(--ink); }
.cambia-programa a[aria-current="page"]{
  background:color-mix(in oklab, var(--hilo, var(--brand)) 14%, var(--surface));
  color:var(--hilo-txt, var(--brand));
}
.cambia-programa .muted{ font-weight:400; }

/* --- Las dos vertientes del programa (SES-PRY-588) -------------------------
   El conteo va grande porque es el gancho («más de 30 ponencias»), y el
   PARA QUIÉN va inmediatamente debajo porque es lo que evita que alguien se
   registre al programa equivocado. */
.vertiente{ display:flex; flex-direction:column; }
.vertiente__conteo{
  font-family:var(--font-display); font-size:var(--step-2); line-height:1.15;
  margin:var(--sp-3) 0 .3rem; color:var(--hilo-txt, var(--ink));
}
.vertiente__quien{ margin:0 0 var(--sp-3); font-weight:600; font-size:var(--step--1); }
.vertiente .btn{ margin-top:auto; align-self:flex-start; }

/* --- Actividades de la Zona Comunitaria (SES-CMR-562 · rehecho SES-PRY-588)
   Antes esto era «la Cuponera» y se dibujaba como un cupón: línea de troquel y
   muescas laterales. La organizadora lo corrigió el 2026-08-23 — no son cupones,
   son SERVICIOS GRATUITOS de la jornada, y lo que la persona necesita saber para
   organizar su visita es el HORARIO y el CUPO. El troquel se retiró a propósito:
   dibujar un cupón era lo que hacía que se leyera como cupón.
   El horario va arriba y en grande porque es el dato con el que se decide. */
.actividades{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fill, minmax(285px,1fr)); margin-top:var(--sp-4); }
.actividad{
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  transition:transform .2s var(--ease-suave), box-shadow .2s var(--ease-suave);
}
.actividad:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.actividad__marca{ display:flex; align-items:center; gap:.8rem; padding:var(--sp-3) var(--sp-4); }
.actividad__logo{ width:52px; height:52px; object-fit:contain; flex:none; }
.actividad__iniciales{
  width:52px; height:52px; flex:none; display:grid; place-items:center; border-radius:12px;
  background:color-mix(in oklab, var(--hilo, var(--brand)) 12%, white);
  color:var(--hilo-txt, var(--brand)); font-family:var(--font-display); font-weight:700; font-size:1.15rem;
}
.actividad__marca h3{ font-size:var(--step-0); margin:0; line-height:1.2; }
.actividad__giro{ margin:.15rem 0 0; font-size:calc(var(--step--1)*.94); color:var(--ink-soft); }

.actividad__servicio{
  margin-top:auto; padding:var(--sp-4);
  border-top:1px solid var(--border);
  background:color-mix(in oklab, var(--hilo, var(--brand)) 5%, var(--surface));
}
.actividad__tipo{
  display:inline-block; font-family:var(--font-mono); font-size:calc(var(--step--1)*.82);
  text-transform:uppercase; letter-spacing:.1em; color:var(--hilo-txt, var(--brand)); margin-bottom:.35rem;
}
.actividad__que{ margin:0; font-family:var(--font-display); font-size:var(--step-1); line-height:1.2; }
.actividad__horario{
  display:flex; align-items:center; gap:.4rem; margin:.7rem 0 0;
  font-size:var(--step--1); font-weight:600; color:var(--hilo-txt, var(--brand));
}
.actividad__horario svg{ width:15px; height:15px; flex:none; }
.actividad__limite{ margin:.35rem 0 0; font-size:var(--step--1); color:var(--ink-soft); }
.actividad__limite::before{ content:"Cupo: "; font-weight:600; }
.actividad__segmento{ margin:.25rem 0 0; font-size:var(--step--1); color:var(--ink-soft); font-style:italic; }

@media (prefers-reduced-motion: reduce){
  .actividad{ transition:none; }
  .actividad:hover{ transform:none; }
}

/* --- Vista previa del cobro (SES-CMR-562) --------------------------------- */
.pago{ margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--border); }
.pago__aviso{
  margin:0 0 var(--sp-3); padding:.7rem .9rem; border-radius:var(--radius-sm);
  background:#FCF3E0; border-left:4px solid var(--warn); color:#5A3D00; font-size:var(--step--1);
}
.pago__titulo{ font-size:var(--step-1); margin-bottom:.2em; }
.pago__medios{ list-style:none; margin:var(--sp-3) 0 0; padding:0; display:grid; gap:.5rem; }
.pago__medio{
  display:flex; flex-direction:column; gap:.1rem;
  padding:.7rem .9rem; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface);
}
.pago__medio b{ font-size:var(--step-0); }
.pago__medio span{ font-size:var(--step--1); color:var(--ink-soft); }
.pago__diferido{ margin:var(--sp-3) 0 0; font-size:var(--step--1); color:var(--ink-soft); }

/* =========================================================================
   ZONAS DE COLOR + GALERÍA 2025 (DrMoon: romper el blanco con la MISMA paleta)
   No entra ningún color nuevo (LEC-UXD-014): sólo los degradados de marca ya
   definidos. La galería es una zona profunda a propósito — las fotos resaltan
   sobre el verde y el sitio deja de ser una lámina blanca continua.
   ========================================================================= */

/* Las secciones "alt" pasan de blanco plano a un velo verdusco muy sutil:
   el mismo aire de la marca, sin gritar. Es el degradado --grad-aire ya medido. */
.seccion--alt{ background:var(--grad-aire); }

/* Zona profunda de la galería — mismo material que la portada y el pie. */
.seccion--galeria{
  background:var(--grad-profundo); color:#EAF7F1;
  position:relative; overflow:hidden; border-block:0;
}
.seccion--galeria::after{
  content:""; position:absolute; left:-10%; bottom:-32%; width:56%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(0,175,111,.32) 0%, transparent 68%); pointer-events:none;
}
.seccion--galeria .wrap{ position:relative; z-index:1; }
.seccion--galeria .eyebrow{ color:#8FE3C8; }
.seccion--galeria .eyebrow::before{ background:#8FE3C8; }
.seccion--galeria h2{ color:#FFFFFF; }
.galeria__bajada{ color:#CDE9DF; max-width:60ch; }

/* Mosaico tipo masonry con columnas: alturas naturales, sin recortar las fotos. */
.galeria{ columns:3 240px; column-gap:var(--sp-3); }
@media (max-width:600px){ .galeria{ columns:2 150px; column-gap:var(--sp-2); } }

.galeria__item{
  display:block; width:100%; padding:0; border:0; margin:0 0 var(--sp-3);
  break-inside:avoid; line-height:0; cursor:zoom-in; position:relative;
  border-radius:var(--radius); overflow:hidden; background:var(--deep);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.55);
  transition:transform .25s var(--ease-suave), box-shadow .25s var(--ease-suave);
}
.galeria__item img{ width:100%; height:auto; display:block; transition:transform .45s var(--ease-suave); }
.galeria__item::after{  /* velo vivo de marca al pasar el ratón (nunca sobre texto) */
  content:""; position:absolute; inset:0; background:var(--grad-vital);
  opacity:0; mix-blend-mode:multiply; transition:opacity .25s var(--ease-suave); pointer-events:none;
}
.galeria__item:hover, .galeria__item:focus-visible{
  transform:translateY(-3px); box-shadow:0 18px 36px -16px rgba(0,0,0,.6); outline:none;
}
.galeria__item:focus-visible{ box-shadow:0 0 0 3px #8FE3C8, 0 18px 36px -16px rgba(0,0,0,.6); }
.galeria__item:hover img, .galeria__item:focus-visible img{ transform:scale(1.05); }
.galeria__item:hover::after, .galeria__item:focus-visible::after{ opacity:.16; }
@media (prefers-reduced-motion: reduce){
  .galeria__item, .galeria__item img{ transition:none; }
  .galeria__item:hover, .galeria__item:focus-visible{ transform:none; }
  .galeria__item:hover img, .galeria__item:focus-visible img{ transform:none; }
}

/* Lightbox — se amplía la foto sin salir de la página. Se cierra con Esc, con la
   × o tocando el fondo; las flechas o ← → recorren la galería. */
.lightbox{
  position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:var(--sp-4);
  background:rgba(0,42,32,.93); opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease-suave), visibility .25s;
}
.lightbox.is-abierto{ opacity:1; visibility:visible; }
.lightbox__img{
  max-width:min(1120px,94vw); max-height:86vh; width:auto; height:auto;
  border-radius:var(--radius); box-shadow:0 24px 64px rgba(0,0,0,.6); background:var(--deep);
}
.lightbox__btn, .lightbox__nav{
  position:absolute; border:0; cursor:pointer; color:#fff; display:grid; place-items:center;
  background:rgba(255,255,255,.14); border-radius:50%;
  transition:background .2s var(--ease-suave);
}
.lightbox__btn:hover, .lightbox__nav:hover{ background:rgba(255,255,255,.28); }
.lightbox__btn:focus-visible, .lightbox__nav:focus-visible{ outline:3px solid #8FE3C8; outline-offset:2px; }
.lightbox__btn{ top:1rem; right:1rem; width:48px; height:48px; font-size:1.7rem; line-height:1; }
.lightbox__nav{ top:50%; translate:0 -50%; width:52px; height:52px; font-size:1.9rem; line-height:1; }
.lightbox__nav--prev{ left:1rem; } .lightbox__nav--next{ right:1rem; }
@media (max-width:560px){ .lightbox__nav{ width:44px; height:44px; } }
@media (prefers-reduced-motion: reduce){ .lightbox{ transition:none; } }

/* Mini-mapa de la sede — imagen estática clicable (no iframe, sin rastreadores). */
.sede__mapa{
  display:block; margin:var(--sp-4) 0 var(--sp-3); border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow);
  line-height:0; position:relative;
  transition:box-shadow .2s var(--ease-suave), transform .2s var(--ease-suave);
}
.sede__mapa img{ width:100%; height:auto; display:block; }
.sede__mapa::after{  /* pastilla "Ver en Google Maps" al pasar el ratón */
  content:"Abrir en Google Maps ↗"; position:absolute; right:.7rem; bottom:.7rem;
  background:var(--brand); color:var(--on-brand); font-size:var(--step--1); font-weight:600;
  padding:.35rem .7rem; border-radius:999px; opacity:0; translate:0 6px;
  transition:opacity .2s var(--ease-suave), translate .2s var(--ease-suave);
}
.sede__mapa:hover, .sede__mapa:focus-visible{ transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(0,88,69,.5); }
.sede__mapa:hover::after, .sede__mapa:focus-visible::after{ opacity:1; translate:0 0; }
@media (prefers-reduced-motion: reduce){
  .sede__mapa{ transition:none; } .sede__mapa:hover{ transform:none; }
  .sede__mapa::after{ transition:none; }
}