/* ============================================================
   WIREFRAME v3 — Foro Nacional del Cáñamo · Mérida 2026
   Baja fidelidad, escala de grises, dos temas.
   Sin dependencias, sin build, sin CDN.
   ============================================================ */

/* ---------- 1. Tokens ----------------------------------------
   Neutros con sesgo frío muy leve (hacia 260°): un gris puro
   lee como no elegido. Ramp claro y ramp oscuro en crudo, luego
   tokens semánticos vía light-dark().
   ------------------------------------------------------------ */
:root {
  /* ramp claro */
  --bg-l:#ffffff;      --surf-l:#ffffff;    --surf2-l:#f6f6f8;
  --line-l:#e3e3e8;    --line2-l:#c5c5ce;   --text-l:#121217;
  --muted-l:#56565f;   --faint-l:#6b6b74;   --ink-l:#121217;    --onink-l:#ffffff;

  /* ramp oscuro */
  --bg-d:#0f0f13;      --surf-d:#17171d;    --surf2-d:#1d1d25;
  --line-d:#2b2b34;    --line2-d:#43434f;   --text-d:#f1f1f4;
  --muted-d:#a4a4ae;   --faint-d:#9c9ca6;   --ink-d:#f1f1f4;    --onink-d:#0f0f13;

  /* ---- Paleta de rol — derivada del referente E-Learning --------------
     El referente que eligió la clienta mide mal: pone blanco sobre su
     hero teal a 2.30 y la palabra destacada del H1 a 1.06, cuando AA
     pide 4.5. Se conserva su aspecto y se corrige la medida: la tinta
     sobre superficie viva es navy, y los acentos se oscurecen hasta
     pasar sin perder el tono.
     Cada par lleva su ratio real anotado. */
  --head-l:#2f327d;      --head-d:#9ca1e8;     /* 10.94 / 7.90  titulares */
  --brand-l:#611232;     --brand-d:#8a1a47;    /* banda de marca; en oscuro sube para despegarse del papel */
  --onbrand-l:#ffffff;   --onbrand-d:#ffffff;  /* 12.80 / 9.05 sobre --brand */
  --onbrand2-l:#f0eef0;  --onbrand2-d:#f0eef0; /* 11.09 / 7.84  tinta secundaria, neutra */
  --accent-l:#611232;    --accent-d:#d39eae;   /* 12.80 / 8.44  CTA y palabra destacada */
  --onaccent-l:#ffffff;  --onaccent-d:#12233d; /* 12.80 sobre --accent claro */
  --accent2-l:#a85c05;   --accent2-d:#e8a33c;  /* 4.88 / 8.87  tercer hue, badges */
  --hlhero-l:#ffd79a;    --hlhero-d:#ffd79a;   /* 9.41 / 6.66  palabra destacada SOBRE la banda */
  --tint-l:#f0ccd6;      --tint-d:#33212a;     /* banda rosa media derivada de #611232; titular 7.64/6.23 */

  /* El pie es una banda oscura en LOS DOS temas: cierra la página y
     separa el contenido del aviso legal. Por eso no invierte. */
  --footer-l:#12131c;    --footer-d:#12131c;
  --onfooter-l:#ffffff;  --onfooter-d:#ffffff; /* 18.49 */
  --onfooter2-l:#b8bcc8; --onfooter2-d:#b8bcc8;/*  9.74 */

  /* Insignias circulares de las tarjetas. Ninguna superficie contrasta a
     la vez contra papel blanco y papel casi negro, así que también van
     por pares. Los ratios son contra la tarjeta que las sostiene; el
     umbral de un objeto gráfico es 3, no 4.5. */
  --b1-l:#2f327d;        --b1-d:#5b72ee;       /* violeta  11.21 / 4.32 */
  --b2-l:#0f8f92;        --b2-d:#49bbbd;       /* teal      3.91 / 7.76 */
  --b3-l:#a85c05;        --b3-d:#e8a33c;       /* naranja   5.00 / 8.27 */
  --onb-l:#ffffff;       --onb-d:#0b1226;      /* tinta del icono */

  /* Elevación. El sistema no tenía ninguna: las tarjetas eran borde de
     1px. En oscuro una sombra negra no se ve, así que ahí la elevación
     la da un anillo interior claro además de la sombra. */
  --e1-l: 0 1px 2px rgb(16 24 40 / .05), 0 4px 12px rgb(16 24 40 / .07);
  --e1-d: 0 1px 2px rgb(0 0 0 / .5), 0 4px 12px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .06);
  --e2-l: 0 4px 10px rgb(16 24 40 / .06), 0 16px 32px rgb(16 24 40 / .1);
  --e2-d: 0 4px 10px rgb(0 0 0 / .5), 0 16px 32px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(255 255 255 / .08);

  /* semánticos — fallback sin light-dark() */
  --bg:var(--bg-l); --surf:var(--surf-l); --surf2:var(--surf2-l);
  --line:var(--line-l); --line2:var(--line2-l); --text:var(--text-l);
  --muted:var(--muted-l); --faint:var(--faint-l);
  --ink:var(--ink-l); --onink:var(--onink-l);
  --head:var(--head-l); --brand:var(--brand-l); --onbrand:var(--onbrand-l); --onbrand2:var(--onbrand2-l);
  --accent:var(--accent-l); --onaccent:var(--onaccent-l); --hlhero:var(--hlhero-l);
  --accent2:var(--accent2-l); --tint:var(--tint-l);
  --b1:var(--b1-l); --b2:var(--b2-l); --b3:var(--b3-l); --onb:var(--onb-l);
  --footer:var(--footer-l); --onfooter:var(--onfooter-l); --onfooter2:var(--onfooter2-l);
  --e1:var(--e1-l); --e2:var(--e2-l);

  /* escala tipográfica fluida, razón 1.25 */
  --fs-3xs:.6875rem; --fs-2xs:.75rem; --fs-xs:.8125rem; --fs-sm:.875rem; --fs-md:1rem;
  --fs-lg:clamp(1.0625rem, .98rem + .38vw, 1.25rem);
  --fs-xl:clamp(1.1875rem, 1.05rem + .7vw, 1.5rem);
  --fs-2xl:clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
  --fs-3xl:clamp(1.75rem, 1.3rem + 2.2vw, 3.25rem);

  /* espaciado base 4 */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;

  --r:6px; --r-lg:14px; --r-xl:24px; --r-pill:999px;
  --badge:52px;
  --maxw:76rem;
  --gut:clamp(1rem, 4vw, 2rem);
  --util-h:38px; --nav-h:60px;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* El sitio arranca SIEMPRE en claro, con independencia de la
     preferencia del sistema. El oscuro es una elección explícita. */
  color-scheme: light;
}

