/* Polo Educativo Pilar · sitio estático · fase 1
   Paleta oficial (escala cromática del Polo): Pantone 653 #005193, Pantone 618 #c0b10c, Pantone 3995 #7a7300, negro #1d1d1b. Tipografía: Montserrat (títulos) + Roboto (texto). */

:root {
  --blue: #005193;
  --navy: #0b2a52;
  --gold: #c0b10c;
  --gold-ink: #7a7300;
  --verde: #1f6b5a;
  --gold-soft: rgba(192, 177, 12, 0.16);
  --cream: #f4efe4;
  --paper: #faf8f3;
  --studio: #e4e4e2;
  --ink: #17233a;
  --muted: #5b6474;
  --line: rgba(0, 81, 147, 0.16);
  --sans: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --body: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --nav-h: 72px;
  --pad: clamp(20px, 5vw, 64px);
  --wrap: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  transition: background-color 0.9s var(--ease);
  overflow-x: clip;
}
body[data-bg="studio"] { background-color: var(--studio); }
body[data-bg="cream"] { background-color: var(--cream); }
body[data-bg="white"] { background-color: #ffffff; }
body[data-bg="navy"] { background-color: var(--navy); }
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: var(--navy); }
h1 { font-size: clamp(40px, 6vw, 80px); }
h2 { font-size: clamp(32px, 4.4vw, 56px); }
h3 { font-size: clamp(20px, 2vw, 26px); }
.wrap { width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto; }
.eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-ink); }
.lead { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }
.ph { color: var(--gold-ink); font-style: italic; } /* placeholder entre corchetes */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-ink); font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.chip--blue { background: rgba(0, 81, 147, 0.1); color: var(--blue); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ico-sm { width: 16px; height: 16px; flex: none; }

/* ------------------------------------------------------------- botones */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; font-family: var(--sans); font-weight: 700; font-size: 15px; white-space: nowrap; border: 1.5px solid transparent; cursor: pointer; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.3s; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.35s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(11, 42, 82, 0.16); }
.btn:hover svg { transform: translateX(4px); }
.btn--blue { background: var(--blue); color: #fff; }
.btn--gold { background: var(--gold); color: var(--navy); }
.btn--ghost { border-color: rgba(11, 42, 82, 0.3); color: var(--navy); background: transparent; }
.btn--white { background: #fff; color: var(--navy); border-color: var(--line); }
.btn--sm { height: 42px; padding: 0 18px; font-size: 13px; }
.link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--blue); }
.link svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.link:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------- nav fija translúcida */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h); background: rgba(250, 248, 243, 0.72); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--line); transition: opacity 0.6s var(--ease), background-color 0.6s; }
.nav[data-state="hidden"] { opacity: 0; pointer-events: none; }
/* "bare": terminó el video, la barra muestra las secciones sin color ni logo; al bajar ("docked") aparecen los dos */
.nav[data-state="bare"] { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav[data-state="bare"] .nav__logo { opacity: 1; transform: none; filter: drop-shadow(0 2px 8px rgba(11, 42, 82, 0.3)); }
.nav[data-state="bare"] .nav__logo path { fill: #fff; }
.nav__logo path { transition: fill 0.6s var(--ease); }
/* en la home, el logo de la barra espera a que llegue el sello del hero (anillo y puntos, más abajo); en el resto de las páginas está siempre */
.nav.logo-off .nav__logo { pointer-events: none; }
.nav__logo > svg:not(.nav__ring) { transition: opacity 0.25s var(--ease); }
.nav.logo-off .nav__logo > svg:not(.nav__ring) { opacity: 0; transition: none; }
.nav.logo-off .nav__logo path { transition: none; }
.nav__logo { transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), filter 0.6s var(--ease); }
.nav__inner { position: relative; height: 100%; width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav__links { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 2.4vw, 34px); }
.nav__links--left { justify-content: flex-end; padding-right: clamp(20px, 3vw, 48px); }
.nav__links--right { justify-content: flex-start; padding-left: clamp(20px, 3vw, 48px); }
.nav__links a { font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink); white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color 0.3s, color 0.3s; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--navy); }
.nav[data-state="hidden"] .nav__links--left li { transform: translateX(46px); opacity: 0; }
.nav[data-state="hidden"] .nav__links--right li { transform: translateX(-46px); opacity: 0; }
.nav__links li { transition: transform 0.7s var(--ease), opacity 0.7s var(--ease); }
.nav__logo { position: relative; display: block; width: 52px; height: 52px; }
.nav__logo svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nav__cta { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.nav__burger { display: none; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; }
.nav__burger span { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px auto; transition: transform 0.3s, opacity 0.3s; }
/* el menú puede ser más alto que la pantalla (muchos enlaces + el botón): se desplaza en vez de
   recortarse. justify-content:flex-start (en vez de center) evita el recorte que produce el
   scroll en un contenedor flex centrado cuando el contenido no entra */
.menu { position: fixed; inset: 0; z-index: 49; background: rgba(250, 248, 243, 0.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 22px; padding: calc(var(--nav-h) + 28px) 20px 32px; overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s; }
.menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.45s var(--ease), visibility 0s; }
.menu a { font-family: var(--sans); font-weight: 800; font-size: 30px; color: var(--navy); }
.menu .btn { font-size: 15px; margin-top: 14px; }
/* cada enlace sube a su turno cuando se abre */
.menu > a { opacity: 0; transform: translateY(18px); transition: opacity 0.35s var(--ease), transform 0.55s var(--ease); }
.menu.is-open > a { opacity: 1; transform: none; }
.menu.is-open > a:nth-child(1) { transition-delay: 0.06s; } .menu.is-open > a:nth-child(2) { transition-delay: 0.1s; } .menu.is-open > a:nth-child(3) { transition-delay: 0.14s; } .menu.is-open > a:nth-child(4) { transition-delay: 0.18s; }
.menu.is-open > a:nth-child(5) { transition-delay: 0.22s; } .menu.is-open > a:nth-child(6) { transition-delay: 0.26s; } .menu.is-open > a:nth-child(7) { transition-delay: 0.3s; } .menu.is-open > a:nth-child(8) { transition-delay: 0.36s; }
html.menu-open, body.menu-open { overflow: hidden; }
/* con seis secciones la barra completa necesita al menos 1000px; debajo, menú hamburguesa */
@media (max-width: 1000px) {
  .nav__links, .nav__cta { display: none; }
  .nav__inner { grid-template-columns: 1fr; justify-items: center; }
  .nav__burger { display: block; }
  body.menu-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
  body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ------------------------------------------------------------- hero: solo el video */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: radial-gradient(ellipse 75% 65% at 50% 40%, #ffffff 0%, #f5f5f3 50%, #e6e6e3 100%); }
.hero__video, .hero__still { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__still { display: none; }
body[data-hero~="still"] .hero__still { display: block; }
body[data-hero~="still"] .hero__video { display: none; }
.hero__canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; }
.hero__fly { position: fixed; left: 0; top: 0; width: 56px; height: 56px; opacity: 0; pointer-events: none; z-index: 60; }
.hero__fly svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* ya en la barra: la copia se retira cuando el sello de la barra terminó de aparecer debajo; al volver a subir reaparece en el acto */
.hero__fly.is-docked { opacity: 0 !important; transition: opacity 0.15s linear 0.3s; }
body.menu-open .hero__fly { opacity: 0 !important; }
.hero__copy { position: absolute; left: 50%; bottom: clamp(48px, 9vh, 110px); transform: translateX(-50%); width: min(880px, 100% - 2 * var(--pad)); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; opacity: 0; pointer-events: none; }
.hero__copy.is-on { pointer-events: auto; }
.hero__copy h1 { font-size: clamp(34px, 4.6vw, 62px); text-wrap: balance; }
.hero__copy .lead { max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.hero__skip { position: absolute; right: var(--pad); bottom: 28px; z-index: 4; border: 1px solid rgba(11, 42, 82, 0.25); background: rgba(255, 255, 255, 0.6); color: var(--navy); font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; cursor: pointer; }
body[data-hero~="ended"] .hero__skip { display: none; }
/* al terminar, el cuadro final se funde con el fondo por los bordes */
.hero.is-ended .hero__video, .hero.is-ended .hero__still { -webkit-mask-image: radial-gradient(ellipse 50% 62% at 49.6% 49.7%, #000 58%, transparent 76%); mask-image: radial-gradient(ellipse 50% 62% at 49.6% 49.7%, #000 58%, transparent 76%); }
.scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.scroll-cue i { width: 1px; height: 34px; background: linear-gradient(var(--gold), transparent); display: block; animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-height: 820px) and (min-width: 720px) {
  .hero .scroll-cue { display: none; }
  .hero__copy { bottom: 40px; gap: 12px; }
  .hero__copy h1 { font-size: clamp(30px, 3.8vw, 48px); }
}
/* celular: el video entra sin recortar su contenido (MOBILE_WIDTH_FACTOR en main.js), con el
   sobrante (si lo hay) difuminado sobre el fondo. El desvanecido arranca recién al 88 % del radio:
   más adentro (58 %) tapaba contenido real del hero "educadores" (T3a, medido hasta 78 % de radio
   en el peor caso). La altura visible del hero (MOBILE_VISIBLE_BOTTOM en main.js) es lo que decide
   cuánto puede acercarse el titular sin pisar algo que todavía se vea (T3a follow-up) */
@media (max-width: 719px) {
  .hero { min-height: 640px; }
  .hero .hero__video, .hero .hero__still, .hero .hero__canvas { -webkit-mask-image: radial-gradient(ellipse 50% 62% at 49.6% 49.7%, #000 88%, transparent 99%); mask-image: radial-gradient(ellipse 50% 62% at 49.6% 49.7%, #000 88%, transparent 99%); }
  .hero .hero__copy { bottom: 28px; gap: 12px; }
  .hero .scroll-cue { display: none; }
  .hero .hero__copy h1 { font-size: 30px; }
  .hero .hero__copy .lead { font-size: 15px; }
  .hero .hero__skip { bottom: auto; top: calc(var(--nav-h) + 10px); right: 16px; }
}

/* ------------------------------------------------------------- secciones y transiciones */
section { position: relative; }
.sec { padding: clamp(72px, 9vw, 130px) 0; }
.sec--tight { padding: clamp(48px, 6vw, 90px) 0; }
.reveal > [data-reveal], [data-reveal] { opacity: 0; transform: translateY(28px); }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* transición 1: el anillo se abre (recorte circular al entrar) */
.ring-wipe { clip-path: circle(0% at 50% 0%); background: var(--cream); }

/* transición 2: bordes en diagonal */
.skew-top { clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 100%); margin-top: -5vw; padding-top: calc(clamp(72px, 9vw, 130px) + 5vw); }
.skew-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%); padding-bottom: calc(clamp(72px, 9vw, 130px) + 5vw); }

/* manifiesto: palabras que se encienden al scrollear */
.manifesto { text-align: center; }
.manifesto h2 { font-size: clamp(30px, 4.6vw, 64px); max-width: 18ch; margin-inline: auto; text-wrap: balance; }
.manifesto h2 .w { display: inline-block; opacity: 0.18; transition: opacity 0.2s; }
.manifesto h2 .w.on { opacity: 1; }
.manifesto h2 .w.gold { color: var(--gold-ink); }
.stats { display: flex; justify-content: center; gap: clamp(28px, 6vw, 96px); margin-top: clamp(40px, 5vw, 72px); flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stat b { font-family: var(--sans); font-weight: 800; font-size: clamp(44px, 6vw, 84px); line-height: 1; color: var(--navy); letter-spacing: -0.03em; }
.stat b .plus { color: var(--gold); }
.stat > span { font-size: 14px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--sans); font-weight: 600; }

/* accesos: filas editoriales con foto que sigue al cursor */
.rows { border-top: 1px solid var(--line); }
.row { position: relative; display: grid; grid-template-columns: 80px 1fr 1.2fr auto; align-items: center; gap: clamp(16px, 3vw, 48px); padding: clamp(22px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); color: inherit; transition: padding-left 0.5s var(--ease); }
.row:hover { padding-left: 12px; }
.row__n { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.2em; color: var(--gold-ink); }
.row__t { font-family: var(--sans); font-weight: 800; font-size: clamp(24px, 3vw, 42px); color: var(--navy); letter-spacing: -0.02em; line-height: 1.05; }
.row__d { color: var(--muted); font-size: 16px; max-width: 46ch; }
.row__a { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--blue); transition: background-color 0.3s, color 0.3s, transform 0.5s var(--ease); }
.row:hover .row__a { background: var(--blue); color: #fff; transform: rotate(-45deg); }
.row__a svg { width: 20px; height: 20px; }
.row__pic { position: fixed; left: 0; top: 0; width: 300px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.9) rotate(-4deg); transition: opacity 0.35s var(--ease), transform 0.5s var(--ease); z-index: 40; box-shadow: 0 30px 60px rgba(11, 42, 82, 0.25); }
.row__pic img { width: 100%; height: 100%; object-fit: cover; }
.row__pic.on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(2deg); }
@media (max-width: 800px) { .row { grid-template-columns: 50px 1fr auto; } .row__d { display: none; } .row__pic { display: none; } }

/* accesos: mazos de fotos por sección (card stack hover, transitions.dev) */
.stacks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
.stack-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 28px 22px 26px; border-radius: 18px; color: inherit; }
.stack-item__t { justify-content: center; }
.stack-item__t { display: flex; align-items: baseline; gap: 12px; }
.stack-item__t span { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--gold-ink); }
.stack-item__t b { font-family: var(--sans); font-size: clamp(22px, 2vw, 28px); font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.stack-item p { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 34ch; }
.stack-item .link { font-size: 13px; }
.t-stack { position: relative; width: 168px; height: 150px; flex-shrink: 0; }
.t-stack-card { position: absolute; top: 0; left: 0; width: 112px; height: 112px; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.05), 0 4px 42px rgba(0, 0, 0, 0.08); translate: var(--cx) var(--cy); rotate: var(--rot); scale: 1; transition: translate 360ms cubic-bezier(0.34, 1.9, 0.64, 1), rotate 360ms cubic-bezier(0.34, 1.9, 0.64, 1), scale 610ms cubic-bezier(0.22, 1, 0.36, 1); will-change: translate, rotate, scale; }
.t-stack-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: hover) {
  .stack-item:hover .t-stack-card { translate: calc(var(--cx) + var(--dx)) calc(var(--cy) + var(--dy) * 1.42); rotate: calc(var(--rot) + var(--drot)); transition: translate 410ms cubic-bezier(0.31, 2.34, 0.64, 1), rotate 410ms cubic-bezier(0.31, 2.34, 0.64, 1), scale 610ms cubic-bezier(0.22, 1, 0.36, 1); }
  .t-stack-card:hover { scale: 1.06; z-index: 30; }
}
@media (max-width: 900px) { .stacks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stacks { grid-template-columns: 1fr; } }

/* insignia 25 años: los dos arcos del sello alrededor del número */
.badge25 { position: relative; width: 150px; height: 150px; display: grid; place-items: center; flex: none; }
.badge25 svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.badge25 b { font-family: var(--sans); font-size: 50px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--navy); margin-top: 4px; }
.badge25 small { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-ink); }

/* congreso: columna pegajosa con XXIII y el arco girando */
.congreso { background: var(--navy); color: #fff; }
.congreso h2, .congreso h3 { color: #fff; }
.congreso .eyebrow { color: var(--gold); }
.congreso__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 90px); align-items: start; }
.congreso__sticky { position: sticky; top: calc(var(--nav-h) + 24px); }
.congreso__num { font-family: var(--sans); font-weight: 800; font-size: clamp(100px, 16vw, 230px); line-height: 0.85; letter-spacing: -0.06em; color: var(--gold); }
.congreso__arc { position: absolute; right: -8%; top: -10%; width: min(52vw, 620px); opacity: 0.16; pointer-events: none; }
.congreso__arc svg { width: 100%; height: auto; overflow: visible; }
/* celular: el arco decorativo (y el de .arc-bg más abajo) sangra a propósito fuera de su sección en escritorio;
   en pantallas angostas esa sangría es lo que empuja el ancho del documento, así que ahí queda contenida */
@media (max-width: 767px) { .congreso, .sec:has(> .arc-bg) { overflow: hidden; } }
.congreso__meta { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 16px; margin-top: 10px; }
.congreso__meta div { display: flex; align-items: center; gap: 8px; }
.congreso__meta svg { width: 18px; height: 18px; flex: none; color: var(--gold); }
/* (T6) los tres botones de calendario del hero viven en un <details open> (build.py) para que
   Chrome los pinte de entrada — un <details> CERRADO no pinta su contenido aunque el CSS le fuerce
   display (probado: display:contents y display:block por igual, el layout le da tamaño real a los
   hijos y aun así no aparecen). main.js lo cierra en celular; acá solo se esconde el disparador
   ("Agregar al calendario") en escritorio y se le da al panel el mismo gap de 12px del botonera,
   como caja flex de verdad (mismo patrón que .footer__group), para que la separación se vea igual
   que antes. Sin JS queda abierto en cualquier ancho: los tres botones sueltos, misma lectura. */