/* Sobrescritura explícita de tokens.
   Deliberadamente NO se usa light-dark(): esa función se evalúa en el
   elemento que consume la variable, no donde se declara, y no vuelve a
   resolverse al cambiar data-theme en caliente — lo que produce texto
   de un tema sobre el fondo del otro.
   `html…:root` eleva la especificidad a (0,2,1) para que estos bloques
   ganen sin depender del orden de aparición. */

/* El usuario eligió oscuro. */
html[data-theme="dark"]:root {
  color-scheme: dark;
  --bg:var(--bg-d); --surf:var(--surf-d); --surf2:var(--surf2-d);
  --line:var(--line-d); --line2:var(--line2-d); --text:var(--text-d);
  --muted:var(--muted-d); --faint:var(--faint-d);
  --ink:var(--ink-d); --onink:var(--onink-d);
  --head:var(--head-d); --brand:var(--brand-d); --onbrand:var(--onbrand-d); --onbrand2:var(--onbrand2-d);
  --accent:var(--accent-d); --onaccent:var(--onaccent-d); --hlhero:var(--hlhero-d);
  --accent2:var(--accent2-d); --tint:var(--tint-d);
  --b1:var(--b1-d); --b2:var(--b2-d); --b3:var(--b3-d); --onb:var(--onb-d);
  --footer:var(--footer-d); --onfooter:var(--onfooter-d); --onfooter2:var(--onfooter2-d);
  --e1:var(--e1-d); --e2:var(--e2-d);
}

/* El usuario volvió a claro: restaura la rampa clara completa. */
html[data-theme="light"]:root {
  color-scheme: light;
  --bg:var(--bg-l); --surf:var(--surf-l); --surf2:var(--surf2-l);
  --line:var(--line-l); --line2:var(--line2-l); --text:var(--text-l);
  --muted:var(--muted-l); --faint:var(--faint-l);
  --ink:var(--ink-l); --onink:var(--onink-l);
  --head:var(--head-l); --brand:var(--brand-l); --onbrand:var(--onbrand-l); --onbrand2:var(--onbrand2-l);
  --accent:var(--accent-l); --onaccent:var(--onaccent-l); --hlhero:var(--hlhero-l);
  --accent2:var(--accent2-l); --tint:var(--tint-l);
  --b1:var(--b1-l); --b2:var(--b2-l); --b3:var(--b3-l); --onb:var(--onb-l);
  --footer:var(--footer-l); --onfooter:var(--onfooter-l); --onfooter2:var(--onfooter2-l);
  --e1:var(--e1-l); --e2:var(--e2-l);
}

/* ---------- 2. Base ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.55;
  overflow-x: hidden;
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

img, svg { max-width: 100%; }

:where(a) { color: inherit; }

/* El anillo de foco y el nav activo van en AZUL, no en el rosa del CTA:
   el rosa queda reservado a la acción primaria y a la banda del hero. */
:focus-visible { outline: 2px solid var(--head); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 3. Layout -------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* Ritmo variable: bloques densos, bloques de respiro. */
.band        { padding-block: clamp(2.25rem, 4.5vw, 3.75rem); }
.band--tight { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.band--airy  { padding-block: clamp(3rem, 6.5vw, 5.5rem); }
.band--rule  { border-top: 1px solid var(--line); }
.band--fill  { background: var(--tint); position: relative; overflow-x: clip; }
/* El rosa medio es lo bastante saturado como para hundir la tinta más
   débil del sistema: --faint mide 3.62 sobre él. Dentro de estas bandas
   esos textos suben un escalón a --muted (4.98). */
.band--fill :is(.eyebrow, .micro, .tbd) { color: var(--muted); }

/* Banda de marca: el mismo rosa del hero, a sangre. Invierte la tinta.
   Reutiliza el patrón de «islas claras» del hero, más abajo. */
.band--brand { background: var(--brand); color: var(--onbrand); position: relative; overflow-x: clip; }
.band--brand :is(h1,h2,h3,h4) { color: var(--onbrand); }
/* .scroll-hint entró tarde a esta lista: se quedaba en --faint (#6b6b74,
   un gris medio) sobre la guinda #611232 y daba 2.43 de contraste. Es la
   misma trampa de siempre —tinta pensada para papel claro sobre banda
   tintada—, así que cualquier componente de texto nuevo que pueda caer
   dentro de .band--brand tiene que sumarse aquí. */
.band--brand :is(.lead, .caption, .micro, .eyebrow, .prose, .addr, .datos, .tbd, .scroll-hint) { color: var(--onbrand2); }
.band--brand .prose strong { color: var(--onbrand); }
.band--brand .motto { border-color: var(--onbrand2); }

/* La banda de marca lleva su propia forma de fondo, en claro sobre el
   color: la del .band--fill es oscura y aquí no se vería. */
.band--brand::before {
  content: ""; position: absolute; pointer-events: none;
  width: 24rem; height: 24rem; border-radius: 50%;
  top: -8rem; right: -8rem;
  background: #ffffff; opacity: .07;
}
.band--brand::after {
  content: ""; position: absolute; pointer-events: none;
  width: 16rem; height: 16rem; border-radius: 50%;
  bottom: -6rem; left: -5rem;
  background: #ffffff; opacity: .05;
}
.band--brand > .wrap { position: relative; z-index: 1; }

/* Tarjeta secundaria sobre la banda de marca: rosa claro, no gris.
   Sobre el guinda profundo el gris neutro se lee como suciedad. */
.band--brand .card--fill { background: var(--tint); }
/* --faint mide 3.60 sobre ese rosa; dentro de estas tarjetas sube a
   --muted (4.95). Mismo criterio que en las bandas de rosa medio. */
.band--brand .card--fill :is(.person__role, .micro, .eyebrow, .tbd) { color: var(--muted); }

/* Forma de fondo de las bandas tintadas. Muy baja opacidad: acompaña,
   no compite con el contenido. El .wrap sube de capa para quedar encima. */
.band--fill::before {
  content: ""; position: absolute; pointer-events: none;
  width: 24rem; height: 24rem; border-radius: 50%;
  top: -8rem; right: -8rem;
  background: var(--brand); opacity: .06;
}
.band--fill > .wrap { position: relative; z-index: 1; }

.stack   { display: flex; flex-direction: column; gap: var(--s4); }
.stack-2 { display: flex; flex-direction: column; gap: var(--s2); }
.row     { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

.grid { display: grid; gap: var(--s3); }
.grid > * { min-width: 0; }

/* ---------- 4. Tipografía ---------------------------------- */
h1,h2,h3,h4 { margin: 0; line-height: 1.14; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; color: var(--head); }

/* Palabra destacada del titular: el bicolor del referente. Sobre el hero
   cambia de escalón porque el naranja de papel no contrasta con el teal. */
.hl { color: var(--accent2); }
.hero .hl { color: var(--hlhero); }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); letter-spacing: -.01em; }
h4 { font-size: var(--fs-sm); letter-spacing: 0; }
p  { margin: 0; }

.prose { display: flex; flex-direction: column; gap: var(--s3); max-width: 62ch; color: var(--muted); }
.prose strong { color: var(--text); font-weight: 600; }

.lead    { font-size: var(--fs-lg); color: var(--muted); max-width: 56ch; text-wrap: pretty; }
.micro   { font-size: var(--fs-2xs); color: var(--faint); }
.caption { font-size: var(--fs-xs); color: var(--muted); }

.eyebrow {
  font-size: var(--fs-3xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
}

.num { font-variant-numeric: tabular-nums; }

/* ---------- 5. Barra de utilidades -------------------------- */
.util {
  height: var(--util-h);
  background: var(--surf2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-2xs);
}
.util .wrap { height: 100%; display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); }
.util-group { display: flex; align-items: center; gap: var(--s1); }

/* Bajo 48rem las redes salen de la barra: sus targets quedarían en
   30 px y compiten por el ancho con idioma, tema y moneda. Siguen
   accesibles en el footer y en la barra de acción inferior. */
.util-group--social { display: none; }
@media (min-width: 48rem) {
  .util .wrap { justify-content: space-between; }
  .util-group--social { display: flex; }
}

.util-link {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--r); color: var(--muted); text-decoration: none;
}
.util-link:hover { color: var(--text); background: var(--surf); }

/* Segmented control: idioma, tema, moneda */
.seg {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line2); border-radius: var(--r-pill);
  background: var(--surf); padding: 2px; gap: 2px;
}
.seg button {
  font: inherit; font-size: var(--fs-3xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); background: none; border: 0;
  border-radius: var(--r-pill); padding: 4px 10px; min-height: 24px;
  cursor: pointer; white-space: nowrap;
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--onink); }
.seg--icon button { padding: 4px 8px; display: grid; place-items: center; }
.util-sep { width: 1px; height: 18px; background: var(--line2); margin-inline: var(--s2); }

/* ---------- 6. Navegación ---------------------------------- */
.nav-sentinel { height: 1px; }

.nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.nav.is-stuck { border-bottom-color: var(--line); }

.nav .wrap { height: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s4); }

/* Lockup de marca: CGCAC principal + CONOCER institucional.
   CGCAC es apaisado (4.2:1) y CONOCER vertical (1.6:1). A igual altura
   el par ocuparía ~5.8× esa altura de ancho, que no cabe en 360 px junto
   al burger: en móvil se muestra solo la marca principal, y CONOCER
   aparece en su sección institucional y en el footer. */
.brand {
  display: inline-flex; align-items: center; gap: var(--s2);
  text-decoration: none; min-width: 0;
}
.brand__logo {
  display: block; width: auto; height: 28px; max-width: 100%;
  filter: grayscale(1);
}
.brand__logo--sec { height: 22px; }
.brand__sep { flex: none; width: 1px; height: 22px; background: var(--line2); }

/* Ambos logotipos son oscuros y saturados —CGCAC azul marino y verde,
   CONOCER guinda— y se hunden sobre fondo oscuro. Invertir tras
   desaturar los devuelve a claros sin introducir color. */
html[data-theme="dark"] .brand__logo,
html[data-theme="dark"] .presenta__logo,
html[data-theme="dark"] .nav-mark__logo { filter: grayscale(1) invert(1); }

/* Excepción: los que ya viven sobre un chip blanco no se invierten —
   quedarían claros sobre claro. Gana por especificidad (0,3,0). */
html[data-theme="dark"] .brand--footer .brand__logo,
html[data-theme="dark"] .hero .presenta__logo { filter: grayscale(1); }

/* Móvil: el lockup se reduce a la marca principal. */
.brand__sep, .brand__logo--sec { display: none; }

/* Menú central: SOLO anclas de la página actual. */
.nav-menu { display: none; justify-self: center; }
.nav-menu ul { display: flex; align-items: center; gap: var(--s1); list-style: none; margin: 0; padding: 0; }
.nav-menu a {
  display: block; padding: 7px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 500; color: var(--muted); text-decoration: none;
  white-space: nowrap; transition: color .15s ease, background-color .15s ease;
}
.nav-menu a:hover { color: var(--text); background: var(--surf2); }

.nav-menu a[aria-current="true"] { color: var(--head); font-weight: 650; background: var(--surf2); }

/* Marca institucional al centro del menú. Va dentro del <ul>, así que
   solo existe con el menú de escritorio (≥72rem); por debajo el .nav-menu
   es display:none y el lockup de la izquierda sigue llevando a CONOCER. */
.nav-mark {
  display: flex; align-items: center;
  margin: 0 var(--s2); padding: 0 var(--s3);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.nav-mark__logo { display: block; width: auto; height: 20px; filter: grayscale(1); }

.nav-end { display: flex; align-items: center; gap: var(--s2); justify-self: end; }
.nav-cta { display: none; }
.nav-cta.is-hidden { opacity: 0; pointer-events: none; }

.burger {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line2); border-radius: var(--r);
  background: var(--surf); color: var(--text); cursor: pointer;
}

/* Panel móvil */
/* Overlay a pantalla completa. Mobile-first: es el menú principal hasta
   72rem, no un plan B del de escritorio. Orden deliberado — navegación
   primero, que es a lo que se abre; ajustes al final. */
.menu-panel {
  position: fixed; inset: 0; z-index: 80;
  background: var(--bg);
  display: flex; flex-direction: column; gap: var(--s5);
  padding: var(--s4) var(--gut) calc(var(--s5) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  animation: menu-in .18s ease-out;
}
.menu-panel[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .menu-panel { animation: none; } }

.menu-panel__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); min-height: 44px;
  padding-bottom: var(--s4); border-bottom: 1px solid var(--line);
}
.menu-panel__top .brand__logo { height: 26px; }

/* Navegación: objetivos generosos y el activo marcado con barra lateral,
   que se distingue del hover sin depender solo del color. */
.menu-panel__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.menu-panel__nav li + li { border-top: 1px solid var(--line); }
.menu-panel__nav a {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 54px; padding-left: var(--s3);
  border-left: 2px solid transparent;
  text-decoration: none; font-size: var(--fs-lg); font-weight: 600;
}
.menu-panel__nav a[aria-current="true"] { border-left-color: var(--head); color: var(--text); }
.menu-panel__nav a:not([aria-current="true"]) { color: var(--muted); }

.menu-panel__cta { font-size: var(--fs-md); min-height: 52px; }

/* Pie: enlaces secundarios, ajustes, redes y datos del evento. */
.menu-panel__foot {
  margin-top: auto; display: flex; flex-direction: column; gap: var(--s5);
  padding-top: var(--s5); border-top: 1px solid var(--line);
}
.menu-panel__sub h4,
.menu-panel__ctrl h4 { color: var(--faint); font-size: var(--fs-3xs); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s2); }
.menu-panel__sub ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.menu-panel__sub a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-sm); color: var(--muted); text-decoration: none; }