.cal-pick { display: inline-flex; align-items: center; }
.cal-pick > summary { display: none; }
.cal-pick__opts { display: inline-flex; align-items: center; gap: 12px; }
.lema { font-family: var(--sans); font-weight: 500; font-style: italic; font-size: clamp(18px, 1.8vw, 24px); opacity: 0.85; }
.steps { position: relative; display: grid; gap: 0; margin-top: 8px; }
.steps::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(var(--gold), rgba(255, 255, 255, 0.25)); transform: scaleY(0); transform-origin: top; }
.steps.on::before { transform: scaleY(1); transition: transform 1.4s var(--ease); }
.step { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 18px 0 18px 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.step::before { content: ""; position: absolute; left: 4px; top: 24px; width: 16px; height: 16px; border-radius: 50%; background: var(--navy); border: 3px solid var(--gold); }
.step--blue::before { border-color: #6ea3e0; }
.step b { font-family: var(--sans); font-weight: 800; font-size: 17px; color: #fff; }
.step small { display: block; font-size: 12px; opacity: 0.6; font-weight: 500; }
.step p { font-size: 15px; opacity: 0.82; }
.step h4 { color: #fff; font-size: 16px; margin-bottom: 4px; }
@media (max-width: 900px) { .congreso__grid { grid-template-columns: 1fr; } .congreso__sticky { position: static; } }
/* celular: la fecha y el contenido se apilan (como ya hace el cronograma propio de congreso.html) en vez de ir lado a lado,
   así la fila nunca necesita más ancho que la pantalla */
@media (max-width: 767px) { .step { grid-template-columns: 1fr; gap: 4px; padding-left: 34px; } .step b { font-size: 16px; } }

/* 25 años: línea de tiempo horizontal pineada */
.timeline { overflow: hidden; }
.timeline__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(28px, 4vw, 56px); }
.timeline__track { display: flex; gap: clamp(60px, 10vw, 160px); padding: 40px 0 20px; will-change: transform; }
.tl { flex: none; width: min(420px, 78vw); position: relative; padding-top: 36px; }
.tl::before { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 8px var(--gold-soft); }
.tl--blue::before { background: var(--blue); box-shadow: 0 0 0 8px rgba(0, 81, 147, 0.12); }
.tl b { display: block; font-family: var(--sans); font-weight: 800; font-size: clamp(64px, 9vw, 120px); line-height: 0.9; letter-spacing: -0.05em; color: var(--navy); }
.tl b.gold { color: var(--gold); }
.tl h4 { font-size: 20px; margin: 10px 0 6px; }
.tl p { color: var(--muted); }
.timeline__line { position: absolute; left: 0; right: 0; height: 2px; background: var(--line); top: 8px; }
.timeline__line i { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), var(--blue)); transform: scaleX(0); transform-origin: left; }
/* táctil o pantalla chica: sin pin; la pista se desliza con el dedo (misma consulta que touchLayout en main.js) */
@media (max-width: 900px), (pointer: coarse) {
  .timeline__track, .gallery__track { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .timeline__track::-webkit-scrollbar, .gallery__track::-webkit-scrollbar { display: none; }
  .timeline__track { margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad); gap: clamp(40px, 8vw, 120px); }
  .tl, .gcard { scroll-snap-align: start; }
  .gallery__track { padding-right: var(--pad); scroll-padding-inline: var(--pad); }
  .timeline__line { left: 0; right: 0; }
}
@media (max-width: 720px) {
  .timeline__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .badge25 { width: 112px; height: 112px; }
  .badge25 b { font-size: 38px; }
  .badge25 small { bottom: 22px; font-size: 12px; }
  .tl h4 { font-size: 18px; }
  .tl p { font-size: 15px; }
  /* celular: línea de tiempo y galería en vertical, sin desplazamiento horizontal */
  .timeline__track, .gallery__track { overflow-x: visible; scroll-snap-type: none; flex-direction: column; }
  .timeline__track { position: relative; margin-inline: 0; padding: 8px 0 0; gap: 30px; }
  .timeline__track::before { content: ""; position: absolute; left: 8px; top: 24px; bottom: 30px; width: 2px; background: linear-gradient(var(--gold), var(--blue)); }
  .timeline__line { display: none; }
  .tl { width: auto; padding: 0 0 0 38px; }
  .tl::before { top: 10px; }
  .tl:empty { display: none; }
  .tl b { font-size: 56px; }
  .gallery__track { padding-inline: var(--pad); gap: 16px; }
  /* .gcard y .progress: ver el bloque "actividades: tarjetas en celular" más abajo — estas dos
     declaraciones quedaban sin efecto (una regla sin media query, del mismo peso y más abajo en
     la hoja, ganaba en cualquier ancho) hasta T5, que las corrigió ahí para que sí apliquen */
}
/* novedades */
.news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.news .card { display: flex; flex-direction: column; gap: 8px; }
.news .card h3 { font-size: 20px; }
.news .card p { font-size: 15px; color: var(--muted); flex: 1; }
.news .card .link { font-size: 14px; margin-top: 6px; }
@media (max-width: 900px) { .news { grid-template-columns: 1fr; } }
.coin { position: relative; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #ecdf7a 0%, var(--gold) 52%, #8f8324 100%); box-shadow: 0 18px 30px rgba(11, 42, 82, 0.18), inset 0 0 0 7px rgba(255, 255, 255, 0.18); display: grid; place-items: center; color: var(--navy); font-family: var(--sans); font-weight: 800; }
.coin b { font-size: 46px; line-height: 1; letter-spacing: -0.04em; }
.coin small { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.coin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 6px 6px 0 #8f8324, 12px 12px 0 #7a6f05; z-index: -1; }

/* institucional teaser: foto con cortina */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.curtain { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; clip-path: inset(0 100% 0 0); }
.curtain img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.curtain figcaption { position: absolute; left: 16px; bottom: 14px; padding: 8px 12px; background: rgba(255, 255, 255, 0.85); font-size: 12px; color: var(--navy); border-radius: 6px; }
.arc-bg { position: absolute; z-index: 0; pointer-events: none; opacity: 0.9; }
.arc-bg svg { width: 100%; height: auto; overflow: visible; }
.arc-bg path { fill: none; stroke: var(--gold); stroke-width: 3; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
/* celular (T5): <figure> trae un margen de agente de usuario (17px 40px) que nadie reseteaba —
   encogía la foto de "quienes" a una tarjeta angosta con la leyenda apretada contra ese margen;
   el escalón "Hoy" ya lo pisa con su propio margin, así que esto solo afecta a la de "quienes" */
@media (max-width: 767px) { .curtain { margin: 0; } }
/* celular (T5): "quienes" y "un ecosistema de equipos" (sin clase propia hasta ahora) sumaban su
   padding de .sec al de la sección vecina y dejaban una franja vacía entre el cronograma y la
   foto, y entre el enlace y "espacios de participación"; en celular alcanza con menos aire */
@media (max-width: 767px) { .quienes, .subcom { padding: clamp(44px, 7vw, 84px) 0; } }

/* ecosistema de espacios de participación (globos de vidrio en movimiento) */
.eco { --r: 41%; position: relative; width: min(760px, 100%); aspect-ratio: 1; margin-inline: auto; }
.eco svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.eco svg.lines line { stroke: var(--gold); stroke-opacity: 0.4; stroke-width: 1.5; stroke-dasharray: 5 6; }
/* anillo: cada nodo conectado con el siguiente */
.eco svg.lines line.ring { stroke: var(--blue); stroke-opacity: 0.22; stroke-dasharray: 2 9; }
.eco__seal { position: absolute; left: 50%; top: 50%; width: 30%; transform: translate(-50%, -50%); filter: drop-shadow(0 18px 26px rgba(11, 42, 82, 0.16)); }
.eco__seal svg { width: 100%; height: auto; overflow: visible; }
/* nodos: un punto sobre la órbita y la etiqueta hacia afuera; flotan apenas y se conectan al sello */
.eco { overflow: visible; }
.node { position: absolute; left: calc(50% + var(--r) * var(--ax)); top: calc(50% + var(--r) * var(--ay)); width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 0; padding: 0; background: transparent; cursor: pointer; animation: float 7s ease-in-out infinite; animation-delay: var(--delay); }
.node i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 6px rgba(0, 81, 147, 0.12); transition: transform 0.35s var(--ease), box-shadow 0.35s; }
.node--gold i { background: var(--gold); box-shadow: 0 0 0 6px rgba(192, 177, 12, 0.18); }
.node span { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 9px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--navy); box-shadow: 0 10px 24px rgba(11, 42, 82, 0.08); transition: background-color 0.3s, color 0.3s, transform 0.35s var(--ease); }
.node--r span { left: 24px; }
.node--l span { right: 24px; }
.node--t span { left: 50%; top: auto; bottom: 24px; transform: translateX(-50%); }
.node--b span { left: 50%; top: 24px; transform: translateX(-50%); }
.node:hover i, .node.is-active i { transform: scale(1.35); }
.node:hover span, .node.is-active span { background: var(--navy); color: #fff; border-color: var(--navy); }
.node--r:hover span, .node--r.is-active span { transform: translate(4px, -50%); }
.node--l:hover span, .node--l.is-active span { transform: translate(-4px, -50%); }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
/* vida en reposo: las líneas fluyen del sello hacia afuera, los halos respiran desfasados y el sello late apenas */
.eco svg.lines line { animation: flow 3.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -22px; } }
.node i { --halo: 0, 81, 147; animation: halo 4.5s ease-in-out infinite; animation-delay: var(--delay); }
.node--gold i { --halo: 192, 177, 12; }
@keyframes halo { 0%, 100% { box-shadow: 0 0 0 6px rgba(var(--halo), 0.14); } 50% { box-shadow: 0 0 0 12px rgba(var(--halo), 0.06); } }
.eco__seal svg { animation: breathe 6s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
/* en el adelanto de la home el ecosistema va más chico y las etiquetas pueden partirse en dos líneas */
.split .eco { width: min(500px, 100%); margin: 0 auto; }
.split .node span { white-space: normal; max-width: 150px; text-align: center; line-height: 1.2; }
/* celular: la órbita (puntos de 14px y etiquetas amontonadas, casi ilegible) se reemplaza por el sello en un anillo
   dorado y seis fichas con ícono y nombre, en dos columnas, que enlazan directo al capítulo de cada subcomisión */
.eco-m { display: none; }
@media (max-width: 720px) {
  .eco, .split .eco { display: none; }
  .eco-m { display: block; width: min(420px, 100%); margin: 8px auto 12px; }
  .eco-m__seal { position: relative; width: 92px; margin: 0 auto 30px; }
  .eco-m__seal::before { content: ""; position: absolute; inset: -15px; border: 2px solid var(--gold); border-radius: 50%; opacity: 0.55; }
  .eco-m__seal svg { width: 100%; height: auto; overflow: visible; display: block; }
  .eco-m__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .eco-m__pill { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 11px 18px 11px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(11, 42, 82, 0.08); font-family: var(--sans); font-weight: 700; font-size: 13.5px; line-height: 1.25; color: var(--navy); transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s; }
  .eco-m__pill:active { transform: scale(0.97); }
  .eco-m__pill:hover, .eco-m__pill:focus-visible { border-color: var(--gold); box-shadow: 0 12px 26px rgba(11, 42, 82, 0.14); }
  .eco-m__ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 81, 147, 0.12); color: var(--blue); }
  .eco-m__ico svg { width: 17px; height: 17px; }
  .eco-m__pill--gold .eco-m__ico { background: var(--gold-soft); color: var(--gold-ink); }
  .eco-m__name { min-width: 0; }
}
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); z-index: 60; background: #fff; box-shadow: -30px 0 60px rgba(11, 42, 82, 0.18); transform: translateX(100%); visibility: hidden; transition: transform 0.6s var(--ease), visibility 0s linear 0.6s; padding: 40px 36px; display: flex; flex-direction: column; gap: 16px; }
.panel.is-open { transform: none; visibility: visible; transition: transform 0.6s var(--ease), visibility 0s; }
/* celular: el detalle sube desde abajo como una hoja, en vez de tapar toda la pantalla desde el costado */
@media (max-width: 720px) {
  .panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 82svh; overflow-y: auto; border-radius: 22px 22px 0 0; padding: 14px 24px calc(28px + env(safe-area-inset-bottom)); gap: 12px; box-shadow: 0 -24px 60px rgba(11, 42, 82, 0.22); transform: translateY(100%); transition: transform 0.55s var(--ease), visibility 0s linear 0.55s; }
  .panel.is-open { transition: transform 0.55s var(--ease), visibility 0s; }
  .panel::before { content: ""; width: 40px; height: 4px; border-radius: 999px; background: rgba(11, 42, 82, 0.18); align-self: center; margin-bottom: 6px; }
  .panel .eyebrow { margin-top: 4px; }
  .panel__close { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; font-size: 17px; }
  .panel h3 { font-size: 24px; padding-right: 44px; }
  .panel p { font-size: 16px; line-height: 1.55; }
}
.panel__close { align-self: flex-end; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 20px; color: var(--navy); }
.panel h3 { font-size: 26px; }
.panel .icon { width: 44px; height: 44px; color: var(--blue); }
.panel dl { margin: 0; font-size: 15px; }
.panel dt { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); margin-top: 12px; }
.panel dd { margin: 4px 0 0; color: var(--ink); }
.scrim { position: fixed; inset: 0; z-index: 55; background: rgba(11, 42, 82, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.scrim.is-open { opacity: 1; pointer-events: auto; }

/* actividades: galería horizontal pineada */
.gallery { overflow: hidden; }
.gallery__track { display: flex; gap: clamp(18px, 2.4vw, 32px); padding-left: var(--pad); will-change: transform; }
.gcard { flex: none; width: min(560px, 78vw); position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--cream); }
.gcard img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--ease); }
.gcard:hover img { transform: scale(1); }
.gcard__cap { position: absolute; inset: auto 0 0 0; padding: 22px 24px; background: linear-gradient(180deg, rgba(11, 42, 82, 0), rgba(11, 42, 82, 0.86)); color: #fff; display: flex; flex-direction: column; gap: 4px; }
.gcard__cap b { font-family: var(--sans); font-size: 22px; font-weight: 800; }
.gcard__cap span { font-size: 14px; opacity: 0.85; }
.gcard--ph { display: grid; place-items: center; border: 1px dashed rgba(0, 81, 147, 0.3); }
.gcard--ph .ph-in { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.gcard--ph .ph-in svg { width: 40px; height: 40px; color: var(--blue); }
.gcard--ph b { font-family: var(--sans); color: var(--navy); font-size: 22px; font-weight: 800; }
.progress { height: 2px; background: var(--line); margin-top: 26px; width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto; }
.progress i { display: block; height: 100%; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }
/* actividades: tarjetas en celular (T5) — la fila pasa a columna (ver ".gallery__track,
   .timeline__track" arriba) y aquí la tarjeta debía ocupar todo el ancho de la fila con una
   proporción más baja (3/2); esta regla quedaba pisada por la de arriba porque .gcard, sin media
   query y más abajo en la hoja, ganaba con el mismo peso en cualquier ancho — la tarjeta rendía
   304px con 66px de hueco a la derecha en vez de los ~350px completos, y el degradé de abajo (que
   se ajusta al alto de su propio contenido) quedaba corto para tapar fotos claras o con mucho
   detalle detrás del título; se ensancha la tarjeta y se sube el arranque del degradé */
@media (max-width: 767px) {
  .gcard { width: auto; aspect-ratio: 3 / 2; }
  .gcard__cap { inset: 38% 0 0 0; background: linear-gradient(180deg, rgba(11, 42, 82, 0) 0%, rgba(11, 42, 82, 0.55) 34%, rgba(11, 42, 82, 0.94) 100%); }
  .progress { display: none; }
}

/* socios: marquesina de logos */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__row { display: flex; gap: 18px; width: max-content; animation: marquee 48s linear infinite; padding: 10px 0; }
.marquee__row--rev { animation-direction: reverse; animation-duration: 56s; }
.marquee:hover .marquee__row { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-tile { width: 132px; height: 132px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; flex: none; }
.logo-tile img { width: 92px; height: 92px; object-fit: contain; }
.logo-tile--txt { text-align: center; padding: 10px; font-family: var(--sans); font-weight: 700; font-size: 12px; color: var(--navy); line-height: 1.2; }
.logo-tile--txt small { display: block; color: var(--gold-ink); font-weight: 600; font-size: 10px; margin-top: 4px; }

/* contacto */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 8px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.form label.wide { grid-column: 1 / -1; }
.form input, .form select, .form textarea { font: 15px/1.4 var(--body); color: var(--ink); height: 50px; padding: 0 16px; border: 1px solid rgba(11, 42, 82, 0.22); border-radius: 10px; background: #fff; }
.form textarea { height: 130px; padding: 14px 16px; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.form__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.form__ok { grid-column: 1 / -1; display: none; padding: 16px 18px; border-radius: 10px; background: var(--gold-soft); color: var(--gold-ink); font-family: var(--sans); font-weight: 600; }
.form.is-sent .form__ok { display: block; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 2.4vw, 32px); }
.card--navy { background: var(--navy); color: #fff; border: 0; }
.card--navy h3, .card--navy h4 { color: #fff; }
.dl { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.dl div { display: flex; gap: 10px; align-items: flex-start; }
.dl svg { width: 20px; height: 20px; flex: none; color: var(--gold-ink); margin-top: 2px; }
.map { position: relative; min-height: 320px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: repeating-linear-gradient(0deg, #e8eef6 0 28px, #f4f7fb 28px 30px), repeating-linear-gradient(90deg, #e8eef6 0 28px, #f4f7fb 28px 30px); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 720px) { .form { grid-template-columns: 1fr; } }

/* pie */
.footer { background: var(--navy); color: #fff; padding: clamp(64px, 8vw, 110px) 0 36px; position: relative; overflow: hidden; }
.footer__ring { position: absolute; right: -10%; top: -20%; width: min(60vw, 720px); opacity: 0.12; pointer-events: none; }
.footer__ring path { fill: none; stroke: var(--gold); stroke-width: 6; }
.footer__grid { display: grid; grid-template-columns: 1.2fr 0.9fr 0.9fr 1.6fr; gap: 40px; position: relative; }
.footer h4 { color: var(--gold); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 14px; }
.footer a { color: rgba(255, 255, 255, 0.85); display: block; margin-bottom: 10px; font-size: 15px; }
.footer p { color: rgba(255, 255, 255, 0.75); font-size: 15px; }
.footer__logo { width: 76px; margin-bottom: 18px; }
.footer__logo svg { width: 100%; height: auto; overflow: visible; }
.social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.social a { display: inline-block; margin: 0; padding: 7px 13px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; font-size: 13px; color: #fff; }
.footer__bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
/* the staff's way into their panel: the quietest line of the footer, as small and as dim as the credits */
.footer .footer__staff { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, 0.5); text-decoration: none; }
.footer .footer__staff:hover, .footer .footer__staff:focus-visible { color: rgba(255, 255, 255, 0.8); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
/* "Secciones"/"Congreso" como <details>: en escritorio el CSS los fuerza siempre abiertos y sin
   signo (misma lectura que antes, un <h4> y su lista); en celular (ver más abajo) se vuelven
   colapsables, cerrados por defecto — sin JS, el propio <details> hace el toggle */
.footer__group summary { list-style: none; cursor: default; }
.footer__group summary::-webkit-details-marker { display: none; }
.footer__group__sum h4 { margin-bottom: 14px; }
.footer__group__tog { display: none; }
.footer__group__links { display: block; }
.footer__group__links a { margin-bottom: 10px; }
/* celular: pie condensado — logo + descripción de una línea + redes en una franja; "Secciones" y
   "Congreso" se vuelven acordeones táctiles (cerrados); todo enlace queda a 44px o más */
@media (max-width: 767px) {
  .footer { padding-top: clamp(48px, 8vw, 72px); }
  /* min-width:0 es necesario: sin él, .footer__grid (un track "1fr") crece para dar lugar al
     ancho natural del párrafo sin ajustar líneas, y ese sobrante queda oculto por el overflow:hidden
     del pie (pensado para el arco decorativo) en vez de ajustarse — recorta íconos sociales y texto */
  .footer__brand { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 10px; min-width: 0; }
  .footer__brand .footer__logo { width: 40px; margin-bottom: 0; flex: none; }
  .footer__brand p { flex: 1 1 150px; min-width: 0; margin: 0; font-size: 13px; line-height: 1.4; }
  .footer__brand .social { flex: 1 1 100%; margin-top: 2px; }
  .social a { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; }
  .footer__group { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .footer__group summary { cursor: pointer; }
  .footer__group__sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 0; }
  .footer__group__sum h4 { margin-bottom: 0; }
  .footer__group__tog { display: grid; place-items: center; width: 28px; height: 28px; flex: none; transition: transform 0.35s var(--ease); }
  .footer__group__tog svg { width: 16px; height: 16px; }
  .footer__group[open] .footer__group__tog { transform: rotate(45deg); }
  .footer__group__links { padding-bottom: 10px; }
  .footer__group:not([open]) .footer__group__links { display: none; }
  .footer a { min-height: 44px; display: flex; align-items: center; }
  .footer__contact { margin-top: 4px; }
  .footer__contact p { margin-bottom: 6px; }
  .footer__bottom { margin-top: 28px; }
}

/* ------------------------------------------------------------- páginas internas */
.page-hero { padding: calc(var(--nav-h) + clamp(56px, 9vw, 120px)) 0 clamp(48px, 6vw, 90px); position: relative; overflow: hidden; }
.page-hero h1 { max-width: 16ch; text-wrap: balance; }
.page-hero .lead { margin-top: 20px; }
.page-hero__arc { position: absolute; right: -6%; top: -12%; width: min(46vw, 560px); opacity: 0.55; pointer-events: none; }
.page-hero__arc svg { width: 100%; height: auto; overflow: visible; }
.head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(28px, 4vw, 52px); }
.head h2 { max-width: 20ch; text-wrap: balance; }
.head--center { align-items: center; text-align: center; }
.head--row { flex-direction: row; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; }
.prose p + p { margin-top: 16px; }
.prose { max-width: 66ch; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.list li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.list li b { font-family: var(--sans); font-weight: 800; color: var(--gold-ink); font-size: 14px; letter-spacing: 0.1em; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .cols-3, .cols-2 { grid-template-columns: 1fr; } }
.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: clamp(28px, 4vw, 48px); border-radius: 16px; background: var(--navy); color: #fff; }
.cta-band h3 { color: #fff; font-size: clamp(22px, 2.6vw, 32px); }
/* el texto cede ancho para que el botón quede en la misma fila en escritorio */
.cta-band > div:first-child { flex: 1 1 360px; }

/* actividades página */
/* actividades: cada tarjeta es un <details> (abierta, ver "actividades desglosadas" al final) */
.acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); overflow-anchor: none; }
.act { position: relative; isolation: isolate; padding: 28px 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 64px); }
.act__sum { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 24px; align-items: center; list-style: none; cursor: pointer; border-radius: 10px; }
.act__sum::-webkit-details-marker { display: none; }
.act__fig { grid-row: 1 / 3; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--cream); display: grid; place-items: center; color: var(--blue); }
.act__fig img { width: 100%; height: 100%; object-fit: cover; }
/* actividades sin foto: ficha con ícono, no un hueco */
.act__fig.act__icon { background: var(--gold-soft); color: var(--gold-ink); }
.act__icon svg { width: 44px; height: 44px; }
.act h3 { grid-column: 2; align-self: end; font-size: 22px; margin-bottom: 8px; }
.act__desc { grid-column: 2; align-self: start; font-size: 15px; color: var(--muted); }
@media (min-width: 901px) {
  .act:nth-child(odd) { padding-right: 32px; border-right: 1px solid var(--line); }
  .act:nth-child(even) { padding-left: 32px; }
  /* una tarjeta abierta en la columna izquierda pasa a las siguientes de columna */
  .act[open]:nth-child(odd) ~ .act:nth-child(even) { padding: 28px 32px 28px 0; border-right: 1px solid var(--line); }
  .act[open]:nth-child(odd) ~ .act:nth-child(odd) { padding: 28px 0 28px 32px; border-right: 0; }
  .act:has(+ .act[open]:nth-child(even)) { border-right: 0; }
}
@media (max-width: 900px) { .acts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .act { padding: 20px 0; } .act__sum { grid-template-columns: 104px minmax(0, 1fr) auto; column-gap: 14px; } .act h3 { font-size: 19px; overflow-wrap: anywhere; } .act__desc { font-size: 14px; } }
/* socios página */
.toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.toggle button { border: 0; background: transparent; padding: 10px 18px; border-radius: 999px; font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--navy); cursor: pointer; }
.toggle button.on { background: var(--blue); color: #fff; }
/* barra con el selector de vista (logos / listado) */
.socios-bar { display: flex; justify-content: flex-end; margin-bottom: 28px; }
/* socios: grilla de tarjetas por grupo, logo grande y nombre siempre visible (no afecta al marquee del home) */
.logos-group + .logos-group { margin-top: 56px; }
.logos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 20px; }
.logos-grid .logo-tile { width: auto; height: auto; min-height: 232px; padding: 22px 16px 18px; grid-template-rows: auto auto; align-content: center; gap: 14px; overflow: visible; text-decoration: none; }
.logos-grid .logo-tile__img { display: grid; place-items: center; width: 150px; height: 150px; }
.logos-grid .logo-tile img { width: 150px; height: 150px; }
.logos-grid .logo-tile__name { font-family: var(--sans); font-weight: 700; font-size: 13px; line-height: 1.25; color: var(--navy); text-align: center; overflow-wrap: anywhere; }
.logos-grid .logo-tile--txt { font-size: 15px; }
.logos-grid .logo-tile--txt .logo-tile__name { font-size: 16px; }
.logos-grid .logo-tile--link:hover img { transform: scale(1.06); }
@media (max-width: 720px) { .logos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .logos-grid .logo-tile { min-height: 180px; padding: 16px 10px 14px; gap: 10px; } .logos-grid .logo-tile__img, .logos-grid .logo-tile img { width: 104px; height: 104px; } .logos-grid .logo-tile__name { font-size: 12px; } }
.socios-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.socios-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--navy); font-family: var(--sans); font-weight: 700; font-size: 15px; }
.socios-list a span { display: flex; align-items: center; gap: 6px; font-family: var(--body); font-weight: 400; font-size: 13px; color: var(--blue); }
.socios-list svg { width: 16px; height: 16px; }
.view { display: none; }
.view.on { display: block; }
@media (max-width: 720px) { .socios-list { grid-template-columns: 1fr; } }

/* congreso página */
.subnav { position: sticky; top: var(--nav-h); z-index: 20; background: rgba(250, 248, 243, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.subnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 2vw, 30px); overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: block; padding: 14px 0; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; }
.subnav a:hover, .subnav a.on { color: var(--navy); border-bottom-color: var(--gold); }
/* celular: sin desplazamiento horizontal; las secciones son chips que se acomodan en varias filas */
/* celular: una sola fila pegajosa que se desliza (en vez de tres filas de chips que envuelven);
   scroll-snap para que cada chip encastre, y un degradado en los bordes que insinúa que hay más */
@media (max-width: 767px) {
  .subnav ul {
    flex-wrap: nowrap; gap: 8px; padding: 10px var(--pad) 10px; scroll-snap-type: x proximity; scroll-padding-inline: var(--pad);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  }
  .subnav a {
    padding: 12px 16px; min-height: 44px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px;
    background: #fff; font-size: 12.5px; color: var(--navy); white-space: nowrap; scroll-snap-align: center;
  }
  .subnav a:hover, .subnav a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
}
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs button { border: 1px solid var(--line); background: #fff; color: var(--navy); padding: 10px 16px; border-radius: 999px; font-family: var(--sans); font-weight: 700; font-size: 13px; cursor: pointer; }
.tabs button.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.program { display: grid; grid-template-columns: 80px repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.program__h { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.program__t { font-family: var(--sans); font-weight: 800; font-size: 14px; color: var(--navy); padding-top: 12px; }
.slot { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 13px; }
.slot.hi { background: var(--gold-soft); border-color: transparent; }
.slot b { display: block; font-family: var(--sans); font-size: 13px; color: var(--navy); }
.slot span { color: var(--muted); font-size: 12px; }
@media (max-width: 800px) { .program { grid-template-columns: 60px 1fr; } .program > .hide-m { display: none; } }
/* speakers: una pestaña por edición y un año a la vista (cada año reemplaza al otro). Sin JS (sin
   .is-tabs) no hay pestañas y se ven todos los años, uno debajo del otro. Tarjeta con la foto grande
   arriba (las fotos son cuadradas) y la trayectoria debajo. */
.spk-tabs { display: none; }
.spk-x.is-tabs .spk-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.spk-tabs button { min-width: 84px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font-family: var(--sans); font-weight: 800; font-size: 15px; color: var(--navy); cursor: pointer; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.spk-tabs button:hover { color: var(--blue); }
.spk-tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.spk-tabs [aria-selected="true"], .spk-tabs [aria-selected="true"]:hover { background: var(--navy); color: #fff; }
.spk-anio + .spk-anio { margin-top: 32px; }
.spk-x.is-tabs .spk-anio + .spk-anio { margin-top: 0; }
.spk-x.is-tabs .spk-anio.is-off { display: none; }
.spk-x.is-tabs .spk-anio { animation: spk-in 0.5s var(--ease) both; }
@keyframes spk-in { from { opacity: 0; transform: translateY(10px); } }
.spk-grupo { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 14px; }
.spk-bloque + .spk-bloque { margin-top: 32px; }
.spk-grupo span { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: var(--muted); }
/* la grilla: --c columnas (las que ocupan sus tarjetas), --ct en tablet y --cp en celular (build.py las calcula) */
.spk-grid { display: grid; grid-template-columns: repeat(var(--c, 4), minmax(0, 1fr)); gap: 20px; max-width: calc(var(--c, 4) * 270px + (var(--c, 4) - 1) * 20px); }
.spk--duo { grid-column: span 2; }
.spk--duo .spk__foto { aspect-ratio: 4 / 3; }
.spk { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.spk:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11, 42, 82, 0.12); }
.spk__foto { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--cream); }
.spk__foto::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--gold); }
.spk__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.spk:hover .spk__foto img { transform: scale(1.05); }
.spk__txt { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 14px; }
.spk__persona { display: flex; flex-direction: column; gap: 4px; }
.spk__persona + .spk__persona { padding-top: 14px; border-top: 1px solid var(--line); }
.spk__txt b { font-family: var(--sans); font-weight: 800; font-size: 18px; color: var(--navy); }
.spk__persona > span { font-size: 13px; line-height: 1.45; color: var(--muted); }
.spk .speaker__bio p { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 8px; }
/* la charla: su título a la vista y el resumen detrás de «Leer el resumen» (cerrado en todos los anchos) */
.spk__charla { display: flex; flex-direction: column; gap: 6px; margin: auto 20px 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.spk__charla small { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.4; text-transform: uppercase; color: var(--gold-ink); }
.spk__con { font-size: 12px; line-height: 1.4; color: var(--muted); }
.spk__titulo { font-family: var(--sans); font-weight: 800; font-size: 15px; line-height: 1.3; color: var(--navy); }
.spk__resumen > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--blue); }
.spk__resumen > summary::-webkit-details-marker { display: none; }
.spk__resumen > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
.spk__resumen .speaker__tog { display: inline-flex; width: 16px; height: 16px; flex: none; transition: transform 0.3s var(--ease); }
.spk__resumen .speaker__tog svg { width: 16px; height: 16px; }
.spk__resumen[open] .speaker__tog { transform: rotate(45deg); }
.spk__resumen > div p { font-size: 13px; line-height: 1.55; color: var(--muted); }
.spk__resumen > div p + p { margin-top: 8px; }
.spk-vacio { max-width: 560px; padding: 22px 24px; border: 1px dashed var(--line); border-radius: 16px; background: var(--paper); color: var(--muted); }

/* sesiones dentro del año: una fila de chips (pestañas) y un solo grupo a la vista. Sin JS (sin .is-tabs) los chips no se muestran y los
   grupos quedan seguidos, cada uno con el título y el día de su sesión. */
.spk-chips { display: none; }
.spk-ses.is-tabs .spk-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.spk-chips button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-family: var(--sans); font-weight: 800; font-size: 14px; color: var(--navy); cursor: pointer; transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease); }
.spk-chips button b { font-weight: 800; }
.spk-chips button i { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 999px; background: var(--gold-soft); color: var(--gold-ink); font-style: normal; font-size: 13px; font-weight: 800; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.spk-chips button:hover { border-color: var(--blue); transform: translateY(-1px); }
.spk-chips button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.spk-chips [aria-selected="true"], .spk-chips [aria-selected="true"]:hover { background: var(--navy); border-color: var(--navy); color: #fff; transform: none; }
.spk-chips [aria-selected="true"] i { background: var(--gold); color: var(--navy); }
.spk-ses__panel + .spk-ses__panel { margin-top: 36px; }
.spk-ses.is-tabs .spk-ses__panel + .spk-ses__panel { margin-top: 0; }
.spk-ses.is-tabs .spk-ses__panel.is-off { display: none; }
.spk-ses.is-tabs .spk-ses__panel { animation: spk-in 0.45s var(--ease) both; }
/* un grupo con dos sesiones (los webinars) las pone lado a lado, cada una con su título y su día */
.spk-ses__panel--multi { display: grid; grid-template-columns: repeat(var(--b, 2), minmax(0, 1fr)); gap: 28px 20px; max-width: calc(var(--b, 2) * 270px + (var(--b, 2) - 1) * 20px); }
.spk-ses__panel--multi .spk-bloque { display: flex; flex-direction: column; }
.spk-ses__panel--multi .spk-bloque + .spk-bloque { margin-top: 0; }
.spk-ses__panel--multi .spk-grid { flex: 1; }

/* speakers vivos: main.js agrega .is-lively cuando el navegador sabe abrir un <dialog>. La tarjeta pasa a una ficha de foto grande con el
   nombre debajo; la charla aparece sobre la foto al pasar el mouse, al enfocar o al tocar, y «Leer el resumen» abre la ficha entera. */
.is-lively .spk { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 18px; cursor: pointer; }
.is-lively .spk__foto { grid-area: 1 / 1; aspect-ratio: 4 / 5; }
.is-lively .spk--duo .spk__foto { aspect-ratio: 5 / 3; }
.is-lively .spk__foto img { object-position: 50% 22%; }
/* la pista de que hay más: un + dorado en la esquina de la foto */
.is-lively .spk__foto::before { content: ""; position: absolute; z-index: 1; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(var(--navy), var(--navy)) center / 12px 2px no-repeat, linear-gradient(var(--navy), var(--navy)) center / 2px 12px no-repeat, var(--gold); box-shadow: 0 6px 14px rgba(11, 42, 82, 0.3); transition: transform 0.4s var(--ease); }
.is-lively .spk:hover .spk__foto::before, .is-lively .spk.is-reveal .spk__foto::before { transform: rotate(90deg); }
.is-lively .spk__txt { grid-area: 2 / 1; gap: 0; padding: 14px 16px 16px; }
.is-lively .spk__persona { gap: 3px; }
.is-lively .spk__txt b { font-size: 16px; line-height: 1.2; }
.is-lively .spk__persona > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.4; }
.is-lively .speaker__bio, .is-lively .spk__resumen { display: none; }
.is-lively .spk--duo .spk__txt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.is-lively .spk--duo .spk__persona + .spk__persona { padding: 0 0 0 18px; border-top: 0; border-left: 1px solid var(--line); }
/* la charla cubre la tarjeta entera: se muestra con el mouse encima, con el foco dentro o tocada (.is-reveal) */
.is-lively .spk__charla { position: relative; z-index: 2; grid-area: 1 / 1 / 3 / 2; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 18px 18px 16px; overflow: hidden; border: 0; color: #fff; background: radial-gradient(120% 80% at 100% 0%, rgba(192, 177, 12, 0.24), transparent 60%), var(--navy); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.35s var(--ease), transform 0.5s var(--ease); }
.is-lively .spk__charla::before { content: ""; position: absolute; right: -46px; top: -66px; width: 190px; height: 190px; border-radius: 50%; border: 2px solid rgba(192, 177, 12, 0.45); border-left-color: transparent; border-bottom-color: transparent; transform: rotate(-24deg); pointer-events: none; }
.is-lively .spk__charla small { color: var(--gold); letter-spacing: 0.06em; }
.is-lively .spk__con { color: rgba(255, 255, 255, 0.74); }
.is-lively .spk__titulo { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; color: #fff; }
.is-lively .spk:focus-within .spk__charla, .is-lively .spk.is-reveal .spk__charla { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: hover) { .is-lively .spk:hover .spk__charla { opacity: 1; transform: none; pointer-events: auto; } }
/* el botón que main.js pone en lugar del <details> del resumen */
.spk__leer { position: relative; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-width: 44px; min-height: 44px; margin-top: auto; padding: 0 16px; border: 1.5px solid var(--gold); border-radius: 999px; background: transparent; color: #fff; font-family: var(--sans); font-weight: 700; font-size: 13px; cursor: pointer; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.spk__leer svg { width: 16px; height: 16px; flex: none; }
.spk__leer:hover { background: var(--gold); color: var(--navy); }
.spk__leer:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* retrato ilustrado de quien todavía no tiene foto: silueta, arcos del sello e iniciales en serif; nunca la foto de otra persona */
.spk__ph { position: absolute; inset: 0; display: grid; place-items: end center; overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 18% 0%, #14508f 0%, var(--navy) 64%); }
.spk__ph svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(255, 255, 255, 0.1); }
.spk__ph i { position: relative; margin-bottom: 14%; font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: clamp(34px, 4.4vw, 56px); line-height: 1; letter-spacing: 0.02em; color: var(--gold); }

/* la ficha: un <dialog> que main.js llena con los datos de la tarjeta (foto grande, trayectoria, charla y resumen) */
.spk-dlg { width: min(780px, calc(100vw - 32px)); max-width: none; max-height: min(88vh, 800px); margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 40px 90px -20px rgba(11, 42, 82, 0.55); }
.spk-dlg::backdrop { background: rgba(11, 42, 82, 0.64); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.spk-dlg[open] { animation: spk-dlg-in 0.45s var(--ease) both; }
@keyframes spk-dlg-in { from { opacity: 0; transform: translateY(28px) scale(0.98); } }
.spk-dlg__box { display: grid; grid-template-columns: 250px minmax(0, 1fr); max-height: min(88vh, 800px); overflow-y: auto; overscroll-behavior: contain; }
.spk-dlg__aside { position: relative; min-height: 260px; background: var(--navy); }
.spk-dlg__aside .spk__foto { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.spk-dlg__aside .spk__foto img { object-position: 50% 20%; }
.spk-dlg__main { display: flex; flex-direction: column; gap: 14px; padding: 30px 32px 32px; }
.spk-dlg__persona h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.1; }
.spk-dlg__persona + .spk-dlg__persona { padding-top: 14px; border-top: 1px solid var(--line); }
.spk-dlg__rol { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--gold-ink); font-weight: 600; }
.spk-dlg__bio { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.spk-dlg__charla { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 18px; border-top: 2px solid var(--gold); }
.spk-dlg__charla small { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); }
.spk-dlg__con { font-size: 13px; color: var(--muted); }
.spk-dlg__titulo { margin: 0; font-family: var(--sans); font-weight: 800; font-size: 18px; line-height: 1.3; color: var(--navy); }
.spk-dlg__resumen { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink); }
.spk-dlg__x { position: absolute; z-index: 3; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; box-shadow: 0 8px 18px rgba(11, 42, 82, 0.2); transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.spk-dlg__x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.spk-dlg__x:hover { background: var(--navy); color: #fff; }
.spk-dlg__x:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 767px) {
  .spk-dlg { width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 92vh; }
  .spk-dlg[open] { animation-name: spk-sheet-in; }
  .spk-dlg__box { grid-template-columns: 1fr; max-height: 92vh; }
  .spk-dlg__aside { min-height: 0; height: 220px; }
  .spk-dlg__aside .spk__foto img { object-position: 50% 10%; }
  .spk-dlg__main { padding: 20px 20px 28px; }
}
@keyframes spk-sheet-in { from { opacity: 0.4; transform: translateY(60px); } }
@media (max-width: 1023px) {
  .spk-grid { grid-template-columns: repeat(var(--ct, 3), minmax(0, 1fr)); }
}
/* celular: siempre dos tarjetas por fila (--cp), más bajas, y la charla sin la línea «Junto a» (esa va en la ficha) */
@media (max-width: 767px) {
  .spk-grid { grid-template-columns: repeat(var(--cp, 2), minmax(0, 1fr)); gap: 12px; max-width: none; }
  .spk-ses__panel--multi { gap: 24px 12px; max-width: none; }
  .spk-chips button { font-size: 13.5px; padding-left: 14px; }
  .is-lively .spk__foto { aspect-ratio: 1 / 1.08; }
  .is-lively .spk--duo .spk__foto { aspect-ratio: 16 / 9; }
  .is-lively .spk__txt { padding: 10px 12px 12px; }
  .is-lively .spk__txt b { font-size: 15px; }
  .is-lively .spk__persona > span { -webkit-line-clamp: 2; font-size: 12px; }
  .is-lively .spk--duo .spk__txt { gap: 0 12px; }
  .is-lively .spk--duo .spk__persona + .spk__persona { padding-left: 12px; }
  .is-lively .spk__charla { gap: 6px; padding: 14px 12px 12px; }
  .is-lively .spk__con { display: none; }
  .is-lively .spk__titulo { -webkit-line-clamp: 6; font-size: 13.5px; }
  .spk__leer { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .spk, .spk__foto img, .spk-tabs button, .spk-chips button, .is-lively .spk__charla, .is-lively .spk__foto::before, .spk__leer, .spk-dlg__x { transition: none; }
  .spk:hover, .spk:hover .spk__foto img, .spk-chips button:hover { transform: none; }
  .is-lively .spk__charla { transform: none; }
  .spk-x.is-tabs .spk-anio, .spk-ses.is-tabs .spk-ses__panel, .spk-dlg[open] { animation: none; }
}
/* congresos anteriores: una fila de números romanos (pestañas) y debajo la edición elegida. Sin JS
   (sin .is-tabs) la fila no se muestra y las ediciones quedan en lista, una debajo de la otra. */
.hist-tabs { display: none; }
.hist-x.is-tabs .hist-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; margin-bottom: 16px; }
.hist-tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), transform 0.25s var(--ease); }
.hist-tabs button:hover { border-color: var(--gold); transform: translateY(-2px); }
.hist-tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hist-tabs b { font-family: var(--sans); font-weight: 800; font-size: 20px; line-height: 1.1; letter-spacing: -0.03em; color: var(--navy); }
.hist-tabs small { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); }
.hist-tabs [aria-selected="true"] { background: var(--navy); border-color: var(--navy); transform: none; }
.hist-tabs [aria-selected="true"] b { color: var(--gold); }
.hist-tabs [aria-selected="true"] small { color: rgba(255, 255, 255, 0.78); }
.hist-panels { border-top: 1px solid var(--line); }
.hist-ed { display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.hist-ed__n { font-family: var(--sans); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; color: var(--navy); }
.hist-ed small { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.hist-ed strong { display: block; font-family: var(--sans); font-weight: 800; font-size: 16px; color: var(--navy); margin: 2px 0 6px; }
.hist-ed .link { font-size: 13px; }
/* con pestañas, todas las ediciones comparten la misma celda: el alto es el de la más larga, así
   nada salta al cambiar de edición, y solo la elegida se ve */
.hist-x.is-tabs .hist-panels { display: grid; border-top: 0; }
.hist-x.is-tabs .hist-ed { grid-area: 1 / 1; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0.45s; }
.hist-x.is-tabs .hist-ed.is-off { opacity: 0; visibility: hidden; transform: translateY(10px); }
.hist-x.is-tabs .hist-ed__n { font-size: clamp(56px, 8vw, 96px); line-height: 0.9; color: var(--gold); }
.hist-x.is-tabs .hist-ed strong { font-size: clamp(18px, 2.2vw, 24px); line-height: 1.3; margin: 6px 0 10px; }
@media (prefers-reduced-motion: reduce) { .hist-tabs button, .hist-x.is-tabs .hist-ed { transition: none; } .hist-tabs button:hover { transform: none; } }
.sponsors { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sponsor { width: 160px; height: 78px; border-radius: 10px; border: 1px dashed rgba(0, 81, 147, 0.3); display: grid; place-items: center; font-size: 12px; color: var(--muted); background: #fff; }
.pins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pins .step b { color: var(--navy); }
.pins .step small { color: var(--muted); opacity: 1; }
.pins .step::before { background: #fff; }
@media (max-width: 900px) { .pins { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pins { grid-template-columns: 1fr; } .venue { flex-direction: column; align-items: stretch; } .venue .map { width: 100%; min-height: 150px; } }
.venue { display: flex; gap: 18px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.venue .map { min-height: 110px; width: 150px; flex: none; }
.venue b { display: block; font-family: var(--sans); font-size: 17px; color: var(--navy); }
.venue span { display: block; font-size: 14px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .ring-wipe { clip-path: none; }
}

/* ---------------------------------------------------------------- títulos partidos por palabra (máscara) */
.is-split .wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.is-split .wd i { display: inline-block; font-style: normal; transform: translateY(110%); will-change: transform; }
.no-js .wd i { transform: none; }
/* lista de objetivos: entra desde la izquierda y la línea se dibuja */
.list--anim li { position: relative; border-bottom-color: transparent; }
.list--anim li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.list--anim li.on::after { transform: scaleX(1); }
.list--anim li:hover b { color: var(--navy); }
/* cifras en institucional */
.stats--left { justify-content: flex-start; margin-top: 36px; gap: clamp(24px, 4vw, 56px); }
.stats--left .stat { align-items: flex-start; }
.stats--left .stat b { font-size: clamp(34px, 4vw, 54px); }
.stats--left .stat span { font-size: 12px; }
/* programa: agregar cada actividad al calendario */
.slot { position: relative; padding-right: 38px; }
.slot__cal { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); opacity: 0.55; transition: opacity 0.2s, background 0.2s; }
.slot__cal svg { width: 15px; height: 15px; }
.slot:hover .slot__cal, .slot__cal:focus-visible { opacity: 1; background: rgba(0, 81, 147, 0.08); }
@media (prefers-reduced-motion: reduce) {
  .is-split .wd i { transform: none !important; }
  .list--anim li { opacity: 1 !important; transform: none !important; }
  .list--anim li::after { transform: none; }
}

/* ---------------------------------------------------------------- ronda 9 */
@media (max-width: 900px) { .page-hero__arc { display: none; } }
/* bloque del congreso: el 12 como numeral grande, con las otras tres fechas como acompañamiento */
.congreso__date b { display: flex; align-items: baseline; font-family: var(--sans); font-weight: 800; font-size: clamp(84px, 12vw, 172px); line-height: 0.9; letter-spacing: -0.05em; color: var(--gold); }
.congreso__date-more { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 12px; }
.congreso__date-more li { display: flex; flex-direction: column; gap: 3px; }
.congreso__date-more b { font-family: var(--sans); font-weight: 800; font-size: 23px; letter-spacing: -0.02em; color: #fff; }
.congreso__date-more span { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); opacity: 0.9; }
.congreso__date small { display: block; margin-top: 14px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; opacity: 0.85; }
/* cronograma: la línea crece con el scroll y los puntos aparecen a su turno */
.steps::before, .steps.on::before { transform: scaleY(var(--line, 0)); transition: none; }
.step::before { transform: scale(0); transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.step.on::before { transform: scale(1); }
.no-js .steps::before, .no-js .step::before { transform: none; }
/* tarjeta-enlace de socio: elevación al pasar el mouse */
.logo-tile--link { position: relative; overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s; }
.logo-tile--link img { transition: transform 0.5s var(--ease); }
.logo-tile--link:hover, .logo-tile--link:focus-visible { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(11, 42, 82, 0.14); border-color: transparent; }
.logo-tile--link:hover img { transform: scale(1.06) translateY(-10px); }
.logo-tile__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px 9px; background: var(--navy); color: #fff; font-family: var(--sans); font-weight: 700; font-size: 11px; line-height: 1.2; text-align: center; transform: translateY(100%); transition: transform 0.4s var(--ease); }
.logo-tile__cap small { display: flex; justify-content: center; align-items: center; gap: 4px; color: var(--gold); font-weight: 600; font-size: 10px; margin-top: 3px; }
.logo-tile__cap svg { width: 11px; height: 11px; }
.logo-tile--link:hover .logo-tile__cap, .logo-tile--link:focus-visible .logo-tile__cap { transform: none; }
@media (prefers-reduced-motion: reduce) { .steps::before, .steps.on::before, .step::before { transform: none; } }

/* ---------------------------------------------------------------- ronda 10: material del Polo (8/9/2026) */
/* lema del congreso 2027 (flyer "Raíces y Futuro") */
.lema--2027 { margin-top: 14px; }
.lema--2027 { font-style: normal; }
.lema--2027 b { display: block; font-style: normal; font-family: var(--sans); font-weight: 800; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.02em; line-height: 1.05; color: var(--verde); }
.lema--2027 span { display: block; margin-top: 8px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); }
.congreso .lema--2027 b { color: #9fdcc9; }
.congreso .lema--2027 span { color: var(--gold); }
/* congreso.html: identidad del flyer 2027 «Raíces y Futuro», hecha viva.
   El nombre del congreso arriba y chico, el lema grande en serif verde profundo y «25 años aprendiendo
   juntos» en mayúsculas azules, como en el flyer. Detrás, la capa viva (.cong-vivo): el árbol del flyer a
   la izquierda, raíces que se dibujan hacia la derecha, cintas que ondulan, hojas que caen y una luz que
   respira. Todo es decorativo (aria-hidden, sin eventos) y va debajo del texto. */
.page-hero--congreso { --hero-top: clamp(200px, 36vw, 290px); --hero-bot: clamp(250px, 68vw, 340px); padding-bottom: clamp(104px, 11vw, 168px); }
.cong-hero { position: relative; z-index: 1; }
.cong-hero__txt { max-width: 880px; margin-left: clamp(0px, 29vw, 440px); }
.cong-titulo { max-width: none; margin-top: 18px; }
.cong-kicker { display: block; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.01em; }
.cong-lema { display: block; margin-top: 6px; font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(52px, 7.4vw, 108px); line-height: 0.98; letter-spacing: -0.01em; color: #0e4a3a; text-wrap: balance; }
.cong-lema i { font-style: italic; color: var(--verde); }
/* «25 años aprendiendo juntos» es la segunda línea del título: una banda dorada, como las cintas del flyer, con el 25 en
   la serif del lema y el resto en mayúsculas. Su tamaño sigue al del lema (alrededor de un cuarto) para que se lea bien
   sin competir con «Raíces y Futuro»; en celular baja a 16px, el piso de la banda. */
.cong-anios { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: clamp(10px, 1.1vw, 16px); margin-top: clamp(14px, 1.6vw, 22px); padding: clamp(8px, 0.8vw, 12px) clamp(30px, 3vw, 44px) clamp(8px, 0.8vw, 12px) clamp(14px, 1.5vw, 22px); font-family: var(--sans); font-size: clamp(16px, 2vw, 30px); font-weight: 800; letter-spacing: 0.1em; line-height: 1.1; text-transform: uppercase; color: var(--navy); background: linear-gradient(100deg, #d6c81f 0%, var(--gold) 46%, #b3a50b 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 0.7em) 50%, 100% 100%, 0 100%); }
.cong-anios__n { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-size: 2.6em; font-weight: 700; line-height: 0.8; letter-spacing: -0.02em; color: #0e4a3a; }
.cong-anios__t { display: flex; flex-direction: column; gap: 0.14em; }
.cong-anios__t span:first-child { font-size: 0.8em; letter-spacing: 0.34em; }
@media (max-width: 400px) { .cong-anios { gap: 8px; padding-right: 26px; letter-spacing: 0.06em; } .cong-anios__t span:first-child { letter-spacing: 0.26em; } }

/* La capa viva. El árbol y cada SVG miden lo mismo de alto (el alto del hero) y comparten unidades: las
   raíces vectoriales nacen donde las del recorte se desvanecen. Los SVG son 3 veces más anchos que el árbol. */
.cong-vivo { --dx: 0px; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cong-capa { position: absolute; left: var(--dx); bottom: 0; height: 100%; will-change: transform; }
.cong-arbol { aspect-ratio: 600 / 1075; }
.cong-capa--ancha { aspect-ratio: 1800 / 1075; }
.cong-arbol img { display: block; width: 100%; height: 100%; transform-origin: 30% 100%; animation: cong-arbol-in 1.9s var(--ease) both; }
@keyframes cong-arbol-in { from { opacity: 0; transform: translateY(18px) scale(1.02); } to { opacity: var(--arbol-o, 1); transform: none; } }
/* la luz: un halo dorado sobre el punto donde el sol atraviesa la copa del flyer; respira despacio */
.cong-luz { position: absolute; left: 18%; top: 38%; width: 150%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: radial-gradient(closest-side, rgba(255, 224, 138, 0.78), rgba(255, 224, 138, 0.3) 46%, rgba(255, 224, 138, 0) 100%); opacity: 0.8; animation: cong-luz 9s ease-in-out infinite alternate; }
@keyframes cong-luz { from { opacity: calc(0.55 * var(--luz, 1)); transform: scale(0.94); } to { opacity: calc(0.95 * var(--luz, 1)); transform: scale(1.1); } }
/* raíces: se dibujan una tras otra (pathLength=1: el trazo va de oculto, 1, a completo, 0) */
.cong-raices, .cong-cintas { display: block; width: 100%; height: 100%; overflow: visible; }
.cong-raices path { stroke-dasharray: 1; stroke-dashoffset: 1.03; animation: cong-raiz var(--t, 2.8s) cubic-bezier(0.5, 0.05, 0.2, 1) var(--d, 0s) forwards; }
@keyframes cong-raiz { to { stroke-dashoffset: 0; } }
/* cintas: ondulan muy despacio (solo transform: barato en celulares) */
.cong-cinta { transform-box: fill-box; transform-origin: 0% 50%; animation: cong-cinta 16s ease-in-out var(--w, 0s) infinite alternate; }
@keyframes cong-cinta { from { transform: translate3d(0, 0, 0) scaleY(1); } to { transform: translate3d(-26px, 9px, 0) scaleY(1.14); } }
/* hojas: caen y se mecen, cada una a su ritmo */
/* Las hojas cruzan el hero pero nunca por donde está el texto: la capa lleva una máscara que las apaga sobre la
   columna de texto (escritorio: entre el árbol y el borde derecho de la página; celular: entre la copa y las
   raíces). --txt-x es donde empieza el texto, igual que el margen de .cong-hero__txt; --wrap-r, donde termina .wrap. */
.cong-vivo { --txt-x: calc((100% - min(var(--wrap), 100% - 2 * var(--pad))) / 2 + min(29vw, 440px)); --wrap-r: calc((100% + min(var(--wrap), 100% - 2 * var(--pad))) / 2); }
.cong-hojas { position: absolute; inset: 0; --hojas-mask: linear-gradient(to right, #000 0, #000 calc(var(--txt-x) - 44px), transparent calc(var(--txt-x) - 14px), transparent calc(var(--wrap-r) + 6px), #000 calc(var(--wrap-r) + 30px)); -webkit-mask-image: var(--hojas-mask); mask-image: var(--hojas-mask); }
.cong-hoja { position: absolute; left: var(--l); top: var(--t); height: auto; aspect-ratio: 24 / 32; opacity: 0; animation: cong-hoja var(--dur, 24s) linear var(--dem, 0s) infinite; will-change: transform, opacity; }
@keyframes cong-hoja {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  8% { opacity: var(--o, 0.8); }
  25% { transform: translate3d(calc(var(--x) * -0.3), calc(var(--y) * 0.25), 0) rotate(calc(var(--r) * 0.3)); }
  50% { transform: translate3d(calc(var(--x) * 0.45), calc(var(--y) * 0.5), 0) rotate(calc(var(--r) * 0.6)); }
  75% { transform: translate3d(calc(var(--x) * 0.25), calc(var(--y) * 0.75), 0) rotate(calc(var(--r) * 0.85)); }
  92% { opacity: var(--o, 0.8); }
  100% { opacity: 0; transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)); }
}
/* main.js pausa todo cuando el hero sale de la pantalla */
.cong-vivo.is-off * { animation-play-state: paused !important; }

/* pantallas angostas (y tablets): la copa del árbol queda arriba, sobre el título (el hero gana aire arriba
   para eso) y se apaga antes de llegar al texto; el tronco baja por la izquierda casi invisible detrás del texto y
   las raíces cierran abajo, debajo del último párrafo. Los textos chicos llevan un halo del color de la página. */
@media (max-width: 1100px) {
  .page-hero--congreso { padding-top: calc(var(--nav-h) + var(--hero-top)); padding-bottom: var(--hero-bot); }
  .cong-hero__txt { margin-left: 0; }
  .cong-vivo { --dx: -14vw; --luz: 0.55; --arbol-mask: linear-gradient(to bottom, #000 0, #000 calc(var(--nav-h) + var(--hero-top) - 130px), rgba(0, 0, 0, 0.06) calc(var(--nav-h) + var(--hero-top) - 14px), rgba(0, 0, 0, 0.08) calc(100% - var(--hero-bot) - 14px), #000 calc(100% - 100px)); }
  .cong-arbol { -webkit-mask-image: var(--arbol-mask); mask-image: var(--arbol-mask); }
  .cong-hojas { --hojas-mask: linear-gradient(to bottom, #000 0, #000 calc(var(--nav-h) + var(--hero-top) - 44px), transparent calc(var(--nav-h) + var(--hero-top) - 14px), transparent calc(100% - var(--hero-bot) + 6px), #000 calc(100% - var(--hero-bot) + 40px)); }
  .cong-hoja { left: var(--lm, var(--l)); top: var(--tm, var(--t)); }
  .cong-hoja:nth-child(n + 7) { display: none; }
  .cong-hero__txt .eyebrow, .cong-kicker, .congreso__meta, .cong-hero__txt .lead { text-shadow: 0 0 10px var(--paper), 0 0 3px var(--paper); }
}

/* Raíces que bajan del hero: al scrollear, unas raíces finas se sueltan de donde terminan las del hero y crecen por
   el margen izquierdo hasta antes de Inscripciones (main.js ata el largo dibujado al scroll). Van detrás del contenido
   (z-index negativo dentro de .cong-zona, que abre su propio contexto de apilado) y dentro del margen: el recuadro
   termina donde empieza la columna de contenido. Arrancan 124px arriba para nacer detrás de la barra de secciones. */
.cong-zona { position: relative; isolation: isolate; }
.cong-baja { --m: calc((100% - min(var(--wrap), 100% - 2 * var(--pad))) / 2); position: absolute; z-index: -1; top: -124px; bottom: 0; left: calc(var(--m) - min(var(--m), 110px)); width: min(var(--m), 110px); pointer-events: none; }
.cong-baja svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cong-baja path { stroke-dasharray: 1 2; stroke-dashoffset: 1.03; }
.cong-nodo { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #b59a00; box-shadow: 0 0 0 4px rgba(181, 154, 0, 0.16); opacity: 0; transform: scale(0.3); transition: opacity 0.5s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cong-nodo.on { opacity: 1; transform: none; }
@media (max-width: 1100px) { .cong-baja { opacity: 0.55; } }
@media (max-width: 767px) { .cong-baja { display: none; } }

/* sin movimiento: la composición final, quieta (raíces completas, sin hojas cayendo, sin paralaje) */
@media (prefers-reduced-motion: reduce) {
  .cong-arbol img, .cong-luz, .cong-cinta, .cong-hoja { animation: none; }
  .cong-arbol img { opacity: var(--arbol-o, 1); }
  .cong-luz { opacity: calc(0.75 * var(--luz, 1)); }
  .cong-raices path { animation: none; stroke-dashoffset: 0; }
  .cong-baja path { stroke-dashoffset: 0; }
  .cong-nodo { opacity: 1; transform: none; transition: none; }
  .cong-hoja { opacity: var(--o, 0.8); transform: translate3d(calc(var(--x) * 0.3), calc(var(--y) * 0.3), 0) rotate(calc(var(--r) * 0.3)); }
}
/* programa del 12 de febrero, hora por hora */
.agenda { display: grid; gap: 8px; margin-top: 18px; }
.agenda__row { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start; padding: 14px 44px 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.agenda__row.hi { background: var(--gold-soft); border-color: transparent; }
.agenda__row > b { font-family: var(--sans); font-weight: 800; color: var(--navy); font-size: 15px; padding-top: 1px; }
.agenda__row h4 { font-size: 15px; color: var(--navy); }
.agenda__row > div > span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.agenda__row .ph { display: inline; }
.agenda__row .slot__cal { top: 12px; right: 10px; }
.agenda__row:hover .slot__cal { opacity: 1; }
/* celular: el icono "agregar a mi calendario" de cada fila crece a 44x44 (visualmente más grande,
   pero es su verdadera área táctil, no un ::before invisible) */
@media (max-width: 767px) {
  .agenda__row { padding-right: 54px; }
  .agenda__row .slot__cal { top: 6px; right: 4px; width: 44px; height: 44px; opacity: 0.75; }
  .agenda__row .slot__cal svg { width: 19px; height: 19px; }
}
/* actividades por público */
.acts-group + .acts-group { margin-top: 56px; }
.acts-group > .eyebrow { margin-bottom: 14px; }
.acts-group .head { margin-bottom: 24px; }
/* institucional: esencia */
.esencia { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 32px; }
.esencia .eyebrow { margin-right: 6px; }
.chip--big { font-size: 13px; padding: 9px 14px; background: #fff; border: 1px solid var(--line); color: var(--navy); }

.hist__or { display: block; font-size: 13px; color: var(--ink); margin: 0 0 8px; }
/* (T6) la bio va en un <details open> ("Trayectoria"), que arranca abierto por la misma razón que
   .cal-pick más arriba (un <details> cerrado no pinta su contenido en Chrome aunque el CSS lo
   fuerce); main.js lo cierra en celular. Acá solo se esconde el disparador en escritorio: el
   párrafo queda a la vista, igual que antes. Sin JS queda abierto en cualquier ancho. */
.speaker__bio > summary { display: none; }

/* ---------------------------------------------------------------- congreso: fecha que cuenta, puntos que se encienden, sello que se dibuja */
.congreso__date b span { display: inline-block; font-variant-numeric: tabular-nums; min-width: 1.15em; }
@keyframes stepPulse { 0% { box-shadow: 0 0 0 0 rgba(192, 177, 12, 0.55); } 100% { box-shadow: 0 0 0 14px rgba(192, 177, 12, 0); } }
.step::before { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.5s, box-shadow 0.5s; }
.step.on::before { background: var(--gold); box-shadow: 0 0 0 6px rgba(192, 177, 12, 0.18); animation: stepPulse 0.9s ease-out; }
.step--blue.on::before { background: #6ea3e0; box-shadow: 0 0 0 6px rgba(110, 163, 224, 0.2); }
/* cronograma en reposo: cuando ya entraron todos, los puntos se encienden en cadena del primero al último, en bucle */
.steps.is-live .step.on { --ring: 192, 177, 12; }
.steps.is-live .step--blue.on { --ring: 110, 163, 224; }
.steps.is-live .step.on::before { animation: stepChase 4.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.75s); }
@keyframes stepChase { 0%, 28%, 100% { transform: scale(1); box-shadow: 0 0 0 6px rgba(var(--ring), 0.18); } 8% { transform: scale(1.3); box-shadow: 0 0 0 16px rgba(var(--ring), 0.04), 0 0 22px 3px rgba(var(--ring), 0.6); } 18% { transform: scale(1); box-shadow: 0 0 0 6px rgba(var(--ring), 0.18); } }
/* ...y al terminar el 17, el turno es del botón: "lo que sigue es esto" */
.congreso.is-live .congreso__sticky .btn--gold { animation: ctaChase 4.4s ease-in-out infinite; animation-delay: 3s; }
.congreso.is-live .congreso__sticky .btn--gold:hover { animation: none; }
@keyframes ctaChase { 0%, 28%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(192, 177, 12, 0); } 8% { transform: translateY(-2px) scale(1.05); box-shadow: 0 0 0 12px rgba(192, 177, 12, 0.05), 0 10px 28px rgba(192, 177, 12, 0.5); } 18% { transform: none; box-shadow: 0 0 0 0 rgba(192, 177, 12, 0); } }
.congreso__org { position: relative; width: 36px; display: inline-block; flex: none; }
.congreso__org svg { display: block; width: 100%; height: auto; }
.congreso__org svg:first-child { position: absolute; inset: 0; overflow: visible; }
.congreso__org svg:first-child path { fill: none; stroke: var(--gold); stroke-width: 40; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .step.on::before { box-shadow: none; } .congreso__org svg:first-child { display: none; } }

/* ---------------------------------------------------------------- espacios de participación: explorador orbital (sello fijo, órbita que gira con cada capítulo) */
.subs { position: relative; background: var(--navy); color: #fff; overflow: clip; }
.subs__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 80px); }
.subs__stage { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); align-self: start; display: grid; place-items: center; }
.subs__stage::before { content: ""; position: absolute; width: min(620px, 46vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(0, 81, 147, 0.55) 0%, rgba(0, 81, 147, 0) 70%); pointer-events: none; }
.orb { --rot: 0deg; --r: 41%; position: relative; width: min(540px, 40vw, 100svh - var(--nav-h) - 140px); aspect-ratio: 1; }
.orb__ring { position: absolute; inset: 9%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); }
.orb__ring--outer { inset: -4%; border: 1px dashed rgba(255, 255, 255, 0.1); animation: orbSpin 120s linear infinite; }
@keyframes orbSpin { to { transform: rotate(360deg); } }
.orb__arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orb__arc circle { fill: none; stroke: var(--gold); stroke-width: 0.9; stroke-linecap: round; stroke-dasharray: 46 314; transform: rotate(-23deg); transform-origin: 50% 50%; }
.orb__beam { position: absolute; left: 50%; top: 50%; width: var(--r); height: 2px; margin-top: -1px; background: linear-gradient(90deg, rgba(192, 177, 12, 0), var(--gold)); opacity: 0.85; }
.orb__seal { position: absolute; left: 50%; top: 50%; width: 30%; transform: translate(-50%, -50%); filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35)); }
.orb__seal svg { display: block; width: 100%; height: auto; }
.orb__nodes { position: absolute; inset: 0; transform: rotate(var(--rot)); transition: transform 1.1s var(--ease); }
.orb__node { position: absolute; left: calc(50% + var(--r) * var(--ax)); top: calc(50% + var(--r) * var(--ay)); width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.3); background: #0f3563; color: #fff; cursor: pointer; transition: background 0.5s var(--ease), border-color 0.5s, color 0.5s, box-shadow 0.5s, scale 0.5s var(--ease); }
.orb__node > span { display: grid; place-items: center; width: 100%; height: 100%; transform: rotate(calc(-1 * var(--rot))); transition: transform 1.1s var(--ease); }
.orb__node svg { width: 26px; height: 26px; }
.orb__node:hover { border-color: var(--gold); }
.orb__node.is-active { background: var(--gold); border-color: var(--gold); color: var(--navy); scale: 1.2; box-shadow: 0 0 0 10px rgba(192, 177, 12, 0.16), 0 0 44px rgba(192, 177, 12, 0.35); }
.orb__count { position: absolute; left: 50%; top: 100%; margin-top: 18px; transform: translateX(-50%); font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.orb__count b { color: var(--gold); }
.subs__chapters { padding: 10vh 0 16vh; }
.sub-ch { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; scroll-margin-top: calc(var(--nav-h) + 72px); }
.subs.is-live .sub-ch { opacity: 0.28; transition: opacity 0.6s var(--ease); }
.subs.is-live .sub-ch.is-active { opacity: 1; }
.sub-ch__num, .sub-ch__lab { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.sub-ch h2 { color: #fff; font-size: clamp(34px, 3.6vw, 56px); line-height: 1.02; margin: 12px 0 16px; }
.sub-ch__desc { color: rgba(255, 255, 255, 0.82); font-size: 18px; max-width: 46ch; margin: 0; }
.sub-ch__lab { margin-top: 30px; color: rgba(255, 255, 255, 0.55); }
.sub-ch__acts { display: grid; gap: 12px; margin-top: 12px; max-width: 520px; }
.sub-act { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; align-items: center; padding: 10px 16px 10px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease); }
a.sub-act:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(192, 177, 12, 0.5); transform: translateX(4px); }
.sub-act img, .sub-act__ico { width: 76px; height: 56px; border-radius: 10px; object-fit: cover; }
.sub-act__ico { display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: var(--gold); }
.sub-act__ico svg { width: 24px; height: 24px; }
.sub-act__txt small { display: block; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.sub-act__txt b { font-family: var(--sans); font-size: 15px; font-weight: 700; }
.sub-act > svg { width: 18px; height: 18px; color: var(--gold); }
.sub-ch__mail { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.sub-ch__mail:hover { color: #fff; }
.sub-ch__mail svg { width: 16px; height: 16px; color: var(--gold); }
.subs__rail { display: none; }
@media (max-width: 1000px) {
  .subs__grid { grid-template-columns: 1fr; }
  .subs__stage { display: none; }
  .subs__rail { position: sticky; top: var(--nav-h); z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 12px var(--pad); background: rgba(11, 42, 82, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); scrollbar-width: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .subs__rail::-webkit-scrollbar { display: none; }
  .subs__rail button { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: transparent; color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; }
  .subs__rail button svg { width: 16px; height: 16px; }
  .subs__rail button.is-active { background: var(--gold); border-color: var(--gold); color: var(--navy); }
  .subs__chapters { padding: 8px 0 48px; }
  .sub-ch { min-height: 0; padding: 48px 0 8px; scroll-margin-top: calc(var(--nav-h) + 56px); }
  .subs.is-live .sub-ch { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .orb__nodes, .orb__node > span, .orb__node, .subs.is-live .sub-ch { transition: none; } .orb__ring--outer { animation: none; } }

/* barra sobre secciones azul noche (espacios de participación, congreso, pie): vidrio oscuro en lugar de gris */
body:not(.menu-open) .nav.over-dark:not([data-state="bare"]) { background: rgba(11, 42, 82, 0.8); border-bottom-color: rgba(255, 255, 255, 0.08); }
body:not(.menu-open) .nav.over-dark:not([data-state="bare"]) .nav__links a { color: rgba(255, 255, 255, 0.86); }
body:not(.menu-open) .nav.over-dark:not([data-state="bare"]) .nav__links a:hover, body:not(.menu-open) .nav.over-dark:not([data-state="bare"]) .nav__links a[aria-current="page"] { color: #fff; }
body:not(.menu-open) .nav.over-dark:not([data-state="bare"]) .nav__burger span { background: #fff; }
body:not(.menu-open) .nav.over-dark:not([data-state="bare"]) .nav__logo path { fill: #fff; }

/* programa: aviso de publicación del PDF con una cuenta regresiva discreta */
.pdf-note { margin-top: 18px; font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pdf-note__txt { display: inline-flex; align-items: flex-start; gap: 8px; }
.pdf-note__txt .ico-sm { margin-top: 2px; }
.pdf-count { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(192, 177, 12, 0.14); color: var(--gold-ink); font-family: var(--sans); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pdf-count[hidden] { display: none; }
.pdf-count b { font-weight: 800; color: var(--navy); }
.pdf-count i { width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--gold); animation: pdfPulse 2.4s ease-in-out infinite; }
@keyframes pdfPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192, 177, 12, 0.5); } 50% { box-shadow: 0 0 0 5px rgba(192, 177, 12, 0); } }

/* ---------------------------------------------------------------- institucional: muro de socios, escalera de la historia, ejes con foto */
/* quiénes somos: los nombres de los socios detrás del título, alguno se enciende */
.who { position: relative; overflow: hidden; padding: calc(var(--nav-h) + clamp(56px, 9vw, 120px)) 0 clamp(56px, 7vw, 100px); }
.who__inner { position: relative; z-index: 1; }
.who__inner h1 { max-width: 12ch; }
.who__inner .lead { max-width: 40ch; margin-top: 20px; }
.who__count { display: flex; align-items: baseline; margin-top: 22px; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.who__count b { font-size: 22px; letter-spacing: 0; color: var(--navy); margin-right: 6px; }
.who__wall { position: absolute; top: var(--nav-h); bottom: 0; left: 36%; right: -4%; font-family: var(--sans); font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 2.5vw, 38px); line-height: 1.18; letter-spacing: -0.01em; text-align: left; color: rgba(11, 42, 82, 0.07); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%), linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%), linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent); mask-composite: intersect; pointer-events: none; }
.who__name { transition: color 1.2s var(--ease); }
.who__name.is-lit { color: rgba(122, 115, 0, 0.85); }
.who__sep { display: inline-block; width: 0.22em; height: 0.22em; margin: 0 0.45em; border-radius: 50%; background: rgba(192, 177, 12, 0.35); vertical-align: middle; }
@media (max-width: 900px) {
  .who { display: flex; flex-direction: column; }
  .who__inner { order: 1; }
  .who__wall { position: relative; top: auto; left: 0; right: 0; height: 200px; margin-top: 36px; font-size: 20px; order: 2; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent); }
}
/* celular (T5): el muro-párrafo de arriba se lee como un amontonamiento — nombres cortados por la
   máscara tanto en los bordes de la pantalla como a mitad de palabra (ver
   odd/tasks/pep1-mobile-hifi.md). En su lugar, tres filas tipo marquesina que derivan en sentidos
   opuestos, como la de socios (.marquee): cada fila usa un tercio de la lista, duplicado
   (.who-m__set) para el loop sin costura, con el mismo degradé de borde. Con
   prefers-reduced-motion la animación ya se anula en la regla global de más abajo; acá además se
   pasa a un bloque estático que envuelve texto (sin recorte) y se oculta el duplicado. */
.who-m { display: none; }
@media (max-width: 767px) {
  .who__wall { display: none; }
  .who-m { display: flex; flex-direction: column; gap: 16px; order: 2; margin-top: 32px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .who-m__row { display: flex; white-space: nowrap; width: max-content; font-family: var(--sans); font-weight: 800; text-transform: uppercase; font-size: 15px; letter-spacing: 0.01em; color: rgba(11, 42, 82, 0.4); animation: marquee 42s linear infinite; }
  .who-m__row:nth-child(2) { color: rgba(192, 177, 12, 0.6); animation-duration: 52s; }
  .who-m__row--rev { animation-direction: reverse; }
  .who-m__row:nth-child(3) { animation-duration: 60s; }
  .who-m__set { padding-right: 26px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .who-m { -webkit-mask-image: none; mask-image: none; }
  .who-m__row { flex-wrap: wrap; white-space: normal; width: auto; gap: 8px 0; }
  .who-m__set:nth-child(2) { display: none; }
}
/* historia: una escalera, cada escalón un paso; la línea dorada baja por el borde izquierdo de cada escalón y avanza hasta el siguiente */
.stair__steps { position: relative; margin-top: clamp(32px, 5vw, 64px); }
.stair__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.stair__line path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step-h { position: relative; width: min(46%, 520px); margin-left: calc(var(--i) * 12.5%); padding: 26px 0 clamp(40px, 5vw, 72px) 34px; }
.step-h::before { content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px var(--gold-soft); }
.step-h__when { font-family: var(--sans); font-weight: 800; font-size: clamp(40px, 5vw, 72px); line-height: 0.95; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px var(--navy); }
.step-h--thesis .step-h__when { font-size: clamp(16px, 1.6vw, 20px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); -webkit-text-stroke: 0; }
.step-h h3 { font-size: clamp(22px, 2.2vw, 30px); margin: 12px 0 8px; }
.step-h p { color: var(--muted); max-width: 44ch; margin: 0; }
.step-h--seal { padding-right: 110px; }
.step-h__seal { position: absolute; right: 0; top: 20px; width: 92px; }
.step-h__seal svg { width: 100%; height: auto; display: block; }
/* el último escalón arranca en la mitad: nunca más ancho que lo que queda */
.step-h--today { width: min(50%, 700px); }
.step-h--today .stats { margin-top: 18px; }
.step-h--today .step-h__when + p { margin-top: 14px; }
.step-h--today .curtain { margin: 24px 0 0; }
@media (max-width: 900px) {
  .stair__line { display: none; }
  .step-h, .step-h--today { width: auto; margin-left: 0; padding: 22px 0 36px 26px; border-left: 2px solid var(--gold); }
  .step-h::before { left: -6px; top: 26px; }
  .step-h--seal { padding-right: 0; }
  .step-h__seal { position: static; width: 72px; margin-top: 16px; }
  .step-h--today .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .step-h--today .stat span { font-size: 12px; }
}
/* lo que nos define: tres paneles con foto real y pictograma; el abierto crece */
.ejes .head { margin-bottom: 16px; }
.ejes__marco { font-size: 16px; line-height: 1.65; color: var(--muted); }
.axes { display: flex; gap: 14px; height: clamp(420px, 40vw, 540px); margin-top: 40px; }
.axis { position: relative; flex: 1 1 0; min-width: 0; border-radius: 18px; overflow: hidden; background: var(--navy); color: #fff; cursor: pointer; outline: none; transition: flex-grow 0.8s var(--ease); }
.axis.is-open { flex-grow: 2.4; }
.axis:focus-visible { box-shadow: 0 0 0 3px var(--gold); }
.axis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: 0.5; transform: scale(1.06); transition: opacity 0.8s var(--ease), filter 0.8s var(--ease), transform 1.2s var(--ease); }
.axis.is-open img { opacity: 0.78; filter: grayscale(0.15); transform: scale(1); }
.axis__shade { position: absolute; inset: 0; background: radial-gradient(circle at 88% 14%, rgba(11, 42, 82, 0.72) 0%, rgba(11, 42, 82, 0) 30%), linear-gradient(180deg, rgba(11, 42, 82, 0.15) 0%, rgba(11, 42, 82, 0.5) 45%, rgba(11, 42, 82, 0.94) 100%); }
.axis__num { position: absolute; top: 22px; left: 24px; font-family: var(--sans); font-size: 13px; font-weight: 800; letter-spacing: 0.2em; color: var(--gold); }
.axis__mark { position: absolute; top: 18px; right: 18px; width: 88px; height: 88px; color: var(--gold); transition: transform 0.8s var(--ease); }
.axis.is-open .axis__mark { transform: scale(1.12); }
.axis__body { position: absolute; left: 24px; right: 24px; bottom: 26px; }
.axis h3 { color: #fff; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.12; margin: 0; }
.axis p { margin: 10px 0 0; max-width: 46ch; color: rgba(255, 255, 255, 0.88); font-size: 16px; opacity: 0; transform: translateY(12px); transition: opacity 0.5s 0.15s, transform 0.6s 0.15s var(--ease); }
.axis.is-open p { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .axes { flex-direction: column; height: auto; }
  .axis { flex: none; height: 380px; }
  .axis p { opacity: 1; transform: none; }
}
/* en celular el muro de nombres va alineado a la izquierda: justificado abre huecos entre palabras */
@media (max-width: 900px) { .who__wall { text-align: left; } .who { padding-bottom: 0; } }
/* celular (T5): "lo que nos define", "misión y objetivos" y "autoridades" no tenían clase propia
   y sumaban el padding de .sec al de su vecina (dos veces 72px+ entre secciones del mismo fondo
   crema, sin ningún quiebre visual) — se ve como una franja vacía entre "todas las actividades" y
   "misión y objetivos". En celular alcanza con menos aire; "cómo asociarse" ya usa su propio id. */
@media (max-width: 767px) { .ejes, .mision, .autoridades, #asociarse { padding: clamp(44px, 7vw, 84px) 0; } }

/* barra con personalidad: los puntos dorados del sello lo flanquean, un arco dorado marca el link y un anillo sigue el scroll */
.nav__logo::before, .nav__logo::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--gold); }
.nav__logo::before { left: -22px; }
.nav__logo::after { right: -22px; }
/* tamaño explícito: un svg posicionado no se estira con "inset" en Safari (queda del tamaño del logo, corrido arriba a la izquierda) */
.nav__logo .nav__ring { position: absolute; top: -8px; left: -8px; width: calc(100% + 16px); height: calc(100% + 16px); overflow: visible; pointer-events: none; }
.nav__ring circle { fill: none; }
.nav__ring-track { stroke: rgba(11, 42, 82, 0.1); stroke-width: 1.5; stroke-dasharray: 208; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; }
.nav__ring-bar { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 50% 50%; }
body.no-js .nav__ring { display: none; }
/* home: cuando el sello llega a la barra el anillo se dibuja y los puntos crecen uno detrás del otro; al irse se retraen */
.nav__ring-track { transition: stroke-dashoffset 0.7s cubic-bezier(0.45, 0, 0.2, 1) 0.05s; }
.nav__ring-bar { transition: opacity 0.4s var(--ease) 0.35s; }
.nav__logo::before, .nav__logo::after { transition: transform 0.45s cubic-bezier(0.34, 1.5, 0.64, 1) 0.18s; }
.nav__logo::after { transition-delay: 0.28s; }
.nav.logo-off .nav__ring-track { stroke-dashoffset: 208; transition-duration: 0.3s; transition-delay: 0s; }
.nav.logo-off .nav__ring-bar { opacity: 0; transition-duration: 0.2s; transition-delay: 0s; }
.nav.logo-off .nav__logo::before, .nav.logo-off .nav__logo::after { transform: scale(0); transition: transform 0.25s var(--ease); }
.nav.logo-still .nav__logo::before, .nav.logo-still .nav__logo::after, .nav.logo-still .nav__ring-track, .nav.logo-still .nav__ring-bar { transition: none; }
.nav__arc { position: absolute; left: 0; bottom: 13px; width: 0; height: 9px; border-bottom: 2px solid var(--gold); border-radius: 0 0 50% 50% / 0 0 100% 100%; opacity: 0; pointer-events: none; transition: transform 0.45s var(--ease), width 0.45s var(--ease), opacity 0.3s; }
.nav.has-arc .nav__links a:hover, .nav.has-arc .nav__links a[aria-current="page"] { border-bottom-color: transparent; }
body:not(.menu-open) .nav.over-dark:not([data-state="bare"]) .nav__ring-track { stroke: rgba(255, 255, 255, 0.18); }

/* barra: antes de que cargue el script, la página actual ya tiene su arco (sin subrayado recto que parpadee al navegar) */
.nav__links a { position: relative; }
.nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 9px; border-bottom: 2px solid var(--gold); border-radius: 0 0 50% 50% / 0 0 100% 100%; pointer-events: none; }
.nav.has-arc .nav__links a[aria-current="page"]::after { content: none; }

/* historia: años en serif, una punta dorada que sigue la lectura y un marco que cierra en la foto de hoy */
.step-h__when { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(44px, 5.2vw, 76px); line-height: 1; letter-spacing: -0.01em; color: var(--navy); -webkit-text-stroke: 0; font-variant-numeric: lining-nums; }
.step-h__when small { display: block; margin-bottom: 8px; font-family: var(--sans); font-size: 12px; font-weight: 700; font-style: normal; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); }
.step-h--today .step-h__when { font-style: italic; }
.step-h--thesis .step-h__when { font-family: var(--sans); font-weight: 700; line-height: 1.2; }
.stair__tip { fill: var(--gold); opacity: 0; filter: drop-shadow(0 0 6px rgba(192, 177, 12, 0.85)); transition: opacity 0.3s; }
.stair__tip.is-on { opacity: 1; }
.step-h::before { transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease); }
.step-h.is-reached::before { box-shadow: 0 0 0 9px rgba(192, 177, 12, 0.24); transform: scale(1.2); }
@media (max-width: 900px) { .step-h--today .curtain { outline: 2px solid var(--gold); outline-offset: 10px; } }

/* ---------------------------------------------------------------- contenido institucional (reunión del 1/10): sobre nosotros, misión, cifras, archivo, comisión directiva, correo oficial */
/* correo oficial: tarjeta destacada (pie, Contacto, Cómo asociarse). info@ atiende todo */
.mail-card { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 8px 20px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--navy); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s, background-color 0.3s; }
.mail-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(11, 42, 82, 0.14); border-color: rgba(192, 177, 12, 0.75); }
.mail-card > svg { width: 44px; height: 44px; margin: 0; padding: 11px; border-radius: 50%; background: var(--gold); color: var(--navy); flex: none; }
.mail-card__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; text-align: left; }
.mail-card small { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.mail-card b { font-family: var(--sans); font-size: clamp(13px, 3.55vw, 17px); font-weight: 700; color: var(--navy); overflow-wrap: anywhere; }
.footer .mail-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 8px 10px; width: 100%; max-width: 360px; margin: 6px 0 0; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.24); color: #fff; font-size: inherit; }
.footer .mail-card > svg { width: 36px; height: 36px; padding: 9px; }
.footer .mail-card__txt { display: contents; }
.footer .mail-card small { grid-column: 2; grid-row: 1; color: var(--gold); }
.footer .mail-card b { grid-column: 1 / -1; grid-row: 2; font-size: clamp(13px, 1.3vw, 15.5px); color: #fff; }
.footer .mail-card:hover { background: rgba(255, 255, 255, 0.13); border-color: var(--gold); box-shadow: none; }
.dl .mail-card { align-self: flex-start; margin: 2px 0; }
/* angosto: el ícono y el rótulo arriba y el correo abajo, entero (en una sola línea no entra en 320px) */
@media (max-width: 560px) {
  .mail-card, .dl a.mail-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 6px 10px; width: 100%; padding: 10px 14px 12px 10px; border-radius: 18px; }
  .mail-card > svg { width: 40px; height: 40px; padding: 10px; }
  .mail-card__txt { display: contents; }
  .mail-card small { grid-column: 2; grid-row: 1; }
  .mail-card b { grid-column: 1 / -1; grid-row: 2; padding-left: 4px; font-size: clamp(13px, 3.6vw, 16px); }
}

/* sobre nosotros: el párrafo del Polo en serif grande y el propósito con un filete dorado */
.about { position: relative; overflow: hidden; }
.about__grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.about h2 { font-size: clamp(34px, 4.6vw, 64px); }
.about__main { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(23px, 2.6vw, 37px); line-height: 1.3; letter-spacing: -0.01em; color: var(--navy); text-wrap: pretty; }
.about__purpose { margin-top: 30px; padding-left: 22px; border-left: 3px solid var(--gold); max-width: 58ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; color: var(--muted); }
@media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; } }

/* misión: la frase como cita grande (serif cursiva, comilla dorada) y los objetivos como filas con numeral hueco */
.mision { position: relative; overflow: hidden; }
.mision .arc-bg { opacity: 0.45; }
.mision__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 7vw, 120px); align-items: start; }
.mision__lead { position: sticky; top: calc(var(--nav-h) + 32px); }
.mision__lead .head { margin-bottom: clamp(24px, 3vw, 40px); }
.mision__cita { margin: 0; padding-top: 24px; border-top: 1px solid rgba(192, 177, 12, 0.7); }
.mision__cita .eyebrow, .mision__objs > .eyebrow { display: block; margin-bottom: 16px; }
.mision__cita blockquote { margin: 0; font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: clamp(22px, 2.3vw, 31px); line-height: 1.34; color: var(--navy); text-wrap: pretty; }
.mision__cita blockquote::before { content: "\201C"; display: block; height: 0.55em; margin-bottom: 0.1em; font-size: 2.4em; line-height: 1; font-style: normal; color: var(--gold); }
.list--obj li { grid-template-columns: 76px minmax(0, 1fr); align-items: center; padding: 24px 0; transition: padding-left 0.45s var(--ease); }
.list--obj li b { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-variant-numeric: lining-nums; font-size: 36px; font-weight: 700; letter-spacing: 0; color: var(--gold-ink); transition: color 0.4s; }
.list--obj li span { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: var(--ink); }
.list--anim.list--obj li:hover { padding-left: 10px; }
.list--anim.list--obj li:hover b { color: var(--blue); }
@media (max-width: 900px) { .mision__grid { grid-template-columns: 1fr; } .mision__lead { position: static; } }
@media (max-width: 767px) { .about, .numeros, .stair { padding: clamp(44px, 7vw, 84px) 0; } .list--obj li { grid-template-columns: 58px minmax(0, 1fr); } .list--obj li b { font-size: 30px; } }

/* El PEP en números: la infografía del Polo con trazos dorados sobre azul noche; las cifras en serif */
.numeros { position: relative; overflow: hidden; background-color: var(--navy); background-image: radial-gradient(60% 70% at 100% 0%, rgba(192, 177, 12, 0.16), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(0, 81, 147, 0.5), transparent 70%); color: #fff; }
.numeros h2 { color: #fff; max-width: none; }
.numeros .eyebrow { color: var(--gold); }
.numeros .head { margin-bottom: clamp(20px, 3vw, 36px); }
.num { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.num b { display: block; font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: var(--gold); font-variant-numeric: lining-nums; }
.num__lab { font-family: var(--sans); font-size: clamp(14px, 1.3vw, 17px); font-weight: 600; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.9); }
.num__mas { font-style: normal; font-size: 0.66em; margin-right: 0.1em; vertical-align: 0.18em; color: var(--gold); }
.numeros__top { display: flex; justify-content: center; align-items: flex-end; gap: clamp(28px, 10vw, 150px); }
.num__box { position: relative; width: clamp(150px, 15vw, 190px); color: var(--gold); }
.num__box svg { display: block; width: 100%; height: auto; }
.num--anios .num__box { width: clamp(168px, 17vw, 220px); }
.num--cal .num__box b { position: absolute; left: 0; right: 0; top: 56%; transform: translateY(-50%); text-align: center; font-size: clamp(32px, 3.4vw, 44px); }
.num--anios .num__box b { position: absolute; left: 0; right: 0; top: 60%; transform: translateY(-50%); display: flex; justify-content: center; align-items: baseline; gap: 6px; font-size: clamp(38px, 4.2vw, 54px); }
.num--anios small { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.numeros__band { display: grid; grid-template-columns: clamp(84px, 9vw, 128px) minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: clamp(16px, 3vw, 48px); margin-top: clamp(20px, 2.4vw, 32px); padding: clamp(22px, 3vw, 38px) clamp(20px, 4vw, 60px); border-radius: 20px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.num__ico { width: 100%; max-width: 112px; justify-self: center; color: var(--gold); }
.num--main b { font-size: clamp(54px, 6.2vw, 88px); }
.num__partes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.num__partes li { display: flex; align-items: baseline; gap: 14px; }
.num__partes b { min-width: 1.3em; font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-size: clamp(30px, 3.2vw, 44px); font-weight: 700; line-height: 1; text-align: right; color: var(--gold); font-variant-numeric: lining-nums; }
.num__partes li > span { font-family: var(--sans); font-size: clamp(16px, 1.5vw, 20px); font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.numeros__band--tres { grid-template-columns: clamp(84px, 9vw, 128px) repeat(3, minmax(0, 1fr)); }
.numeros__band--tres .num b { font-size: clamp(34px, 4.3vw, 60px); }
@media (max-width: 767px) {
  .numeros__top { gap: 22px; align-items: flex-start; }
  .num__box, .num--anios .num__box { width: min(150px, 38vw); }
  .num--cal .num__box b { font-size: 31px; }
  .num--anios .num__box b { font-size: 36px; }
  .numeros__band, .numeros__band--tres { grid-template-columns: 64px minmax(0, 1fr); row-gap: 18px; padding: 22px 20px; }
  .num__ico { max-width: 64px; }
  .num--main { align-items: flex-start; text-align: left; }
  .num--main b { font-size: 52px; }
  .num__partes { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .num__partes li { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
  .num__partes b { min-width: 0; text-align: center; font-size: 34px; }
  .num__partes li > span { font-size: 14px; }
  .numeros__band--tres .num { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 16px; text-align: left; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .numeros__band--tres .num b { flex: none; min-width: 6.6ch; font-size: 38px; }
  .numeros__band--tres .num__lab { font-size: 15px; }
  .numeros__band--tres .num__ico { grid-column: 1 / -1; justify-self: start; }
}

/* nuestra historia: el archivo del Polo, una foto grande y cuatro chicas, con año y epígrafe */
.archivo { margin-top: clamp(56px, 8vw, 120px); }
.archivo > .eyebrow { margin-bottom: 18px; }
.archivo__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 20px); }
.archivo__f { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--cream); }
.archivo__f--grande { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.archivo__f img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92); transition: transform 1.1s var(--ease), filter 0.6s; }
.archivo__f:hover img { transform: scale(1.05); filter: saturate(1.05); }
.archivo__f figcaption { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 2px; padding: 34px 14px 12px; background: linear-gradient(180deg, rgba(11, 42, 82, 0), rgba(11, 42, 82, 0.82)); color: #fff; font-size: 12.5px; line-height: 1.3; }
.archivo__f figcaption b { font-family: "Playfair Display", Georgia, serif; font-size: 20px; font-style: italic; line-height: 1; color: var(--gold); }
.archivo__f--grande figcaption { padding: 56px 22px 18px; font-size: 15px; }
.archivo__f--grande figcaption b { font-size: 30px; }
@media (max-width: 560px) {
  .archivo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archivo__f--grande { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .archivo__f figcaption { padding: 28px 10px 9px; }
}

/* comisión directiva: la mesa en cuatro tarjetas con retrato (foto o iniciales), los vocales en filas, y el equipo del Polo aparte */
.autoridades .head { margin-bottom: clamp(32px, 5vw, 56px); }
.board { display: grid; gap: clamp(28px, 4vw, 52px); }
.board__mesa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); align-items: start; }
@media (min-width: 901px) { .board__mesa .person:nth-child(even) { margin-top: 38px; } }
.person { position: relative; }
.person__photo { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate; border-radius: 18px; background: radial-gradient(120% 90% at 18% 0%, #14508f 0%, var(--navy) 64%); box-shadow: 0 22px 38px -26px rgba(11, 42, 82, 0.7); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.person__photo::before, .person__photo::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; transition: transform 1.1s var(--ease); }
.person__photo::before { inset: -34% -20% auto auto; width: 88%; aspect-ratio: 1; border: 2px solid rgba(192, 177, 12, 0.5); border-left-color: transparent; border-bottom-color: transparent; transform: rotate(-24deg); }
.person__photo::after { inset: auto auto -30% -26%; width: 74%; aspect-ratio: 1; border: 2px solid rgba(255, 255, 255, 0.22); border-right-color: transparent; border-top-color: transparent; transform: rotate(10deg); }
.person__photo i { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: clamp(54px, 6vw, 84px); line-height: 1; letter-spacing: 0.02em; color: var(--gold); }
.person__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.person__photo[data-cms-filled] > i { display: none; } /* a photo from the media library replaces the initials, with the same framing */
.person__logo { position: absolute; right: 10px; bottom: 10px; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 8px 18px rgba(11, 42, 82, 0.32); }
.person__logo img { width: 100%; height: 100%; object-fit: contain; }
.person__txt { padding-top: 14px; }
.person small { display: block; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.person b { display: block; margin-top: 4px; font-family: var(--sans); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.2; color: var(--navy); }
.person__txt > span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--muted); }
.person:hover .person__photo { transform: translateY(-6px); box-shadow: 0 30px 44px -26px rgba(11, 42, 82, 0.8); }
.person:hover .person__photo::before { transform: rotate(150deg); }
.person:hover .person__photo::after { transform: rotate(-120deg); }
.board__vocales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); }
.board__group h3 { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(192, 177, 12, 0.6); font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); }
.board__pair { display: grid; gap: 14px; }
.person--fila { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: border-color 0.3s, box-shadow 0.4s var(--ease); }
.person--fila:hover { border-color: rgba(192, 177, 12, 0.7); box-shadow: 0 16px 30px -22px rgba(11, 42, 82, 0.5); }
.person--fila .person__photo { aspect-ratio: 1; border-radius: 14px; box-shadow: none; }
.person--fila .person__photo i { align-self: start; margin-top: 16px; font-size: 30px; }
.person--fila .person__logo { right: 4px; bottom: 4px; width: 32px; height: 32px; border-width: 2px; }
.person--fila .person__txt { padding-top: 0; }
.person--fila:hover .person__photo { transform: none; box-shadow: none; }
.board-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(32px, 4vw, 56px); }
.board__col h3 { font-size: clamp(20px, 2vw, 26px); }
.board__col .chip { margin-top: 10px; }
.board__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.board__list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.board__list li b { font-family: var(--sans); font-size: 16px; color: var(--navy); }
.board__list li span { font-size: 14px; color: var(--muted); }
.board__list--honor { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.board__list--honor li { display: block; font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--navy); }
.polo-team { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(40px, 6vw, 84px); padding: clamp(28px, 4vw, 54px); border-radius: 26px; background-color: var(--navy); background-image: radial-gradient(70% 90% at 100% 0%, rgba(192, 177, 12, 0.2), transparent 70%); color: #fff; }
.polo-team::before { content: ""; position: absolute; right: -90px; bottom: -150px; width: 360px; height: 360px; border-radius: 50%; border: 2px solid rgba(192, 177, 12, 0.35); border-right-color: transparent; border-top-color: transparent; transform: rotate(18deg); pointer-events: none; }
.polo-team .eyebrow { color: var(--gold); }
.polo-team h3 { margin-top: 10px; font-size: clamp(28px, 3.4vw, 44px); color: #fff; }
.polo-team__people { position: relative; display: flex; flex-wrap: wrap; gap: 26px 40px; padding: 10px; }
.person--equipo { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 22px; align-items: center; flex: 1 1 280px; }
.person--equipo .person__photo { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 3px var(--gold), 0 0 0 10px rgba(192, 177, 12, 0.18); }
.person--equipo .person__photo i { font-size: 40px; }
.person--equipo .person__txt { padding-top: 0; }
.person--equipo small { color: var(--gold); }
.person--equipo b { margin-top: 6px; font-size: clamp(20px, 2vw, 26px); color: #fff; }
.person--equipo .person__txt > span { color: rgba(255, 255, 255, 0.72); }
/* Director Ejecutivo: un escalón propio entre la comisión y el equipo del Polo (comisión, director, coordinadora) */
.director-tier { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 56px); }
.person--director { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 26px; align-items: center; width: min(100%, 560px); padding: 22px 34px 22px 22px; border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: 22px; background: #fff; box-shadow: 0 22px 40px -30px rgba(11, 42, 82, 0.6); }
.person--director .person__photo { aspect-ratio: 1; border-radius: 24px; }
.person--director .person__photo i { align-self: start; margin-top: 22px; font-size: 42px; }
.person--director .person__logo { right: 6px; bottom: 6px; width: 38px; height: 38px; border-width: 2px; }
.person--director .person__txt { padding-top: 0; }
.person--director b { margin-top: 6px; font-size: clamp(20px, 2vw, 26px); }
@media (max-width: 900px) {
  .board__mesa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board__vocales, .board-more { grid-template-columns: 1fr; }
  .polo-team { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .board__list--honor { grid-template-columns: 1fr; }
  .person--fila { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .person--equipo { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
  .person--director { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 16px 18px 16px 16px; }
  .person--director .person__photo { border-radius: 18px; }
  .person--director .person__photo i { margin-top: 14px; font-size: 32px; }
  .person--director .person__logo { width: 32px; height: 32px; }
  .person__logo { width: 44px; height: 44px; right: 8px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .person__photo, .person__photo::before, .person__photo::after, .archivo__f img, .mail-card { transition: none; }
  .person:hover .person__photo, .archivo__f:hover img, .mail-card:hover { transform: none; }
}

/* campaña solidaria: ficha de solo nombre (sin desplegable, nada que mostrar todavía) */
.act--nombre .act__sum { cursor: default; }
.act--nombre h3 { grid-row: 1 / 3; align-self: center; margin: 0; }
.act--nombre .act__sum:hover h3 { color: var(--navy); }

/* congreso.html, justo debajo del hero: objetivos (numerados) y a quiénes está dirigido (en una tarjeta azul) */
.cong-obj__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.cong-objetivos h2 { margin: 12px 0 clamp(18px, 2.4vw, 30px); font-size: clamp(30px, 3.6vw, 48px); }
.cong-obj__list { list-style: none; margin: 0; padding: 0; display: grid; }
.cong-obj__list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); font-size: clamp(16px, 1.35vw, 18px); line-height: 1.55; color: var(--ink); }
.cong-obj__list li b { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-variant-numeric: lining-nums; font-size: 34px; font-weight: 700; line-height: 1; color: var(--gold-ink); }
.cong-obj__col--pub { padding: clamp(26px, 3.4vw, 44px); border-radius: 24px; background-color: var(--navy); background-image: radial-gradient(80% 60% at 100% 0%, rgba(192, 177, 12, 0.18), transparent 70%); color: #fff; }
.cong-obj__col--pub .eyebrow { color: var(--gold); }
.cong-obj__col--pub h2 { color: #fff; }
.cong-obj__col--pub .cong-obj__list li { grid-template-columns: 48px minmax(0, 1fr); align-items: start; border-top-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.92); }
.cong-obj__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(192, 177, 12, 0.18); color: var(--gold); }
.cong-obj__ico svg { width: 22px; height: 22px; }
@media (max-width: 900px) { .cong-obj__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cong-obj__list li { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; } .cong-obj__list li b { font-size: 29px; } }

/* ---------------------------------------------------------------- inscripciones: cuatro pasos sobre un arco dorado y una credencial que se arma sola */
/* (T6) +70 en vez de +64: en celular el sub-nav pegajoso mide ~67px, así que el ancla quedaba
   3px por debajo de su borde inferior (dentro de tolerancia del chequeo, pero de más); con +70
   el tope de la sección despeja nav + sub-nav con margen real. El relleno propio de la sección
   (lo que se ve como "banda vacía" antes del texto) se recorta aparte, ver el bloque T6 al final. */
.insc { --insc-err: #a3322b; scroll-margin-top: calc(var(--nav-h) + 70px); }
.insc [hidden] { display: none !important; }
.insc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(28px, 4vw, 64px); align-items: start; }
.insc-flow { padding: clamp(20px, 3vw, 40px); scroll-margin-top: calc(var(--nav-h) + 64px); }
.insc__side { position: sticky; top: calc(var(--nav-h) + 76px); }
/* sin script: un formulario completo, los cuatro pasos uno debajo del otro */
.insc:not(.is-live) .insc__grid { grid-template-columns: minmax(0, 860px); }
.insc:not(.is-live) .insc__side, .insc:not(.is-live) .insc-head, .insc:not(.is-live) .insc-strip { display: none; }
.insc:not(.is-live) .insc-step + .insc-step { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); }
.insc.is-live .insc-step__n { display: none; }
.insc.is-live .insc-step { animation: inscIn 0.5s var(--ease) both; }
@keyframes inscIn { from { opacity: 0; transform: translateY(12px); } }

/* arco de pasos: semicírculo dorado, nodos como los pines del cronograma */
.insc-head { padding: 28px 0 54px; }
.insc-arc { position: relative; width: min(280px, 100% - 112px); margin-inline: auto; aspect-ratio: 200 / 104; }
.insc-arc__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.insc-arc__svg path { fill: none; stroke-linecap: round; }
.insc-arc__track { stroke: var(--line); stroke-width: 2; }
.insc-arc__bar { stroke: var(--gold); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.8s var(--ease); }
.insc-arc__nodes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.insc-arc__node { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); }
.insc-arc__node button { position: relative; display: block; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; font: inherit; cursor: pointer; }
.insc-arc__node button:disabled { cursor: default; }
.insc-arc__node button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.insc-arc__dot { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1.5px solid rgba(11, 42, 82, 0.22); color: var(--muted); font-family: "Playfair Display", Georgia, serif; font-size: 17px; font-weight: 700; transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s, color 0.4s; }
.insc-arc__dot i { font-style: italic; line-height: 1; }
.insc-arc__dot svg { display: none; width: 16px; height: 16px; stroke-width: 2.6; }
.insc-arc__node.is-current .insc-arc__dot { background: var(--navy); border: 3px solid var(--gold); color: #fff; box-shadow: 0 0 0 6px var(--gold-soft); }
.insc-arc__node.is-done .insc-arc__dot { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.insc-arc__node.is-done .insc-arc__dot i { display: none; }
.insc-arc__node.is-done .insc-arc__dot svg { display: block; }
.insc-arc__node button:not(:disabled):hover .insc-arc__dot { box-shadow: 0 0 0 6px var(--gold-soft); }
.insc-arc__lab { position: absolute; left: 50%; transform: translateX(-50%); padding-left: 0.14em; white-space: nowrap; font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.insc-arc__node--up .insc-arc__lab { bottom: calc(100% + 8px); }
.insc-arc__node--down .insc-arc__lab { top: calc(100% + 8px); }
.insc-arc__node.is-current .insc-arc__lab { color: var(--navy); }
.insc-arc__node.is-done .insc-arc__lab { color: var(--gold-ink); }
.insc-arc__now { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: baseline; gap: 6px; color: var(--navy); white-space: nowrap; }
.insc-arc__now b { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700; font-size: clamp(40px, 4.4vw, 54px); line-height: 0.8; }
.insc-arc__now span { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* títulos, notas y errores */
.insc-step__t { display: flex; align-items: baseline; gap: 12px; font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 18px; outline: none; }
.insc-step__n { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700; font-size: 1.15em; letter-spacing: 0; color: var(--gold-ink); }
.insc-lead { color: var(--muted); font-size: 15.5px; max-width: 60ch; margin-bottom: 18px; }
.insc-note { display: block; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.insc-err { display: block; font-size: 13px; line-height: 1.45; color: var(--insc-err); font-weight: 500; }
.insc-err a { color: inherit; text-decoration: underline; }
.insc-linkbtn { border: 0; background: none; padding: 2px 0; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--blue); cursor: pointer; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.insc-linkbtn:hover { color: var(--navy); }
.insc-flow :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.insc-flow [tabindex="-1"]:focus-visible { outline: none; }

/* campos */
.insc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.insc-f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.insc-f > label { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.insc-f > label span { text-transform: none; letter-spacing: 0.02em; font-weight: 600; color: var(--muted); }
.insc-f input, .insc-f select { width: 100%; min-width: 0; height: 50px; padding: 0 16px; font: 15px/1.4 var(--body); color: var(--ink); border: 1px solid rgba(11, 42, 82, 0.22); border-radius: 10px; background: #fff; }
.insc-f input::placeholder { color: rgba(91, 100, 116, 0.75); }
.insc-f input:focus, .insc-f select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.insc-f [aria-invalid="true"] { border-color: var(--insc-err); box-shadow: 0 0 0 3px rgba(163, 50, 43, 0.1); }
.insc-check { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 8px; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--navy); cursor: pointer; }
.insc-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.insc-check i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid rgba(11, 42, 82, 0.3); background: #fff; transition: background-color 0.25s, border-color 0.25s; }
.insc-check input:checked + i { background: var(--gold); border-color: var(--gold); }
.insc-check input:checked + i::after { content: ""; width: 10px; height: 5px; border: solid var(--navy); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.insc-check input:focus-visible + i { outline: 2px solid var(--blue); outline-offset: 2px; }
.insc-solo { margin: -6px 0 16px; }

/* paso 1: filas editoriales con el pin del cronograma; la elegida se subraya con el arco de la barra */
.insc-opts { margin: 0; padding: 0; border: 0; min-width: 0; border-top: 1px solid var(--line); }
.insc-opt { border-bottom: 1px solid var(--line); transition: background-color 0.35s; }
.insc-opt:has(input:checked) { background: linear-gradient(90deg, var(--paper), rgba(250, 248, 243, 0)); }
.insc-opt__head { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 12px; cursor: pointer; border-radius: 10px; }
.insc-opt__head input { position: absolute; left: 12px; top: 50%; opacity: 0; width: 1px; height: 1px; }
.insc-opt__head:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: -2px; }
.insc-opt__pin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--gold); background: #fff; transition: background-color 0.35s, box-shadow 0.35s; }
.insc-opt__head:hover .insc-opt__pin { box-shadow: 0 0 0 5px var(--gold-soft); }
.insc-opt:has(input:checked) .insc-opt__pin { background: var(--gold); box-shadow: 0 0 0 6px var(--gold-soft); }
.insc-opt__t { position: relative; justify-self: start; font-family: var(--sans); font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--navy); letter-spacing: -0.01em; }
.insc-opt__t::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 8px; border-bottom: 2px solid var(--gold); border-radius: 0 0 50% 50% / 0 0 100% 100%; transform: scaleX(0); transition: transform 0.5s var(--ease); }
.insc-opt:has(input:checked) .insc-opt__t::after { transform: scaleX(1); }
/* el costo de la condición, a la vista antes de elegir: el título y, debajo, el valor vigente (no socios) */
.insc-opt__tx { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.insc-opt__cost { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.insc-opt__more { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 6px 12px 22px 48px; }
.insc-opt:has(input:checked) .insc-opt__more { display: grid; }
.insc-opt__txt { grid-column: 1 / -1; font-size: 14.5px; color: var(--muted); }
.insc-opt__txt .link { font-size: 14px; margin-left: 4px; }

/* aviso del acceso con cuenta: por qué no hay colegio y, si es un correo que no es de socio, las dos salidas */
.insc-aviso { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 14px 16px; border-radius: 14px; background: var(--paper); }
.insc-aviso p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.insc-aviso .insc-aviso__t { color: var(--insc-err); font-weight: 500; overflow-wrap: anywhere; }
.insc-aviso__alt { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
.insc-linkbtn--pad { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

/* (P1.3) primero la cuenta: los tres accesos en línea (los mismos botones y campos que la hoja de ingreso), un lugar reservado
   mientras se sabe quién es, la cuenta con la que se entró y lo que la base dice de ella */
.insc { --auth-err: var(--insc-err); }
.insc-ingreso { display: flex; flex-direction: column; gap: 16px; max-width: 540px; }
.insc-valores { list-style: none; margin: 0 0 2px; padding: 0; border-top: 1px solid var(--line); }
.insc-valores li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 18px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.insc-valores span { flex: 1 1 220px; }
.insc-valores b { font-family: var(--sans); font-size: 14.5px; font-weight: 800; color: var(--navy); }
.insc-guia { margin: 0; padding: 14px 16px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: var(--paper); font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.insc-guia b { font-family: var(--sans); color: var(--navy); }
.insc-ingreso__mail { display: flex; flex-direction: column; gap: 14px; }
.insc-ingreso .auth-links { margin-top: -4px; }
.insc-ingreso__info { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--gold-soft); font-size: 14.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.insc-cargando { display: grid; align-content: start; gap: 14px; min-height: 280px; }
.insc-cargando i { display: block; height: 52px; border-radius: 999px; background: linear-gradient(90deg, var(--paper) 30%, rgba(250, 248, 243, 0.35) 50%, var(--paper) 70%); background-size: 220% 100%; animation: inscSkel 1.6s ease-in-out infinite; }
.insc-cargando i:first-child { width: 72%; height: 20px; border-radius: 8px; }
.insc-cargando i:last-child { width: 46%; }
@keyframes inscSkel { from { background-position: 100% 0; } to { background-position: -120% 0; } }
.insc-yo { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; margin: 0 0 26px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; animation: inscIn 0.5s var(--ease) both; }
.insc-yo__av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--gold); font-family: "Playfair Display", Georgia, serif; font-size: 20px; font-style: italic; font-weight: 700; }
.insc-yo__txt { display: flex; flex-direction: column; min-width: 0; }
.insc-yo__txt small { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.insc-yo__txt b { font-family: var(--sans); font-size: 15px; color: var(--navy); overflow-wrap: anywhere; }
.insc-yo__cambiar { font-size: 13.5px; }
.insc-yo__quien, .insc-yo__cupo, .insc-yo__mas, .insc-yo__staff { grid-column: 2 / -1; margin: 0; }
.insc-yo__quien { margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.insc-yo__quien b { font-family: var(--sans); color: var(--navy); }
.insc-yo__cupo { margin-top: 2px; }
.insc-yo__mas { margin-top: 4px; font-size: 14px; color: var(--muted); }
.insc-yo__staff { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; }
.insc-yo__staff:hover { color: var(--navy); text-decoration-color: var(--gold); }
.insc-ir { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(22px, 3vw, 30px); border-radius: 18px; background: radial-gradient(120% 90% at 100% 0%, #15427a 0%, var(--navy) 62%); color: #fff; }
.insc-ir .eyebrow { color: var(--gold); }
.insc-ir__t { margin: 0; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; color: #fff; }
.insc-ir__txt { margin: 0 0 8px; max-width: 52ch; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.84); }
.insc-socio-ok { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; border-radius: 16px; background: var(--gold-soft); }
.insc-socio-ok small { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.insc-socio-ok b { font-family: var(--sans); font-size: clamp(20px, 2vw, 24px); font-weight: 800; color: var(--navy); }
.insc-socio-ok__txt { margin: 4px 0 0; max-width: 56ch; font-size: 14.5px; color: var(--muted); }
.insc-pregunta { display: flex; flex-direction: column; gap: 18px; }
.insc-aviso--cambiar p { color: var(--ink); }
.insc-aviso--cambiar b { font-family: var(--sans); color: var(--navy); }
/* paso 4, no socios: cómo pagar. Mercado Pago se ve pero no se elige hasta que el Polo lo habilite */
.insc-metodos { display: grid; gap: 10px; min-width: 0; margin: 18px 0 16px; padding: 0; border: 0; }
.insc-metodos legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--navy); }
.insc-metodo { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; min-height: 58px; padding: 12px 16px; border: 1.5px solid rgba(11, 42, 82, 0.18); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s; }
.insc-metodo input { position: absolute; left: 16px; top: 50%; width: 1px; height: 1px; opacity: 0; }
.insc-metodo:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.insc-metodo:has(input:checked) .insc-opt__pin { background: var(--gold); box-shadow: 0 0 0 5px var(--gold-soft); }
.insc-metodo:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.insc-metodo__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.insc-metodo__tx b { font-family: var(--sans); font-size: 15.5px; font-weight: 800; color: var(--navy); }
.insc-metodo__tx small { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.insc-metodo__tx .insc-metodo__ahorro { font-weight: 700; color: var(--gold-ink); }
.insc-metodo--off { border-style: dashed; background: transparent; cursor: not-allowed; }
.insc-metodo--off .insc-metodo__tx b { color: var(--muted); }
.insc-metodo--off .insc-opt__pin { border-color: rgba(11, 42, 82, 0.2); }
.insc-nav__err { flex-basis: 100%; margin: 0; }

/* paso 1: los datos propios de cada condición (escuela pública: escuela, localidad y región opcional; colegio
   no socio: institución, localidad y provincia). Aparecen recién con la cuenta adentro. */
.insc-datos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; }
.insc-f[data-otro] { grid-column: 1 / -1; }

/* paso 2: personas y botón para sumar */
.insc-person { position: relative; margin: 26px 0 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.insc-person__t { float: left; width: 100%; padding: 0; margin-bottom: 14px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); }
.insc-person .insc-grid { clear: both; }
.insc-person__x { position: absolute; top: 14px; right: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; border: 0; background: none; font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.insc-person__x svg { width: 14px; height: 14px; }
.insc-person__x:hover { color: var(--navy); }
.insc-add { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 24px; }
.insc-add__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--blue); cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s; }
.insc-add__btn svg { width: 16px; height: 16px; }
.insc-add__btn:hover { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }

/* paso 4: resumen por paso con numerales en serif */
.insc-sum { border-top: 1px solid var(--line); }
.insc-sum__g { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.insc-sum__n { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700; font-size: 34px; line-height: 1; color: var(--gold-ink); }
.insc-sum__b h4 { margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy); }
.insc-sum__b p { font-size: 15px; overflow-wrap: anywhere; }
.insc-sum__b p b { font-family: var(--sans); color: var(--navy); }
.insc-sum__m { margin-top: 4px; font-size: 14px !important; color: var(--muted); }
.insc-sum__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.insc-sum__list b { display: block; font-family: var(--sans); font-size: 15px; color: var(--navy); }
.insc-sum__list span { display: block; font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.insc-sum__edit { align-self: start; margin-top: 2px; }
.insc-sum__ev + .insc-sum__ev { margin-top: 16px; }
.insc-sum__ev > b { display: block; margin-bottom: 8px; font-family: var(--sans); font-size: 15px; font-weight: 800; color: var(--navy); }
.insc-sum__ev ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.insc-sum__ev li { display: grid; gap: 2px; padding-left: 12px; border-left: 2px solid var(--gold); }
.insc-sum__ev strong { font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--ink); }
.insc-sum__ev span { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }

/* paso 4, no socios (B3.4): pago por transferencia. Mismo fondo que .insc-draft, para que se lea
   como un aviso aparte del resumen, no como un campo más del formulario. */
.insc-pago { margin-top: 24px; padding: 20px; border-radius: 14px; background: var(--paper); }
.insc-pago__t { margin: 0 0 8px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); }
.insc-pago__txt { margin: 0; font-size: 14.5px; color: var(--muted); max-width: 60ch; }
.insc-pago__valor { margin: 0 0 10px; font-size: 15.5px; color: var(--ink); }
.insc-pago__valor b { font-family: var(--sans); color: var(--navy); }
.insc-pago__total { font-family: var(--sans); font-weight: 800; color: var(--navy); }
/* filas monto/titular/CBU/alias: solo aparecen cuando el Polo manda los datos reales (PAGO_CUENTA en build.py) */
.insc-pago__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 14px 0 0; }
.insc-pago__datos dt { margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); }
.insc-pago__datos dd { margin: 2px 0 0; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.insc-pago .insc-f { margin-top: 16px; }
/* el input de archivo se deja visible (no es un radio/checkbox para disfrazar): se estiliza su botón
   nativo ::file-selector-button para que combine con el resto de los campos. El tamaño de letra
   sigue siendo el de .insc-f input (15px, 16px en celular): no se toca acá para no perder el piso
   de 16px que evita el zoom de Safari (T7, ver tools/mobile_audit.mjs INPUT_FONT_CHECK). */
.insc-f--file input[type="file"] { height: auto; min-height: 44px; padding: 10px 14px; cursor: pointer; }
.insc-f--file input[type="file"]::file-selector-button { margin-right: 14px; padding: 10px 16px; min-height: 44px; border: 0; border-radius: 8px; background: var(--navy); color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color 0.3s; }
.insc-f--file input[type="file"]::file-selector-button:hover { background: var(--blue); }
.insc-comprobante { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0; font-size: 14px; color: var(--ink); }
.insc-comprobante span { overflow-wrap: anywhere; }

/* paso 3: actividades de cada persona. Cada actividad es una tarjeta con su día, horario y lugar y un sí/no
   (nada viene en «Sí»); con más de una persona, cada una tiene su sección con el nombre arriba. */
.insc-evp + .insc-evp { margin-top: 32px; }
.insc-evp__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.insc-evp:first-child .insc-evp__t { padding-top: 0; border-top: 0; }
.insc-evp--solo .insc-evp__t { display: none; }
.insc-evp__t span { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); }
.insc-evp__t b { font-family: var(--sans); font-size: 18px; font-weight: 800; color: var(--navy); overflow-wrap: anywhere; }
.insc-evp__c { margin-left: auto; font-family: var(--sans); font-size: 12.5px; font-style: normal; font-weight: 700; color: var(--muted); }
.insc-evp__cards { display: grid; gap: 14px; }
.insc-evp__warn { display: grid; gap: 6px; margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; background: var(--gold-soft); font-size: 14px; line-height: 1.5; color: var(--ink); }
.insc-evp__err { margin-top: 10px; }
.insc-ev { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.insc-ev__head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; }
.insc-ev__date { display: flex; flex-direction: column; align-items: center; padding: 8px 0 7px; border-radius: 12px; background: var(--navy); color: #fff; }
.insc-ev__date b { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 30px; font-weight: 700; line-height: 0.95; color: var(--gold); }
.insc-ev__date small { margin-top: 3px; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.insc-ev__txt { min-width: 0; }
.insc-ev__txt h4 { margin: 0 0 4px; font-size: 17px; color: var(--navy); }
.insc-ev__line { display: flex; align-items: flex-start; gap: 8px; margin: 5px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.insc-ev__line svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--gold-ink); }
.insc-ev__line b { font-weight: 600; color: var(--ink); }
/* el aviso del Encuentro de Educación Física: bien a la vista, para que no se anote cualquiera */
.insc-ev__alert { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border: 1.5px solid var(--insc-err); border-radius: 10px; background: #fbeceb; font-size: 14.5px; line-height: 1.45; color: #7d1f19; }
.insc-ev__alert svg { flex: none; width: 22px; height: 22px; color: var(--insc-err); }
.insc-ev__alert b { font-family: var(--sans); font-weight: 800; letter-spacing: 0.04em; }
.insc-ev__qs { display: grid; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.insc-ev__nota { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
/* sí / no: dos opciones grandes; «Sí» se pinta en dorado, «No» queda sobrio */
.insc-yn { margin: 0; padding: 0; border: 0; min-width: 0; }
.insc-yn legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font-family: var(--sans); font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--navy); }
.insc-yn__o { position: relative; display: inline-flex; margin-right: 8px; cursor: pointer; }
.insc-yn__o input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.insc-yn__o span { display: inline-flex; align-items: center; justify-content: center; min-width: 84px; min-height: 44px; padding: 0 22px; border: 1.5px solid rgba(11, 42, 82, 0.25); border-radius: 999px; background: #fff; font-family: var(--sans); font-size: 14px; font-weight: 800; color: var(--muted); transition: background-color 0.25s, border-color 0.25s, color 0.25s; }
.insc-yn__o:hover span { border-color: var(--gold); }
.insc-yn__o input:checked + span { border-color: var(--navy); background: var(--cream); color: var(--navy); }
.insc-yn__o input[value="si"]:checked + span { border-color: var(--gold); background: var(--gold); color: var(--navy); }
.insc-yn__o input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
/* paso 4: compartir los datos con los sponsors, al final del formulario */
.insc-consent { margin-top: 24px; padding: 18px 20px; border: 1.5px solid var(--gold); border-radius: 14px; background: var(--gold-soft); }
.insc-consent legend { margin-bottom: 12px; font-size: 15.5px; }

/* cupo del colegio para el viernes 12: una sola línea, sin el total */
.insc-cupo { margin: 0; font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--gold-ink); }
.insc-cupo--paso { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--gold-soft); }
/* "Mis inscripciones": enlace chico en la sección y salidas de la confirmación */
.insc__mis { margin: -6px 0 22px; }
.insc-done__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.insc-done__acciones .insc-done__again { margin-top: 0; }
/* cierre de los cambios o día del evento: el formulario cede su lugar a este mensaje */
.insc-cerrado { max-width: 720px; padding: clamp(24px, 4vw, 44px); }
.insc-cerrado h3 { margin: 8px 0 12px; font-size: clamp(26px, 3vw, 36px); outline: none; }
.insc-cerrado p { max-width: 58ch; color: var(--muted); overflow-wrap: anywhere; }

/* navegación entre pasos */
.insc-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.insc-nav__next { margin-left: auto; max-width: 100%; }
.insc-nav__back svg { transform: rotate(180deg); }
.insc-nav__back:hover svg { transform: rotate(180deg) translateX(4px); }
.insc-nav__next.is-busy { cursor: progress; }
.insc-nav__next.is-busy svg { display: none; }
.insc-nav__next.is-busy::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(11, 42, 82, 0.25); border-top-color: var(--navy); animation: inscSpin 0.8s linear infinite; }
@keyframes inscSpin { to { transform: rotate(360deg); } }
.insc-draft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 20px; padding: 12px 16px; border-radius: 12px; background: var(--gold-soft); font-size: 14.5px; color: var(--ink); }

/* la credencial */
.pass-stack { position: relative; }
.pass-ghost { position: absolute; inset: 0; border-radius: 22px; background: #17457d; border: 1px solid rgba(192, 177, 12, 0.35); opacity: 0; transition: transform 0.7s var(--ease), opacity 0.4s; }
.pass-ghost--2 { background: #245690; }
.pass-stack[data-n="1"] .pass-ghost--1, .pass-stack[data-n="2"] .pass-ghost--1 { opacity: 1; transform: translate(12px, 8px) rotate(3.5deg); }
.pass-stack[data-n="2"] .pass-ghost--2 { opacity: 1; transform: translate(24px, 18px) rotate(7deg); }
.pass { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; padding: 46px 26px 24px; overflow: hidden; border-radius: 22px; background: radial-gradient(120% 70% at 100% 0%, #15427a 0%, var(--navy) 60%); color: #fff; box-shadow: 0 30px 60px rgba(11, 42, 82, 0.28); }
/* (B3.2) "en revisión": mismo diseño con un aro dorado en vez del QR/sello de confirmada */
.pass.is-pending { box-shadow: 0 30px 60px rgba(11, 42, 82, 0.28), inset 0 0 0 2px rgba(192, 177, 12, 0.6); }
/* ranura para la cinta */
.pass::before { content: ""; position: absolute; top: 13px; left: 50%; width: 56px; height: 8px; margin-left: -28px; border-radius: 999px; background: #fff; box-shadow: inset 0 1px 2px rgba(11, 42, 82, 0.35); }
.pass .is-empty { opacity: 0.4; }
.pass__more { position: absolute; top: 12px; right: 14px; padding: 4px 10px; border-radius: 999px; background: var(--gold); color: var(--navy); font-family: var(--sans); font-size: 11.5px; font-weight: 800; }
.pass__top { display: flex; align-items: center; gap: 16px; }
.pass__seal { position: relative; flex: none; width: 52px; height: 52px; }
.pass__seal > svg:not(.pass__ring), .insc-strip__seal > svg:not(.pass__ring) { display: block; width: 100%; height: 100%; overflow: visible; }
.pass__ring { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); overflow: visible; }
.pass__ring circle { fill: none; }
.pass__ring-track { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.5; }
.pass__ring-bar { stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.8s var(--ease); }
.pass__event small { display: block; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.pass__event b { display: block; margin-top: 3px; font-family: var(--sans); font-size: 17px; font-weight: 800; line-height: 1.15; }
.pass__date { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-block: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.82); }
.pass__date b { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700; font-size: 46px; line-height: 0.85; color: var(--gold); }
.pass__who { display: flex; flex-direction: column; gap: 4px; min-height: 96px; }
.pass__who small { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.pass__who b { font-family: var(--sans); font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pass__who span { font-size: 15px; color: rgba(255, 255, 255, 0.82); overflow-wrap: anywhere; }
.pass__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pass__chip { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 999px; background: rgba(192, 177, 12, 0.22); color: var(--gold); font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pass__chip--line { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; }
.pass__ev small { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.pass__ev ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.pass__ev ul:empty { display: none; }
.pass__ev li { display: flex; gap: 12px; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, 0.92); }
.pass__ev li b { flex: none; min-width: 54px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.pass__ev p { margin: 8px 0 0; font-size: 14px; }
.pass__cupo { margin-top: -8px; font-size: 12.5px; color: rgba(255, 255, 255, 0.72); }
.pass__foot { display: flex; align-items: flex-end; gap: 16px; padding-top: 18px; border-top: 1px dashed rgba(255, 255, 255, 0.24); }
.pass__qr { display: grid; place-items: center; flex: none; width: 104px; height: 104px; border: 2px dotted rgba(255, 255, 255, 0.4); border-radius: 12px; color: rgba(255, 255, 255, 0.3); }
.pass__qr > svg { width: 32px; height: 32px; }
.pass.is-confirmed .pass__qr[role="img"] { padding: 9px; border: 0; background: #fff; }
.pass.is-confirmed .pass__qr[role="img"] > svg { width: 100%; height: 100%; animation: qrIn 0.6s var(--ease) both; }
@keyframes qrIn { from { opacity: 0; transform: scale(0.8); } }
/* "en revisión": el QR todavía no existe, un texto corto ocupa su lugar */
.pass.is-pending .pass__qr { padding: 10px; overflow: hidden; text-align: center; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, 0.78); }
.pass__id small { display: block; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.pass__id b { display: block; margin-top: 2px; font-family: var(--sans); font-size: 19px; font-weight: 800; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.pass__id span { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.72); }
/* el sello cae sobre la esquina de la credencial, donde no tapa ningún dato */
.pass__stamp { position: absolute; z-index: 2; right: -46px; bottom: -38px; width: 128px; height: 128px; opacity: 0; transform: rotate(-14deg); color: var(--gold); pointer-events: none; filter: drop-shadow(0 6px 14px rgba(11, 42, 82, 0.25)); }
.pass__stamp circle, .pass__stamp-check { fill: none; stroke: currentColor; }
.pass__stamp .pass__stamp-o { stroke-width: 3.5; fill: rgba(11, 42, 82, 0.9); }
.pass__stamp .pass__stamp-i { stroke-width: 1.5; }
.pass__stamp .pass__stamp-dot { fill: currentColor; stroke: none; }
.pass__stamp-check { stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.pass__stamp text { fill: currentColor; font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: 1.4px; }
/* (B3.2) el sello lleva dos textos curvos ("CONFIRMADA" o "EN REVISIÓN"); solo uno se ve a la vez */
.pass__stamp-txt--rev { display: none; }
.pass.is-pending + .pass__stamp .pass__stamp-txt--ok, .pass.is-pending + .pass__stamp .pass__stamp-check { display: none; }
.pass.is-pending + .pass__stamp .pass__stamp-txt--rev { display: block; }
.pass.is-confirmed + .pass__stamp, .pass.is-pending + .pass__stamp { opacity: 1; animation: stampIn 0.75s cubic-bezier(0.2, 0.9, 0.3, 1.25) 0.25s both; }
@keyframes stampIn { 0% { opacity: 0; transform: scale(1.9) rotate(-34deg); } 60% { opacity: 1; transform: scale(0.93) rotate(-12deg); } 100% { opacity: 1; transform: scale(1) rotate(-14deg); } }

/* tablet y celular: franja compacta arriba del flujo; la credencial completa aparece al confirmar */
.insc-strip { display: none; align-items: center; gap: 14px; margin-bottom: 12px; padding: 12px 16px; border-radius: 14px; background: var(--navy); color: #fff; }
.insc-strip__seal { position: relative; flex: none; width: 30px; height: 30px; }
.insc-strip__seal .pass__ring { inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); }
.insc-strip__txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.insc-strip__txt small { font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.insc-strip__txt b { font-family: var(--sans); font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insc-strip__txt b.is-empty { opacity: 0.6; }
.insc-strip__step { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }

/* confirmada */
.insc.is-done .insc-head { padding-bottom: 20px; }
.insc.is-done .insc-arc__now { display: none; }
.insc-done { animation: inscIn 0.6s var(--ease) both; }
.insc-done h3 { margin: 10px 0 14px; font-size: clamp(28px, 3vw, 40px); outline: none; }
.insc-done__id { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.insc-done__id b { display: inline-block; margin-left: 8px; padding: 5px 11px; border-radius: 8px; background: var(--navy); color: var(--gold); font-size: 15px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.insc-done__mail { margin-top: 14px; max-width: 60ch; overflow-wrap: anywhere; }
.insc-done__mail b { font-family: var(--sans); color: var(--navy); }
.insc-done__notes { list-style: none; display: grid; gap: 8px; margin: 16px 0 0; padding: 0; }
.insc-done__notes li { padding: 10px 14px; border-left: 3px solid var(--gold); background: var(--gold-soft); font-size: 14.5px; }
.insc-done__fact { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.insc-done__fact svg { width: 20px; height: 20px; flex: none; color: var(--gold-ink); }
.insc-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; margin-top: 24px; }
.mini-pass { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px; border-radius: 14px; background: var(--navy); color: #fff; animation: inscIn 0.6s var(--ease) both; animation-delay: calc(var(--i, 0) * 0.08s + 0.3s); }
.mini-pass__qr { width: 84px; height: 84px; margin-bottom: 8px; padding: 6px; border-radius: 8px; background: #fff; }
.mini-pass__qr svg { display: block; width: 100%; height: 100%; }
.mini-pass__qr:empty { border: 2px dotted rgba(255, 255, 255, 0.4); background: none; }
/* (B3.2) mini-credencial "en revisión": mismo texto corto que el QR de la credencial principal */
.mini-pass--pending .mini-pass__qr { display: flex; align-items: center; justify-content: center; padding: 4px; border: 2px dotted rgba(255, 255, 255, 0.4); background: none; text-align: center; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.75); }
.mini-pass b { font-family: var(--sans); font-size: 14px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.mini-pass span { font-size: 12.5px; color: rgba(255, 255, 255, 0.72); }
.mini-pass__ev { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mini-pass .mini-pass__ev em { padding: 3px 7px; border-radius: 7px; font-size: 10px; letter-spacing: 0.04em; line-height: 1.3; }
.mini-pass em { align-self: flex-start; margin-top: 0; padding: 4px 9px; border-radius: 999px; background: rgba(192, 177, 12, 0.22); color: var(--gold); font-family: var(--sans); font-size: 10.5px; font-weight: 700; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.insc-cal { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.insc-cal__t { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); }
.insc-cal__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.insc-done__again { margin-top: 24px; }
.insc-done .btn--sm { height: auto; min-height: 44px; }

@media (max-width: 999px) {
  .insc__grid { grid-template-columns: minmax(0, 1fr); }
  .insc__side { position: static; display: none; }
  .insc.is-live .insc-strip { display: flex; }
  .insc.is-done .insc-strip { display: none; }
  .insc.is-done .insc__side { display: block; order: -1; width: min(420px, 100%); margin-inline: auto; scroll-margin-top: calc(var(--nav-h) + 16px); }
}
@media (max-width: 560px) {
  .insc-grid, .insc-opt__more, .insc-datos, .insc-pago__datos { grid-template-columns: minmax(0, 1fr); }
  .insc-arc { width: min(250px, 100% - 104px); }
  .insc-arc__node button { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .insc-head { padding: 26px 0 48px; }
  .insc-opt__head { grid-template-columns: 22px minmax(0, 1fr); gap: 6px 12px; padding: 16px 8px; }
  .insc-opt__head .chip { grid-column: 2; justify-self: start; }
  .insc-opt__pin { align-self: start; margin-top: 2px; }
  .insc-opt__more { padding: 4px 8px 20px; }
  .insc-opt__t::after { display: none; }
  .insc-ev { padding: 16px 14px; }
  .insc-ev__head { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .insc-sum__g { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
  .insc-sum__n { font-size: 28px; }
  .insc-sum__edit { grid-column: 2; justify-self: start; }
  .insc-nav .btn { padding: 0 20px; }
  .insc-yo { grid-template-columns: 44px minmax(0, 1fr); padding: 14px; }
  .insc-yo__cambiar { grid-column: 2; justify-self: start; margin-top: -4px; }
  .insc-metodo { grid-template-columns: 18px minmax(0, 1fr); }
  .insc-metodo .chip { grid-column: 2; justify-self: start; }
  .pass { padding: 44px 20px 22px; }
  .pass__who b { font-size: 23px; }
  .pass__qr { width: 92px; height: 92px; }
  .pass__foot { gap: 14px; }
  .pass__id b { font-size: 17px; }
  .pass__stamp { width: 92px; height: 92px; right: -12px; bottom: -30px; }
}
@media (prefers-reduced-motion: reduce) {
  .insc-arc__bar, .pass__ring-bar, .pass-ghost, .insc-metodo { transition: none; }
  .insc-cargando i, .insc-yo { animation: none; }
  .pass.is-confirmed + .pass__stamp, .pass.is-pending + .pass__stamp { animation: none; opacity: 1; }
}

/* ---------------------------------------------------------------- páginas de prototipo (noindex): "Demostración" y Mis inscripciones */
.mis { --insc-err: #a3322b; padding-top: clamp(24px, 4vw, 48px); }
.mis [hidden] { display: none !important; }
.mis-aviso, .mis-entrada, .mis-vacio, .mis-reg { max-width: 860px; padding: clamp(20px, 3vw, 32px); }
.mis-aviso { margin-bottom: 24px; border-left: 4px solid var(--gold); }
.mis-aviso h3 { margin: 6px 0 8px; font-size: clamp(22px, 2.4vw, 30px); }
.mis-aviso p { max-width: 60ch; color: var(--muted); overflow-wrap: anywhere; }
.mis-t { margin-bottom: 8px; font-size: clamp(22px, 2.4vw, 30px); }
.mis-lead { margin-bottom: 18px; color: var(--muted); }
.mis-lista__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; max-width: 860px; margin-bottom: 18px; }
.mis-lista__cuenta { margin: 0; font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--navy); overflow-wrap: anywhere; }
.mis-vacio { margin-bottom: 18px; }
.mis-reg + .mis-reg { margin-top: 24px; }
.mis-reg__cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.mis-reg__cab h3 { margin: 4px 0 2px; font-size: clamp(20px, 2.2vw, 26px); outline: none; overflow-wrap: anywhere; }
.mis-reg__sub { margin: 0; font-size: 14px; color: var(--muted); }
.mis-reg__precio { margin: 0 0 6px; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--navy); }
.mis-personas { list-style: none; margin: 14px 0 0; padding: 0; }
.mis-persona { padding: 18px 0; border-top: 1px solid var(--line); }
.mis-persona.is-cancelada { opacity: 0.62; }
/* a person with a credential: on phones and tablets the credential keeps its place before the actions */
.mis-persona.has-cred { display: flex; flex-direction: column; }
.mis-persona.has-cred > .mis-persona__main { display: contents; }
.mis-persona.has-cred .mis-persona__acc, .mis-persona.has-cred .mis-slot { order: 2; }
.mis-persona.has-cred > .mis-cred { order: 1; }
/* wide screens: the card takes the page width and each credential sits open beside the person's details, as in the wizard */
@media (min-width: 1200px) {
  .mis-lista__cab, .mis-reg, .mis-aviso, .mis-vacio { max-width: none; }
  .mis-persona.has-cred { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0 48px; align-items: start; }
  .mis-persona.has-cred > .mis-persona__main { display: block; min-width: 0; }
  .mis-persona.has-cred > .mis-cred { margin-top: 0; }
  /* the seal stays on the credential's corner, inside the card and clear of the registration code */
  .mis-persona.has-cred .pass { padding-bottom: 84px; }
  .mis-persona.has-cred .pass__stamp { width: 100px; height: 100px; right: -12px; bottom: -20px; }
  .mis-persona.has-cred > .mis-cred > summary { display: none; }
}
.mis-persona__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mis-persona__nombre { font-family: var(--sans); font-size: 17px; font-weight: 800; color: var(--navy); overflow-wrap: anywhere; }
.mis-persona__datos { margin: 4px 0 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.mis-eventos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.mis-eventos li { display: grid; gap: 2px; padding-left: 12px; border-left: 2px solid var(--gold); }
.mis-eventos strong { font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--ink); }
.mis-eventos span { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.mis-persona__acc { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 8px; }
.mis-panel, .mis-nueva { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.mis-panel p { margin: 0; max-width: 56ch; }
.mis-panel__t { margin: 0 0 14px; font-family: var(--sans); font-size: 15px; font-weight: 800; color: var(--navy); }
.mis-panel__acc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mis-panel__acc .btn { min-height: 44px; }
.mis-datos { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.mis-datos .insc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mis-reg__acc { margin-top: 10px; }
.mis-historial { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--line); }
.mis-historial summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--blue); }
.mis-historial ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.mis-historial li { display: grid; grid-template-columns: 116px auto minmax(0, 1fr); gap: 4px 12px; font-size: 13.5px; }
.mis-historial time { color: var(--muted); }
.mis-historial b { font-family: var(--sans); color: var(--navy); }
.mis-historial span { overflow-wrap: anywhere; }
/* panel de sponsors: la credencial de cada persona va dentro de su fila */
.sp-credencial { max-width: 280px; margin-top: 12px; animation: none; }
.sp-lleno { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--gold-soft); color: var(--ink); }
/* Mis inscripciones: el estado del pago y la credencial plegada de cada persona (la misma de la inscripción, con el sello «confirmada» o «en revisión») */
.mis-reg__pago { margin: 0 0 12px; padding: 12px 14px; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; background: var(--gold-soft); font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.mis-cred { margin-top: 6px; }
.mis-cred summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--blue); }
.pase { max-width: 380px; margin: 8px 0 16px; }
.pass { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* sesión paralela de la tarde del 12 (Mis inscripciones y acreditación): antes de la apertura una línea; abierta, elegir entre las sesiones */
.par { margin-top: 12px; padding: 14px 16px; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; background: var(--gold-soft); }
.par p { margin: 0; }
.par__t { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.par__aviso { font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.par__vacio { margin-top: 4px; font-size: 14.5px; color: var(--muted); }
.par__elegida { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 4px; }
.par__elegida b { font-family: var(--sans); font-size: 16px; font-weight: 800; color: var(--navy); }
.par__elegida span { font-size: 14px; color: var(--muted); }
.par__panel { margin-top: 10px; padding: 14px; background: #fff; }
.par__ops { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.par-op { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border: 1.5px solid rgba(11, 42, 82, 0.25); border-radius: 12px; background: #fff; cursor: pointer; }
.par-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.par-op::before { content: ""; flex: none; width: 20px; height: 20px; border: 2px solid rgba(11, 42, 82, 0.4); border-radius: 50%; background: #fff; }
.par-op:has(input:checked) { border-color: var(--gold); background: var(--cream); }
.par-op:has(input:checked)::before { border-color: var(--navy); background: radial-gradient(circle, var(--navy) 0 45%, #fff 50%); }
.par-op:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.par-op.is-bloqueada { opacity: 0.6; cursor: not-allowed; }
.par-op__txt { display: grid; flex: 1; min-width: 0; }
.par-op__txt b { font-family: var(--sans); font-size: 15px; font-weight: 800; color: var(--navy); overflow-wrap: anywhere; }
.par-op__txt small { font-size: 13.5px; color: var(--muted); }
.par-op__chip { justify-self: start; margin-top: 6px; }
.par__err { margin-top: 10px; }
.acred-par [hidden] { display: none !important; }

/* gestión sobre datos reales (Mis inscripciones, acreditación y sponsors): lugar reservado mientras llegan la sesión y los datos, avisos, pago por transferencia y respuesta sobre los sponsors */
.gx-skel { display: grid; align-content: start; gap: 14px; max-width: 860px; min-height: 360px; }
.gx-skel i { display: block; height: 108px; border-radius: 14px; background: linear-gradient(100deg, rgba(0, 81, 147, 0.05) 30%, rgba(0, 81, 147, 0.1) 50%, rgba(0, 81, 147, 0.05) 70%) 100% 0 / 220% 100%; animation: gxSkel 1.8s ease-in-out infinite; }
.gx-skel i:first-child { height: 164px; }
@keyframes gxSkel { to { background-position: -100% 0; } }
.gx-note { max-width: 860px; padding: clamp(20px, 3vw, 32px); border-left: 4px solid var(--gold); }
.gx-note h2 { margin: 0 0 8px; font-size: clamp(22px, 2.4vw, 30px); }
.gx-note p { margin: 0; max-width: 60ch; color: var(--muted); overflow-wrap: anywhere; }
.gx-note p a { color: var(--blue); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gx-note__acc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; }
.mis-consent { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px; }
.mis-consent p { margin: 0; }
.mis-consent b { font-family: var(--sans); color: var(--navy); }
.mis-consent .mis-panel { flex: 1 1 100%; }
.mis-sponsor .mis-reg__sub { max-width: 56ch; }
.mis-pago { margin: 0 0 18px; }
.mis-pago .mis-reg__pago { margin: 0; }
.mis-metodos { margin: 4px 0 16px; }
.mis-metodos .par-op { min-height: 52px; }
.mis-persona__acc a.insc-linkbtn { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------------------------------------------------------------- panel del Polo (panel.html): solapas, listas de tarjetas, filtros, desplegables, fechas y el área de impresión */
.pn-app { max-width: 1080px; }
/* the panel is a tool: a compact header (title at section size, the account beside it) and the sections right under it */
.sec.pn { padding-top: calc(var(--nav-h) + clamp(20px, 3vw, 36px)); }
.pn-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 28px; max-width: 1080px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.pn-head__txt { min-width: 0; }
.pn-head__t { margin: 0; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; letter-spacing: -0.02em; }
.pn-head__lead { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.pn-head .pn-cab { margin: 0; }
.pn-head .pn-cab[hidden] { display: none; }
.pn-app .mis-lista__cab { max-width: none; } /* la cabecera ocupa el ancho del panel: «Salir» queda alineado con el borde de las tarjetas */
.pn-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pn-tab { min-height: 44px; padding: 0 20px; border: 1.5px solid rgba(11, 42, 82, 0.3); border-radius: 999px; background: transparent; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--navy); cursor: pointer; transition: background-color 0.25s, border-color 0.25s, color 0.25s; }
.pn-tab:hover { border-color: var(--gold); }
.pn-tab[aria-selected="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.pn-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pn-estado { margin: 0 0 18px; padding: 12px 16px; border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; background: var(--gold-soft); font-size: 14.5px; line-height: 1.5; color: var(--ink); outline: none; overflow-wrap: anywhere; }
.pn-pane { outline: none; }
.pn-t { margin: 30px 0 14px; font-size: clamp(22px, 2.4vw, 30px); outline: none; }
.pn-pane > .pn-t:first-child { margin-top: 0; }
.pn-t2 { margin: 24px 0 12px; font-size: 18px; letter-spacing: -0.01em; }
.pn-nota { margin: 0 0 14px; max-width: 70ch; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.pn-sub { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.pn-sub code, .pn-item code { padding: 1px 6px; border-radius: 6px; background: rgba(0, 81, 147, 0.08); font-size: 13px; color: var(--navy); }
.pn-lista { display: grid; gap: 12px; margin: 0 0 8px; padding: 0; list-style: none; }
.pn-item, .pn-p { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.pn-vacio { padding: 16px 18px; border: 1px dashed var(--line); border-radius: 14px; font-size: 14.5px; color: var(--muted); }
.pn-item__cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.pn-item__t { display: block; margin-top: 2px; font-family: var(--sans); font-size: 17px; font-weight: 800; color: var(--navy); overflow-wrap: anywhere; }
.pn-total { margin: 10px 0 0; font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--navy); }
.pn-gente { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.pn-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.pn-acc .btn, .pn-acciones .btn, .pn-compartir .btn, .pn-edit .btn { min-height: 44px; }
.pn-uso { font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--gold-ink); }
.pn-barra { height: 8px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: rgba(0, 81, 147, 0.1); }
.pn-barra i { display: block; height: 100%; border-radius: 99px; background: var(--gold); }
.pn-edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 14px; }
.pn-edit .insc-f { flex: 1 1 150px; max-width: 280px; }
.pn-edit--2 .insc-f { flex: 1 1 200px; max-width: none; }
.pn-filtros { margin-bottom: 8px; }
.pn-cuenta { margin: 12px 0 14px; font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--navy); }
.pn-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.pn-p__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pn-p__nombre { font-family: var(--sans); font-size: 16px; font-weight: 800; color: var(--navy); overflow-wrap: anywhere; }
.pn-p__datos { margin: 4px 0 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.pn-p__ev { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.pn-p__ev em { padding: 4px 10px; border-radius: 999px; background: rgba(0, 81, 147, 0.08); font-family: var(--sans); font-size: 12px; font-style: normal; font-weight: 700; color: var(--blue); }
.pn-p__ev .pn-p__ses { background: var(--gold-soft); color: var(--gold-ink); }
.pn-p .pn-acc { margin-top: 6px; }
.pn-p__pase:empty { display: none; }
.pn-compartir { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pn-compartir b { font-family: var(--sans); font-size: 16px; color: var(--navy); }
.pn-det { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.pn-det > summary { display: flex; align-items: center; min-height: 52px; padding: 0 18px; cursor: pointer; font-family: var(--sans); font-size: 16px; font-weight: 800; color: var(--navy); }
.pn-det__c { padding: 4px 18px 20px; }
.pn-doms { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 10px; }
.pn-dom { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 81, 147, 0.08); font-size: 13px; color: var(--navy); overflow-wrap: anywhere; }
.pn-dom--extra { background: var(--gold-soft); }
.pn-dom__x { min-width: 44px; min-height: 44px; border: 0; background: none; font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--blue); text-decoration: underline; cursor: pointer; }
.pn-link { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--sans); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.pn-correo { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.pn-correo time { color: var(--muted); }
.pn-correo b { font-family: var(--sans); color: var(--navy); }
.pn-correo span { grid-column: 2; color: var(--muted); overflow-wrap: anywhere; }
.pn-correos { gap: 0; }
.pn-fechas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.pn-fecha .insc-f { max-width: 320px; }
/* access states (loading, signed out, no access), the account line and the status line */
.pn-acceso { max-width: 600px; }
.pn-cargando { display: flex; align-items: center; gap: 12px; min-height: 180px; font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--muted); }
.pn-cargando__marca { flex: none; width: 22px; height: 22px; border: 3px solid rgba(0, 81, 147, 0.15); border-top-color: var(--gold); border-radius: 50%; animation: pn-gira 0.9s linear infinite; }
@keyframes pn-gira { to { transform: rotate(360deg); } }
.pn-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-bottom: 18px; }
.pn-quien { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pn-quien b { font-family: var(--sans); font-size: 16px; font-weight: 800; color: var(--navy); }
.pn-quien span { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.pn-estado--error { border-left-color: var(--insc-err); background: rgba(163, 50, 43, 0.07); }
.pn-tabs[hidden] { display: none; }
#panelPanes { min-height: 420px; }
.pn-esqueleto { display: grid; gap: 12px; }
.pn-esqueleto i { display: block; height: 104px; border-radius: 14px; background: linear-gradient(90deg, rgba(0, 81, 147, 0.05), rgba(0, 81, 147, 0.11), rgba(0, 81, 147, 0.05)); background-size: 200% 100%; animation: pn-brillo 1.4s ease-in-out infinite; }
@keyframes pn-brillo { to { background-position: -200% 0; } }
.pn-vacio--error { border-color: var(--insc-err); color: var(--ink); }
.pn-vacio--error p { margin: 0 0 12px; }
.pn-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pn-n { display: inline-block; min-width: 26px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 81, 147, 0.08); font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--blue); text-align: center; vertical-align: middle; }
.pn-t3 { margin: 18px 0 10px; font-family: var(--sans); font-size: 15px; font-weight: 800; letter-spacing: 0; color: var(--navy); }
.pn-form > .pn-t3:first-child, .pn-det-acc > .pn-t3:first-child { margin-top: 0; }
.pn-filtros__grid [data-ancho="2"] { grid-column: 1 / -1; }
.pn-compartir__i { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pn-compartir__i .btn { margin-top: auto; }
/* the detail of a person: the registration, the credential, the changes and the history */
.pn-p__det { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.pn-det-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 20px 28px; align-items: start; }
.pn-dl { display: grid; gap: 10px; margin: 0; }
.pn-dl > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 2px 12px; }
.pn-dl dt { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pn-dl dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.pn-det-pase .pase { margin: 0; }
.pn-det-acc { margin-top: 18px; padding: 18px; border-radius: 14px; background: var(--paper); }
.pn-acc--baja { margin-top: 18px; }
.pn-historial-box { margin-top: 18px; }
.pn-historial { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pn-historial li { display: grid; grid-template-columns: 116px auto minmax(0, 1fr); gap: 4px 12px; font-size: 13.5px; }
.pn-historial time { color: var(--muted); }
.pn-historial b { font-family: var(--sans); color: var(--navy); }
.pn-historial span { color: var(--ink); overflow-wrap: anywhere; }
.pn-historial .pn-historial__vacio { display: block; color: var(--muted); }
/* check boxes (activities, roles): each one a 44px target */
.pn-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; min-width: 0; margin: 4px 0 6px; padding: 0; border: 0; }
.pn-checks--fila { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pn-checks__t { margin-bottom: 8px; padding: 0; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.pn-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1.5px solid rgba(11, 42, 82, 0.2); border-radius: 10px; background: #fff; font-size: 14.5px; line-height: 1.35; color: var(--ink); cursor: pointer; }
.pn-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--navy); }
.pn-check:has(input:checked) { border-color: var(--gold); background: var(--cream); }
.pn-check:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.pn-check.is-bloqueada { opacity: 0.65; cursor: not-allowed; }
.pn-item > .pn-check { margin-top: 8px; }
/* a destructive action asks first, where it was pressed */
.pn-confirma { margin-top: 14px; padding: 14px 16px; border-left: 3px solid var(--insc-err); border-radius: 0 10px 10px 0; background: rgba(163, 50, 43, 0.06); }
.pn-confirma p { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.pn-confirma .pn-acc { margin-top: 10px; }
/* forms to add something, the payment settings and the dates */
.pn-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.pn-form { margin: 18px 0 6px; padding: 18px; background: var(--paper); }
.pn-forms .pn-form { margin: 0; }
.pn-cobro { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pn-banco .pn-t2, .pn-fecha .pn-t2 { margin-top: 0; }
.pn-pane div[data-lectura-ok] { max-width: 420px; margin-bottom: 16px; }
.pn-banco .pn-item__cab { align-items: center; }
.pn-oferta { margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: var(--gold-soft); }
.pn-oferta .pn-sub { margin: 0; color: var(--ink); }
.pn-oferta .pn-acc { margin-top: 10px; }
/* void payments: kept for the record, out of the way */
#pnDetAnulados { margin-top: 22px; background: none; }
#pnDetAnulados > summary { font-size: 14px; color: var(--muted); }
.pn-fecha__v { margin: 0 0 6px; font-family: var(--sans); font-size: 17px; font-weight: 800; color: var(--navy); }
.pn-correo .pn-acc { grid-column: 2; margin-top: 4px; }
.pn-correo[hidden] { display: none; }
/* content editor (Contenido) and media library (Medios) of the panel, js/panel-contenido.js: page tabs, a card per section, one field per
   text or picture, a sticky save bar, the live preview (a side pane on desktop, a full-screen sheet below 1024 px) and the image library */
.ce, .me { position: relative; }
.ce .btn--sm, .me .btn--sm { height: auto; min-height: 44px; }
.ce-cab .pn-nota { margin-bottom: 18px; }
.ce-herr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 12px; }
.ce-buscar { flex: 1 1 320px; max-width: 520px; }
.ce-buscar input { width: 100%; height: 48px; padding: 0 18px 0 46px; border: 1px solid rgba(11, 42, 82, 0.22); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2a52' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 17px 50% / 18px no-repeat; font: 15px/1.4 var(--body); color: var(--ink); }
.ce-buscar input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.ce-solo { flex: none; }
.ce-paginas { display: flex; gap: 4px; margin: 0 0 18px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.ce-pag { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: none; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.ce-pag:hover { color: var(--navy); }
.ce-pag[aria-selected="true"] { border-bottom-color: var(--gold); color: var(--navy); }
.ce-pag:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; border-radius: 8px; }
.ce-pag__n { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--gold); font-size: 12px; color: var(--navy); text-align: center; }
.ce-pag__n[hidden] { display: none; }
.ce-cuerpo { display: grid; gap: 12px; min-height: 240px; }
.ce-resultados { margin: 0; font-size: 14.5px; color: var(--muted); }
.ce-sec { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ce-sec > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 56px; padding: 8px 52px 8px 20px; position: relative; cursor: pointer; list-style: none; }
.ce-sec > summary::-webkit-details-marker { display: none; }
.ce-sec > summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg); transition: transform 0.25s var(--ease); }
.ce-sec[open] > summary::after { margin-top: -2px; transform: rotate(-135deg); }
.ce-sec > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 14px; }
.ce-sec__t { font-family: var(--sans); font-size: 16px; font-weight: 800; color: var(--navy); }
.ce-sec__n { font-size: 13px; color: var(--muted); }
.ce-sec__p { padding: 2px 9px; border-radius: 999px; background: var(--gold-soft); font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--gold-ink); }
.ce-sec__p[hidden] { display: none; }
.ce-sec__c { padding: 0 20px 6px; }
.ce-f { position: relative; display: grid; gap: 10px; padding: 20px 0; border-top: 1px solid var(--line); }
.ce-f[data-estado="pendiente"]::before { content: ""; position: absolute; left: -20px; top: 20px; bottom: 20px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }
.ce-f__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ce-f__cab label, .ce-f__nombre { font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--navy); }
.ce-f__estado { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ce-f[data-estado="publicado"] .ce-f__estado { color: var(--blue); }
.ce-f[data-estado="pendiente"] .ce-f__estado { color: var(--gold-ink); }
.ce-in { display: block; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(11, 42, 82, 0.22); border-radius: 10px; background: #fff; font: 15.5px/1.5 var(--body); color: var(--ink); }
textarea.ce-in { resize: none; overflow: hidden; }
.ce-in:focus, .ce-sub input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.ce-f--html .ce-in { font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; font-size: 14px; }
.ce-f__acc { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: -4px; }
.ce-f__acc [hidden] { display: none; }
.ce-fmt { display: flex; flex-wrap: wrap; gap: 6px; }
.ce-fmt button { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid rgba(11, 42, 82, 0.2); border-radius: 10px; background: var(--paper); font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--navy); cursor: pointer; transition: border-color 0.2s; }
.ce-fmt button:hover { border-color: var(--gold); }
.ce-fmt button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.ce-fmt b, .ce-fmt i { font-family: Georgia, "Times New Roman", serif; font-size: 16px; }
.ce-enlace { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: var(--paper); }
.ce-enlace[hidden] { display: none; }
.ce-enlace__acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.ce-sub { display: grid; gap: 6px; }
.ce-sub label { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--navy); }
.ce-sub input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid rgba(11, 42, 82, 0.22); border-radius: 10px; background: #fff; font: 15px/1.4 var(--body); color: var(--ink); }
.ce-sub input[aria-invalid="true"] { border-color: var(--insc-err); }
.ce-sub small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.ce-sub small.insc-err { color: var(--insc-err); }
.ce-vista { padding: 12px 14px; border: 1px dashed var(--line); border-radius: 10px; background: var(--paper); }
.ce-vista__t { display: block; margin-bottom: 4px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ce-f__vista { font-size: 15px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.ce-img { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; }
.ce-img__marco { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--cream); }
.ce-img__vista { width: 100%; height: 100%; object-fit: contain; }
.ce-img__vacio { padding: 12px; font-size: 13.5px; color: var(--muted); text-align: center; }
.ce-img__lado { display: grid; gap: 12px; min-width: 0; }
.ce-img__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ce-subiendo { margin: 0; font-size: 14px; color: var(--muted); }
.ce-subiendo[hidden] { display: none; }
.ce-subiendo--error { color: var(--insc-err); }
/* the save bar stays at the bottom of the screen while the person edits */
.ce-barra { position: sticky; bottom: 0; z-index: 5; margin-top: 18px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 -14px 28px -22px rgba(11, 42, 82, 0.55); }
.ce-barra__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; }
.ce-barra__info { min-width: 0; }
.ce-barra__n { margin: 0; font-family: var(--sans); font-size: 15px; font-weight: 800; color: var(--navy); }
.ce-barra[data-pendientes="0"] .ce-barra__n { font-weight: 600; color: var(--muted); }
.ce-aviso { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--verde); overflow-wrap: anywhere; }
.ce-aviso:empty { display: none; }
.ce-aviso--error { color: var(--insc-err); }
.ce-barra__acc { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 18px; }
.ce-barra__acc > .btn { min-width: 172px; justify-content: center; }
.ce-barra__acc .pn-confirma { flex-basis: 100%; margin-top: 4px; }
.ce-conflicto { margin-bottom: 12px; padding: 14px 16px; border-left: 3px solid var(--insc-err); border-radius: 0 10px 10px 0; background: rgba(163, 50, 43, 0.06); font-size: 14.5px; line-height: 1.5; }
.ce-conflicto[hidden] { display: none; }
.ce-conflicto p { margin: 0; }
.ce-conflicto ul { margin: 6px 0 8px; padding-left: 20px; }
.ce-conflicto__acc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
/* live preview */
.ce-previa { position: fixed; z-index: 70; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(46vw, 760px); border-left: 1px solid var(--line); background: #fff; box-shadow: -24px 0 48px -24px rgba(11, 42, 82, 0.45); }
.ce-previa[hidden] { display: none; }
.ce-previa__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
.ce-previa__tit { display: grid; gap: 2px; min-width: 0; }
.ce-previa__tit b { font-family: var(--sans); font-size: 15px; color: var(--navy); }
.ce-previa__tit span { font-size: 13px; line-height: 1.4; color: var(--muted); }
.ce-previa__cuerpo { position: relative; flex: 1; min-height: 0; }
.ce-previa iframe { display: block; width: 100%; height: 100%; border: 0; }
.ce-previa__cargando { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; background: #fff; font-size: 14px; color: var(--muted); }
.ce-previa__cargando[hidden] { display: none; }
@media (min-width: 1024px) {
  html.ce-con-previa #panelRoot > .wrap { width: calc(100vw - min(46vw, 760px) - 2 * var(--pad)); margin-left: var(--pad); }
}
@media (max-width: 1023px) {
  .ce-previa { left: 0; width: 100%; border-left: 0; }
  html.ce-con-previa, html.ce-con-previa body { overflow: hidden; }
}
/* dialogs: choosing a picture, leaving with unsaved changes */
.ce-dlg { width: min(760px, calc(100vw - 32px)); max-height: min(82vh, 760px); padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 30px 60px -20px rgba(11, 42, 82, 0.5); }
.ce-dlg::backdrop { background: rgba(11, 42, 82, 0.45); }
.ce-dlg__cab { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: #fff; }
.ce-dlg__cab .pn-t2 { margin: 0; }
.ce-dlg__c { padding: 16px 18px 20px; }
.ce-dlg--chico { width: min(480px, calc(100vw - 32px)); padding: 24px; }
.ce-dlg--chico .pn-t2 { margin: 0 0 8px; }
.ce-dlg--chico p { margin: 0 0 18px; color: var(--muted); }
.ce-dlg__acc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ce-elegir__grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ce-elegir__grilla button { display: grid; gap: 6px; width: 100%; min-height: 44px; padding: 6px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; text-align: left; cursor: pointer; transition: border-color 0.2s; }
.ce-elegir__grilla button:hover, .ce-elegir__grilla button:focus-visible { border-color: var(--gold); outline: none; }
.ce-elegir__grilla img { width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; background: var(--cream); object-fit: cover; }
.ce-elegir__grilla span { overflow: hidden; font-size: 12.5px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.ce-elegir__vacio { margin: 0; color: var(--muted); }
/* Medios: the drop zone, the uploads in progress and the library */
.me-zona { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 20px; padding: 22px 24px; border: 2px dashed rgba(11, 42, 82, 0.22); border-radius: 16px; background: var(--paper); transition: border-color 0.2s, background-color 0.2s; }
.me-zona.is-encima { border-color: var(--gold); background: var(--cream); }
.me-zona__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--gold-ink); }
.me-zona__ico svg { width: 24px; height: 24px; }
.me-zona__t { display: grid; gap: 2px; margin: 0; }
.me-zona__t b { font-family: var(--sans); font-size: 16px; color: var(--navy); }
.me-zona__t span { font-size: 14px; color: var(--muted); }
.me-subidas { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.me-subidas:empty { display: none; }
.me-sub { display: grid; grid-template-columns: minmax(0, 1fr) 160px minmax(0, auto); align-items: center; gap: 6px 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 14px; }
.me-sub__n { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.me-sub progress { width: 100%; height: 8px; accent-color: var(--gold); }
.me-sub__e { color: var(--muted); }
.me-sub[data-estado="ok"] .me-sub__e { font-weight: 700; color: var(--verde); }
.me-sub[data-estado="error"] .me-sub__e { color: var(--insc-err); }
.me-sub[data-estado="error"] progress { visibility: hidden; }
.me > .ce-aviso { margin: 12px 0 0; }
.me .pn-cuenta { margin: 24px 0 12px; }
.me .pn-cuenta:empty { display: none; }
.me-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.me-grilla > .pn-vacio, .me-grilla > .pn-esqueleto { grid-column: 1 / -1; }
.me-item { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.me-item__img { margin: 0; aspect-ratio: 4 / 3; background: repeating-conic-gradient(#f1ece1 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.me-item__img img { width: 100%; height: 100%; object-fit: contain; }
.me-item__txt { display: grid; gap: 2px; min-width: 0; padding: 12px 14px 0; }
.me-item__txt b { overflow: hidden; font-family: var(--sans); font-size: 13.5px; color: var(--navy); text-overflow: ellipsis; white-space: nowrap; }
.me-item__txt span { font-size: 13px; color: var(--muted); }
.me-item__acc { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: auto; padding: 4px 14px 8px; }
.me-borrar { color: var(--insc-err); }
.me-item .pn-confirma { margin: 0 14px 14px; }
@media (max-width: 767px) {
  .ce-buscar { flex-basis: 100%; max-width: none; }
  .ce-sec > summary { padding-left: 16px; }
  .ce-sec__c { padding: 0 16px 4px; }
  .ce-f[data-estado="pendiente"]::before { left: -16px; }
  .ce-img { grid-template-columns: minmax(0, 1fr); }
  .ce-img__marco { max-width: 280px; }
  .ce-barra { padding-inline: 14px; }
  .ce-barra__acc { width: 100%; justify-content: space-between; }
  .ce-barra__acc > .btn { flex: 1; min-width: 0; }
  .me-zona { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 20px 16px; }
  .me-sub { grid-template-columns: minmax(0, 1fr); }
  .me-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .me-item__txt { padding: 10px 10px 0; }
  .me-item__acc { padding: 2px 10px 6px; gap: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .ce-sec > summary::after, .ce-pag, .ce-fmt button, .me-zona, .ce-elegir__grilla button { transition: none; } }
@media (min-width: 900px) {
  .pn-lista--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-filtros__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pn-compartir, .pn-fechas, .pn-det-grid, .pn-forms, .pn-cobro { grid-template-columns: minmax(0, 1fr); }
  .pn-correo, .pn-dl > div, .pn-historial li { grid-template-columns: minmax(0, 1fr); }
  .pn-correo span, .pn-correo .pn-acc { grid-column: 1; }
  .pn-item, .pn-p { padding: 14px; }
  .pn-edit .insc-f { max-width: none; }
  .pn-det-acc, .pn-form { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { .pn-cargando__marca, .pn-esqueleto i { animation: none; } }
/* impresión (listados y credenciales): solo se ve el área que arma el panel; el PDF sale de «Guardar como PDF» del navegador */
#panelImpresion { display: none; page: panel; }
@page panel { size: A4; margin: 14mm; }
@media print {
  body.is-imprimiendo { background: #fff; }
  body.is-imprimiendo > *:not(#panelImpresion) { display: none !important; }
  body.is-imprimiendo #panelImpresion { display: block; color: #000; font-size: 11pt; }
  #panelImpresion h2 { margin: 0 0 4pt; font-size: 16pt; letter-spacing: 0; }
  .pn-print__sub { margin: 0 0 10pt; font-size: 10pt; color: #444; }
  #panelImpresion table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  #panelImpresion th, #panelImpresion td { padding: 4pt 5pt; border: 0.5pt solid #888; text-align: left; vertical-align: top; }
  #panelImpresion thead { display: table-header-group; }
  #panelImpresion tr { break-inside: avoid; }
  .pn-print__ok { width: 24mm; }
  .pn-print__pases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10mm 12mm; }
  .pn-print__pases .pase { max-width: none; margin: 0; break-inside: avoid; zoom: 0.8; }
  /* en papel no hay animación ni sombra: el QR sale completo; el sello de «confirmada» sobra (solo se imprimen credenciales confirmadas) */
  #panelImpresion .pass { box-shadow: none; }
  #panelImpresion .pass__qr > svg { opacity: 1; transform: none; animation: none !important; }
  #panelImpresion .pass__stamp { display: none; }
}
@media (max-width: 560px) {
  .mis-datos .insc-grid { grid-template-columns: minmax(0, 1fr); }
  .mis-historial li { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- acreditación especial (B3.5): un
   formulario de un solo paso junto a la credencial, sin el asistente de pasos de la inscripción
   pública — reutiliza .insc-f y .pass (arriba) para los campos y la tarjeta. */
.acred__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(28px, 4vw, 64px); align-items: start; }
.acred-form { display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 3vw, 40px); }
.acred-form [hidden] { display: none !important; }
.acred-rol-fijo__lab { display: block; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.acred-rol-fijo__v { margin-top: 7px; height: 50px; display: flex; align-items: center; padding: 0 16px; border: 1px solid rgba(11, 42, 82, 0.14); border-radius: 10px; background: var(--cream); font-size: 15px; color: var(--ink); }
.acred-saludo { margin: 0; font-size: 15px; color: var(--muted); }
.acred-saludo b { font-family: var(--sans); font-size: 18px; color: var(--navy); }
.acred-t { margin: 0; font-size: clamp(22px, 2.4vw, 30px); }
.acred-aviso { padding: 16px 18px; border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; background: var(--paper); }
.acred-aviso h3 { margin: 4px 0 6px; font-size: 22px; }
.acred-aviso p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.acred-hecho { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 16px; border-radius: 12px; background: var(--gold-soft); }
.acred-hecho p { margin: 0; font-weight: 600; }
/* una actividad donde la persona es speaker: se muestra como suya y no se reserva */
.insc-yn.is-bloqueada { opacity: 0.8; }
.insc-yn.is-bloqueada .insc-yn__o { cursor: not-allowed; }
.insc-yn__propia { clear: both; margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--gold-soft); font-size: 13.5px; font-weight: 600; color: var(--gold-ink); }
.acred__side { position: sticky; top: calc(var(--nav-h) + 76px); }
@media (max-width: 999px) {
  .acred__grid { grid-template-columns: minmax(0, 1fr); }
  .acred__side { position: static; }
}

/* acreditación por invitación: el saludo y los avisos ocupan el lugar del formulario (sin credencial al lado); con la credencial, vuelve la grilla */
.acred-estado:empty { display: none; }
.acred-estado .gx-skel { min-height: 260px; }
.acred-form .gx-note, .acred-form .gx-invit { max-width: none; padding: 0; border: 0; }
.gx-invit h2 { margin: 6px 0 10px; font-size: clamp(24px, 2.8vw, 34px); }
.gx-invit p { max-width: 58ch; margin: 0 0 18px; color: var(--muted); }
.acred__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.acred-hecho__acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }

/* ---------------------------------------------------------------- entrada digital (entrada.html): la entrada a pantalla completa, para el celular en la mesa de acreditación, y su hoja impresa */
.tk { display: flex; align-items: flex-start; min-height: 100svh; padding: calc(var(--nav-h) + 20px) 0 clamp(36px, 6vw, 72px); page: entrada; }
.tk [hidden] { display: none !important; }
.tk__wrap { display: grid; justify-items: center; gap: 22px; width: 100%; }
.tk-skel { display: grid; align-content: start; gap: 14px; width: min(460px, 100%); min-height: 700px; }
.tk-skel i { display: block; height: 96px; border-radius: 22px; background: linear-gradient(100deg, rgba(0, 81, 147, 0.05) 30%, rgba(0, 81, 147, 0.1) 50%, rgba(0, 81, 147, 0.05) 70%) 100% 0 / 220% 100%; animation: gxSkel 1.8s ease-in-out infinite; }
.tk-skel i:first-child { height: 600px; }
.tk-stack { width: min(460px, 100%); }
.tk-card { gap: 20px; padding: 46px clamp(18px, 6vw, 30px) 96px; }
/* on phones the seal sits inside the card, in its own band under the last line: it never covers text nor leaves the screen */
@media (max-width: 560px) {
  .tk-card { padding-bottom: 116px; }
  .tk-stack .pass__stamp { width: 92px; height: 92px; right: 12px; bottom: 12px; }
}
.tk-who { min-height: 0; }
.tk-who small:empty { display: none; }
.tk-qrbox { display: grid; justify-items: center; gap: 14px; }
.tk-qr { width: min(320px, 100%); aspect-ratio: 1; padding: 16px; border-radius: 18px; background: #fff; }
.tk-qr > svg { display: block; width: 100%; height: 100%; }
.tk-card.is-pending .tk-qr { display: grid; place-items: center; padding: 24px; border: 2px dotted rgba(255, 255, 255, 0.45); background: none; text-align: center; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, 0.85); }
.tk-id { text-align: center; }
.tk-id b { display: block; font-family: var(--sans); font-size: 22px; font-weight: 800; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.tk-id span { display: block; margin-top: 4px; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.tk-ev li { align-items: flex-start; }
.tk-ev li > span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.tk-ev li strong { font-family: var(--sans); font-weight: 700; color: #fff; }
.tk-ev li small { font-family: var(--body); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.4; color: rgba(255, 255, 255, 0.72); }
.tk-ses { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, 0.24); font-size: 14.5px; }
.tk-ses b { margin-right: 6px; font-family: var(--sans); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.tk-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tk-vacio { max-width: 560px; width: 100%; margin-top: clamp(8px, 4vw, 40px); }
.tk-vacio__t { margin: 6px 0 10px; font-size: clamp(26px, 3vw, 36px); }
.tk-vacio p { margin: 0 0 16px; color: var(--muted); overflow-wrap: anywhere; }
.tk-vacio__acc { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.tk-vacio .tk-vacio__mail { margin: 0; font-size: 14.5px; }
.tk-vacio__mail a { color: var(--blue); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .gx-skel i, .tk-skel i { animation: none; } }
/* en papel: una entrada por hoja A4, sin barra ni pie ni botones, en blanco con el texto azul (no gasta tinta) y el QR negro grande */
@page entrada { size: A4; margin: 12mm; }
@media print {
  .tk-page .nav, .tk-page .menu, .tk-page .footer, .tk-page .scrim, .tk-page .panel, .tk-page .auth-dlg, .tk-page .tk-acciones, .tk-page .tk-skel, .tk-page .pass__stamp { display: none !important; }
  .tk-page, .tk-page main, .tk-page .tk { background: #fff !important; }
  .tk { display: block; min-height: 0; padding: 0; }
  .tk__wrap { display: block; }
  .tk-stack { width: 100%; }
  .tk-card { gap: 6mm; padding: 10mm 10mm 8mm !important; border: 1.5pt solid #0b2a52; border-radius: 6mm; background: #fff !important; color: #0b2a52 !important; box-shadow: none !important; break-inside: avoid; }
  .tk-card::before { display: none; }
  .tk-card .pass__seal { padding: 2mm; border-radius: 50%; background: #0b2a52; }
  .tk-card .pass__event small, .tk-card .pass__who small, .tk-card .pass__ev small, .tk-ses b, .tk-card .pass__ev li b { color: #6b5f00 !important; }
  .tk-card .pass__event b, .tk-card .pass__who b, .tk-id b, .tk-ev li strong { color: #0b2a52 !important; }
  .tk-card .pass__who b { font-size: 26pt; }
  .tk-card .pass__who span, .tk-card .pass__ev li, .tk-ev li small, .tk-ses { color: #222 !important; }
  .tk-id span { color: #0b2a52; }
  .tk-card .pass__chip { background: #fff3b0; color: #0b2a52; }
  .tk-card .pass__foot, .tk-ses { border-color: #999; }
  .tk-qr { width: 76mm; padding: 4mm; border: 1pt solid #0b2a52; border-radius: 3mm; }
  .tk-qr > svg { animation: none; }
  .tk-card.is-pending .tk-qr { color: #222; border-color: #999; }
}

/* ------------------------------------------------------------- actividades desglosadas: la tarjeta abierta ocupa la fila, con foto grande, datos y acciones */
.act__tog { grid-column: 3; grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(192, 177, 12, 0.6); color: var(--gold-ink); transition: transform 0.5s var(--ease), background-color 0.3s, border-color 0.3s, color 0.3s; }
.act__tog svg { width: 18px; height: 18px; }
.act__sum h3 { transition: color 0.3s; }
.act__sum:hover h3 { color: var(--blue); }
.act__sum:hover .act__tog { background: var(--gold-soft); }
.act__sum:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.act[open] .act__tog { transform: rotate(45deg); background: var(--navy); border-color: var(--navy); color: var(--gold); }
.act.is-anim { overflow: clip; }
/* hilo dorado sobre la tarjeta abierta */
.act[open]::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--gold); }
/* marca breve al llegar desde un enlace */
.act::before { content: ""; position: absolute; z-index: -1; inset: 0 -16px; border-radius: 14px; background: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(192, 177, 12, 0.5); opacity: 0; pointer-events: none; }
.act.is-target::before { animation: actMark 1.9s var(--ease) both; }
@keyframes actMark { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.act[open] h3 { font-size: clamp(26px, 2.6vw, 38px); margin-bottom: 12px; }
.act[open] .act__desc { font-size: 17px; line-height: 1.6; max-width: 54ch; }
.act[open] .act__icon svg { width: 72px; height: 72px; }
.act[open] .act__icon::before, .act[open] .act__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 136px; height: 136px; border-radius: 50%; border: 1px solid rgba(122, 115, 0, 0.32); transform: translate(-50%, -50%); }
.act[open] .act__icon::after { width: 196px; height: 196px; border-color: rgba(122, 115, 0, 0.16); }
.act__more { padding-top: 26px; }
.act__facts { display: grid; grid-auto-flow: column; grid-auto-columns: auto; margin: 0; border-top: 1px solid rgba(192, 177, 12, 0.6); border-bottom: 1px solid var(--line); }
.act__fact { padding: 14px 18px 16px 0; }
.act__fact + .act__fact { padding-left: 18px; border-left: 1px solid var(--line); }
.act__fact dt { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); }
.act__fact dd { margin: 6px 0 0; font-family: var(--sans); font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--navy); overflow-wrap: anywhere; }
.act__fact--when dd { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 24px; line-height: 1.05; color: var(--gold-ink); }
/* un "cuándo" de frase entera ocupa su propio renglón; los demás datos van debajo */
.act__facts:has(> .act__fact--long) { grid-auto-flow: row; grid-template-columns: auto minmax(0, 1fr); }
.act__fact--long { grid-column: 1 / -1; padding-right: 0; border-bottom: 1px solid var(--line); }
.act__fact--long dd { line-height: 1.15; }
.act__fact--long + .act__fact { padding-left: 0; border-left: 0; }
.act__fact a { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(192, 177, 12, 0.7); text-underline-offset: 4px; }
.act__fact a:hover { text-decoration-color: currentColor; }
.act__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
/* abierta, la descripción completa toma el lugar de la breve */
.act[open] .act__desc--breve { display: none; }
.act__more:has(> .act__larga) { padding-top: 0; }
.act__larga { margin: 0 0 26px; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 54ch; }
/* ediciones: hilo dorado vertical con un punto por edición, de la más reciente a la más antigua */
.act__eds { margin-top: 26px; }
.act__eds h4 { margin: 0 0 14px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); }
.act__eds ol { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; max-width: 60ch; }
.act__eds li { position: relative; padding-left: 26px; }
.act__eds li::before { content: ""; position: absolute; z-index: 1; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.act__eds li:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 11px; bottom: -27px; width: 1px; background: rgba(192, 177, 12, 0.55); }
.act__ed-when { display: block; font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 19px; line-height: 1.2; color: var(--gold-ink); }
.act__ed-what { display: block; margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--muted); }
@media (min-width: 901px) {
  .act[open] { grid-column: 1 / -1; min-height: clamp(360px, 30vw, 440px); padding: 40px 0 44px calc(46% + 48px); border-right: 0; }
  .act[open] .act__sum { grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; }
  .act[open] .act__fig { position: absolute; left: 0; top: 40px; bottom: 44px; width: 46%; aspect-ratio: auto; border-radius: 14px; }
  .act[open] h3, .act[open] .act__desc { grid-column: 1; }
  .act[open] .act__tog { grid-column: 2; grid-row: 1; align-self: start; }
}
@media (max-width: 900px) {
  .act[open] { padding-bottom: 32px; }
  .act[open] .act__sum { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .act[open] .act__fig { position: relative; grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 10; margin-bottom: 20px; border-radius: 12px; }
  .act[open] h3 { grid-column: 1; grid-row: 2; align-self: center; margin-bottom: 0; }
  .act[open] .act__tog { grid-column: 2; grid-row: 2; }
  .act[open] .act__desc { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
  .act__larga { margin-top: 10px; }
}
@media (max-width: 560px) {
  .act__tog { width: 44px; height: 44px; }
  .act[open] h3 { font-size: 24px; }
  .act[open] .act__desc, .act__larga { font-size: 15px; }
  .act__ed-when { font-size: 17px; }
  .act__ed-what { font-size: 14px; }
  .act__facts { grid-auto-flow: row; }
  .act__fact { padding: 12px 0; }
  .act__fact + .act__fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .act__facts:has(> .act__fact--long) { grid-template-columns: minmax(0, 1fr); }
  .act__fact--long { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .act.is-target::before { opacity: 1; }
}

/* ------------------------------------------------------------- espacios de encuentro (actividades)
   El grupo "Para las instituciones socias" usa las mismas tarjetas .act que las actividades, con ícono en lugar de foto.
   Junto al título, un sello orbital solo decorativo: el sello al centro, tres órbitas finas de azul y dorado del logo y puntos
   (las instituciones) que giran despacio, cada órbita a su ritmo. main.js dibuja los arcos al llegar al grupo; con movimiento
   reducido (regla global de más arriba) queda quieto y completo. */
.enc { scroll-margin-top: calc(var(--nav-h) + 40px); }
.enc__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(28px, 6vw, 88px); row-gap: 20px; align-items: center; margin-bottom: 28px; }
.acts-group .enc__top .head { margin-bottom: 0; }
.enc__net { width: clamp(230px, 24vw, 310px); height: auto; aspect-ratio: 1; }
.enc__track { fill: none; stroke-opacity: 0.1; stroke-width: 1; }
.enc__arc { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; }
/* cada grupo gira alrededor del centro del dibujo; el arco, muy despacio, y los puntos, a su ritmo (--t; --rev: al revés) */
.enc__spin { transform-box: view-box; transform-origin: 50% 50%; animation: encOrbit var(--t, 60s) linear infinite; }
.enc__spin--rev { animation-direction: reverse; }
@keyframes encOrbit { to { transform: rotate(360deg); } }
.enc__glow { transform-box: fill-box; transform-origin: center; animation: encGlow 7s ease-in-out infinite; }
@keyframes encGlow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.enc__breathe { transform-box: view-box; transform-origin: 50% 50%; animation: breathe 7s ease-in-out infinite; }
@media (max-width: 900px) { .enc__top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .enc__top { row-gap: 8px; margin-bottom: 22px; } .enc__net { width: 168px; } }
/* institucional, "Cómo asociarse": la línea que lleva a los espacios de encuentro */
.asociarse__nota { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 32px; }
.asociarse__nota p { max-width: 62ch; color: var(--muted); }

/* ================================================================ T4: celular — piso de 12px
   para las clases "eyebrow"/caption/chip que en escritorio usan un tamaño menor a propósito
   (tracking amplio, mayúsculas). El tracking está en em, así que escala solo; no toca escritorio. */
@media (max-width: 767px) {
  .chip, .scroll-cue, .coin small, .panel dt, .logo-tile--txt small, .logo-tile__cap,
  .logo-tile__cap small, .form label, .person small, .hist-tabs small, .hist-ed small, .sub-act__txt small,
  .insc-arc__lab, .insc-arc__now span, .insc-f > label, .insc-person__t, .insc-sum__b h4,
  .pass__more, .pass__event small, .pass__who small, .pass__chip, .pass__id small,
  .insc-strip__txt small, .insc-strip__step, .mini-pass em, .act__fact dt, .act__eds h4,
  .acred-rol-fijo__lab, .pass__ev small, .insc-ev__date small, .insc-evp__t span, .mini-pass .mini-pass__ev em {
    font-size: 12px;
  }
}

/* ================================================================ T4: celular — piso de 44px
   para enlaces/botones sueltos que en escritorio son solo texto en línea (su caja de texto
   alcanza los 44px con la línea del cuerpo, pero no en celular con letra más chica) */
@media (max-width: 767px) {
  .link, .sub-ch__mail { min-height: 44px; } /* ya son inline-flex con align-items:center */
  .hist-ed a, .dl a, .act__fact a { display: inline-flex; align-items: center; min-height: 44px; }
  .toggle button { min-height: 44px; }
  .social a { min-width: 44px; justify-content: center; }
}

/* ================================================================ congreso (01/10): programa en PDF, estaciones y sponsors */
/* aviso del programa oficial en PDF: el viernes 5 de febrero, con la cuenta regresiva de siempre */
.pdf-pub { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 4px; padding: clamp(18px, 2.4vw, 28px) clamp(20px, 2.8vw, 36px); border: 1px solid rgba(192, 177, 12, 0.4); border-left: 5px solid var(--gold); border-radius: 16px; background: var(--gold-soft); }
.pdf-pub__ico { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: #fff; color: var(--gold-ink); }
.pdf-pub__ico svg { width: 24px; height: 24px; }
.pdf-pub__txt { flex: 1 1 280px; }
.pdf-pub__txt strong { font-family: var(--sans); font-weight: 800; font-size: clamp(18px, 2vw, 24px); line-height: 1.25; letter-spacing: -0.01em; color: var(--navy); }
.pdf-pub .pdf-count { padding: 8px 14px; background: #fff; font-size: 13px; }
/* estaciones de aprendizaje: estado vacío con la forma de cada proyecto */
.est-vacio { display: grid; gap: 28px; }
.est-vacio__aviso { display: flex; align-items: flex-start; gap: 14px; max-width: 760px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.est-vacio__aviso svg { width: 24px; height: 24px; flex: none; margin-top: 2px; color: var(--gold-ink); }
.est-vacio__aviso p { font-size: 16px; line-height: 1.55; color: var(--muted); }
.est-vacio__aviso strong { color: var(--navy); }
.est-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.est-ficha { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px dashed rgba(0, 81, 147, 0.3); border-radius: 16px; background: rgba(255, 255, 255, 0.55); }
.est-ficha small { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.est-ficha:nth-child(2) { opacity: 0.8; }
.est-ficha:nth-child(3) { opacity: 0.6; }
.est-linea { display: block; height: 10px; margin-bottom: 4px; border-radius: 99px; background: linear-gradient(90deg, rgba(0, 81, 147, 0.12), rgba(0, 81, 147, 0.04)); }
.est-linea--t { width: 78%; height: 16px; }
.est-linea--c { width: 56%; }
.est-linea--s { width: 66%; margin-bottom: 8px; }
.est-ficha__pie { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.est-ficha__pie > div { flex: 1; min-width: 0; }
.est-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--gold-soft); font-family: var(--sans); font-weight: 800; color: var(--gold-ink); }
.est-ficha--real { border-style: solid; background: #fff; }
.est-ficha--real h3 { font-size: 19px; line-height: 1.25; }
.est-ficha--real p { font-size: 14px; color: var(--muted); }
.est-ficha--real b { font-family: var(--sans); font-size: 14px; color: var(--navy); }
/* sponsors: cuatro niveles con espacios de logo vacíos (placeholder hasta que el Polo confirme las marcas) */
.spons { display: grid; gap: clamp(28px, 3.4vw, 44px); }
.spons-nivel h3 { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; font-family: var(--sans); font-size: 13px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy); }
.spons-nivel h3::before, .spons-nivel h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(192, 177, 12, 0.6)); }
.spons-nivel h3::after { background: linear-gradient(to left, transparent, rgba(192, 177, 12, 0.6)); }
.spons-fila { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 0; padding: 0; list-style: none; }
.spons-slot, .spons-logo { position: relative; display: grid; place-items: center; width: var(--w); height: var(--h); overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.spons-slot { color: rgba(192, 177, 12, 0.55); }
.spons-slot svg { width: 22px; height: 22px; }
.spons-slot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(192, 177, 12, 0.12) 50%, transparent 62%); transform: translateX(-100%); animation: spons-brillo 7s ease-in-out infinite; }
.spons-slot:nth-child(2)::after { animation-delay: 1.2s; }
.spons-slot:nth-child(3)::after { animation-delay: 2.4s; }
.spons-slot:nth-child(n + 4)::after { animation-delay: 3.6s; }
@keyframes spons-brillo { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.spons-logo img { max-width: 80%; max-height: 70%; object-fit: contain; }
/* an empty space filled with a logo from the media library: centred and contained, the space keeps its size */
.spons-slot > img { width: 80%; height: 70%; object-fit: contain; }
.spons-slot[data-cms-filled] > svg { display: none; }
.spons-slot[data-cms-filled]::after { content: none; }
.spons-nivel--main { --w: 280px; --h: 132px; }
.spons-nivel--platino { --w: 240px; --h: 112px; }
.spons-nivel--oro { --w: 180px; --h: 88px; }
.spons-nivel--virtual { --w: 200px; --h: 96px; }
.spons-contacto { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: clamp(28px, 3.4vw, 44px); text-align: center; font-size: 16px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .spons-slot::after { animation: none; display: none; } }
@media (max-width: 900px) { .est-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .est-vacio .est-ficha:nth-child(3) { display: none; } }
@media (max-width: 560px) {
  .est-grid { grid-template-columns: minmax(0, 1fr); }
  .est-vacio .est-ficha:nth-child(n + 2) { display: none; }
  .spons-fila { gap: 12px; }
  .spons-nivel--main, .spons-nivel--platino, .spons-nivel--oro, .spons-nivel--virtual { --w: calc(50% - 6px); --h: 84px; }
  .spons-nivel--main { --h: 100px; }
  .spons-nivel--oro { --h: 72px; }
  .spons-nivel h3 { gap: 12px; letter-spacing: 0.16em; }
}

/* ================================================================ T6: congreso — celular
   Se agrupa acá, al final, todo lo que solo se ve en celular (<=767px) para que gane siempre por
   orden de aparición sobre cualquier regla sin media query definida más arriba (así se evita el
   bug que ya pasó en T5 con .gcard: una regla posterior sin media query pisaba en silencio a la
   regla de celular). Las reglas que esconden el disparador de los <details> nuevos en escritorio
   (.cal-pick, .speaker__bio — build.py los manda siempre "open"; main.js los cierra
   acá en celular) están más arriba, junto a cada componente. */
@media (max-width: 767px) {
  /* -- 1) calendario del hero: el <details> pasa a ser un botón compacto con un panel flotante -- */
  .cal-pick { position: relative; display: inline-block; }
  .cal-pick > summary { display: inline-flex; list-style: none; }
  .cal-pick > summary::-webkit-details-marker { display: none; }
  .cal-pick__tog { display: inline-flex; width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
  .cal-pick[open] .cal-pick__tog { transform: rotate(45deg); }
  .cal-pick__opts { display: none; }
  .cal-pick[open] .cal-pick__opts {
    display: flex; flex-direction: column; gap: 8px; position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
    min-width: 210px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 34px rgba(11, 42, 82, 0.2);
  }
  .cal-pick__opts a { width: 100%; justify-content: flex-start; }
  /* la entrada animada deja al contenedor en su propia capa: abierto, el panel tiene que quedar sobre el párrafo que sigue */
  [data-reveal]:has(> .cal-pick[open]) { position: relative; z-index: 40; }

  /* -- 2) sedes: una tarjeta compacta por sede; el mapa real queda como miniatura ("Cómo llegar"
     lo sigue llevando entero) -- */
  .venue { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
  .venue .map { width: 72px; height: 72px; min-height: 72px; flex: none; border-radius: 10px; }

  /* -- 3) speakers: dos tarjetas por fila (la grilla vive con las reglas de .spk-grid más arriba), foto arriba, trayectoria detrás de "Trayectoria" -- */
  .spk__txt { padding: 12px 12px 14px; }
  .spk__txt b { font-size: 15px; }
  .spk__persona > span { font-size: 12px; }
  .spk__txt { gap: 10px; }
  .speaker__bio { margin-top: 10px; }
  .speaker__bio > summary {
    display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none;
    font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink);
  }
  .speaker__bio > summary::-webkit-details-marker { display: none; }
  .speaker__tog { display: inline-flex; width: 16px; height: 16px; flex: none; transition: transform 0.3s var(--ease); }
  .speaker__bio[open] .speaker__tog { transform: rotate(45deg); }
  .speaker__bio:not([open]) > p { display: none; }
  .speaker__bio > p { margin: 6px 0 0; }

  /* -- 4) congresos anteriores: el número de la edición elegida ya está en su pestaña, así que el
     detalle deja solo año, lema, oradores y programa -- */
  .hist-x.is-tabs .hist-ed { grid-template-columns: 1fr; }
  .hist-x.is-tabs .hist-ed__n { display: none; }

  /* -- 5) y 7) juntas: el relleno de las secciones propias de congreso.html (no las compartidas
     por .sec) pasa del clamp(72,9vw,130) al mismo clamp(44,7vw,84) que ya usan institucional/T5
     (ritmo vertical, punto 7); #inscripciones además recorta solo su relleno de ARRIBA a
     clamp(24,5vw,40) (punto 5) — el ancla ya despeja nav + sub-nav (scroll-margin-top más arriba),
     esto solo saca la banda vacía entre el sub-nav y el eyebrow "Inscripciones" -- */
  #cronograma, #programa, #speakers, #estaciones, #historico { padding: clamp(44px, 7vw, 84px) 0; }
  #inscripciones { padding: clamp(24px, 5vw, 40px) 0 clamp(44px, 7vw, 84px); }
}

/* ================================================================ T7: celular — formularios.
   Al final del archivo por el mismo motivo que el bloque T6: así gana siempre por orden de
   aparición sobre cualquier regla de igual especificidad sin media query. */
@media (max-width: 767px) {
  /* -- piso de 16px en los campos de texto/select: bajo eso, iPhone Safari hace zoom automático
     al enfocar (contacto, feria de proyectos, inscripción con DNI y código incluidos, comparten
     estas dos clases) -- */
  .form input, .form select, .form textarea, .insc-f input, .insc-f select { font-size: 16px; }
}

/* ------------------------------------------------------------- cuenta: botón de la barra, su menú y la hoja de ingreso (js/auth.js)
   El botón ocupa siempre el mismo lugar (--acct-w): "Ingresar" y la inicial de la cuenta se turnan dentro de él, así la barra no se mueve
   cuando se sabe la sesión. La hoja es un <dialog>: ficha centrada en pantallas grandes y hoja inferior en celular, como la de los speakers. */
.nav { --acct-w: 122px; }
.nav__acct { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: var(--acct-w); display: flex; justify-content: flex-end; }
.nav__cta { right: calc(var(--acct-w) + 12px); }
.nav__acct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 44px; padding: 0 16px 0 13px; border-radius: 999px; border: 1.5px solid rgba(11, 42, 82, 0.28); background: rgba(255, 255, 255, 0.72); color: var(--navy); font-family: var(--sans); font-size: 13.5px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s; }
.nav__acct-ico { width: 18px; height: 18px; flex: none; color: var(--gold-ink); }
.nav__acct-btn:hover, .nav__acct-btn[aria-expanded="true"] { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.nav__acct-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.nav__acct-av { display: none; }
.nav__acct[data-auth="in"] .nav__acct-btn { width: 44px; padding: 0; border-color: var(--navy); background: var(--navy); }
.nav__acct[data-auth="in"] .nav__acct-ico, .nav__acct[data-auth="in"] .nav__acct-txt { display: none; }
.nav__acct[data-auth="in"] .nav__acct-av { display: block; font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 21px; line-height: 1; padding-right: 0.05em; color: var(--gold); }
.nav[data-state="bare"] .nav__acct[data-auth="out"] .nav__acct-btn { border-color: rgba(255, 255, 255, 0.7); background: rgba(11, 42, 82, 0.28); color: #fff; }
.nav[data-state="bare"] .nav__acct[data-auth="out"] .nav__acct-ico { color: var(--gold); }

.acct-menu { position: absolute; z-index: 2; top: calc(100% + 12px); right: 0; width: min(300px, calc(100vw - 2 * var(--pad))); padding: 8px; border-radius: 18px; border: 1px solid var(--line); background: #fff; box-shadow: 0 30px 60px -18px rgba(11, 42, 82, 0.4); transform-origin: top right; animation: acct-in 0.3s var(--ease) both; }
.acct-menu[hidden] { display: none; }
@keyframes acct-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
.acct-menu__who { margin: 0; padding: 10px 14px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.acct-menu__sep { margin: 6px 14px; border: 0; border-top: 1px solid var(--line); }
.acct-menu__i { position: relative; display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 14px 0 30px; border: 0; border-radius: 12px; background: none; font-family: var(--sans); font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--navy); text-align: left; cursor: pointer; transition: background-color 0.25s var(--ease); }
.acct-menu__i::before { content: ""; position: absolute; left: 13px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform 0.3s var(--ease); }
.acct-menu__i:hover, .acct-menu__i:focus-visible { background: var(--paper); }
.acct-menu__i:hover::before, .acct-menu__i:focus-visible::before, .acct-menu__i[aria-current="page"]::before { transform: scale(1); }
.acct-menu__i:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.acct-menu__i--out { color: var(--muted); font-weight: 600; }
@media (max-width: 1000px) {
  .nav { --acct-w: auto; }
  .nav__acct { width: auto; }
}
/* barra de escritorio angosta: no entra el botón con texto junto a "Inscribite", queda solo el ícono (su nombre accesible sigue siendo "Ingresar") */
@media (min-width: 1001px) and (max-width: 1359px) {
  .nav { --acct-w: 44px; }
  .nav__acct-btn { width: 44px; padding: 0; }
  .nav__acct-txt { display: none; }
}
@media (min-width: 1001px) and (max-width: 1120px) {
  .nav__links { gap: 16px; }
  .nav__links--left { padding-right: 14px; }
  .nav__links--right { padding-left: 14px; }
  .nav__cta svg { display: none; }
}

/* en el menú del celular: la cuenta, debajo de los enlaces */
.menu__acct { display: flex; flex-direction: column; align-items: center; gap: 2px; width: min(340px, 100%); margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.menu__acct:empty { display: none; }
.menu__acct-who { margin: 0 0 6px; max-width: 100%; text-align: center; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.menu .menu__acct-i, .menu__acct-i { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 0; background: none; font-family: var(--sans); font-size: 17px; font-weight: 700; color: var(--navy); cursor: pointer; }
.menu .menu__acct-i--out { color: var(--muted); font-weight: 600; }
.menu__acct-sep { display: none; }
.menu__acct-in { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 30px; border-radius: 999px; border: 1.5px solid rgba(11, 42, 82, 0.3); background: transparent; font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--navy); cursor: pointer; }
.menu__acct-i:focus-visible, .menu__acct-in:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* la hoja de ingreso */
html.auth-open { overflow: hidden; }
.auth-dlg { --auth-err: #a3322b; position: fixed; width: min(460px, calc(100vw - 32px)); max-width: none; max-height: min(92vh, 760px); max-height: min(92dvh, 760px); margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 40px 90px -20px rgba(11, 42, 82, 0.55); }
.auth-dlg::backdrop { background: rgba(11, 42, 82, 0.64); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.auth-dlg[open] { animation: spk-dlg-in 0.45s var(--ease) both; }
/* el arco del sello asoma en la esquina, como en la ficha de los speakers */
.auth-dlg::before { content: ""; position: absolute; right: -52px; top: -72px; width: 200px; height: 200px; border-radius: 50%; border: 2px solid rgba(192, 177, 12, 0.5); border-left-color: transparent; border-bottom-color: transparent; transform: rotate(-24deg); pointer-events: none; }
.auth-dlg__box { position: relative; display: flex; flex-direction: column; gap: 16px; max-height: min(92vh, 760px); max-height: min(92dvh, 760px); padding: 34px 32px 30px; overflow-y: auto; overscroll-behavior: contain; }
.auth-dlg__box > * { flex: none; }
.auth-dlg__box :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.auth-dlg__x { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.auth-dlg__x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.auth-dlg__x:hover { background: var(--navy); color: #fff; }
.auth-dlg__t { margin: -8px 0 0; padding-right: 44px; font-size: clamp(26px, 3vw, 32px); line-height: 1.1; outline: none; }
.auth-dlg__lead { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.auth-hint { margin: 0; padding: 12px 14px; border-radius: 12px; border-left: 3px solid var(--gold); background: var(--paper); font-size: 14px; line-height: 1.5; color: var(--muted); }
.auth-prov { display: grid; gap: 10px; }
.auth-prov__b { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(11, 42, 82, 0.28); background: #fff; font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--navy); cursor: pointer; transition: border-color 0.3s, box-shadow 0.3s; }
.auth-prov__b svg { width: 20px; height: 20px; flex: none; }
.auth-prov__b:hover { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.auth-prov__b:disabled, .auth-submit:disabled { opacity: 0.6; cursor: progress; }
.auth-or { display: flex; align-items: center; gap: 14px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form[hidden], .auth-info[hidden], .auth-f[hidden], .auth-prov[hidden], .auth-prov__b[hidden], .auth-or[hidden], .auth-hint[hidden], .auth-dlg__lead[hidden], .auth-err[hidden], .auth-f__note[hidden], .auth-f__eye[hidden] { display: none; }
.auth-f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.auth-f > label { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.auth-f input { width: 100%; min-width: 0; height: 52px; padding: 0 16px; font: 16px/1.4 var(--body); color: var(--ink); border: 1px solid rgba(11, 42, 82, 0.22); border-radius: 10px; background: #fff; }
.auth-f input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.auth-f__in { position: relative; }
.auth-f__in input { padding-right: 100px; }
.auth-f__eye { position: absolute; right: 4px; top: 4px; min-width: 44px; height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: none; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--blue); cursor: pointer; }
.auth-f__note { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.auth-err { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--auth-err); }
.auth-submit { width: 100%; justify-content: center; margin-top: 2px; }
.auth-info__b { width: 100%; justify-content: center; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 18px; margin-top: -6px; }
.auth-links:empty { display: none; }
.auth-link { min-height: 44px; padding: 0 2px; border: 0; background: none; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--blue); cursor: pointer; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.auth-link:hover { color: var(--navy); }
.auth-dlg.is-busy { cursor: progress; }
@media (max-width: 767px) {
  .auth-dlg { width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .auth-dlg[open] { animation-name: spk-sheet-in; }
  .auth-dlg__box { padding: 28px 20px calc(24px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-dlg[open], .acct-menu { animation: none; }
  .nav__acct-btn, .acct-menu__i, .acct-menu__i::before, .auth-prov__b, .auth-dlg__x { transition: none; }
}