.menu-panel__ctrl { display: flex; flex-direction: column; gap: var(--s2); }
.menu-panel__ctrlrow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 44px;
}
.menu-panel__ctrlrow > span { font-size: var(--fs-xs); color: var(--muted); }

/* En la barra de utilidades el segmented control es compacto a propósito.
   Dentro del overlay es un control de dedo, no de cursor: 44 px. */
.menu-panel__ctrlrow .seg button { min-height: 44px; padding: 4px var(--s4); font-size: var(--fs-2xs); }
.menu-panel__ctrlrow .seg--icon button { padding: 4px var(--s3); min-width: 52px; }
.menu-panel__top .brand { min-height: 44px; }

/* Las redes no caben en la barra de utilidades en móvil: aquí sí,
   con objetivos de 44 px en vez de los 30 px de la barra. */
.menu-panel__social { display: flex; gap: var(--s2); }
.util-link--lg { width: 44px; height: 44px; border: 1px solid var(--line); }

.menu-panel__meta { font-size: var(--fs-2xs); color: var(--faint); line-height: 1.6; }

/* ---------- 7. Botones y pills ------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 46px; padding: 0 var(--s5);
  border: 1px solid var(--accent); border-radius: var(--r);
  background: var(--accent); color: var(--onaccent);
  font: inherit; font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: opacity .15s ease, background-color .15s ease;
}
.btn:hover { opacity: .86; }
.btn--outline { background: transparent; color: var(--text); border-color: var(--line2); }
.btn--outline:hover { background: var(--surf2); opacity: 1; }
.btn--quiet { background: transparent; color: var(--muted); border-color: transparent; }
.btn--quiet:hover { background: var(--surf2); color: var(--text); }
.btn--sm { min-height: 38px; padding: 0 var(--s4); font-size: var(--fs-xs); }
.btn--block { width: 100%; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 5px var(--s3); font-size: var(--fs-2xs); color: var(--muted);
  background: var(--surf); white-space: nowrap;
}

.ico { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--sm { width: 15px; height: 15px; }
.ico--lg { width: 22px; height: 22px; }

/* ---------- 8. Placeholders de medios ----------------------- */
.ph {
  position: relative;
  border: 1px dashed var(--line2); border-radius: var(--r);
  background: var(--surf2);
  display: grid; place-items: center; text-align: center;
  padding: var(--s4); overflow: hidden;
}
.ph__label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--fs-2xs); color: var(--muted); max-width: 42ch;
}
.ph__label b { font-size: var(--fs-3xs); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.ph--16x9 { aspect-ratio: 16/9; }
.ph--4x5  { aspect-ratio: 4/5; }
.ph--1x1  { aspect-ratio: 1/1; }
.ph--wide { aspect-ratio: 21/9; }
.ph--logo { aspect-ratio: 3/1.4; padding: var(--s2); }
.ph--logo .ph__label { font-size: var(--fs-3xs); }

.ph__play {
  position: absolute; inset: 0; margin: auto;
  width: 60px; height: 60px; border-radius: 50%;
  border: 1px solid var(--line2); background: var(--surf);
  display: grid; place-items: center; color: var(--text);
}

/* ---------- 9. Tarjetas ------------------------------------- */
/* El borde se vuelve transparente en claro y la separación la da la
   sombra: es lo que produce el aire del referente. En oscuro la sombra
   no se ve, así que el borde vuelve a aparecer. */
.card {
  border: 1px solid transparent; border-radius: var(--r-xl);
  background: var(--surf); padding: var(--s5);
  box-shadow: var(--e1);
  display: flex; flex-direction: column; gap: var(--s2);
}
/* Tarjeta secundaria: sigue siendo una TARJETA, con su superficie y su
   sombra. Antes tomaba el color de la banda y los nombres parecían
   flotar sueltos sobre el fondo. */
.card--fill   { background: var(--surf2); box-shadow: var(--e1); }
.card--dashed { border-color: var(--line2); border-style: dashed; background: transparent; box-shadow: none; }
.card--link   { text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.card--link:hover { box-shadow: var(--e2); transform: translateY(-2px); }

/* Insignia circular asomando por el borde superior de la tarjeta.
   Es un elemento real y no un ::before porque tiene que contener el
   <svg> del icono. El margen superior del ítem es lo que reserva el
   hueco: en un contenedor grid los márgenes no colapsan, así que la
   fila crece sola y la insignia no pisa lo de arriba. */
.card--badge {
  position: relative;
  margin-top: calc(var(--badge) / 2);
  padding-top: calc(var(--s5) + var(--badge) / 2);
}
.badge {
  position: absolute; top: calc(var(--badge) / -2); left: var(--s5);
  width: var(--badge); height: var(--badge); border-radius: 50%;
  display: grid; place-items: center;
  color: var(--onb); box-shadow: var(--e1);
}
.badge .ico { width: 22px; height: 22px; stroke-width: 1.7; }
.badge--1 { background: var(--b1); }
.badge--2 { background: var(--b2); }
.badge--3 { background: var(--b3); }

/* Un riel es overflow-x:auto, y por spec eso vuelve el eje vertical
   'auto' también: sin este hueco la insignia se recortaría contra el
   borde superior. Solo se aplica si el riel realmente lleva insignias. */
.rail:has(.card--badge) { padding-top: calc(var(--badge) / 2 + 4px); }

html[data-theme="dark"] .card:not(.card--dashed),
html[data-theme="dark"] .signup,
html[data-theme="dark"] .def,
html[data-theme="dark"] .tier:not(.tier--flag),
html[data-theme="dark"] .brand-card:not(.brand-card--plain) { border-color: var(--line); }

/* Nota de wireframe: anotación dirigida al cliente, no contenido. */
.note {
  border: 1px solid var(--line2); border-left-width: 3px; border-radius: var(--r);
  background: var(--surf2); padding: var(--s3) var(--s4);
  font-size: var(--fs-2xs); color: var(--muted);
  display: flex; flex-direction: column; gap: 4px;
}
.note > b { font-size: var(--fs-3xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }

/* Marcador de dato pendiente, inline */
/* Marca de dato pendiente. NO lleva white-space: nowrap: el contenido
   de un wireframe cambia de longitud en cada revisión, y una etiqueta
   que no envuelve desborda el viewport en cuanto el texto crece. */
.tbd {
  font-size: .9em; font-weight: 600; letter-spacing: .04em;
  border: 1px dashed var(--line2); border-radius: 3px;
  padding: 0 5px; color: var(--faint);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---------- 10. Hero ---------------------------------------- */
/* Hero a sangre, como el referente. La tinta NO es blanca: blanco sobre
   este teal da 2.30 y no pasa AA. La tinta es navy oscuro, 6.97.
   `overflow-x: clip` y no `hidden`: hidden desactivaría el position:sticky
   de .hero__aside, que vive en el breakpoint de 64rem. */
.hero {
  padding-top: clamp(2rem, 5vw, 4rem);
  /* Cero abajo a propósito: la onda es lo que cierra el hero. Cualquier
     relleno aquí se pinta DESPUÉS de la curva y deja una franja de color
     bajo ella. El aire inferior lo pone el .wrap. */
  padding-bottom: 0;
  background: var(--brand); color: var(--onbrand);
  position: relative; overflow-x: clip; isolation: isolate;
}
.hero > .wrap { padding-bottom: clamp(2rem, 4vw, 3rem); }

/* Círculos de fondo. Decorativos puros: pseudo-elementos detrás del
   contenido, recortados por el overflow-x del propio hero, así que no
   pueden provocar scroll horizontal. */
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: -1;
  border-radius: 50%; pointer-events: none;
  background: rgb(255 255 255 / .08);
}
.hero::before { width: 32rem; height: 32rem; top: -13rem; right: -9rem; }
.hero::after  { width: 20rem; height: 20rem; bottom: 4rem; left: -7rem; background: rgb(255 255 255 / .05); }

/* Los botones del hero viven sobre color: recuperan tinta clara. */
:is(.hero, .band--brand) .btn--outline { color: var(--onbrand); border-color: rgb(255 255 255 / .55); }
:is(.hero, .band--brand) .btn--outline:hover { background: rgb(255 255 255 / .14); }
:is(.hero, .band--brand) .btn--quiet { color: var(--onbrand2); }
:is(.hero, .band--brand) .btn--quiet:hover { background: rgb(255 255 255 / .14); color: var(--onbrand); }
.hero h1, .hero h2, .hero h3 { color: var(--onbrand); }
.hero .lead, .hero .motto, .hero .caption, .hero .micro { color: var(--onbrand2); }
.hero .motto { border-color: var(--onbrand2); }

/* Texto suelto sobre la banda de color. */
:is(.hero, .band--brand) .back { color: var(--onbrand); }
:is(.hero, .band--brand) .tbd  { color: var(--onbrand2); }

/* ISLAS CLARAS dentro del hero. El registro, los datos clave, el chip de
   «Presentan» y —en prensa y legales— la tarjeta de navegación son
   superficies blancas que viven dentro de una sección de color. Si
   heredan la tinta del hero quedan blanco sobre blanco. Aquí recuperan
   las tintas del papel; los selectores anidados ganan por especificidad. */
:is(.hero, .band--brand) :is(.signup, .facts, .presenta, .card, .def, .tier, .brand-card) { color: var(--text); }
:is(.hero, .band--brand) :is(.signup, .card, .def, .tier) :is(.lead, .caption, .micro, .eyebrow, .datos, .addr) { color: var(--muted); }
:is(.hero, .band--brand) :is(.signup, .card, .def, .tier) :is(.datos dd, .num) { color: var(--text); }
:is(.hero, .band--brand) :is(.signup, .card, .def, .tier) :is(h1, h2, h3, h4) { color: var(--head); }
:is(.hero, .band--brand) :is(.signup, .card, .def, .tier) .tbd { color: var(--faint); }

/* La onda es un bloque en flujo normal, no un absoluto: así no puede
   desbordar ni provocar scroll horizontal. Se pinta del color del papel,
   así que es «la página comiéndose el hero» y sigue sola al tema. */
.wave { display: block; width: 100%; height: clamp(28px, 5vw, 72px); color: var(--bg); margin-bottom: -1px; }

/* El registro flota sobre el hero: recupera la tinta normal del papel. */
.hero .signup { color: var(--text); }
.hero .signup h2, .hero .signup h3 { color: var(--head); }

/* Los logotipos nunca tocan la superficie de color: van sobre un chip
   blanco. Desaturados sobre teal se leen como una mancha. */
.hero .presenta {
  background: var(--surf); border-radius: var(--r-pill);
  padding: var(--s2) var(--s4); box-shadow: var(--e1);
  width: fit-content; max-width: 100%;
}
.hero__grid { display: grid; gap: var(--s6); }
.hero__title { margin-bottom: var(--s4); }
.hero__kicker { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }

/* Datos clave: dato grande + etiqueta pequeña */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-top: var(--s5); }
.fact { background: var(--surf); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 2px; }
.fact dt { order: 2; font-size: var(--fs-3xs); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
/* Tinta explícita: la tarjeta es blanca pero vive dentro del hero de
   color, y sin esto hereda la tinta clara y queda blanco sobre blanco. */
.fact dd { order: 1; margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--head); }

/* Tarjeta de registro compacta en el hero */
.signup { border: 1px solid transparent; border-radius: var(--r-xl); background: var(--surf); padding: var(--s5); box-shadow: var(--e2); display: flex; flex-direction: column; gap: var(--s4); }
.signup__head { display: flex; flex-direction: column; gap: var(--s1); }

/* ---------- 11. Formularios --------------------------------- */
.form { display: grid; gap: var(--s4); }
.form__pair { display: grid; gap: var(--s4); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: var(--fs-xs); font-weight: 600; }
.field .hint { font-size: var(--fs-2xs); color: var(--faint); }
.field :is(input, select, textarea) {
  font: inherit; font-size: var(--fs-md); /* 16px evita zoom en iOS */
  min-height: 46px; padding: 0 var(--s3);
  border: 1px solid var(--line2); border-radius: var(--r);
  background: var(--surf); color: var(--text); width: 100%;
}
.field textarea { min-height: 96px; padding-block: var(--s3); resize: vertical; line-height: 1.5; }
.field :is(input, select, textarea)::placeholder { color: var(--faint); }
.check { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--fs-2xs); color: var(--muted); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }

/* ---------- 12. Bento (argumento + definiciones) ------------ */
.bento { display: grid; gap: var(--s3); }
.bento__lead { display: flex; flex-direction: column; gap: var(--s4); justify-content: center; }
/* En el bento el texto ocupa todo el ancho, a la par de las tarjetas.
   Quita el límite de medida: a 1280 px son ~130 caracteres por línea,
   por encima del rango cómodo de 45-85. Volver a acotarlo es poner
   `max-width: 80ch` aquí. */
.bento__lead :is(.prose, .lead) { max-width: none; }

/* Acordeón: solo bajo 48rem. En desktop las definiciones son tarjetas. */
.defs { display: grid; gap: var(--s3); }

/* Variante para documentos legales. El acordeón sigue sirviendo para
   escanear, pero .defs se abre a 2 y luego a 4 columnas más abajo, y un
   texto legal largo en una columna estrecha es ilegible. Aquí se queda
   siempre en una sola columna; el cuerpo usa .prose, que respeta la
   medida de lectura de 62ch. Doble clase a propósito: así gana a las
   reglas de las media queries sin depender del orden del archivo. */
.defs.defs--doc { grid-template-columns: minmax(0,1fr); }
.def { border: 1px solid transparent; border-radius: var(--r-xl); background: var(--surf); box-shadow: var(--e1); }
.def > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 52px; padding: var(--s3) var(--s4);
  font-size: var(--fs-sm); font-weight: 650; cursor: pointer; list-style: none;
}
.def > summary::-webkit-details-marker { display: none; }
.def > summary::after { content: ""; width: 10px; height: 10px; border-right: 1.6px solid var(--faint); border-bottom: 1.6px solid var(--faint); transform: rotate(45deg) translate(-2px,-2px); transition: transform .2s ease; flex: none; }
.def[open] > summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.def__body { padding: 0 var(--s4) var(--s4); font-size: var(--fs-xs); color: var(--muted); }

/* ---------- 12b. Riel deslizable (móvil) --------------------
   Patrón compartido por programa y participantes: en pantallas
   angostas la lista se recorre en horizontal en vez de apilarse.
   ------------------------------------------------------------ */
.rail {
  display: grid; grid-auto-flow: column;
  gap: var(--s3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: thin;
  margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
  padding-bottom: var(--s3);
}
.rail > * { scroll-snap-align: start; }
.scroll-hint { display: flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); color: var(--faint); margin-top: var(--s1); }

/* ---------- 13. Programa: tres grupos de horario -------------
   En escritorio los tres grupos van en horizontal, uno por columna;
   en móvil se apilan. Sustituye a la lista vertical .agenda.
   ------------------------------------------------------------ */
.fases { display: grid; gap: var(--s4); align-items: start; }
.fase {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s5);
  background: var(--surf); border: 1px solid transparent;
  border-radius: var(--r-xl); box-shadow: var(--e1);
}
.fase__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
}
.fase__n { font-size: var(--fs-sm); font-weight: 700; color: var(--head); }
.fase__t {
  margin-left: auto; font-size: var(--fs-2xs); font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fase__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.paso { padding-block: var(--s3); }
.paso + .paso { border-top: 1px solid var(--line); }
.paso__t {
  display: block; font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .06em;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.paso__n { font-size: var(--fs-sm); font-weight: 650; margin-top: 2px; }
.paso__d { font-size: var(--fs-2xs); color: var(--muted); margin-top: 2px; }
/* El acto principal de cada grupo. */
.paso--main { background: var(--tint); border-radius: var(--r-lg); padding: var(--s3); margin-block: var(--s2); }
/* --faint mide 3.60 sobre ese rosa; aquí sube a --muted (4.95). */
.paso--main :is(.micro, .micro a, .paso__d) { color: var(--muted); }
.paso--main + .paso { border-top: 0; }
.paso--main .paso__n { font-size: var(--fs-md); }

@media (min-width: 64rem) {
  .fases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
}

/* ---------- 14. Participantes: riel → rejilla --------------- */
.people { grid-auto-columns: 58%; }
.person { display: flex; flex-direction: column; gap: var(--s2); }
.person__name { font-size: var(--fs-sm); font-weight: 650; }
.person__role { font-size: var(--fs-2xs); color: var(--faint); }

/* ---------- 15. Rejilla de logos ---------------------------- */
.logos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s2); }

/* Organización cuyo logotipo aún no llega. Antes era una caja de borde
   punteado con el nombre dentro: el aspecto inconfundible de un wireframe.
   Aquí el nombre se compone como lockup tipográfico dentro del MISMO chip
   blanco que .org, para que la rejilla se lea pareja y ninguna casilla
   delate que falta un archivo.
   La tinta va en literal y no en token, a propósito: el chip es blanco
   fijo en los dos temas, y un token oscuro se aclararía al conmutar a
   oscuro dejando texto claro sobre blanco. */
/* Trampa anti-spam del formulario. NO usar display:none ni hidden: varios
   bots detectan justamente eso y saltan el campo. Se saca del flujo visual
   pero sigue existiendo para quien rellena ciegamente el DOM. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

.wordmark {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; aspect-ratio: 3/1.4; overflow: hidden;
  padding: var(--s2); text-align: center;
  background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-lg);
  color: #2f327d; text-wrap: balance;
}
/* Nombre y rol en dos niveles. El overflow y el line-clamp mantienen el
   chip exactamente en el mismo alto que .org aunque el nombre sea largo:
   si no, un nombre de cuatro líneas estira toda la fila de la rejilla. */
.wordmark b {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--fs-3xs); font-weight: 650; line-height: 1.25; letter-spacing: .02em;
}
.wordmark span {
  font-size: calc(var(--fs-3xs) * .85); font-weight: 500; line-height: 1.2;
  color: #5b5e8f;
}
.logos--slot .ph { border-style: dashed; }

/* ---------- Mapa de la sede -------------------------------
   Carga directa: el iframe vive en el HTML. Google recibe la
   visita al abrir la página, y así está declarado en el aviso
   de cookies de legales.html.
   ------------------------------------------------------------ */
.mapa {
  aspect-ratio: 16/10; border-radius: var(--r-xl); overflow: hidden;
  background: var(--surf2);
}
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Separación entre los bloques de «Planifica tu viaje». */
.viaje__bloque { margin-bottom: var(--s7); }

/* ---------- Dueto «Cómo llegar» + «Excursiones» -------------
   Las dos parejas texto/medio comparten una rejilla, pero cada
   COLUMNA fluye por su cuenta. Como dos bloques de rejilla
   separados, el texto de Excursiones tenía que esperar a que
   terminara el mapa y quedaba un hueco de 109 px a la izquierda
   contra 48 px a la derecha. Con columnas independientes ambos
   lados llevan el mismo ritmo de --s7.

   Móvil (por debajo de 48rem): .viaje__col se disuelve con
   display:contents y las cuatro piezas se apilan en una sola
   columna. `order` devuelve el orden de lectura —texto, mapa,
   texto, logo— porque en el HTML van agrupadas por columna.
   ------------------------------------------------------------ */
.viaje__dueto { display: flex; flex-direction: column; gap: var(--s7); }
.viaje__col { display: contents; }
.viaje__col:first-child > :nth-child(1) { order: 1; } /* texto Cómo llegar */
.viaje__col:last-child  > :nth-child(1) { order: 2; } /* mapa              */
.viaje__col:first-child > :nth-child(2) { order: 3; } /* texto Excursiones */
.viaje__col:last-child  > :nth-child(2) { order: 4; } /* logotipo          */

/* Logotipo real de organización. Chip blanco en LOS DOS temas: son
   marcas oscuras y sobre superficie oscura desaparecen. Misma decisión
   que el lockup del pie y la tarjeta de CONOCER. */
.org {
  display: grid; place-items: center; aspect-ratio: 3/1.4; padding: var(--s3);
  background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-lg);
}
.org img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.logo-add { display: grid; place-items: center; aspect-ratio: 3/1.4; border: 1px dashed var(--line2); border-radius: var(--r); color: var(--faint); background: transparent; }

/* ---------- 16. FAQ ----------------------------------------- */
.faq { display: grid; gap: var(--s2); align-content: start; }

/* ---------- 17. Tablas -------------------------------------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
table { border-collapse: collapse; width: 100%; min-width: 36rem; font-size: var(--fs-xs); }
th, td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--surf2); font-size: var(--fs-3xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
tbody th { font-weight: 600; }
tbody tr:last-child :is(td, th) { border-bottom: 0; }
td.num, th.num { font-variant-numeric: tabular-nums; }

/* ---------- 18. Niveles de patrocinio ----------------------- */
.tiers { display: grid; gap: var(--s3); align-items: start; }
.tier { border: 1px solid transparent; border-radius: var(--r-xl); background: var(--surf); padding: var(--s5); box-shadow: var(--e1); display: flex; flex-direction: column; gap: var(--s3); }
.tier--flag { border-color: var(--accent); box-shadow: var(--e2); }
.tier__price { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tier__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); font-size: var(--fs-xs); color: var(--muted); }
.tier__list li { display: grid; grid-template-columns: 16px 1fr; gap: var(--s2); align-items: start; }
.tier__list svg { margin-top: 3px; color: var(--faint); }
.tier > .btn { margin-top: auto; }

/* ---------- 19. Barra de acción móvil ----------------------- */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: var(--s2) var(--gut);
  padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom, 0px));
  display: flex; gap: var(--s2); align-items: center;
}
.actionbar .btn { flex: 1; }
.actionbar__icon { width: 52px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line2); border-radius: var(--r); color: var(--text); text-decoration: none; flex: none; background: var(--surf); }

/* ---------- 20. Footer -------------------------------------- */
/* Banda oscura en LOS DOS temas: cierra la página. Por eso no invierte
   y por eso sus tintas son propias y no las del papel. */
.footer { background: var(--footer); color: var(--onfooter2); border-top: 0; padding-block: var(--s7) var(--s6); }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s5) var(--s4); }
.footer h4 { font-size: var(--fs-3xs); letter-spacing: .14em; text-transform: uppercase; color: var(--onfooter2); opacity: .72; margin-bottom: var(--s3); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.footer a { font-size: var(--fs-xs); color: var(--onfooter2); text-decoration: none; }
.footer a:hover { color: var(--onfooter); }
.footer__base { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid rgb(255 255 255 / .14); display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; align-items: center; font-size: var(--fs-2xs); color: var(--onfooter2); }
.social { display: flex; gap: var(--s2); }
.social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .24); border-radius: var(--r); color: var(--onfooter); }
.social a:hover { background: rgb(255 255 255 / .1); }
/* Todo lo que caiga en el pie usa sus tintas, no las del papel. */
.footer .micro, .footer .caption, .footer .tbd, .footer p { color: var(--onfooter2); }

/* ---------- 21. Cintillos de estado ------------------------- */
.toast {
  position: fixed; left: 50%; translate: -50% 0; bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 90; max-width: min(30rem, calc(100vw - 2rem));
  background: var(--ink); color: var(--onink);
  border-radius: var(--r); padding: var(--s3) var(--s4);
  font-size: var(--fs-2xs); text-align: center;
  box-shadow: 0 8px 28px rgb(0 0 0 / .22);
}
.toast[hidden] { display: none; }

.page-head { display: flex; flex-direction: column; gap: var(--s3); }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text); text-decoration: none; }

/* ============================================================
   Breakpoints
   ============================================================ */
/* Cancela el riel: la lista vuelve a ser rejilla. */
.rail--off {
  grid-auto-flow: row; overflow: visible; scroll-snap-type: none;
  margin-inline: 0; padding-inline: 0; padding-bottom: 0;
}

@media (min-width: 48rem) {
  .facts { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .form__pair { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .logos { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .tiers { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .faq { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__cols { grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s6) var(--s5); }
  .defs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bento__lead { grid-column: span 2; }
  .media-split { display: grid; grid-template-columns: 8fr 4fr; gap: var(--s5); align-items: start; }
  /* A dos columnas los envoltorios vuelven a existir y cada uno es
     una pila independiente; `order` deja de hacer falta. */
  .viaje__dueto { display: grid; grid-template-columns: 8fr 4fr; gap: var(--s5); align-items: start; }
  .viaje__col { display: flex; flex-direction: column; gap: var(--s7); }
  .viaje__col > * { order: 0; }
  .people { grid-auto-columns: 32%; }
}

@media (min-width: 64rem) {
  body { padding-bottom: 0; }
  .actionbar { display: none; }
  .toast { bottom: var(--s6); }
  .hero__grid { grid-template-columns: 7fr 5fr; gap: var(--s7); align-items: start; }
  .hero__aside { position: sticky; top: calc(var(--nav-h) + var(--s4)); }
  .bento { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .bento__lead { grid-column: span 4; }
  .defs { grid-template-columns: repeat(4, minmax(0,1fr)); }

  /* En desktop las definiciones dejan de ser acordeón: app.js les
     pone el atributo open y la clase .def--static. */
  .def--static > summary { cursor: default; pointer-events: none; border-bottom: 1px solid var(--line); }
  .def--static > summary::after { display: none; }
  .def--static .def__body { padding-top: var(--s3); }

  .people {
    grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0,1fr));
    overflow: visible; scroll-snap-type: none;
    margin-inline: 0; padding-inline: 0; padding-bottom: 0;
  }
  .scroll-hint { display: none; }
  .band--airy { padding-block: clamp(3rem, 6.5vw, 5.5rem); }
}

/* ═══════════ COMPONENTES v3 ═══════════════════════════════════
   Añadidos por la actualización maestra: lockup en footer, atribución
   de marcas, fotografías reales, agenda por horarios, tarjetas de
   speaker con perspectiva, y los tres estados del registro. */

/* ---------- Lockup en el footer ----------------------------- */
/* Sobre el pie oscuro los logotipos necesitan su propio chip claro:
   son marcas oscuras y desaparecerían contra la banda. */
.brand--footer {
  display: flex; gap: var(--s3); align-items: center;
  width: fit-content; max-width: 100%;
  padding: var(--s3) var(--s4); margin-bottom: var(--s5);
  background: #ffffff; border-radius: var(--r-lg); border-bottom: 0;
}
.brand--footer .brand__logo { height: 32px; }
.brand--footer .brand__logo--sec { height: 26px; display: block; }
.brand--footer .brand__sep { display: block; height: 26px; }

/* ---------- Atribución "Presentan" en el hero --------------- */
.presenta {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin: var(--s4) 0 var(--s3);
}
.presenta__t {
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.presenta__logo { display: block; width: auto; height: 30px; filter: grayscale(1); }
.presenta__logo--sec { height: 34px; }
.presenta__amp { color: var(--muted); }

/* ---------- Lema -------------------------------------------- */
.motto {
  margin: var(--s3) 0; padding-left: var(--s3);
  border-left: 2px solid var(--line2);
  font-size: var(--fs-md); font-weight: 600; line-height: 1.35; color: var(--text);
}
.motto--sm { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }

/* ---------- Fotografías reales ------------------------------
   Escala de grises: la pieza sigue siendo wireframe. Se ve el
   encuadre y la composición, no la paleta. */
/* Sin borde: el marco era un resto de la etapa wireframe y sobre una
   banda de color se leía como un recuadro blanco alrededor de la foto. */
.shot { margin: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--surf2); }
/* Sobre banda de color la figura no lleva superficie: el pie va en tinta
   clara y sobre el gris claro de --surf2 quedaba a 1.07. */
:is(.hero, .band--brand) .shot { background: transparent; overflow: visible; }
:is(.hero, .band--brand) .shot img { border-radius: var(--r-lg); }
.shot img { display: block; width: 100%; height: auto; }
.shot--wide img { aspect-ratio: 21/9; object-fit: cover; }
.shot--sm img { aspect-ratio: 16/9; object-fit: cover; }
.shot figcaption { padding: var(--s2) 0 0; font-size: var(--fs-3xs); color: var(--faint); }
:is(.hero, .band--brand) .shot figcaption { color: var(--onbrand2); }


/* ---------- Tarjeta de logotipo institucional --------------- */
/* El logotipo va a color, así que su tarjeta se queda BLANCA en los dos
   temas: sobre la superficie oscura, un logo guinda y negro desaparece. */
.brand-card {
  display: grid; place-items: center; padding: var(--s5);
  border: 1px solid transparent; border-radius: var(--r-xl); background: #ffffff;
  box-shadow: var(--e1);
}
/* Conserva el chip blanco: también sostiene un logotipo a color. */
.brand-card--plain { border-color: var(--line2); border-style: dashed; box-shadow: none; }
.brand-card__logo { display: block; width: 100%; max-width: 15rem; height: auto; }

/* ---------- Dirección y pares dato/valor -------------------- */
.addr { font-style: normal; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

.datos { display: flex; flex-direction: column; gap: var(--s2); margin: 0; }
.datos > div { display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; }
.datos dt { font-size: var(--fs-2xs); color: var(--faint); flex: none; }
.datos dd { margin: 0; font-size: var(--fs-xs); font-weight: 600; text-align: right; }

/* ---------- Etiquetas de perspectiva ------------------------ */
.tags { display: flex; flex-wrap: wrap; gap: var(--s1); list-style: none; margin: 0; padding: 0; }
.tags li {
  padding: 5px var(--s2); border: 1px solid var(--line2); border-radius: var(--r-pill);
  font-size: var(--fs-3xs); color: var(--muted);
}

/* ---------- Agenda por horarios -----------------------------
   Sustituye a las tres fases: el programa nuevo tiene 10 bloques
   con hora exacta, y la hora es el dato que se busca. */
.agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ag {
  display: grid; grid-template-columns: 1fr; gap: var(--s1);
  padding: var(--s3) 0; border-top: 1px solid var(--line);
}
.ag:last-child { border-bottom: 1px solid var(--line); }
.ag__t {
  font-family: var(--font); font-variant-numeric: tabular-nums;
  font-size: var(--fs-2xs); font-weight: 700; color: var(--faint); white-space: nowrap;
}
.ag__n { font-size: var(--fs-sm); font-weight: 650; }
.ag__d { font-size: var(--fs-2xs); color: var(--muted); margin-top: 2px; }
.ag--main .ag__n { font-size: var(--fs-md); }
.ag--main { background: var(--surf2); padding-inline: var(--s3); border-radius: var(--r); }

/* ---------- Speakers: numeración, perspectiva y etiqueta ---- */
.person { position: relative; }
.person__n {
  position: absolute; top: var(--s2); left: var(--s2); z-index: 1;
  display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--ink); color: var(--onink);
  font-size: var(--fs-3xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.person__persp { font-size: var(--fs-3xs); color: var(--muted); line-height: 1.5; }
.person__tag {
  align-self: flex-start; padding: 3px var(--s2);
  border: 1px dashed var(--line2); border-radius: var(--r-pill);
  font-size: var(--fs-3xs); color: var(--faint);
}
.person--close .ph { border-color: var(--ink); }

/* ---------- Retrato real de speaker -------------------------
   Mismo encuadre 4:5 que el placeholder al que sustituye, para que
   las tarjetas con foto y sin foto conserven la misma altura. */
.portrait {
  display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surf2);
}

/* Retrato aún no entregado. En vez de una caja punteada que dice
   «fotografía pendiente» —que grita borrador— se muestra un monograma
   con las iniciales. Ocupa el mismo 4/5 que .portrait, así la rejilla
   no se desalinea, y se lee como decisión de diseño.
   Cuando llegue la foto: sustituir el div por <img class="portrait">. */
.monogram {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 4/5;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surf2); color: var(--muted);
  font-size: var(--fs-2xl); font-weight: 650; letter-spacing: .08em;
  user-select: none;
}

/* ---------- Ponente en línea (retrato + identificación) ----- */
.ponente { display: grid; grid-template-columns: 88px 1fr; gap: var(--s3); align-items: center; }
.portrait--sm { border-radius: var(--r); }


/* ---------- Carrusel en móvil, rejilla en escritorio ---------
   La landing consolidada tiene 10 secciones. Apilar en columna los 9
   vocales, los 3 niveles y los 3 estados añadía ~3,500 px de alto en
   375 px. Se reutiliza el .rail que ya usan speakers y programa: el
   contenido se conserva completo, cambia cómo se recorre. */
.vocales { grid-auto-columns: 78%; }
.tiers.rail { grid-auto-columns: 82%; }

/* ---------- Escritorio -------------------------------------- */
@media (min-width: 48rem) {
  .brand__logo { height: 32px; }
  .brand__sep, .brand__logo--sec { display: block; }

  .ag { grid-template-columns: 8.5rem 1fr; gap: var(--s4); align-items: baseline; }
  .ag__t { font-size: var(--fs-xs); }

  .vocales, .tiers.rail {
    grid-auto-flow: row; overflow: visible; scroll-snap-type: none;
    margin-inline: 0; padding-inline: 0; padding-bottom: 0;
  }
  .vocales { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* El menú completo entra a 72rem. Los ocho items miden 677 px y a 1024 px
   se partían en dos líneas, comprimiendo además el lockup de 175 a 75 px.
   Por debajo manda el overlay. */
@media (min-width: 72rem) {
  .burger { display: none; }
  .nav-menu { display: block; }
  .nav-cta { display: inline-flex; }
}

@media print { .nav, .util, .actionbar, .toast { position: static; } }