/* 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: box-shadow 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.35s var(--ease); }
/* Hover never moves a button's own box: the box is its hit area, and a button that shifts can slide out from under a
   cursor that is not moving, lose the hover, slide back and jump for as long as the mouse rests there (the nav CTA, which
   is centred with its own transform, used to drop 19px). The lift is suggested by a soft shadow and a slightly deeper
   colour; only the arrow inside moves, a few pixels. The same goes for the other buttons below (speaker chips, past
   congress tabs, the panel's KPI cards). */
.btn:hover { box-shadow: 0 10px 22px -12px rgba(11, 42, 82, 0.45); }
.btn:hover svg { transform: translateX(3px); }
.btn--blue { background: var(--blue); color: #fff; }
.btn--blue:hover { background-color: #00467f; }
.btn--gold { background: var(--gold); color: var(--navy); }
.btn--gold:hover { background-color: #b3a40b; }
.btn--ghost { border-color: rgba(11, 42, 82, 0.3); color: var(--navy); background: transparent; }
.btn--ghost:hover { border-color: rgba(11, 42, 82, 0.55); background-color: rgba(11, 42, 82, 0.03); }
.btn--white { background: #fff; color: var(--navy); border-color: var(--line); }
.btn--white:hover { border-color: rgba(192, 177, 12, 0.6); }
.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; align-items: center; 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 > li > 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 > li > a:hover, .nav__links > li > 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 { display: flex; align-items: center; transition: transform 0.7s var(--ease), opacity 0.7s var(--ease); }
/* the sections of Institucional and Actividades (the Polo, 09/10, A1): a dropdown under the link, opened on hover and by the chevron button
   (js/main.js: .is-open, aria-expanded, Escape); it floats, so opening it moves nothing. [data-cerrado] keeps a hover-opened panel shut
   after Escape or a click on one of its links until the pointer leaves */
.nav__item--sub { position: relative; display: flex; align-items: center; }
.nav__sub-btn { display: grid; place-items: center; width: 22px; height: 30px; margin: 0 -10px 0 2px; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer; }
.nav__sub-btn svg { width: 12px; height: 12px; transition: transform 0.3s var(--ease); }
.nav__sub-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.nav__item--sub.is-open .nav__sub-btn svg { transform: rotate(180deg); }
.nav__sub { position: absolute; z-index: 60; top: calc(100% + 16px); left: 50%; min-width: 250px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
  box-shadow: 0 24px 48px -24px rgba(11, 42, 82, 0.45); opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity 0.22s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s; }
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.nav__sub ul { list-style: none; margin: 0; padding: 0; display: grid; }
.nav__sub a { display: block; padding: 9px 14px; border-radius: 10px; font-family: var(--sans); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--navy); white-space: nowrap; transition: background-color 0.2s, color 0.2s; }
.nav__sub a:hover, .nav__sub a:focus-visible { background: var(--cream); color: var(--blue); outline: none; }
.nav__item--sub.is-open > .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.22s var(--ease), transform 0.3s var(--ease), visibility 0s; }
@media (hover: hover) {
  .nav__item--sub:not([data-cerrado]):hover > .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.22s var(--ease), transform 0.3s var(--ease), visibility 0s; }
  .nav__item--sub:not([data-cerrado]):hover .nav__sub-btn svg { transform: rotate(180deg); }
}
.nav[data-state="hidden"] .nav__sub { display: none; }
@media (prefers-reduced-motion: reduce) {
  .nav__sub, .nav__item--sub.is-open > .nav__sub, .nav__item--sub:hover > .nav__sub { transform: translate(-50%, 0); transition: none; }
  .nav__sub-btn svg { transition: none; }
}
.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); text-align: center; }
.menu .btn { font-size: 15px; margin-top: 14px; }
/* cada enlace sube a su turno cuando se abre */
.menu > a, .menu > .menu__grp { opacity: 0; transform: translateY(18px); transition: opacity 0.35s var(--ease), transform 0.55s var(--ease); }
.menu.is-open > a, .menu.is-open > .menu__grp { opacity: 1; transform: none; }
.menu.is-open > :nth-child(1) { transition-delay: 0.06s; } .menu.is-open > :nth-child(2) { transition-delay: 0.1s; } .menu.is-open > :nth-child(3) { transition-delay: 0.14s; } .menu.is-open > :nth-child(4) { transition-delay: 0.18s; }
.menu.is-open > :nth-child(5) { transition-delay: 0.22s; } .menu.is-open > :nth-child(6) { transition-delay: 0.26s; } .menu.is-open > :nth-child(7) { transition-delay: 0.3s; } .menu.is-open > :nth-child(8) { transition-delay: 0.36s; }
/* a page with sections (Institucional, Actividades): its link stays centred, the + button sits to its right and opens the list under it */
.menu__grp { display: flex; flex-direction: column; align-items: center; width: min(340px, 100%); }
.menu__row { position: relative; }
.menu__sub-btn { position: absolute; left: 100%; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--gold-ink); cursor: pointer; transform: translateY(-50%); }
.menu__sub-btn svg { width: 20px; height: 20px; transition: transform 0.3s var(--ease); }
.menu__sub-btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.menu__sub-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.menu__sub { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 8px; padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.menu__sub[hidden] { display: none; }
.menu .menu__sub a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; font-size: 17px; font-weight: 600; color: var(--navy); text-align: center; }
@media (prefers-reduced-motion: reduce) { .menu__sub-btn svg { transition: none; } }
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%); }
/* al saltear la intro, el difuminado entra centrado en el cuadro congelado y se ajusta de a poco (tamaño en main.js, jumpToEnd) */
.hero.is-skipping .hero__video { -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.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 { --pad-top: clamp(72px, 9vw, 130px); padding: var(--pad-top) 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; } }
/* cronograma, jornada del 12: horario, sede y la dirección como enlace a Google Maps (el pin dorado, más grande, reemplaza «Dirección») */
.step__datos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.86); }
.step__datos li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.step__datos li > svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--gold); }
.step__mapa { display: flex; align-items: flex-start; gap: 8px; min-width: 0; color: inherit; text-decoration: none; }
.step__mapa .step__pin { width: 22px; height: 22px; flex: none; margin: -2px -2px 0; color: var(--gold); stroke-width: 2.2; }
.step__dir { display: grid; justify-items: start; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.step__dir > span:first-child { text-decoration: underline; text-decoration-color: rgba(192, 177, 12, 0.6); text-underline-offset: 3px; }
.step__ir { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--gold); background: var(--gold-soft); color: var(--gold); font-family: var(--sans); font-weight: 700; font-size: 12px; }
.step__ir svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.step__mapa:hover .step__ir svg, .step__mapa:focus-visible .step__ir svg { transform: translateX(3px); }
.pins .step__datos { color: var(--muted); }
.pins .step__ir { color: var(--gold-ink); }

/* 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; }
/* the privacy policy beside it: as small, a little brighter (the staff link stays the quietest) */
.footer__legal { display: inline-flex; flex-wrap: wrap; column-gap: 22px; }
.footer .footer__priv { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.footer .footer__priv:hover, .footer .footer__priv:focus-visible { color: #fff; 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; }
/* privacidad.html: numbered sections of short paragraphs */
.legal { --pad-top: clamp(16px, 3vw, 40px); }
.legal__body { display: grid; gap: clamp(28px, 3.4vw, 40px); }
.legal__sec h2 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; font-size: clamp(20px, 2vw, 24px); line-height: 1.25; letter-spacing: -0.01em; }
.legal__n { flex: none; font-size: 14px; font-weight: 800; letter-spacing: 0.1em; color: var(--gold-ink); }
.legal__sec p { font-size: 16px; line-height: 1.65; color: var(--ink); }
.legal__sec p + p { margin-top: 10px; }
.legal__sec a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.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; }
/* the general opening, under the congreso «Inscribite» buttons (js/main.js) */
.apertura-nota { flex-basis: 100%; margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--navy); font-weight: 500; }
.cta-band .apertura-nota { color: #fff; opacity: .85; margin-top: 8px; }

/* 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); }
/* Arrival by anchor (sub-navigation, "Inscribite", congreso.html#… from another page): the section's eyebrow lands 24px under the
   fixed nav plus the sticky sub-navigation, never under them and without the empty band of the section's top padding. The arrival
   margin takes that padding (--pad-top) back out; --subnav-h is measured by js/main.js, these values hold until it runs. */
:root { --subnav-h: 53px; }
.cong-zona > .sec[id] { --pad-top: clamp(72px, 9vw, 130px); padding-top: var(--pad-top); scroll-margin-top: calc(var(--nav-h) + var(--subnav-h) + 24px - var(--pad-top)); }
@media (max-width: 767px) { :root { --subnav-h: 67px; } }
/* Institucional and Actividades (09/10, A1) carry the same sub-navigation: their sections land like congreso's, the eyebrow 24px under
   the bars; Actividades' groups and cards (not sections) clear the bars with their own margin */
.subnav--secciones ~ .sec[id] { scroll-margin-top: calc(var(--nav-h) + var(--subnav-h) + 24px - var(--pad-top)); }
.subnav--secciones ~ .sec .acts-group[id] { scroll-margin-top: calc(var(--nav-h) + var(--subnav-h) + 24px); }
.subnav--secciones ~ .sec .act { scroll-margin-top: calc(var(--nav-h) + var(--subnav-h) + 16px); }
/* a narrow desktop does not fit every section: the strip slides, with the phones' fade at its edges */
@media (min-width: 768px) and (max-width: 1180px) {
  .subnav--secciones ul { gap: 18px; padding-inline: 18px; scroll-padding-inline: 18px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
}
/* 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); }
.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:has(:focus-visible) .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); box-shadow: 0 8px 18px -12px rgba(11, 42, 82, 0.4); }
.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; }
/* cronograma de congreso.html: una línea de tiempo de cuatro días. Cada columna arranca arriba (fecha, año, título, texto,
   datos), así los títulos quedan a la misma altura aunque el 12 traiga más datos. El punto (::before) va sobre el riel y
   cada día dibuja con ::after el tramo hasta el día siguiente: horizontal en escritorio (4 columnas) y tableta
   (2 columnas, un riel por fila), vertical en celular. El 12, jornada principal, lleva el punto y su tramo en dorado. */
.pins { --pins-gap: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--pins-gap); align-items: start; }
.pins .step { grid-template-columns: 1fr; align-content: start; gap: 14px; padding: 42px 0 0; border: 0; }
.pins .step::before { left: 0; top: 0; width: 22px; height: 22px; background: #fff; transform: none; z-index: 1; }
.pins .step::after { content: ""; position: absolute; left: 11px; top: 10px; width: calc(100% + var(--pins-gap)); height: 2px; background: var(--line); }
.pins .step:last-child::after { content: none; }
.pins .step--gold::before { background: var(--gold); box-shadow: 0 0 0 6px var(--gold-soft); }
.pins .step--gold::after { background: linear-gradient(90deg, var(--gold), var(--line)); }
.pins .step--blue::before { border-color: var(--blue); }
.pins .step__cuando { display: grid; gap: 2px; }
.pins .step b { font-size: 20px; line-height: 1.2; color: var(--navy); }
.pins .step small { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--muted); opacity: 1; }
.pins .step__cuerpo { display: grid; gap: 8px; align-content: start; }
.pins .step h4 { margin: 0; font-size: 17px; line-height: 1.3; color: var(--navy); }
.pins .step p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); opacity: 1; }
.pins .step__datos { margin-top: 6px; }
.pins .step--gold b { color: var(--gold-ink); }
@media (max-width: 900px) {
  .pins { grid-template-columns: 1fr 1fr; }
  .pins .step:nth-child(2n)::after { content: none; }
}
@media (max-width: 560px) {
  .pins { grid-template-columns: 1fr; row-gap: 0; }
  .pins .step { gap: 10px; padding: 0 0 30px 40px; }
  .pins .step::after { left: 10px; top: 11px; bottom: 0; width: 2px; height: auto; }
  .pins .step:nth-child(2n)::after { content: ""; }
  .pins .step:last-child { padding-bottom: 0; }
  .pins .step:last-child::after { content: none; }
  .pins .step--gold::after { background: linear-gradient(180deg, var(--gold), var(--line)); }
  .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: the flyer «Raíces y Futuro» in the hero (design 05).
   The lema in the flyer's type: CONGRESO spaced between rules, «Raíces» deep green and «y Futuro» teal on its own
   line with a sprig after it, «25 años aprendiendo juntos» in navy capitals. Behind the text (.cong-escena,
   decorative, no pointer events) a far layer (sky, clouds, the 25) and a near layer (the painted tree with its roots
   and ribbons, two painted leaves): they enter once and move at two speeds while the hero leaves the screen
   (transform only), and a few leaves keep falling while the hero is on screen. */
.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); }
/* the hero's small gold line sits on sky, not paper: one step darker keeps it above 4.5:1 */
.cong-hero__txt .eyebrow { color: #5c5600; }
.cong-titulo { max-width: none; margin-top: 18px; }
.cong-kicker { display: flex; align-items: center; gap: 0.8em; font-family: var(--sans); font-weight: 600; font-size: clamp(14px, 1.35vw, 20px); letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy); }
.cong-kicker::before, .cong-kicker::after { content: ""; flex: 0 0 2.2em; height: 1.5px; background: currentColor; opacity: 0.55; }
.cong-lema { display: block; margin-top: 10px; font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(60px, 8.4vw, 128px); line-height: 0.92; letter-spacing: -0.015em; color: #0c4434; text-wrap: balance;
  background: linear-gradient(180deg, #0b3f31 0%, #0e4a3a 49.5%, #0a6c5d 50.5%, #0b7766 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cong-lema i { font-style: italic; font-size: 0.6em; margin-right: 0.04em; -webkit-text-fill-color: #0a6c5d; }
.cong-lema i::before { content: "\A"; white-space: pre; }
.cong-lema::after { content: ""; display: inline-block; width: 0.56em; height: 0.48em; margin-left: 0.06em; vertical-align: 0.5em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M3 39C12 32 22 22 33 9' stroke='%230a6c5d' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M27 17C29 8 37 2 47 1C45 10 38 17 27 17Z' fill='%230b7766'/%3E%3Cpath d='M17 27C10 20 10 9 16 1C23 9 23 20 17 27Z' fill='%23136b4f'/%3E%3Cpath d='M17 27C17 18 16 10 16 3M27 17C33 12 39 7 45 3' stroke='%23ffffff' stroke-opacity='.35' stroke-width='.9' fill='none'/%3E%3C/svg%3E") left bottom / contain no-repeat; }
/* «25 años aprendiendo juntos»: the second line of the title, in navy capitals as in the flyer. Its size follows the
   lema's (just over a quarter of it, the presence agreed on 01/10) without competing with «Raíces y Futuro». */
.cong-anios { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; align-items: center; gap: 0.5em; margin-top: clamp(16px, 1.6vw, 24px); font-family: var(--sans); font-size: clamp(16px, 2.25vw, 34px); font-weight: 800; letter-spacing: 0.08em; line-height: 1.1; text-transform: uppercase; color: var(--navy); }
.cong-anios__n { font-family: var(--sans); font-size: 1em; font-weight: 800; line-height: 1.1; letter-spacing: inherit; color: inherit; }
.cong-anios__t { display: flex; flex-wrap: wrap; gap: 0.5em; }
@media (max-width: 480px) {
  .cong-kicker { font-size: 13px; letter-spacing: 0.13em; gap: 0.6em; }
  .cong-kicker::before { flex-basis: 1.6em; }
  .cong-kicker::after { display: none; }
}

/* the scene: --txt-x is where the text starts (as .cong-hero__txt's margin), --wrap-r where .wrap ends */
.cong-escena { --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);
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cong-escena::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(to top, var(--paper), rgba(250, 248, 243, 0)); }
.cong-capa { position: absolute; inset: 0; will-change: transform; }
.cong-lejos__in, .cong-cerca__in { position: absolute; inset: 0; }
/* far: the flyer's morning sky, blue at the top right, the sun behind the trunk, paper at the bottom */
.cong-lejos__in {
  background:
    radial-gradient(42% 46% at 13% 36%, rgba(255, 228, 150, 0.78), rgba(255, 236, 180, 0.32) 55%, rgba(255, 236, 180, 0) 100%),
    linear-gradient(203deg, #b9daee 0%, #d4e8f2 20%, #eaf2f2 40%, #f6f6ef 56%, var(--paper) 68%);
}
.cong-cielo { position: absolute; top: 0; right: 0; width: min(46vw, 700px); height: auto; opacity: 0.95; }
.cong-25 { position: absolute; right: 3%; top: 41%; font-family: var(--sans); font-weight: 800; font-size: clamp(240px, 33vw, 500px); line-height: 0.8; letter-spacing: -0.04em; color: #fff; opacity: 0.62; }
/* near: the tree, as in the flyer, from the top of the hero to its bottom; its ribbons sweep under the text */
.cong-arbol img { position: absolute; left: 0; bottom: 0; height: 100%; width: auto; max-width: none; transform-origin: 0 100%; }
.cong-copa { display: none; }
.cong-hoja-pintada { position: absolute; height: auto; }
.cong-hoja-pintada--1 { width: 34px; left: min(26vw, 380px); top: 47%; rotate: -8deg; }
.cong-hoja-pintada--2 { width: 38px; right: 2.4%; top: 33%; }

/* The falling leaves (the same shape and fall as before). They animate transform and opacity only, each on its own
   layer, with no mask around them: each group's box keeps them off the text instead (desktop: "a" is the column over
   the tree, left of the text; "b" the strip right of the page column, only where it is wide enough). main.js pauses
   them (.is-off) while the hero is off screen. */
.cong-hojas { position: absolute; }
.cong-hojas--a { left: 0; top: var(--nav-h); bottom: 0; width: calc(var(--txt-x) - 56px); }
.cong-hojas--b { left: calc(var(--wrap-r) + 10px); right: 0; top: var(--nav-h); bottom: 0; }
.cong-hoja { --kx: var(--x); --ky: var(--y); 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; }
@keyframes cong-hoja {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  8% { opacity: var(--o, 0.8); }
  25% { transform: translate3d(calc(var(--kx) * -0.3), calc(var(--ky) * 0.25), 0) rotate(calc(var(--r) * 0.3)); }
  50% { transform: translate3d(calc(var(--kx) * 0.45), calc(var(--ky) * 0.5), 0) rotate(calc(var(--r) * 0.6)); }
  75% { transform: translate3d(calc(var(--kx) * 0.25), calc(var(--ky) * 0.75), 0) rotate(calc(var(--r) * 0.85)); }
  92% { opacity: var(--o, 0.8); }
  100% { opacity: 0; transform: translate3d(var(--kx), var(--ky), 0) rotate(var(--r)); }
}
.cong-escena.is-off .cong-hoja { animation-play-state: paused; }
@media (min-width: 1101px) and (max-width: 1359px) { .cong-hojas--b { display: none; } }

/* While the hero is on screen the bar drops its frosted glass: a backdrop-filter over the moving layers would be
   computed again on every frame of the scroll. Nearly opaque paper instead; the blur is back once the hero has left
   (main.js toggles html.hero-in-view). */
html.hero-in-view .nav:not([data-state="bare"]) { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(250, 248, 243, 0.95); }

/* phones and tablets: the crown at the top left above the title, the roots and the ribbons at the bottom, under the
   last paragraph (the flyer's bottom-left corner); the sky keeps its corner, the 25 sits behind the buttons. The
   leaves fall in the band above the title ("a", two of them) and over the roots ("b", two). */
@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-cielo { width: min(78vw, 560px); }
  .cong-25 { right: -2%; top: auto; bottom: 30%; font-size: clamp(200px, 58vw, 420px); opacity: 0.5; }
  .cong-copa { display: block; position: absolute; left: -6vw; top: 0; width: min(78vw, 520px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--nav-h) + var(--hero-top) - 120px), transparent calc(var(--nav-h) + var(--hero-top) - 18px));
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--nav-h) + var(--hero-top) - 120px), transparent calc(var(--nav-h) + var(--hero-top) - 18px)); }
  .cong-copa img { display: block; width: 100%; height: auto; transform-origin: 0 0; }
  /* the roots stay under the last paragraph: on wide tablets the picture is taller than that band, so it is cut to it
     and its top edge fades out (the mask is static: it is painted once with the layer, which only moves) */
  .cong-arbol img { left: 0; bottom: 0; width: 100%; height: auto; max-height: calc(var(--hero-bot) - 16px); object-fit: cover; object-position: 0 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 72px); mask-image: linear-gradient(to bottom, transparent 0, #000 72px); }
  .cong-hoja-pintada--1 { width: 26px; left: auto; right: 14%; top: calc(var(--nav-h) + 40px); }
  .cong-hoja-pintada--2 { width: 26px; right: 8%; top: auto; bottom: calc(var(--hero-bot) - 6px); }
  .cong-hojas--a { right: 0; bottom: auto; width: auto; height: calc(var(--hero-top) - 40px); }
  .cong-hojas--b { left: 0; top: auto; height: calc(var(--hero-bot) - 24px); }
  .cong-hoja { --kx: var(--xm); --ky: var(--ym); left: var(--lm); top: var(--tm); }
  .cong-hojas--a .cong-hoja:nth-child(n + 3) { display: none; }
}

/* one entrance, then still */
@media (prefers-reduced-motion: no-preference) {
  .cong-lejos__in { animation: cong-fundido 1.1s ease-out both; }
  .cong-arbol img, .cong-copa img { animation: cong-arbol-in 1.7s var(--ease) 0.1s both; }
  .cong-hoja-pintada { animation: cong-hoja-in 1.4s var(--ease) both; }
  .cong-hoja-pintada--1 { animation-delay: 0.9s; }
  .cong-hoja-pintada--2 { animation-delay: 1.25s; }
}
@keyframes cong-fundido { from { opacity: 0; } }
@keyframes cong-arbol-in { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(1.03); } }
@keyframes cong-hoja-in { from { opacity: 0; transform: translate3d(-14px, -22px, 0) rotate(-24deg); } }

/* the parallax: driven by the scroll itself where the browser can (on the compositor, no script); main.js does the
   same elsewhere */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .cong-lejos { animation: cong-par-lejos linear both; animation-timeline: scroll(root block); animation-range: 0px 1400px; }
    .cong-cerca { animation: cong-par-cerca linear both; animation-timeline: scroll(root block); animation-range: 0px 1400px; }
  }
}
@keyframes cong-par-lejos { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 420px, 0); } }
@keyframes cong-par-cerca { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 140px, 0); } }

/* without motion: the composition at rest, the leaves where they are a third of the way down, nothing moving */
@media (prefers-reduced-motion: reduce) {
  .cong-hoja { animation: none; opacity: var(--o, 0.8); transform: translate3d(calc(var(--kx) * 0.3), calc(var(--ky) * 0.3), 0) rotate(calc(var(--r) * 0.3)); }
}

/* Between the sections below the hero: one short painted stroke, gold with a blue thread (see CONG_SEP in build.py),
   centred on the boundary in a box of no height so the sections keep their own spacing. Static. */
.cong-sep { position: relative; height: 0; pointer-events: none; }
.cong-sep img { position: absolute; left: 50%; top: 0; display: block; width: clamp(150px, 16.7vw, 240px); height: auto; translate: -50% -50%; }
/* 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; }
/* (A3, 09/10) the ejes that were panels on Institucional open the students and teachers groups: title and short description */
.acts-group__intro { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.acts-group__intro h2 { max-width: 22ch; font-size: clamp(28px, 3.2vw, 44px); text-wrap: balance; }
.enc__mas { margin-top: 24px; }

.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 > li > a, body:not(.menu-open) .nav.over-dark:not([data-state="bare"]) .nav__sub-btn { color: rgba(255, 255, 255, 0.86); }
body:not(.menu-open) .nav.over-dark:not([data-state="bare"]) .nav__links > li > a:hover, body:not(.menu-open) .nav.over-dark:not([data-state="bare"]) .nav__links > li > 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; }
[data-cms-empty][hidden] { display: none !important; } /* an editable list's empty state while the list has items (js/cms.js) */
.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 */
/* 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(56px, 8vw, 110px); }
.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; }
}
/* Esencia (the Polo, 09/10, A5): its own section after Misión, three cards in the language of the mission tile (navy, the seal's gold
   arc), the third one gold; the words in serif italic, a sentence under each */
.esencia-sec .head { max-width: 780px; }
.esencia__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.esencia__card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; min-height: clamp(280px, 26vw, 360px); margin: 0;
  padding: clamp(26px, 2.8vw, 40px); border-radius: 18px; background-color: var(--navy); background-image: radial-gradient(90% 70% at 100% 0%, rgba(0, 81, 147, 0.6), transparent 70%); color: #fff; }
.esencia__card:nth-child(3) { background-color: var(--gold); background-image: radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, 0.28), transparent 70%); color: var(--navy); }
.esencia__arc { position: absolute; z-index: -1; top: -30%; right: -36%; width: 92%; opacity: 0.55; pointer-events: none; transition: transform 1.2s var(--ease); }
.esencia__arc svg { display: block; width: 100%; height: auto; overflow: visible; }
.esencia__arc path { fill: none; stroke: var(--gold); stroke-width: 3; }
.esencia__card:nth-child(3) .esencia__arc path { stroke: #fff; }
.esencia__card:hover .esencia__arc { transform: rotate(16deg); }
.esencia__n { margin-bottom: auto; padding-bottom: 18px; font-family: var(--sans); font-size: 13px; font-weight: 800; letter-spacing: 0.2em; color: var(--gold); }
.esencia__card:nth-child(3) .esencia__n { color: var(--navy); }
.esencia__card h3 { margin: 0; font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.12; color: inherit; text-wrap: balance; }
.esencia__card p { margin: 0; max-width: 38ch; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.86); }
.esencia__card:nth-child(3) p { color: var(--navy); }
@media (max-width: 900px) { .esencia__grid { grid-template-columns: minmax(0, 1fr); } .esencia__card { min-height: 220px; } }
@media (prefers-reduced-motion: reduce) { .esencia__arc { transition: none; } .esencia__card:hover .esencia__arc { transform: none; } }

/* Espacios de participación on Institucional (A4): the meetings' lead and orbital seal (.enc__top, as on Actividades) and one tile per
   meeting that opens its card on Actividades */
/* six tiles since 19/10 (PEPELL): three per row, two on a tablet, one on a phone, so no tile is left alone on a row */
.part-inst__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .part-inst__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.part-tile { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--navy);
  transition: border-color 0.3s, box-shadow 0.4s var(--ease), transform 0.4s var(--ease); }
.part-tile__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-ink); }
.part-tile__ico svg { width: 22px; height: 22px; }
.part-tile__txt { display: flex; flex: 1; flex-direction: column; gap: 6px; }
.part-tile__txt b { font-family: var(--sans); font-size: 17px; line-height: 1.25; color: var(--navy); }
.part-tile__txt span { font-size: 14px; line-height: 1.45; color: var(--muted); }
.part-tile__go { align-self: flex-end; display: grid; place-items: center; color: var(--blue); transition: transform 0.4s var(--ease); }
.part-tile__go svg { width: 18px; height: 18px; }
.part-tile:hover { border-color: rgba(192, 177, 12, 0.7); box-shadow: 0 16px 30px -22px rgba(11, 42, 82, 0.5); transform: translateY(-3px); }
.part-tile:hover .part-tile__go { transform: translateX(4px); }
.part-tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.part-inst__mas { margin-top: 28px; }
@media (max-width: 560px) {
  .part-inst__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .part-tile { flex-direction: row; align-items: center; gap: 14px; padding: 16px; }
  .part-tile__ico { flex: none; width: 42px; height: 42px; }
  .part-tile__go { align-self: center; }
}
@media (prefers-reduced-motion: reduce) { .part-tile, .part-tile__go { transition: none; } .part-tile:hover, .part-tile:hover .part-tile__go { 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) { .esencia-sec, .part-inst, .mision, .autoridades, .staff, #asociarse { --pad-top: clamp(44px, 7vw, 84px); padding: var(--pad-top) 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 > li > a:hover, .nav.has-arc .nav__links > li > 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 > li > a { position: relative; }
.nav__links > li > 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 > li > 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 div.mail-copy { align-self: flex-start; margin: 2px 0; }
.mail-card { font: inherit; cursor: pointer; }
.mail-card:focus-visible, .mail-copiar:focus-visible, .mail-copy__abrir:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.footer .mail-card:focus-visible, .footer .mail-copy__abrir:focus-visible { outline-color: var(--gold); }
/* the address card copies the e-mail on press (js/main.js [data-copiar]) and says "Copiado" in its own label for two seconds; "Abrir correo" keeps the mailto: one press away */
div.mail-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 100%; }
.footer div.mail-copy { width: 100%; max-width: 360px; }
.mail-copy--inline { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 16px; }
.mail-copy__abrir { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--blue); text-decoration: underline; text-decoration-color: rgba(192, 177, 12, 0.7); text-underline-offset: 4px; }
.mail-copy__abrir:hover { text-decoration-color: currentColor; }
.footer .mail-copy__abrir { color: var(--gold); }
.mail-copiar { min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer; text-align: center; }
.mail-copiar [data-copiar-lab] { overflow-wrap: anywhere; }
.mail-card.is-copiado { border-color: var(--gold); }
.footer .mail-card.is-copiado { background: rgba(192, 177, 12, 0.18); }
.mail-card.is-copiado > svg { background: var(--navy); color: var(--gold); }
[data-copiar].is-copiado [data-copiar-lab]::before { content: "\2713\00a0"; }
/* 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) {
  div.mail-copy, .footer div.mail-copy { width: 100%; max-width: none; }
  .mail-copy--inline { width: auto; }
  .mail-card, .dl .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 y objetivos: un mosaico (la opción 05 que eligió el dueño, 05/10). La misión grande en azul; cada objetivo una tesela, cuatro
   con foto y dos de texto (la última dorada). Legibilidad: el epígrafe sobre una foto va siempre en blanco y por encima de la capa en
   degradé azul (.obj-tile--foto::after), que llega a 0.9 de opacidad bajo el texto. En celular, dos columnas: la foto arriba, sin
   texto encima, y el epígrafe debajo sobre azul. */
.mision { position: relative; overflow: hidden; }
.obj-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); gap: 16px;
  grid-template-areas: "m m o2 o2" "m m o1 o3" "o4 o4 o5 o6"; }
.obj-tile { position: relative; min-width: 0; margin: 0; border-radius: 14px; overflow: hidden; }
.obj-tile--mision { grid-area: m; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 3.4vw, 48px); background: var(--navy); color: #fff; }
.obj-tile[data-obj="1"] { grid-area: o1; }
.obj-tile[data-obj="2"] { grid-area: o2; }
.obj-tile[data-obj="3"] { grid-area: o3; }
.obj-tile[data-obj="4"] { grid-area: o4; }
.obj-tile[data-obj="5"] { grid-area: o5; }
.obj-tile[data-obj="6"] { grid-area: o6; }
.obj-tile__arc { position: absolute; top: -26%; right: -32%; width: 88%; opacity: 0.5; pointer-events: none; }
.obj-tile__arc svg { width: 100%; height: auto; overflow: visible; }
.obj-tile__arc path { fill: none; stroke: var(--gold); stroke-width: 3; }
.obj-tile--mision .eyebrow { position: relative; display: block; margin-bottom: 18px; color: var(--gold); }
.obj-tile--mision blockquote { position: relative; margin: 0; font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.3; color: #fff; text-wrap: pretty; }
.obj-tile--mision 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); }
.obj-tile__n { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 700; font-size: 34px; line-height: 1; color: var(--gold); font-variant-numeric: lining-nums; }
.obj-tile__t { margin-top: 8px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.15; color: inherit; }
.obj-tile__s { margin-top: 8px; max-width: 46ch; font-size: 15px; line-height: 1.45; }
.obj-tile__cap { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 22px 24px; }
.obj-tile--foto { background: var(--navy); color: #fff; }
.obj-tile--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92); transition: transform 1.2s var(--ease), filter 0.6s; }
.obj-tile--foto::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 42, 82, 0) 16%, rgba(11, 42, 82, 0.58) 42%, rgba(11, 42, 82, 0.9) 66%, rgba(11, 42, 82, 0.96)); }
.obj-tile--foto .obj-tile__t, .obj-tile--foto .obj-tile__s { color: #fff; text-shadow: 0 1px 10px rgba(11, 42, 82, 0.6); }
.obj-tile--foto:hover img { transform: scale(1.05); filter: saturate(1.05); }
.obj-tile--texto { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 22px 24px; border: 1px solid var(--line); background: #fff; color: var(--navy); }
.obj-tile--texto .obj-tile__cap { height: auto; padding: 0; }
.obj-tile--texto .obj-tile__n { font-size: 64px; line-height: 0.9; }
.obj-tile--texto .obj-tile__s { color: var(--ink); }
.obj-tile__ico { position: absolute; top: 22px; right: 22px; width: 28px; height: 28px; color: var(--gold-ink); }
.obj-tile--oro { border-color: var(--gold); background: var(--gold); }
.obj-tile--oro .obj-tile__n, .obj-tile--oro .obj-tile__s, .obj-tile--oro .obj-tile__ico { color: var(--navy); }
@media (max-width: 1100px) { .obj-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "m m" "o1 o2" "o3 o4" "o5 o6"; } }
@media (max-width: 767px) {
  .about, .numeros, .stair { --pad-top: clamp(44px, 7vw, 84px); padding: var(--pad-top) 0; }
  .obj-mosaic { grid-auto-rows: auto; gap: 10px; }
  .obj-tile--mision { padding: 26px 22px 28px; }
  .obj-tile--mision blockquote { font-size: 22px; }
  .obj-tile--foto { display: flex; flex-direction: column; }
  .obj-tile--foto img { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; }
  .obj-tile--foto::after { bottom: auto; height: auto; aspect-ratio: 4 / 3; background: linear-gradient(180deg, rgba(11, 42, 82, 0) 55%, rgba(11, 42, 82, 0.9)); }
  .obj-tile--foto .obj-tile__cap { flex: 1; justify-content: flex-start; height: auto; margin-top: -18px; padding: 0 14px 18px; }
  .obj-tile--foto .obj-tile__t, .obj-tile--foto .obj-tile__s { text-shadow: none; }
  .obj-tile--texto { gap: 10px; padding: 16px 14px 18px; }
  .obj-tile--texto .obj-tile__n { font-size: 40px; }
  .obj-tile__ico { top: 16px; right: 14px; width: 22px; height: 22px; }
  .obj-tile__n { font-size: 24px; }
  .obj-tile__t { margin-top: 6px; font-size: 16px; }
  .obj-tile__s { margin-top: 6px; font-size: 15px; line-height: 1.4; hyphens: auto; }
}
@media (prefers-reduced-motion: reduce) { .obj-tile--foto img { transition: none; } .obj-tile--foto:hover img { transform: none; } }

/* 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 */
/* (A6, 09/10) the archive opens Nuestra historia right under its title, like the mosaic opens Misión; the story's steps follow it */
.archivo { margin-top: 0; }
.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; }
/* (M1, 19/10) the vocales' photos sit between the mesa's portraits and the revisora's row photos; the escudo badge keeps the row size */
.person--vocal { grid-template-columns: 124px minmax(0, 1fr); gap: 20px; }
.person--vocal .person__photo i { margin-top: 22px; font-size: 42px; }
.board-more { display: grid; grid-template-columns: 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(3, 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); }
/* Staff (A8, 09/10): the head on the left and the two portrait cards on the board's own grid, so they have the mesa's size */
.staff__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); align-items: start; }
.staff__head { grid-column: span 2; }
.staff__head h2 { margin-top: 14px; }
.staff__people { grid-column: span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); align-items: start; }
/* the Comisión Revisora de Cuentas, a group of the Comisión Directiva since 15/10 (P8): the vocales' heading, its three cards in a row */
.board__revisora { margin-top: clamp(22px, 3vw, 44px); }
.subnav--secciones ~ .sec .board__revisora[id] { scroll-margin-top: calc(var(--nav-h) + var(--subnav-h) + 24px); }
.revisora__people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) {
  .board__mesa, .staff__grid, .staff__people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff__head { grid-column: 1 / -1; }
  .staff__people { grid-column: 1 / -1; }
  .board__vocales, .board-more, .revisora__people { grid-template-columns: 1fr; }
  .board__list--honor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .board__list--honor { grid-template-columns: 1fr; }
  .person--fila { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .person--vocal { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; }
  .person--vocal .person__photo i { margin-top: 18px; font-size: 36px; }
  .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 */
/* "Inscribite" (congreso.html#inscripciones) lands like the other congreso sections (see .subnav above): the eyebrow 24px under
   nav + sub-navigation. The arrival margin used to clear only the bars, so the whole top padding (130px on desktop) showed as an
   empty band above "Inscripciones"; now it takes --pad-top back out (phones trim the padding itself, see the T6 block). */
.insc { --insc-err: #a3322b; --pad-top: clamp(72px, 9vw, 130px); padding-top: var(--pad-top); scroll-margin-top: calc(var(--nav-h) + var(--subnav-h) + 24px - var(--pad-top)); }
.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; }
/* the price while a discounted tier holds (js/main.js textoPrecio): the full price, then the discount as a gold mark */
/* the price as a promotion reads: list price struck out, the price to pay large, the discount and its deadline in a gold tag */
.precio__promo { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.precio__antes { color: var(--muted); font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.precio__ahora { font-family: var(--sans); font-size: 1.35em; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; }
.precio__por { color: var(--ink); }
.precio__dto { padding: 1px 7px; border-radius: 6px; background: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(192, 177, 12, 0.55); color: var(--navy); font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.insc-grupo { color: var(--muted); }
.insc-grupo a { color: var(--blue); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(192, 177, 12, 0.7); text-underline-offset: 3px; }

/* 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; }
/* the schools-first window: the general opening date, in place of the choice */
.insc-apertura { gap: 6px; margin-bottom: 14px; border-left: 3px solid var(--gold); background: var(--gold-soft); }
.insc-apertura .insc-aviso__t { color: var(--navy); font-weight: 600; }
.insc-apertura p:last-child:not([hidden]) { margin-top: 4px; }
.insc-linkbtn--pad { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

/* (P1.3) the account first: the shared way in (the same block as the sign-in sheet), a reserved place while the account is being
   resolved, the account in use and what the database says about it */
.insc { --auth-err: var(--insc-err); }
.insc-ingreso { padding-top: 2px; }
.insc-cargando { display: grid; align-content: start; gap: 12px; max-width: 420px; }
.insc-cargando i { display: block; height: 48px; 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; }
/* the unknown account's question: one muted line for member-school staff, with "Cambiar de cuenta" */
.insc-cambiar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin: -6px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
/* step 4, non-members: the transfer is the only way to pay, stated in one line like the price */
.insc-pago__metodo { margin: 0 0 16px; }
.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 .insc-f { margin-top: 16px; }
/* The transfer card (js/main.js PEPUI.tarjetaBanco; wizard step 4 and done step, Mis inscripciones): a navy band with the amount in
   gold, the reference on a soft gold strip, the account rows with their copy buttons, the steps and the receipt at the foot.
   Pending values (no bank data yet) are muted, the CBU mask with a slow shine; their copy buttons are off and dashed. */
.banco { position: relative; margin-top: 16px; border: 1px solid rgba(11, 42, 82, 0.12); border-radius: 18px; background: #fff; box-shadow: 0 22px 44px -28px rgba(11, 42, 82, 0.45); overflow: hidden; text-align: left; }
.banco__cuerpo { padding-bottom: 18px; }
.banco__top { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 20px 20px; color: #fff;
  background: radial-gradient(120% 160% at 100% 0%, rgba(192, 177, 12, 0.28), transparent 55%), linear-gradient(135deg, var(--navy) 0%, #12407a 100%); }
.banco__marca { position: absolute; right: -36px; bottom: -64px; width: 150px; height: 150px; border: 1.5px solid rgba(192, 177, 12, 0.35); border-radius: 50%; pointer-events: none; }
.banco__marca::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; }
.banco__monto { position: relative; min-width: 0; }
.banco__monto small { display: block; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.banco__monto b { display: block; margin-top: 4px; font-family: var(--sans); font-size: clamp(28px, 6vw, 36px); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: var(--gold); font-variant-numeric: tabular-nums; }
.banco__monto span { display: block; margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.banco__ref { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--gold-soft); }
.banco__ref-t { grid-column: 1; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
.banco__ref b { grid-column: 1; font-family: var(--sans); font-size: 18px; font-weight: 800; letter-spacing: 0.04em; color: var(--navy); overflow-wrap: anywhere; }
.banco__ref.is-pendiente b { font-size: 14.5px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.banco__ref .banco__copiar { grid-column: 2; grid-row: 1 / span 2; }
.banco__datos { margin: 0; padding: 4px 20px 0; }
.banco__fila { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.banco__fila:last-child { border-bottom: 0; }
.banco__fila dt { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
.banco__fila dd { margin: 0; min-width: 0; font-family: var(--sans); font-size: 15.5px; font-weight: 700; color: var(--navy); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.banco__fila--cbu dd { letter-spacing: 0.03em; }
.banco__fila.is-pendiente dd { font-weight: 600; color: var(--muted); }
.banco__fila--cbu.is-pendiente dd { color: transparent; background: linear-gradient(100deg, rgba(91, 100, 116, 0.5) 40%, rgba(91, 100, 116, 0.85) 50%, rgba(91, 100, 116, 0.5) 60%) 100% 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; animation: banco-pendiente 3.2s ease-in-out infinite; }
@keyframes banco-pendiente { to { background-position: 0 0; } }
.banco__copiar { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1.5px solid rgba(11, 42, 82, 0.18); border-radius: 999px;
  background: #fff; font-family: var(--sans); font-size: 13px; font-weight: 800; color: var(--navy); cursor: pointer; white-space: nowrap; transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.2s; }
.banco__copiar svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.banco__copiar svg + svg { display: none; }
.banco__copiar:hover:not(:disabled) { border-color: var(--gold); }
.banco__copiar:active:not(:disabled) { transform: scale(0.96); }
.banco__copiar:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.banco__copiar.is-copiado { border-color: var(--gold); background: var(--gold); color: var(--navy); }
.banco__copiar.is-copiado svg:first-child { display: none; }
.banco__copiar.is-copiado svg + svg { display: block; }
.banco__copiar:disabled { border-style: dashed; opacity: 0.45; cursor: default; }
.banco__top .banco__copiar { position: relative; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08); color: #fff; }
.banco__top .banco__copiar.is-copiado { border-color: var(--gold); background: var(--gold); color: var(--navy); }
.banco__nota { margin: 6px 20px 0; padding: 10px 14px; border-radius: 10px; background: var(--paper); font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.banco__pasos { display: grid; gap: 10px; margin: 16px 0 0; padding: 0 20px; list-style: none; counter-reset: banco; }
.banco__pasos li { position: relative; padding-left: 36px; font-size: 14.5px; line-height: 1.5; color: var(--ink); counter-increment: banco; }
.banco__pasos li::before { content: counter(banco); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); font-family: var(--sans); font-size: 12px; font-weight: 800; color: #fff; }
.banco .banco__pie { margin: 0; padding: 16px 20px 20px; border-top: 1px solid var(--line); background: var(--paper); }
.banco__adjuntar { min-height: 44px; margin-top: 12px; }
.banco__hecho { font-size: 14.5px; color: var(--ink); }
.insc-done__banco { margin-top: 18px; }
@media (max-width: 480px) {
  /* phones: the copy buttons are their icon until they copy, then they also say "Copiado" */
  .insc-pago .banco { margin-inline: -8px; }
  .banco__top, .banco__ref { padding-inline: 16px; }
  .banco__datos, .banco__pasos { padding-inline: 16px; }
  .banco__nota { margin-inline: 16px; }
  .banco .banco__pie { padding-inline: 16px; }
  .banco__fila { grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; }
  .banco__fila dt { grid-column: 1; }
  .banco__fila dd { grid-column: 1; }
  .banco__fila .banco__copiar { grid-column: 2; grid-row: 1 / span 2; }
  .banco__copiar { padding: 0; width: 44px; }
  .banco__copiar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .banco__copiar.is-copiado { width: auto; padding: 0 12px; }
  .banco__copiar.is-copiado span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
/* 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); }
/* the parallel session of an afternoon person, while the choice is open (js/main.js paintParalela); the options are the portal's .par-op */
.insc-par { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.insc-par__t { float: left; width: 100%; padding: 0; margin-bottom: 10px; font-family: var(--sans); font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--navy); }
.insc-par .par-op__txt small { font-size: 13.5px; }
.insc-sum__ev .insc-sum__par { color: var(--navy); font-weight: 600; }
.insc-done__notes .insc-par-aviso a { font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
/* 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; }
/* Sharing the data with the sponsors (wizard step 4, accreditation, Mis inscripciones): ONE card (the Polo, 13/10: easy to answer,
   visibly required, nothing chosen beforehand). The eyebrow says the answer is required, the question is the title and two large
   buttons answer it: "Sí" first, gold (the primary), "No" outlined; on phones they stack. The chosen one shows its check and a ring,
   the other steps back. .is-error (set by PEPUI.consentimiento when someone tries to continue unanswered) outlines the card in red. */
.consent { margin-top: 28px; padding: clamp(18px, 2.4vw, 24px); border: 1.5px solid rgba(192, 177, 12, 0.55); border-radius: 16px; background: #fff; box-shadow: 0 14px 32px -26px rgba(11, 42, 82, 0.45); transition: border-color 0.3s, box-shadow 0.3s; }
.consent__eb { margin: 0 0 8px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; color: var(--gold-ink); }
.consent__q { margin: 0; font-family: var(--sans); font-size: clamp(16px, 1.5vw, 18px); font-weight: 700; line-height: 1.35; color: var(--navy); }
.consent__ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 460px; margin-top: 16px; }
.consent__op { justify-content: center; gap: 0; width: 100%; height: auto; min-height: 52px; padding: 0 20px; font-size: 16px; -webkit-tap-highlight-color: transparent; }
.consent__op:hover svg { transform: none; }
.consent__op:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.consent__ico { display: inline-grid; place-items: center; width: 0; margin-right: 0; overflow: hidden; opacity: 0; transition: width 0.25s var(--ease), margin-right 0.25s var(--ease), opacity 0.2s; }
.consent__ico svg { width: 18px; height: 18px; stroke-width: 2.6; }
.consent__op[aria-pressed="true"] .consent__ico { width: 20px; margin-right: 8px; opacity: 1; }
.consent__op--si[aria-pressed="true"] { box-shadow: 0 0 0 3px rgba(192, 177, 12, 0.3); }
.consent__op--no[aria-pressed="true"], .consent__op--no[aria-pressed="true"]:hover { border-color: var(--navy); background: var(--navy); color: #fff; box-shadow: 0 0 0 3px rgba(11, 42, 82, 0.16); }
.consent[data-value="no"] .consent__op--si { border-color: rgba(192, 177, 12, 0.7); background: #fff; }
.consent[data-value="no"] .consent__op--si:hover { border-color: var(--gold); background: rgba(192, 177, 12, 0.08); }
.consent[data-value="si"] .consent__op--no { color: var(--muted); }
.consent__op:disabled { cursor: default; opacity: 0.7; box-shadow: none; }
.consent__ops[aria-busy="true"] .consent__op { cursor: progress; }
.consent__ayuda { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.consent__ayuda a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.consent__err { margin-top: 8px; }
.consent.is-error { border-color: var(--insc-err, #a3322b); box-shadow: 0 0 0 3px rgba(163, 50, 43, 0.12); }
.consent.is-error .consent__err { color: var(--insc-err, #a3322b); font-weight: 600; }
@media (max-width: 560px) { .consent__ops { grid-template-columns: minmax(0, 1fr); max-width: none; } }

/* 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; }
/* (P12) the pre-accreditation notice: above the wizard, calm, on paper with the gold rule; a muted line in step 4 */
.insc-sala--top { display: flex; gap: 12px; align-items: flex-start; max-width: 860px; margin: 0 0 26px; padding: 14px 18px; border-left: 3px solid var(--gold); border-radius: 0 14px 14px 0; background: var(--paper); }
.insc-sala--top svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--gold-ink); }
.insc-sala--top p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.insc-sala--paso { margin: 8px 0 14px; }
.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 { 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; }
  .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 { 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-entrada__auth { margin-top: 6px; }
.mis-entrada:has(> .mis-entrada__auth) { max-width: 540px; }
.gx-entrada { margin-top: 4px; }
.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; }
/* wide screens: the card takes the page width */
@media (min-width: 1200px) {
  .mis-lista__cab, .mis-reg, .mis-aviso, .mis-vacio { max-width: 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-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; }
/* ---------------------------------------------------------------- Tu equipo (equipo.html): the team of a member school or of a sponsor.
   A navy-edged header (who the team is, the places as a meter, the two ways in), then the list: a search box, filters that count, and one
   dense row per person (initials, name and source, masked DNI and e-mail, the state chip with the days, icon actions at the right). On
   phones the header stacks and each row folds into lines. */
#eqRoot { --mis-err: #a3322b; --mis-err-soft: rgba(163, 50, 43, 0.06); --eq-sombra: 0 1px 2px rgba(11, 42, 82, 0.04), 0 24px 48px -32px rgba(11, 42, 82, 0.4); }
.eq-app { display: grid; gap: 20px; }
.eq-app > .card { box-shadow: var(--eq-sombra); }
.eq-cab { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); align-items: start; gap: 20px 36px; padding: clamp(20px, 3vw, 32px); overflow: hidden; }
.eq-cab::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--gold), var(--blue)); }
.eq-cab__id { min-width: 0; }
.eq-cab__t { margin: 6px 0 10px; font-size: clamp(24px, 2.8vw, 34px); outline: none; overflow-wrap: anywhere; }
.eq-cab__cuenta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.eq-cab__ico { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--gold); }
.eq-cab__ico svg { width: 15px; height: 15px; }
.eq-cab__otra { min-height: 44px; padding: 0 2px; border: 0; background: none; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--blue); cursor: pointer; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.eq-cab__otra:hover { color: var(--navy); }
.eq-cupo { padding: 16px 18px 14px; border-radius: 14px; background: var(--navy); color: #fff; }
.eq-cupo__t { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.3; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.eq-cupo__barra { display: flex; height: 6px; margin: 10px 0 8px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, 0.18); }
.eq-cupo__barra i { display: block; flex: none; height: 100%; background: var(--gold); transition: width 0.4s var(--ease); }
.eq-cupo__barra .eq-cupo__reserva { background: repeating-linear-gradient(135deg, rgba(192, 177, 12, 0.75) 0 3px, rgba(192, 177, 12, 0.3) 3px 6px); }
.eq-cupo__sub { display: block; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.8); }
.eq-cupo__reservas { margin-top: 4px; color: rgba(255, 255, 255, 0.66); }
.eq-cupo.is-lleno { box-shadow: inset 0 0 0 2px var(--gold); }
.eq-cab__acc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.eq-cab__acc .btn svg { width: 18px; height: 18px; }
/* a sponsor's two groups: the stand staff and the courtesy guests, side by side (stacked on phones); the pressed one is the one on show */
.eq-grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.eq-grupos[hidden] { display: none; }
.eq-grupo { display: grid; align-content: start; gap: 6px; min-height: 44px; padding: 18px 20px; border: 1px solid var(--line); text-align: left; font: inherit; color: var(--ink); cursor: pointer; box-shadow: var(--eq-sombra); transition: border-color 0.2s, box-shadow 0.2s; }
.eq-grupo:hover { border-color: rgba(0, 81, 147, 0.4); }
.eq-grupo:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.eq-grupo[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 4px 0 0 var(--gold), var(--eq-sombra); }
.eq-grupo__t { font-family: var(--sans); font-size: 17px; font-weight: 800; color: var(--navy); }
.eq-grupo__p { font-size: 14px; line-height: 1.45; color: var(--muted); }
.eq-grupo__n { font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.eq-grupo__d { font-size: 13px; color: var(--muted); }
.eq-grupo__d:empty { display: none; }
@media (max-width: 640px) { .eq-grupos { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .eq-grupo { transition: none; } }
.eq-yo { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 220px)) auto; align-items: start; gap: 12px 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.eq-yo__t { grid-column: 1 / -1; margin: 0; font-size: 14.5px; color: var(--ink); }
.eq-yo__acc { display: flex; flex-wrap: wrap; align-self: end; gap: 10px; padding-bottom: 3px; }
.eq-yo__acc .btn { min-height: 46px; }
.eq-yo__acc .btn svg { width: 16px; height: 16px; }
.eq-lista { padding: clamp(18px, 3vw, 28px); }
.eq-lista__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.eq-lista__t { font-size: clamp(20px, 2.2vw, 24px); }
.eq-buscar { position: relative; flex: 1 1 260px; max-width: 380px; }
.eq-buscar svg { position: absolute; top: 50%; left: 15px; width: 18px; height: 18px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.eq-buscar input { width: 100%; height: 46px; padding: 0 16px 0 42px; border: 1px solid rgba(11, 42, 82, 0.22); border-radius: 999px; background: #fff; font: 15px/1.4 var(--body); color: var(--ink); }
.eq-buscar input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.eq-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.eq-filtro { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--navy); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.eq-filtro b { min-width: 26px; padding: 3px 8px; border-radius: 99px; background: var(--cream); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.eq-filtro:hover { border-color: rgba(0, 81, 147, 0.4); }
.eq-filtro:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.eq-filtro[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.eq-filtro[aria-pressed="true"] b { background: var(--gold); color: var(--navy); }
.eq-filas { margin: 8px 0 0; padding: 0; list-style: none; }
.eq-fila { padding: 12px 4px; border-top: 1px solid var(--line); }
.eq-fila:first-child { border-top: 0; }
.eq-fila__grid { display: grid; grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, 1.7fr) auto; align-items: center; gap: 8px 16px; }
.eq-fila__quien { min-width: 0; }
.eq-fila__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.eq-fila__nombre { font-family: var(--sans); font-size: 15.5px; font-weight: 800; color: var(--navy); overflow-wrap: anywhere; outline: none; }
.eq-fila__datos { margin: 2px 0 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.eq-tag { padding: 2px 8px; border-radius: 6px; background: rgba(0, 81, 147, 0.08); font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--blue); }
.eq-fila__estado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.eq-fila__estado .chip { padding: 3px 9px; letter-spacing: 0.04em; }
.eq-fila__nota { margin: 0; font-size: 13px; color: var(--muted); }
.eq-dias { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.eq-dia { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 4px 9px; border: 1px solid rgba(11, 42, 82, 0.08); border-left: 3px solid var(--gold); border-radius: 8px; background: var(--paper); font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.eq-dia b { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-ink); }
.eq-dia--ses { border-left-color: var(--blue); }
.eq-dia--ses b { color: var(--blue); }
.eq-fila__acc { display: flex; justify-self: end; gap: 2px; }
.eq-fila.is-baja .eq-fila__nombre { color: var(--muted); }
.eq-fila.is-baja .mis-persona__ini { background: rgba(91, 100, 116, 0.12); color: var(--muted); }
.eq-fila .mis-slot:empty { display: none; }
.eq-fila .mis-panel { margin: 12px 0 4px 56px; background: #fff; }
.eq-aviso.is-error p { color: var(--mis-err); }
.eq-fila__reserva { color: var(--gold-ink); font-weight: 600; }
.eq-pedido__p { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.eq-pedido textarea { display: block; width: 100%; min-height: 88px; padding: 12px 14px; border: 1px solid rgba(11, 42, 82, 0.22); border-radius: 10px; background: #fff; font: 15px/1.5 var(--body); color: var(--ink); resize: vertical; }
.eq-pedido textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.pn-pedidos { margin: 0 0 24px; }
.eq-vacio { margin: 16px 0 4px; padding: 22px; border: 1.5px dashed var(--line); border-radius: 14px; text-align: center; color: var(--muted); }
/* the bulk add: where the list comes from (a pasted list, a CSV file), the grid, the summary and the outcome per row */
.eq-carga { padding: clamp(18px, 3vw, 28px); border-top: 4px solid var(--gold); }
.eq-carga__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.eq-carga__t { font-size: clamp(20px, 2.2vw, 24px); outline: none; }
.eq-carga__lead { margin: 6px 0 0; max-width: 62ch; font-size: 14.5px; color: var(--muted); }
.eq-carga__cerrar { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; }
.eq-carga__cerrar svg { width: 18px; height: 18px; }
.eq-carga__cerrar:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.eq-fuentes { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: 12px; margin: 18px 0 0; }
.eq-pegar { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.eq-pegar > summary { display: flex; align-items: center; min-height: 52px; padding: 0 18px; cursor: pointer; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--blue); }
.eq-pegar__cuerpo { display: grid; gap: 10px; padding: 0 18px 18px; }
.eq-pegar__l { font-size: 13.5px; color: var(--muted); }
.eq-pegar textarea { width: 100%; min-height: 120px; padding: 12px 14px; border: 1px solid rgba(11, 42, 82, 0.22); border-radius: 10px; background: #fff; font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); resize: vertical; }
.eq-pegar textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.eq-pegar .btn { justify-self: start; }
.eq-csv { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 18px; border: 1.5px dashed rgba(0, 81, 147, 0.35); border-radius: 14px; background: #fff; color: var(--blue); cursor: pointer; transition: border-color 0.25s, background-color 0.25s; }
.eq-csv:hover, .eq-csv:focus-within { border-color: var(--gold); background: var(--gold-soft); }
.eq-csv svg { flex: none; width: 20px; height: 20px; }
.eq-csv span { display: grid; gap: 2px; }
.eq-csv b { font-family: var(--sans); font-size: 14px; color: var(--navy); }
.eq-csv small { font-size: 12.5px; color: var(--muted); }
.eq-csv input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.eq-fuentes__msg { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: var(--verde); }
.eq-grid { margin-top: 18px; }
.eq-grid__cab, .eq-cf { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.5fr) 44px; gap: 8px; }
.eq-grid__cab { padding: 0 6px 6px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.eq-grid__filas { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.eq-cf { align-items: start; padding: 6px; border: 1px solid transparent; border-radius: 12px; }
.eq-cf.has-error { border-color: rgba(163, 50, 43, 0.25); background: var(--mis-err-soft); }
.eq-cf.is-lista .eq-cf__n { background: rgba(31, 107, 90, 0.12); color: var(--verde); }
.eq-cf__n { display: grid; place-items: center; height: 44px; border-radius: 8px; font-family: var(--sans); font-size: 12px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.eq-c { display: grid; gap: 4px; min-width: 0; }
.eq-c__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.eq-c input { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid rgba(11, 42, 82, 0.22); border-radius: 9px; background: #fff; font: 14.5px/1.4 var(--body); color: var(--ink); }
.eq-c input::placeholder { color: rgba(91, 100, 116, 0.6); }
.eq-c input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.eq-c input[aria-invalid="true"] { border-color: var(--mis-err); box-shadow: 0 0 0 3px rgba(163, 50, 43, 0.1); }
.eq-c__err { font-size: 12.5px; line-height: 1.35; font-weight: 600; color: var(--mis-err); }
.eq-cf__x { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.eq-cf__x svg { width: 17px; height: 17px; }
.eq-cf__x:hover, .eq-cf__x:focus-visible { background: var(--mis-err-soft); color: var(--mis-err); }
.eq-cf__x:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.eq-mas { margin-top: 10px; }
.eq-carga__pie { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 16px calc(-1 * clamp(18px, 3vw, 28px)) 0; padding: 14px clamp(18px, 3vw, 28px); border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.96); }
.eq-carga__resumen { margin: 0; font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.eq-carga__resumen.has-error { color: var(--mis-err); }
.eq-carga__err { margin-top: 10px; }
.eq-res { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.eq-res__t { margin: 0 0 10px; font-size: 16px; outline: none; }
.eq-res__l { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.eq-res__i { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.eq-res__i:first-child { border-top: 0; }
.eq-res__quien { display: grid; min-width: 0; }
.eq-res__quien b { font-family: var(--sans); font-size: 14px; color: var(--navy); overflow-wrap: anywhere; }
.eq-res__quien small { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.eq-res__i .chip { max-width: 100%; text-transform: none; letter-spacing: 0; font-size: 12.5px; white-space: normal; }
@media (max-width: 959px) {
  .eq-grid__cab { display: none; }
  .eq-grid__filas { gap: 10px; }
  .eq-cf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 12px 14px 14px; border-color: var(--line); background: #fff; }
  .eq-cf__n { grid-column: 1; grid-row: 1; justify-self: start; display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px; font-size: 13px; white-space: nowrap; }
  .eq-cf__n::before { content: "Persona "; font-weight: 700; }
  .eq-cf__x { grid-column: 2; grid-row: 1; justify-self: end; }
  .eq-c__l { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); }
  .eq-c--correo { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .eq-fuentes { grid-template-columns: minmax(0, 1fr); }
  .eq-cf { grid-template-columns: minmax(0, 1fr); }
  .eq-cf__x { grid-column: 1; }
  .eq-c--correo { grid-column: auto; }
  .eq-carga__pie .btn { flex: 1 1 auto; }
}
@media (max-width: 959px) {
  .eq-fila__grid { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .eq-fila__estado { grid-column: 2 / -1; grid-row: 2; }
  .eq-fila__acc { grid-column: 3; grid-row: 1; }
}
@media (max-width: 767px) {
  .eq-cab { grid-template-columns: minmax(0, 1fr); }
  .eq-cab__acc .btn { flex: 1 1 auto; }
  .eq-yo { grid-template-columns: minmax(0, 1fr); }
  .eq-yo__acc { padding-bottom: 0; }
  .eq-buscar { max-width: none; }
  #eqRoot .chip { font-size: 12px; }
  .eq-fila__grid { grid-template-columns: 36px minmax(0, 1fr); gap: 8px 12px; }
  .eq-fila .mis-persona__ini { width: 36px; height: 36px; }
  .eq-fila__estado { grid-column: 2; grid-row: 2; }
  .eq-fila__acc { grid-column: 2; grid-row: 3; flex-wrap: wrap; justify-self: start; gap: 0 4px; margin-left: -10px; }
  .eq-fila .mis-panel { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .eq-cupo__barra i, .eq-filtro { transition: none; } }
/* Mis inscripciones: la credencial plegada de cada persona (la misma de la inscripción, con el sello «confirmada» o «en revisión») */
.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; }
/* the sponsors card of each registration (the .consent card of the wizard), under the people */
.mis-consent { margin-top: 18px; }
.mis-consent .consent { margin-top: 0; }
.mis-sponsor .mis-reg__sub { max-width: 56ch; }
.mis-pago { margin: 0 0 18px; }
.mis-persona__acc a.insc-linkbtn { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------------------------------------------------------------- Mis inscripciones v2 (js/gestion.js, initMis): the account line and a
   summary strip, then one card per registration: a header row (code tag, institution, category, contact, one status chip), people on the
   left beside the payment step and the tickets on the right (stacked on phones), and the history folded at the end. Scoped to #misRoot:
   the sponsor page and the panel share the base .mis-* rules above. */
#misRoot { --mis-err: #a3322b; --mis-err-soft: rgba(163, 50, 43, 0.06); --mis-sombra: 0 1px 2px rgba(11, 42, 82, 0.04), 0 24px 48px -32px rgba(11, 42, 82, 0.4); --mis-px: clamp(18px, 3vw, 32px); }
#misRoot .gx-skel { max-width: none; }
#misRoot .chip { font-size: 12px; letter-spacing: 0.06em; }
#misRoot .mis-lista__cab { max-width: none; margin-bottom: 20px; }
.mis-cuenta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mis-cuenta__ico { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--gold); }
.mis-cuenta__ico svg { width: 20px; height: 20px; }
#misRoot .mis-lista__cuenta { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.mis-cuenta__otra { min-height: 44px; padding: 0 18px; border: 1.5px solid rgba(11, 42, 82, 0.18); border-radius: 999px; background: #fff; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--navy); cursor: pointer; transition: border-color 0.25s, box-shadow 0.25s; }
.mis-cuenta__otra:hover { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.mis-cuenta__otra:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mis-resumen { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; }
.mis-resumen li { display: flex; align-items: baseline; gap: 8px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.mis-resumen b { font-family: var(--sans); font-size: 22px; font-weight: 800; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.mis-resumen span { font-size: 13.5px; color: var(--muted); }
.mis-resumen .is-alerta { border-color: rgba(192, 177, 12, 0.5); background: var(--gold-soft); }
.mis-resumen .is-alerta b { color: var(--gold-ink); }
.mis-resumen .is-revision b { color: var(--blue); }
.mis-resumen .is-ok b { color: var(--verde); }

/* the empty state and the closing notices */
#misRoot .mis-vacio { display: grid; justify-items: center; max-width: 620px; margin: 8px auto 18px; padding: clamp(28px, 4vw, 48px); text-align: center; }
.mis-vacio__ico { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 50%; background: var(--cream); color: var(--gold-ink); }
.mis-vacio__ico svg { width: 30px; height: 30px; }
#misRoot .mis-vacio .mis-lead { margin: 0 0 22px; }
#misRoot .mis-aviso { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; max-width: none; margin-bottom: 28px; background: linear-gradient(90deg, var(--gold-soft), #fff 70%); }
#misRoot .mis-aviso::before { content: ""; grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0b10c' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / 22px no-repeat; }
#misRoot .mis-aviso > * { grid-column: 2; }
#misRoot .mis-aviso h3 { margin-top: 4px; }

/* a registration */
#misRoot .mis-reg { max-width: none; padding: 0; overflow: hidden; border-color: rgba(11, 42, 82, 0.1); border-radius: 18px; box-shadow: var(--mis-sombra); }
#misRoot .mis-reg + .mis-reg { margin-top: 28px; }
#misRoot .mis-sponsor { padding: clamp(20px, 3vw, 32px); }
#misRoot .mis-reg__cab { flex-wrap: nowrap; gap: 12px 20px; margin: 0; padding: clamp(20px, 2.6vw, 28px) var(--mis-px); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--paper), #fff); box-shadow: inset 4px 0 0 var(--mis-tono, transparent); }
.mis-reg--pendiente { --mis-tono: var(--gold); }
.mis-reg--revision { --mis-tono: var(--blue); }
.mis-reg--observado { --mis-tono: #a3322b; }
.mis-reg--confirmada { --mis-tono: var(--verde); }
.mis-reg__id { min-width: 0; }
.mis-reg__codigo { display: inline-block; padding: 3px 9px; border-radius: 6px; background: var(--navy); color: #fff; font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; }
#misRoot .mis-reg__cab h3 { margin: 10px 0 4px; font-size: clamp(21px, 2.3vw, 27px); }
#misRoot .mis-reg__sub { font-size: 14px; }
.mis-reg__contacto { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.mis-reg__contacto svg { flex: none; width: 15px; height: 15px; color: var(--gold-ink); }
#misRoot .mis-reg__estado { flex: none; margin-top: 2px; padding: 7px 12px; }
.mis-reg__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); }
.mis-reg__gente, .mis-reg__lado { min-width: 0; padding: clamp(20px, 2.6vw, 28px) var(--mis-px); }
.mis-reg__lado { display: grid; align-content: start; gap: 18px; border-top: 1px solid var(--line); background: var(--paper); }
.mis-reg__cuerpo.is-primero .mis-reg__lado { border-top: 0; border-bottom: 1px solid var(--line); }
@media (min-width: 960px) {
  .mis-reg__cuerpo { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); grid-template-areas: "gente lado"; }
  .mis-reg__cuerpo.is-solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "gente"; }
  .mis-reg__gente { grid-area: gente; }
  .mis-reg__lado { grid-area: lado; border-top: 0; border-left: 1px solid var(--line); }
  .mis-reg__cuerpo.is-primero .mis-reg__lado { border-bottom: 0; }
}
.mis-lado__t { margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); }
.mis-reg__gente-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mis-reg__n { font-size: 13px; color: var(--muted); }
#misRoot .insc-cupo { margin: 10px 0 0; }

/* people: compact rows */
#misRoot .mis-personas { display: grid; gap: 10px; margin: 14px 0 0; }
#misRoot .mis-persona { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: border-color 0.25s, box-shadow 0.25s; }
#misRoot .mis-persona:hover { border-color: rgba(0, 81, 147, 0.3); box-shadow: 0 10px 24px -20px rgba(11, 42, 82, 0.5); }
#misRoot .mis-persona.is-cancelada { opacity: 1; border-style: dashed; background: transparent; box-shadow: none; }
.mis-persona__fila { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 6px 14px; }
.mis-persona__ini { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cream); font-family: var(--sans); font-size: 14px; font-weight: 800; letter-spacing: 0.02em; color: var(--navy); }
.is-cancelada .mis-persona__ini { background: rgba(91, 100, 116, 0.12); color: var(--muted); }
.is-cancelada .mis-persona__nombre { color: var(--muted); }
.mis-persona__main { min-width: 0; }
#misRoot .mis-persona__cab { gap: 6px 10px; }
#misRoot .mis-persona__nombre { font-size: 16px; }
#misRoot .mis-persona__estado { padding: 3px 9px; letter-spacing: 0.04em; }
#misRoot .mis-persona__datos { margin: 3px 0 0; font-size: 13.5px; }
.mis-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.mis-act { display: grid; gap: 1px; max-width: 100%; padding: 7px 12px 8px; border: 1px solid rgba(11, 42, 82, 0.08); border-left: 3px solid var(--gold); border-radius: 10px; background: var(--paper); }
.mis-act b { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--navy); }
.mis-act small { font-size: 12px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.mis-act.is-propia { border-left-color: var(--blue); }
#misRoot .mis-persona__acc { display: flex; gap: 4px; margin: 0; }
.mis-accion { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--blue); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.mis-accion svg { width: 19px; height: 19px; }
.mis-accion:hover, .mis-accion:focus-visible { border-color: var(--line); background: rgba(0, 81, 147, 0.07); }
.mis-accion:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mis-accion.is-peligro { color: var(--muted); }
.mis-accion.is-peligro:hover, .mis-accion.is-peligro:focus-visible { color: var(--mis-err); background: var(--mis-err-soft); }
/* the label of an icon action: a tip on hover and focus (always written: it is the button's name) */
.mis-accion__t { position: absolute; z-index: 3; right: 0; bottom: calc(100% + 8px); padding: 6px 10px; border-radius: 8px; background: var(--navy); font-family: var(--sans); font-size: 12px; font-weight: 700; white-space: nowrap; color: #fff; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.mis-accion:hover .mis-accion__t, .mis-accion:focus-visible .mis-accion__t { opacity: 1; transform: none; }
.mis-sumar { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; margin-top: 10px; border: 1.5px dashed rgba(0, 81, 147, 0.35); border-radius: 14px; background: transparent; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--blue); cursor: pointer; transition: border-color 0.25s, background-color 0.25s, color 0.25s; }
.mis-sumar svg { width: 18px; height: 18px; }
.mis-sumar:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--navy); }
.mis-sumar:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#misRoot .mis-reg__acc { margin-top: 0; }
#misRoot .mis-persona .par { margin: 12px 0 0 54px; }
/* the folded credential: the pass, then its digital and printable ticket */
#misRoot .mis-cred { margin: 6px 0 0 54px; }
#misRoot .mis-cred > summary { display: inline-flex; gap: 8px; list-style: none; }
#misRoot .mis-cred > summary::-webkit-details-marker { display: none; }
#misRoot .mis-cred > summary svg { width: 16px; height: 16px; }
#misRoot .mis-cred > summary::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid; border-bottom: 2px solid; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s; }
#misRoot .mis-cred[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.mis-cred__cuerpo { display: grid; justify-items: start; gap: 14px; padding: 6px 0 4px; }
#misRoot .mis-cred .pase { width: 100%; max-width: 340px; margin: 0; }
#misRoot .mis-cred .pass__stamp { right: -10px; bottom: -14px; width: 92px; height: 92px; }
.mis-cred__acc { display: flex; flex-wrap: wrap; gap: 8px; }
.mis-cred__acc .btn { height: auto; min-height: 44px; }
.mis-cred__acc .btn svg { width: 16px; height: 16px; }
.mis-cred__acc .btn:hover svg { transform: none; }

/* the payment step and the tickets (right column) */
.mis-paso, .mis-entradas { padding: 20px; border: 1px solid rgba(11, 42, 82, 0.1); border-radius: 16px; background: #fff; box-shadow: 0 16px 32px -28px rgba(11, 42, 82, 0.5); }
#misRoot .mis-pago { margin: 0; }
.mis-paso__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
#misRoot .mis-reg__precio { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--muted); }
#misRoot .mis-reg__precio b { font-size: 15px; color: var(--navy); }
.mis-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 18px; padding: 0; list-style: none; }
.mis-pasos__p { position: relative; display: grid; justify-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; font-weight: 700; text-align: center; color: var(--muted); }
.mis-pasos__p::before { content: ""; position: absolute; top: 15px; left: calc(-50% + 20px); right: calc(50% + 20px); height: 2px; border-radius: 2px; background: rgba(11, 42, 82, 0.12); }
.mis-pasos__p:first-child::before { display: none; }
.mis-pasos__p.is-hecho::before, .mis-pasos__p.is-actual::before { background: var(--verde); }
.mis-pasos__p.is-alerta::before { background: var(--mis-err); }
.mis-pasos__p i { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid rgba(11, 42, 82, 0.18); border-radius: 50%; background: #fff; font-size: 13px; font-style: normal; font-weight: 800; color: var(--muted); }
.mis-pasos__p i svg { width: 16px; height: 16px; stroke-width: 2.6; }
.mis-pasos__p.is-hecho i { border-color: var(--verde); background: var(--verde); color: #fff; }
.mis-pasos__p.is-actual { color: var(--navy); }
.mis-pasos__p.is-actual i { border-color: var(--navy); background: var(--navy); color: #fff; box-shadow: 0 0 0 5px var(--gold-soft); }
.mis-pasos__p.is-alerta { color: var(--mis-err); }
.mis-pasos__p.is-alerta i { border-color: var(--mis-err); background: var(--mis-err); color: #fff; }
.mis-paso__msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 12px; padding: 14px 16px; border-radius: 12px; }
.mis-paso__msg--revision { background: rgba(0, 81, 147, 0.06); }
.mis-paso__msg--ok { background: rgba(31, 107, 90, 0.08); }
.mis-paso__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--blue); box-shadow: 0 6px 14px -8px rgba(11, 42, 82, 0.45); }
.mis-paso__msg--ok .mis-paso__ico { color: var(--verde); }
.mis-paso__ico svg { width: 20px; height: 20px; }
.mis-paso__estado { margin: 0 0 4px; font-family: var(--sans); font-size: 16px; font-weight: 800; color: var(--navy); outline: none; }
.mis-paso__msg p { margin: 0; font-size: 14px; line-height: 1.5; }
.mis-paso__msg p + p { margin-top: 6px; }
.mis-archivo { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.mis-paso__msg .mis-archivo { margin-top: 12px; }
.mis-archivo svg { flex: none; width: 22px; height: 22px; color: var(--blue); }
.mis-archivo > span { display: grid; min-width: 0; }
.mis-archivo b { font-family: var(--sans); font-size: 13.5px; color: var(--navy); overflow-wrap: anywhere; }
.mis-archivo small { font-size: 12px; color: var(--muted); }
/* the observed receipt: the staff note, quoted, with its date and what to do */
.mis-obs { padding: 16px 18px; border: 1px solid rgba(163, 50, 43, 0.25); border-left: 4px solid var(--mis-err); border-radius: 12px; background: var(--mis-err-soft); }
.mis-obs__t { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--mis-err); }
.mis-obs__t svg { flex: none; width: 22px; height: 22px; }
.mis-obs__nota { margin: 14px 0 0; padding: 14px 16px; border-radius: 10px; background: #fff; box-shadow: inset 3px 0 0 var(--gold); }
.mis-obs__nota p { margin: 0; font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-size: 16.5px; font-style: italic; line-height: 1.5; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.mis-obs__pie { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.mis-obs__que { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.mis-paso__banco { margin-top: 14px; border-top: 1px solid var(--line); }
.mis-paso__banco > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--blue); }
.mis-paso__banco .banco { margin-top: 4px; }
/* the receipt upload: a drop zone with the chosen file, then the button */
.mis-subir { display: grid; gap: 12px; margin-top: 16px; }
.banco .banco__pie .mis-subir { margin-top: 0; }
.mis-subir .banco__adjuntar { margin-top: 0; }
.mis-drop { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 4px 14px; min-height: 88px; padding: 16px 18px; border: 1.5px dashed rgba(0, 81, 147, 0.38); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s; }
.mis-drop:hover, .mis-drop.is-sobre { border-color: var(--gold); background: var(--cream); }
.mis-drop.is-sobre { box-shadow: 0 0 0 4px var(--gold-soft); }
.mis-drop:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.mis-drop__input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mis-drop__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(0, 81, 147, 0.08); color: var(--blue); }
.mis-drop__ico svg { width: 22px; height: 22px; }
.mis-drop__tx { display: grid; gap: 2px; min-width: 0; }
.mis-drop__tx b { font-family: var(--sans); font-size: 14.5px; font-weight: 800; color: var(--navy); }
.mis-drop__tx span { font-size: 14px; color: var(--ink); }
.mis-drop__tx small { font-size: 12px; color: var(--muted); }
.mis-drop__archivo { display: flex; grid-column: 1 / -1; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: #fff; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--verde); overflow-wrap: anywhere; }
.mis-drop__archivo:empty { display: none; }
.mis-drop__archivo svg { flex: none; width: 16px; height: 16px; }
.mis-drop.has-archivo { border-style: solid; border-color: var(--verde); background: rgba(31, 107, 90, 0.05); }
.mis-subir__btn { justify-content: center; height: auto; min-height: 48px; }
.mis-subir__btn svg { width: 18px; height: 18px; }
.mis-subir__btn:hover svg { transform: translateY(-2px); }
.mis-subir--fuerte .mis-subir__btn { width: 100%; min-height: 54px; font-size: 15.5px; box-shadow: 0 14px 28px -16px rgba(122, 115, 0, 0.75); }
#misRoot .mis-metodo { margin: 0 0 12px; }
#misRoot .mis-pago .banco { margin-top: 0; }
/* the tickets */
.mis-entradas ul { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.mis-entradas li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.mis-entradas__ico { display: grid; grid-row: span 2; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--navy); color: var(--gold); }
.mis-entradas__ico svg { width: 18px; height: 18px; }
.mis-entradas__nombre { padding-top: 4px; font-family: var(--sans); font-size: 14.5px; font-weight: 800; color: var(--navy); overflow-wrap: anywhere; }
.mis-entradas__acc { display: flex; flex-wrap: wrap; gap: 0 18px; }
.mis-entradas__acc a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--blue); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.mis-entradas__acc a:hover { color: var(--navy); }
/* the sponsors question: one full-width row under the body */
.mis-reg__pie { padding: 14px var(--mis-px); border-top: 1px solid var(--line); }
#misRoot .mis-reg__pie .mis-consent { margin-top: 0; }

/* the history, folded at the end, in a quieter type */
#misRoot .mis-historial { margin: 0; padding: 2px var(--mis-px) 8px; border-top: 1px solid var(--line); }
#misRoot .mis-historial summary { gap: 8px; list-style: none; font-size: 12.5px; letter-spacing: 0.02em; color: var(--muted); }
#misRoot .mis-historial summary::-webkit-details-marker { display: none; }
#misRoot .mis-historial summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s; }
#misRoot .mis-historial[open] summary::after { transform: translateY(2px) rotate(-135deg); }
#misRoot .mis-historial ol { gap: 0; margin: 0 0 10px; }
#misRoot .mis-historial li { grid-template-columns: 124px 64px minmax(0, 1fr); gap: 2px 14px; padding: 7px 0; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
#misRoot .mis-historial time { font-variant-numeric: tabular-nums; }
#misRoot .mis-historial b { font-size: 12.5px; font-weight: 700; color: var(--ink); }
@media (max-width: 719px) {
  /* phones: the actions of a person under the row, each with its label */
  .mis-persona__fila { grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; }
  .mis-persona__ini { width: 36px; height: 36px; font-size: 13px; }
  #misRoot .mis-persona__acc { grid-column: 1 / -1; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
  .mis-accion { display: inline-flex; gap: 8px; width: auto; padding: 0 12px 0 10px; }
  .mis-accion__t { position: static; padding: 0; background: none; font-size: 13px; color: inherit; opacity: 1; transform: none; }
  #misRoot .mis-persona .par, #misRoot .mis-cred { margin-left: 0; }
}
@media (max-width: 560px) {
  #misRoot .mis-reg__cab { flex-direction: column; }
  #misRoot .mis-persona { padding: 12px 14px; }
  .mis-paso, .mis-entradas { padding: 16px; }
  .mis-drop { grid-template-columns: 40px minmax(0, 1fr); padding: 14px; }
  .mis-drop__ico { width: 40px; height: 40px; }
  #misRoot .mis-historial li { grid-template-columns: auto minmax(0, 1fr); }
  #misRoot .mis-historial time { grid-column: 1 / -1; }
  #misRoot .mis-aviso { grid-template-columns: minmax(0, 1fr); }
  #misRoot .mis-aviso::before { grid-row: auto; margin-bottom: 12px; }
  #misRoot .mis-aviso > * { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #misRoot .mis-persona, .mis-accion, .mis-accion__t, .mis-sumar, .mis-drop, .mis-cuenta__otra, #misRoot .mis-cred > summary::after, #misRoot .mis-historial summary::after { transition: none; }
  .mis-subir__btn:hover svg { transform: none; }
}

/* ---------------------------------------------------------------- panel del Polo (panel.html)
   Before it opens (loading, signed out, no access, error) it is a page of the site: the site's bar, a compact header with the seal and
   one card. Open, it is a tool with its own frame, in the site's language: a navy rail with the seal, the sections and the account (the
   gold mark on the section you are in), a calm warm canvas, a compact top bar with the breadcrumbs and the section's title in the serif
   of the site's display moments, white cards with soft shadows. On phones the rail is a sheet that "Más" opens and the main sections sit
   in a bar at the bottom. */
#panelRoot {
  --pn-rail: 264px;
  --pn-bar: 64px;
  --pn-fondo: #f6f3ec;
  --pn-borde: rgba(11, 42, 82, 0.09);
  --pn-sombra: 0 1px 2px rgba(11, 42, 82, 0.04), 0 10px 28px -18px rgba(11, 42, 82, 0.28);
  --pn-sombra-alta: 0 2px 4px rgba(11, 42, 82, 0.05), 0 18px 36px -18px rgba(11, 42, 82, 0.36);
  --pn-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --pn-rojo: #a3322b;
}
.sec.pn { padding-top: calc(var(--nav-h) + clamp(20px, 3vw, 36px)); }
.pn-puerta { max-width: 760px; }
.pn-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pn-head__sello { flex: none; width: 56px; height: 56px; }
.pn-head__sello svg { display: block; width: 100%; height: 100%; }
.pn-head__txt { min-width: 0; }
.pn-head__t { margin: 0; font-family: var(--pn-serif); font-size: clamp(28px, 3vw, 36px); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.pn-head__lead { margin: 4px 0 0; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); }
.pn-acceso { max-width: 600px; border-radius: 18px; box-shadow: var(--pn-sombra); }
/* the skip link: out of sight until the keyboard reaches it */
.pn-salto { position: fixed; z-index: 90; top: 12px; left: 12px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--navy); color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 700; transform: translateY(-160%); transition: transform 0.2s var(--ease); }
.pn-salto:focus { transform: none; outline: 2px solid var(--gold); outline-offset: 2px; }

/* the open panel: its own frame, the site's bar and footer step aside */
body:has(#panelRoot[data-estado="app"]) { background: #f6f3ec; }
body:has(#panelRoot[data-estado="app"]) > .nav, body:has(#panelRoot[data-estado="app"]) > .menu, body:has(#panelRoot[data-estado="app"]) > .footer { display: none; }
#panelRoot[data-estado="app"] { padding: 0; background: var(--pn-fondo); }
#panelRoot[data-estado="app"] > .pn-puerta { display: none; }
.pn-app:not([hidden]) { display: grid; grid-template-columns: var(--pn-rail) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

/* the rail */
.pn-rail { position: sticky; top: 0; z-index: 40; display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding: 20px 14px 16px; overflow: hidden auto; isolation: isolate;
  background: radial-gradient(130% 55% at 0% 0%, #15508e 0%, rgba(21, 80, 142, 0) 70%), linear-gradient(180deg, var(--navy) 0%, #08213f 100%); color: #fff; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
.pn-rail__marca { display: flex; align-items: center; gap: 12px; padding: 2px 6px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.pn-rail__sello { flex: none; width: 46px; height: 46px; }
.pn-rail__sello svg { display: block; width: 100%; height: 100%; }
.pn-rail__nombre { min-width: 0; }
.pn-rail__nombre b { display: block; font-family: var(--pn-serif); font-size: 19px; font-weight: 700; line-height: 1.15; color: #fff; }
.pn-rail__nombre span { display: block; margin-top: 3px; font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, 0.64); }
.pn-rail__cerrar { display: none; flex: none; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; }
.pn-rail__cerrar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pn-rail__nav { flex: 1 0 auto; padding: 8px 0 16px; }
.pn-tabs { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.pn-tabs[hidden] { display: none; }
.pn-tabs__grupo { margin: 16px 12px 6px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.46); }
.pn-tab { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, 0.78); text-align: left; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.pn-tab .pn-ico { flex: none; width: 20px; height: 20px; color: rgba(255, 255, 255, 0.58); transition: color 0.2s; }
.pn-tab:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.pn-tab[aria-selected="true"] { background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 700; }
.pn-tab[aria-selected="true"]::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--gold); }
.pn-tab[aria-selected="true"] .pn-ico { color: var(--gold); }
.pn-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.pn-tab__t { flex: 1 1 auto; min-width: 0; }
.pn-tab__n { min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--gold); font-family: var(--sans); font-size: 12px; font-weight: 800; line-height: 1.6; color: var(--navy); text-align: center; }
.pn-tab__n[hidden] { display: none; }
.pn-cab { position: relative; z-index: 1; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 2px 12px; margin: 0; padding: 14px 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.pn-cab[hidden] { display: none; }
.pn-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1.5px rgba(192, 177, 12, 0.75); font-family: var(--pn-serif); font-size: 16px; font-style: italic; font-weight: 700; color: var(--gold); }
.pn-quien { display: grid; gap: 1px; min-width: 0; margin: 0; }
.pn-quien b { overflow: hidden; font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.pn-quien span { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.pn-salir { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0 2px; border: 0; background: none; font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: rgba(255, 255, 255, 0.82); text-decoration: underline; text-decoration-color: rgba(192, 177, 12, 0.8); text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: pointer; }
.pn-salir:hover { color: #fff; }
.pn-salir:focus-visible, .pn-rail__cerrar:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pn-rail__arcos { position: absolute; z-index: -1; left: 8%; bottom: 128px; width: 84%; height: auto; opacity: 0.8; pointer-events: none; }

/* the canvas: the top bar and the section */
.pn-main { display: flex; flex-direction: column; min-width: 0; padding-bottom: 56px; outline: none; }
.pn-top { position: sticky; top: 0; z-index: 30; padding: 16px clamp(20px, 3.2vw, 48px) 14px; border-bottom: 1px solid rgba(11, 42, 82, 0.08); background: rgba(246, 243, 236, 0.88); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }
.pn-migas[hidden] { display: none; }
.pn-migas ol { display: flex; flex-wrap: wrap; align-items: center; margin: -6px 0 0; padding: 0; list-style: none; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--muted); }
.pn-migas li { display: inline-flex; align-items: center; }
.pn-migas li + li::before { content: "›"; margin: 0 8px; font-size: 15px; color: var(--gold-ink); }
.pn-miga { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; color: var(--blue); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(192, 177, 12, 0.7); text-underline-offset: 4px; }
.pn-miga:hover { color: var(--navy); }
.pn-migas [aria-current] { color: var(--ink); }
.pn-top__eyebrow { margin: 0 0 2px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.pn-top__eyebrow[hidden] { display: none; }
.pn-top__t { margin: 0; font-family: var(--pn-serif); font-size: clamp(28px, 2.6vw, 36px); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; color: var(--navy); outline: none; }
.pn-top__lead { margin: 4px 0 0; max-width: 64ch; font-size: 15px; line-height: 1.45; color: var(--muted); }
.pn-top__lead[hidden] { display: none; }
.pn-top .pn-estado { margin: 12px 0 0; }
.pn-cuerpo { width: 100%; max-width: 2000px; padding: 28px clamp(20px, 3.2vw, 56px) 0; } /* large monitors: the panel uses the width (the owner, 15/10) */
#panelPanes { min-height: 420px; }
.pn-estado { margin: 0 0 18px; padding: 11px 16px; border-left: 4px solid var(--gold); border-radius: 0 12px 12px 0; background: #fff; box-shadow: var(--pn-sombra); font-size: 14.5px; line-height: 1.5; color: var(--ink); outline: none; overflow-wrap: anywhere; }
.pn-estado--error { border-left-color: var(--pn-rojo); background: #fff6f5; }
/* the first heading of a section repeats the title of the bar: it stays for screen readers */
.pn-pane > .pn-t:first-child, .pn-pane > .ce > .ce-cab > .pn-t, .pn-pane > .me > .ce-cab > .pn-t { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pn-pane > .pn-t:first-child + .pn-nota { margin-top: 0; }

/* the phone's bar at the bottom and the sheet */
.pn-bar { display: none; }
.pn-velo { display: none; }
@media (max-width: 899px) {
  .pn-app:not([hidden]) { display: block; }
  .pn-main { padding-bottom: calc(var(--pn-bar) + 32px + env(safe-area-inset-bottom, 0px)); }
  .pn-top { padding: 10px 16px 12px; }
  .pn-migas ol { margin: -4px 0 0; }
  .pn-miga { min-height: 44px; }
  .pn-top__t { font-size: 26px; }
  .pn-top__lead { font-size: 14px; }
  .pn-cuerpo { padding: 20px 16px 0; }
  .pn-rail { position: fixed; top: 0; bottom: 0; left: 0; z-index: 80; width: min(86vw, 340px); height: auto; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); visibility: hidden; transform: translateX(-104%);
    box-shadow: 24px 0 48px -24px rgba(8, 33, 63, 0.6); transition: transform 0.32s var(--ease), visibility 0s linear 0.32s; }
  .pn-app.is-menu .pn-rail { visibility: visible; transform: none; transition: transform 0.32s var(--ease), visibility 0s; }
  .pn-rail__cerrar { display: grid; }
  .pn-velo:not([hidden]) { position: fixed; inset: 0; z-index: 70; display: block; background: rgba(8, 26, 50, 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .pn-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; height: calc(var(--pn-bar) + env(safe-area-inset-bottom, 0px)); padding: 0 6px env(safe-area-inset-bottom, 0px);
    border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(11, 42, 82, 0.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -10px 30px -18px rgba(8, 33, 63, 0.7); }
  .pn-bar__b { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 44px; min-height: 44px; padding: 6px 2px; border: 0; background: none; font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1.1; color: rgba(255, 255, 255, 0.72); cursor: pointer; }
  .pn-bar__b .pn-ico { width: 22px; height: 22px; }
  .pn-bar__b[aria-current="page"], .pn-bar__b[aria-expanded="true"] { color: #fff; }
  .pn-bar__b[aria-current="page"] .pn-ico { color: var(--gold); }
  .pn-bar__b[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
  .pn-bar__b:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; border-radius: 12px; }
  /* Contenido's save bar rides above the bottom bar */
  .pn-app .ce-barra { bottom: calc(var(--pn-bar) + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .pn-rail, .pn-app.is-menu .pn-rail, .pn-salto, .pn-tab, .pn-tab .pn-ico { transition: none; } }
.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-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-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; }
/* the panel's pieces in the frame's language: calm white cards with soft shadows, serif headings for the big moments, one palette of states */
.pn-pane .pn-t { margin: 40px 0 16px; font-family: var(--pn-serif); font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; letter-spacing: -0.005em; }
.pn-pane .pn-t2 { font-size: 17px; }
.pn-pane .pn-item, .pn-pane .pn-p, .pn-pane .pn-det, .pn-pane .card { border-color: var(--pn-borde); border-radius: 16px; box-shadow: var(--pn-sombra); }
.pn-pane .pn-p { transition: box-shadow 0.25s var(--ease); }
.pn-pane .pn-p:hover { box-shadow: var(--pn-sombra-alta); }
.pn-pane .pn-form { background: #fbf9f4; box-shadow: none; }
.pn-pane .pn-det > summary { position: relative; min-height: 56px; padding: 0 52px 0 20px; font-size: 16px; border-radius: 16px; list-style: none; }
.pn-pane .pn-det > summary::-webkit-details-marker { display: none; }
.pn-pane .pn-det > summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--gold-ink); border-bottom: 2px solid var(--gold-ink); transform: rotate(45deg); transition: transform 0.25s var(--ease); }
.pn-pane .pn-det[open] > summary::after { margin-top: -2px; transform: rotate(225deg); }
.pn-pane .pn-det[open] > summary { border-bottom: 1px solid var(--pn-borde); border-radius: 16px 16px 0 0; }
.pn-pane .pn-det__c { padding: 16px 20px 22px; }
.pn-pane .pn-det > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pn-pane .pn-filtros { padding: 18px 20px 6px; border: 1px solid var(--pn-borde); border-radius: 16px; background: #fff; box-shadow: var(--pn-sombra); }
.pn-pane .pn-cuenta { font-family: var(--pn-serif); font-size: 20px; }
.pn-pane .pn-p__det { border-top-color: var(--pn-borde); }
.pn-pane .pn-det-acc { background: #fbf9f4; }
.pn-pane .pn-barra { height: 6px; background: rgba(11, 42, 82, 0.08); }
.pn-pane .pn-barra i { background: linear-gradient(90deg, var(--gold), #d6c63a); }
.pn-n { background: rgba(11, 42, 82, 0.07); color: var(--navy); }
#panelRoot .chip { font-size: 12px; letter-spacing: 0.06em; }
/* one palette of states everywhere: pending, in review, confirmed, void, failed, and a neutral label */
.chip--pendiente { background: var(--gold-soft); color: var(--gold-ink); }
.chip--revision { background: rgba(0, 81, 147, 0.1); color: var(--blue); }
.chip--ok { background: rgba(31, 107, 90, 0.12); color: var(--verde); }
.chip--anulado { background: rgba(91, 100, 116, 0.12); color: #4b5363; }
.chip--error { background: rgba(163, 50, 43, 0.1); color: #a3322b; }
.chip--info { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px rgba(11, 42, 82, 0.18); }
.chip--pendiente::before, .chip--revision::before, .chip--ok::before, .chip--anulado::before, .chip--error::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pn-correo b .chip { margin-left: 6px; vertical-align: 1px; }
/* empty, loading and failing states: the same calm card everywhere */
.pn-pane .pn-vacio { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 16px 20px; border: 1px dashed rgba(11, 42, 82, 0.18); border-radius: 16px; background: rgba(255, 255, 255, 0.6); }
.pn-pane .pn-vacio::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(192, 177, 12, 0.7); border-bottom-color: transparent; transform: rotate(-45deg); }
.pn-pane .pn-vacio--error { flex-direction: column; align-items: flex-start; border-style: solid; border-color: rgba(163, 50, 43, 0.35); background: #fff6f5; }
.pn-pane .pn-vacio--error::before, .pn-pane .pn-vacio--ok::before { display: none; }
.pn-pane .pn-vacio--ok { border-style: solid; border-color: rgba(31, 107, 90, 0.25); background: rgba(31, 107, 90, 0.05); color: var(--verde); font-weight: 600; }
.pn-pane .pn-esqueleto i { border-radius: 16px; background: linear-gradient(90deg, rgba(11, 42, 82, 0.04), rgba(11, 42, 82, 0.09), rgba(11, 42, 82, 0.04)); background-size: 200% 100%; }
.pn-ico { display: block; }

/* INICIO: the summary */
.pn-inicio { display: grid; gap: 28px; }
.pn-cuenta-reg { position: relative; display: flex; align-items: center; gap: 22px; min-height: 132px; padding: 24px clamp(22px, 3vw, 36px); overflow: hidden; isolation: isolate; border-radius: 22px;
  background: radial-gradient(120% 120% at 100% 0%, #15508e 0%, var(--navy) 58%, #08213f 100%); color: #fff; box-shadow: var(--pn-sombra-alta); }
.pn-cuenta-reg__n { flex: none; font-family: var(--pn-serif); font-size: clamp(56px, 6vw, 84px); font-style: italic; font-weight: 700; line-height: 0.9; color: var(--gold); font-variant-numeric: lining-nums; }
.pn-cuenta-reg p { display: grid; gap: 6px; margin: 0; font-family: var(--sans); font-size: clamp(16px, 1.6vw, 19px); font-weight: 700; line-height: 1.3; }
.pn-cuenta-reg p span { font-family: var(--body); font-size: 14.5px; font-weight: 400; color: rgba(255, 255, 255, 0.74); }
.pn-cuenta-reg p span::first-letter { text-transform: uppercase; }
.pn-cuenta-reg__arcos { position: absolute; z-index: -1; right: -40px; bottom: -70px; width: 300px; height: 300px; fill: none; stroke-linecap: round; pointer-events: none; }
.pn-cuenta-reg__arcos path:first-child { stroke: var(--gold); stroke-width: 1.2; stroke-opacity: 0.75; }
.pn-cuenta-reg__arcos path:last-child { stroke: #fff; stroke-width: 0.8; stroke-opacity: 0.2; }
.pn-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.pn-kpi { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; min-height: 156px; padding: 20px 22px; overflow: hidden; isolation: isolate; border: 1px solid var(--pn-borde); border-radius: 18px; background: #fff; box-shadow: var(--pn-sombra); font: inherit; color: inherit; text-align: left; }
.pn-kpi::after { content: ""; position: absolute; z-index: -1; right: -56px; bottom: -84px; width: 168px; height: 168px; border-radius: 50%; border: 1.5px solid rgba(192, 177, 12, 0.22); box-shadow: 0 0 0 14px rgba(0, 81, 147, 0.025); }
button.pn-kpi { cursor: pointer; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s; }
button.pn-kpi:hover { border-color: rgba(192, 177, 12, 0.55); box-shadow: var(--pn-sombra-alta); }
.pn-kpi:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.pn-kpi__t { max-width: calc(100% - 40px); font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; line-height: 1.35; text-transform: uppercase; color: var(--muted); }
.pn-kpi__n { margin-top: auto; font-family: var(--pn-serif); font-size: clamp(40px, 3.6vw, 52px); font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: var(--navy); font-variant-numeric: lining-nums; overflow-wrap: anywhere; }
.pn-kpi[data-kpi="publicacion"] .pn-kpi__n { font-size: clamp(28px, 2.4vw, 34px); }
.pn-kpi__d { font-size: 14px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.pn-kpi__ir { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cream); color: var(--gold-ink); transition: background-color 0.25s, color 0.25s; }
.pn-kpi__ir .pn-ico { width: 16px; height: 16px; }
button.pn-kpi:hover .pn-kpi__ir { background: var(--navy); color: #fff; }
.pn-kpi__esq { width: 55%; height: 46px; margin-top: auto; border-radius: 10px; background: linear-gradient(90deg, rgba(11, 42, 82, 0.05), rgba(11, 42, 82, 0.1), rgba(11, 42, 82, 0.05)); background-size: 200% 100%; animation: pn-brillo 1.4s ease-in-out infinite; }
.pn-inicio__dos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pn-bloque { padding: 20px 22px 22px; border: 1px solid var(--pn-borde); border-radius: 18px; background: #fff; box-shadow: var(--pn-sombra); }
.pn-bloque--plano { padding: 0; border: 0; background: none; box-shadow: none; }
.pn-bloque .pn-t2 { margin: 0 0 12px; font-family: var(--pn-serif); font-size: 21px; font-weight: 700; }
.pn-tareas, .pn-fechas-ini, .pn-accesos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pn-tarea { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 14px; border: 1px solid var(--pn-borde); border-radius: 12px; background: #fbf9f4; font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--navy); text-align: left; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.pn-tarea::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--navy); }
.pn-tarea.is-revision::before { background: var(--blue); }
.pn-tarea.is-pendiente::before { background: var(--gold); }
.pn-tarea.is-error::before { background: var(--pn-rojo); }
.pn-tarea span { flex: 1 1 auto; min-width: 0; }
.pn-tarea .pn-ico, .pn-acceso-ir > .pn-ico--ir, .pn-ir .pn-ico { flex: none; width: 18px; height: 18px; color: var(--gold-ink); }
.pn-tarea:hover { border-color: rgba(192, 177, 12, 0.6); background: #fff; }
.pn-tarea:focus-visible, .pn-acceso-ir:focus-visible, .pn-ir:focus-visible, .pn-miga:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pn-fechas-ini li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--pn-borde); }
.pn-fechas-ini li:last-child { border-bottom: 0; }
.pn-fechas-ini__t { grid-column: 1; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pn-fechas-ini b { grid-column: 1; font-family: var(--sans); font-size: 15px; color: var(--navy); }
.pn-fechas-ini .chip { grid-column: 2; grid-row: 1 / span 2; }
.pn-ir { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; padding: 0; border: 0; background: none; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--blue); cursor: pointer; }
.pn-ir:hover { color: var(--navy); }
.pn-accesos { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pn-acceso-ir { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 12px 16px; border: 1px solid var(--pn-borde); border-radius: 14px; background: rgba(255, 255, 255, 0.7); text-align: left; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; }
.pn-acceso-ir > .pn-ico:first-child { flex: none; box-sizing: content-box; width: 20px; height: 20px; padding: 10px; border-radius: 50%; background: var(--cream); color: var(--navy); }
.pn-acceso-ir > span { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.pn-acceso-ir b { font-family: var(--sans); font-size: 15px; color: var(--navy); }
.pn-acceso-ir small { font-size: 13px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.pn-acceso-ir:hover { border-color: rgba(192, 177, 12, 0.55); background: #fff; box-shadow: var(--pn-sombra); }
@media (max-width: 1099px) { .pn-inicio__dos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 899px) {
  .pn-inicio { gap: 20px; }
  .pn-cuenta-reg { min-height: 0; gap: 16px; padding: 20px; }
  .pn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pn-kpi { min-height: 136px; padding: 16px; }
  .pn-kpi__t { max-width: none; padding-right: 30px; letter-spacing: 0.06em; }
  .pn-kpi__ir { top: 12px; right: 12px; width: 28px; height: 28px; }
  .pn-kpi__n { font-size: 38px; }
  .pn-kpi[data-kpi="publicacion"] .pn-kpi__n { font-size: 24px; }
  .pn-bloque { padding: 16px; }
  .pn-pane .pn-filtros { padding: 14px 14px 4px; }
}
@media (min-width: 1180px) { .pn-pane .pn-lista--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-width: 1179px) { .pn-pane .pn-lista--2 { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .pn-pane .pn-det > summary::after, .pn-kpi, .pn-kpi__esq, .pn-p, .pn-tarea, .pn-acceso-ir { transition: none; animation: none; } button.pn-kpi:hover { transform: 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; }
/* Listas (content_items): one entry per kind, the items as cards with their order controls, the item's form beside its card preview */
.cl { display: grid; gap: 18px; }
.cl-tipos { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.cl-tipo { flex: none; display: grid; justify-items: start; gap: 2px; min-width: 168px; min-height: 64px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; text-align: left; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.cl-tipo b { font-family: var(--sans); font-size: 14.5px; color: var(--navy); }
.cl-tipo > span:not(.ce-sec__p) { font-size: 13px; color: var(--muted); }
.cl-tipo:hover { border-color: rgba(192, 177, 12, 0.6); }
.cl-tipo[aria-pressed="true"] { border-color: var(--gold); background: var(--cream); }
.cl-tipo:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cl-lista { display: grid; gap: 14px; }
.cl-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 18px; }
.cl-cab .pn-t2 { margin: 0 0 4px; }
.cl-cab .pn-nota { margin: 0; }
.cl-cab__acc { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cl-item { position: relative; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: box-shadow 0.15s, opacity 0.15s; }
.cl-item[data-estado="pendiente"], .cl-item[data-estado="nuevo"] { border-color: rgba(192, 177, 12, 0.7); }
.cl-item[data-estado="quitar"] { background: var(--paper); }
.cl-item[data-estado="quitar"] .cl-item__txt b { color: var(--muted); text-decoration: line-through; }
.cl-item[data-estado="quitar"] .cl-item__img, .cl-item[data-oculto] .cl-item__img { opacity: 0.45; }
.cl-item.is-arrastrando { opacity: 0.5; }
.cl-item[data-soltar="antes"] { box-shadow: 0 -3px 0 var(--gold); }
.cl-item[data-soltar="despues"] { box-shadow: 0 3px 0 var(--gold); }
.cl-item > .pn-confirma { margin: 0 14px 14px; }
.cl-item__fila { display: grid; grid-template-columns: 28px 56px minmax(0, 1fr) auto auto; align-items: center; gap: 8px 14px; padding: 10px 14px 10px 8px; }
.cl-asa { display: grid; place-items: center; width: 28px; height: 44px; color: var(--muted); cursor: grab; }
.cl-asa:active { cursor: grabbing; }
.cl-asa svg { width: 18px; height: 18px; fill: currentColor; }
.cl-asa--off { cursor: default; opacity: 0.35; }
.cl-item__img { display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 50%; background: var(--cream); font-family: var(--sans); font-size: 16px; font-weight: 800; color: var(--navy); }
.cl-item__img img { width: 100%; height: 100%; object-fit: cover; }
.cl-item__img i { font-style: normal; }
.cl-item__txt { display: grid; gap: 4px; min-width: 0; }
.cl-item__txt b { overflow: hidden; font-family: var(--sans); font-size: 15px; color: var(--navy); text-overflow: ellipsis; white-space: nowrap; }
.cl-item__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-chip { padding: 2px 9px; border-radius: 999px; background: var(--paper); font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--verde); }
.cl-chip--oculto { color: var(--muted); }
.cl-chip--pendiente, .cl-chip--nuevo { background: var(--gold-soft); color: var(--gold-ink); }
.cl-chip--quitar { background: rgba(163, 50, 43, 0.08); color: var(--insc-err); }
.cl-item__orden { display: flex; gap: 6px; }
.cl-mover { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(11, 42, 82, 0.2); border-radius: 10px; background: var(--paper); color: var(--navy); cursor: pointer; transition: border-color 0.2s; }
.cl-mover svg { width: 18px; height: 18px; }
.cl-mover:hover:not(:disabled) { border-color: var(--gold); }
.cl-mover:disabled { opacity: 0.35; cursor: default; }
.cl-mover:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.cl-item__acc { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 16px; }
.cl-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 20px 28px; padding: 18px 20px 20px; border-top: 1px solid var(--line); }
.cl-form__campos { display: grid; gap: 18px; min-width: 0; }
.cl-form__lado { position: sticky; top: 16px; display: grid; gap: 12px; align-content: start; }
.cl-form__acc { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-opc { font-weight: 500; color: var(--muted); }
.cl-f > .insc-err { font-size: 13px; color: var(--insc-err); }
.cl-f > .insc-err[hidden] { display: none; }
.cl-f [aria-invalid="true"] { border-color: var(--insc-err); }
.cl-f select.ce-in { height: 48px; padding-block: 0; }
.cl-f--si .pn-check { justify-self: start; }
.cl-f--si .pn-check input { width: 18px; height: 18px; padding: 0; border: 0; }
html.ce-con-previa .cl-form { grid-template-columns: minmax(0, 1fr); }
html.ce-con-previa .cl-form__lado { position: static; }
.cl-f--img .ce-img { grid-template-columns: 160px minmax(0, 1fr); }
.cl-vista__marco { max-width: 320px; margin-top: 8px; overflow: hidden; }
.cl-vista__tpl { display: grid; }
.cl-vista__tpl a { pointer-events: none; }
.cl-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; }
.cl-card > img, .cl-card > i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--cream); object-fit: cover; font-family: var(--sans); font-style: normal; font-weight: 800; color: var(--navy); }
.cl-card div { display: grid; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.cl-card b { font-family: var(--sans); font-size: 15px; color: var(--navy); }
/* "Publicar en el sitio", under the save row of the bar */
.ce-publicar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ce-publicar__txt { flex: 1 1 320px; min-width: 0; }
.ce-publicar__que { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.ce-publicar__estado { margin: 2px 0 0; font-family: var(--sans); font-size: 13.5px; font-weight: 700; line-height: 1.45; color: var(--navy); }
.ce-publicar__estado:empty { display: none; }
.ce-publicar__estado.ce-aviso--error { color: var(--insc-err); }
.ce-publicar > .btn { min-width: 172px; justify-content: center; }
@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; }
  .cl-tipo { min-width: 148px; }
  .cl-cab__acc { width: 100%; }
  .cl-cab__acc > .btn { flex: 1; justify-content: center; }
  .cl-item__fila { grid-template-columns: 22px 48px minmax(0, 1fr) auto; gap: 6px 10px; padding: 8px 10px 4px 4px; }
  .cl-asa { width: 22px; }
  .cl-item__img { width: 48px; height: 48px; }
  .cl-item__acc { grid-column: 1 / -1; justify-content: flex-start; padding-left: 26px; }
  .cl-form { grid-template-columns: minmax(0, 1fr); padding: 16px 14px; }
  .cl-form__lado { position: static; }
  .cl-f--img .ce-img { grid-template-columns: minmax(0, 1fr); }
  .ce-barra:not([data-pendientes="0"]) .ce-publicar { display: none; }
  .ce-publicar > .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .ce-sec > summary::after, .ce-pag, .ce-fmt button, .me-zona, .ce-elegir__grilla button, .cl-tipo, .cl-item, .cl-mover { transition: none; } }
/* Gestión: a strip of tabs that stays under the top bar, then each tab's toolbar (search, count, the one primary action) and its
   rows: compact, one card per list, the actions at the right; a row's edit fields open under it. On phones the strip scrolls sideways
   with a fade at its end and the toolbar scrolls with the page. */
#panelRoot { --pn-gutter: clamp(20px, 3.2vw, 48px); --pn-gtabs-h: 53px; }
.pn-gcab { position: sticky; top: var(--pn-top-h, 0px); z-index: 20; margin: -12px calc(-1 * var(--pn-gutter)) 0; padding: 0 var(--pn-gutter); border-bottom: 1px solid var(--pn-borde); background: rgba(246, 243, 236, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pn-gtabs { display: flex; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.pn-gtabs::-webkit-scrollbar { display: none; }
.pn-gtab { position: relative; flex: none; min-height: 52px; padding: 0 16px; border: 0; background: none; font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--muted); white-space: nowrap; cursor: pointer; transition: color 0.2s; }
.pn-gtab:hover { color: var(--navy); }
.pn-gtab[aria-selected="true"] { color: var(--navy); }
.pn-gtab[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); }
.pn-gtab:focus-visible { outline: 2px solid var(--blue); outline-offset: -6px; border-radius: 12px; }
.pn-gpanel { padding-top: 18px; outline: none; }
.pn-gpanel[hidden] { display: none; }
.pn-gbar { position: sticky; top: calc(var(--pn-top-h, 0px) + var(--pn-gtabs-h)); z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--pn-borde); border-radius: 14px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 0 0 10px rgba(246, 243, 236, 0.94), var(--pn-sombra); }
.pn-gbar--plano { position: static; box-shadow: var(--pn-sombra); }
.pn-gbar__buscar { flex: 1 1 260px; max-width: 460px; margin: 0; }
.pn-gbar__buscar input, .pn-gbar__sel select { width: 100%; min-height: 44px; 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); }
.pn-gbar__buscar input { padding-left: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") no-repeat 13px 50% / 18px 18px; }
.pn-gbar__buscar input:focus, .pn-gbar__sel select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.pn-gbar__sel { flex: 0 1 220px; margin: 0; }
.pn-gbar__n { margin: 0 auto 0 0; font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--muted); }
.pn-gbar .btn { min-height: 44px; }
.pn-alta { margin: 0 0 18px; }
.pn-alta[hidden] { display: none; }
.pn-filas { display: grid; margin: 0 0 8px; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--pn-borde); border-radius: 16px; background: #fff; box-shadow: var(--pn-sombra); }
.pn-filas > li + li { border-top: 1px solid var(--pn-borde); }
.pn-filas > li[hidden] { display: none; }
.pn-pane .pn-filas > .pn-vacio, .pn-pane .pn-tabla .pn-vacio { border: 0; border-radius: 0; background: none; }
.pn-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 20px; padding: 14px 18px; }
.pn-fila__main { min-width: 0; }
.pn-fila__main .pn-item__t { margin: 0; font-size: 16px; }
.pn-fila__main .pn-doms { margin-top: 8px; }
.pn-fila__main .pn-link { font-size: 13.5px; }
.pn-fila__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; text-align: right; }
.pn-fila__acc { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 14px; }
.pn-fila__acc .btn { min-height: 44px; }
.pn-fila__extra { grid-column: 1 / -1; margin-top: 2px; padding: 2px 16px 16px; border-radius: 12px; background: #fbf9f4; }
.pn-fila__extra[hidden] { display: none; }
.pn-fila__extra > .pn-checks { margin-top: 14px; }
.pn-fila__extra > .pn-t3:first-child { margin-top: 12px; }
/* the accounts that load a team (Socios, Sponsors): a chip with its e-mail and its own actions */
.pn-admins { margin-top: 14px; padding-top: 2px; border-top: 1px solid var(--pn-borde); }
.pn-admins > .pn-nota { margin: 0 0 2px; font-size: 14px; }
.pn-dom--admin { gap: 0; padding-right: 2px; }
.pn-dom--admin .pn-dom__x { min-width: 0; padding: 0 8px; }
.pn-fila__meta .pn-sub { margin: 0; }
.pn-check--aparte { margin-top: 12px; align-items: flex-start; }
.pn-check--aparte input { margin-top: 2px; }
.pn-check small { display: block; margin-top: 2px; }
/* Accesos: a column for the school or sponsor a team invitation belongs to */
.pn-filas--accesos > .pn-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); }
.pn-filas--accesos .pn-fila__meta { justify-content: flex-start; text-align: left; }
@media (min-width: 1360px) {
  .pn-filas--accesos > .pn-fila { grid-template-columns: minmax(220px, 1fr) minmax(0, 160px) minmax(0, 240px) minmax(0, 300px); }
  .pn-filas--accesos .pn-fila__meta { justify-content: flex-end; text-align: right; }
}
.pn-fila__eq { min-width: 0; font-size: 14px; line-height: 1.35; color: var(--navy); overflow-wrap: anywhere; }
.pn-fila__eq small { display: block; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pn-fila__eq b { font-family: var(--sans); font-weight: 700; }
@media (max-width: 767px) {
  .pn-filas--accesos > .pn-fila { grid-template-columns: minmax(0, 1fr); }
  .pn-fila__eq:empty { display: none; }
}
.pn-filas > .pn-correo { padding: 12px 18px; border-top: 0; }
.pn-filas > .pn-correo + .pn-correo { border-top: 1px solid var(--pn-borde); }
.pn-hecho { margin: 0 0 18px; padding: 14px 18px; border-left: 3px solid var(--verde); border-radius: 0 12px 12px 0; background: rgba(31, 107, 90, 0.07); }
.pn-hecho p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.pn-hecho .pn-acc { margin-top: 10px; }
.pn-hecho .btn { min-height: 44px; }
/* Sponsors: one form, two parts (the team, the public sponsor) */
.pn-partes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pn-parte { min-width: 0; margin: 0; padding: 14px 18px 18px; border: 1px solid var(--pn-borde); border-radius: 14px; background: #fff; }
.pn-parte legend { padding: 0 6px; font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-ink); }
.pn-parte > .pn-nota { margin: 2px 0 12px; }
.pn-parte .insc-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pn-logo { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.pn-logo__marco { display: grid; flex: none; place-items: center; width: 132px; height: 84px; overflow: hidden; border: 1px dashed rgba(11, 42, 82, 0.25); border-radius: 12px; background: #fbf9f4; }
.pn-logo__vista { max-width: 88%; max-height: 72px; object-fit: contain; }
.pn-logo__vacio { font-size: 13px; color: var(--muted); }
.pn-logo__lado { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.pn-logo__lado .btn { min-height: 44px; }
.pn-logo__lado .pn-sub { margin: 0; font-size: 13px; }
.pn-logo__estado:empty { display: none; }
.pn-logo__estado--error { color: var(--insc-err); }
/* Sponsors › "Niveles de la web" (settings.sponsor_tiers): one card per tier, in the order of the site */
.pn-niveles { margin-top: 22px; padding: clamp(16px, 2.4vw, 24px); }
.pn-niveles > .pn-nota { margin: 4px 0 14px; max-width: 72ch; }
.pn-niveles__lista { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pn-nivel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; padding: 14px 16px; border: 1px solid var(--pn-borde); border-radius: 14px; background: #fff; }
.pn-nivel__cab, .pn-nivel__campos { grid-column: 1 / -1; }
.pn-nivel__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pn-nivel__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cream); font-family: var(--sans); font-size: 13px; font-weight: 800; color: var(--navy); }
.pn-nivel__cab .pn-sub { margin: 0; font-size: 13px; }
.pn-nivel__campos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; }
.pn-nivel > .pn-check { justify-self: start; }
.pn-nivel .pn-acc { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; }
.pn-nivel .pn-acc .btn:disabled { opacity: 0.4; cursor: default; }
.pn-nivel .pn-acc .btn { min-height: 44px; }
.pn-nivel__uso { font-size: 13px; }
.pn-niveles > .pn-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.pn-niveles > .pn-acc .btn { min-height: 44px; }
/* "Cortesías y días": a select per tier, then the days of each group as checkboxes */
.pn-cortesias__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; }
.pn-cortesias__dias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.pn-dias fieldset { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.pn-dias legend { padding: 0 6px; font-family: var(--sans); font-size: 14px; font-weight: 800; color: var(--navy); }
.pn-dias fieldset[aria-invalid="true"] { border-color: var(--err, #a3322b); }
.pn-uso--cortesia { color: var(--navy); }
@media (max-width: 720px) { .pn-cortesias__dias { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .pn-nivel { grid-template-columns: minmax(0, 1fr); } .pn-nivel__campos { grid-template-columns: minmax(0, 1fr); } .pn-nivel .pn-acc { justify-content: flex-start; } }
/* the sponsor logo preview: the tile of congreso.html for the chosen tier (.spons-nivel--<tier> .spons-logo), drawn by js/panel-contenido.js */
.pn-logo__tile { flex: none; max-width: 100%; }
.pn-spons-vista { display: grid; gap: 6px; }
.pn-spons-vista .spons-fila { justify-content: flex-start; }
.pn-spons-vista__vacio { font-size: 13px; color: var(--muted); }
.pn-spons-vista__pista { max-width: 34ch; margin: 0; font-size: 13px; line-height: 1.4; color: var(--gold-ink); }
.pn-spons-vista__pista:empty { display: none; }
/* the preview shows the tile as the site does (one tone at rest): a hint says the colour comes on hover; none on touch or without a logo */
.pn-spons-vista:has(img)::after { content: "Pasá el mouse para ver el color"; font-size: 12px; line-height: 1.3; color: var(--muted); }
@media (hover: none) { .pn-spons-vista::after { content: none !important; } }
.cl-logo-vista { margin-top: 10px; }
/* on phones the site's tiles take half the row: the preview gets the whole row so its tile is that same half */
@media (max-width: 560px) { .pn-logo__tile { flex: 1 1 100%; } }
/* Cupos: a strip of four compact tiles (the general quota and three counts: a short label over its number), then two tables */
.pn-stats { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.pn-stat { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; margin: 0; padding: 12px 16px; border: 1px solid var(--pn-borde); border-radius: 14px; background: #fff; box-shadow: var(--pn-sombra); }
#panelRoot .pn-stat__r { display: block; margin: 0; letter-spacing: 0; text-transform: none; font-family: var(--sans); font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.pn-stat__v { display: block; font-family: var(--pn-serif); font-size: 30px; font-weight: 700; line-height: 44px; color: var(--navy); font-variant-numeric: lining-nums tabular-nums; }
.pn-stat__fila { display: flex; align-items: center; gap: 10px; }
#panelRoot .pn-stat__fila input { width: 88px; height: 44px; padding: 0 12px; font-family: var(--sans); font-size: 18px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pn-stat__fila .btn { min-height: 44px; }
.pn-stat .insc-err { margin: 0; }
/* a toolbar that carries its table's title, so the rows start right under the tiles */
.pn-gbar--t .pn-t2 { flex: 0 0 auto; margin: 0 6px 0 4px; }
/* with the default reservation as a second editable tile */
.pn-stats--5 { grid-template-columns: repeat(2, minmax(0, 1.25fr)) repeat(3, minmax(0, 1fr)); }
.pn-tabla { margin: 0 0 8px; overflow: hidden; border: 1px solid var(--pn-borde); border-radius: 16px; background: #fff; box-shadow: var(--pn-sombra); }
.pn-tcab, .pn-tfila { display: grid; grid-template-columns: minmax(0, 1fr) 112px 84px 84px; align-items: center; gap: 0 16px; padding: 12px 18px; }
.pn-tabla:has(.pn-tcel--acc) .pn-tcab, .pn-tabla:has(.pn-tcel--acc) .pn-tfila { grid-template-columns: minmax(0, 1fr) 112px 84px 84px 180px; }
.pn-tcab { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--pn-borde); background: #fbf9f4; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pn-tabla__filas { margin: 0; padding: 0; list-style: none; }
.pn-tabla__filas > li + li { border-top: 1px solid var(--pn-borde); }
.pn-tabla__filas > li[hidden] { display: none; }
.pn-tcel { min-width: 0; }
.pn-tcel--n { font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--navy); text-align: right; font-variant-numeric: tabular-nums; }
.pn-tcel.is-lleno { color: var(--pn-rojo); }
.pn-tcel--nombre .pn-item__t { margin: 0; font-size: 15.5px; }
.pn-tcel__sub { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.pn-pane .pn-tcel--nombre .pn-barra { max-width: 280px; margin-top: 8px; }
.pn-tcel__r { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pn-tcel--in { gap: 4px; }
.pn-tfila .pn-tcel--in input { height: 44px; padding: 0 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pn-tcel--in .insc-err { text-align: left; }
/* the button sits at the start of its cell and "Guardado" has a slot of its own after it: showing or clearing it never moves the button */
.pn-tcel--acc { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.pn-tcel--acc .btn { min-height: 44px; }
.pn-tcel--acc .btn[disabled] { opacity: 0.45; cursor: default; }
.pn-guardado { flex: none; width: 70px; min-height: 1em; font-family: var(--sans); font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--verde); white-space: nowrap; }
/* Precios: how the site reads the price today and tomorrow, then the tiers as cards (fields in one row on a computer, stacked on phones) */
.pn-precio-vista { display: grid; gap: 10px; margin: 0 0 16px; padding: 16px 20px; border-left: 3px solid var(--gold); }
.pn-precio-vista__l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.pn-precio-vista__r { flex: none; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--muted); }
.pn-precio-vista__v { min-width: 0; }
.pn-precio-vista .precio__ahora { font-size: 1.2em; }
.pn-precios { padding: clamp(16px, 2.4vw, 24px); }
.pn-precios > .pn-t2 { margin-top: 0; }
.pn-precios > .pn-nota { margin: 4px 0 14px; }
.pn-tramos { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pn-tramo { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--pn-borde); border-radius: 14px; background: #fff; }
.pn-tramo__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pn-tramo__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cream); font-family: var(--sans); font-size: 13px; font-weight: 800; color: var(--navy); }
.pn-tramo__t { font-family: var(--sans); font-size: 15px; color: var(--navy); }
.pn-tramo .pn-sub { margin: 0; }
.pn-tramo__campos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 0.8fr) auto; align-items: end; gap: 10px 14px; }
#panelRoot .pn-tramo .insc-f input, #panelRoot .pn-precios__solo .insc-f input { height: 44px; padding: 0 12px; }
.pn-pesos { position: relative; display: block; }
.pn-pesos > span { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); font-family: var(--sans); font-weight: 700; color: var(--muted); pointer-events: none; }
#panelRoot .insc-f .pn-pesos input { padding-left: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pn-tramo__quitar { align-self: end; padding-bottom: 0; }
.pn-tramo__quitar .btn, .pn-precios .pn-acc .btn { min-height: 44px; }
.pn-tramo__quitar .btn:disabled, .pn-precios .pn-acc .btn:disabled { opacity: 0.45; cursor: default; }
.pn-precios__sumar { margin-top: 12px; }
.pn-precios__sumar .pn-sub { margin: 0; }
.pn-precios__solo { max-width: 320px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pn-borde); }
.pn-precios__solo-l { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 16px 0 0; font-size: 15px; color: var(--ink); }
.pn-precios__solo-l span { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--muted); }
.pn-precios__guardar { margin-top: 18px; }
@media (max-width: 767px) {
  .pn-tramo__campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pn-tramo__quitar { grid-column: 1 / -1; }
  .pn-precios__solo { max-width: none; }
}
/* Pagos: what the registrant is told about their receipt */
.pn-obs { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; background: var(--gold-soft); }
.pn-obs b { font-family: var(--sans); font-size: 13px; color: var(--gold-ink); }
.pn-obs p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.pn-obs .pn-sub { color: var(--muted); }
.pn-observar { margin-top: 16px; padding: 16px 18px 18px; border: 1px solid rgba(192, 177, 12, 0.4); border-left: 3px solid var(--gold); border-radius: 0 14px 14px 0; background: #fffdf6; }
.pn-observar > .pn-t3 { margin-top: 0; }
.pn-observar__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 20px; align-items: start; }
.pn-observar textarea { width: 100%; min-height: 136px; padding: 12px 14px; border: 1px solid rgba(11, 42, 82, 0.22); border-radius: 10px; background: #fff; font: 15px/1.5 var(--body); color: var(--ink); resize: vertical; }
.pn-observar textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.pn-observar textarea[aria-invalid="true"] { border-color: var(--insc-err); }
.pn-observar__n { align-self: flex-end; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pn-correo-vista { padding: 14px 16px; border: 1px solid var(--pn-borde); border-radius: 12px; background: #fff; }
.pn-correo-vista__t { display: block; margin-bottom: 8px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; }
.pn-correo-vista__c p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.pn-correo-vista__c p:last-child { margin-bottom: 0; }
.pn-correo-vista__nota { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--gold); background: var(--paper); font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.pn-correo-vista__vacia { font-style: italic; color: var(--muted); }
@media (max-width: 899px) {
  #panelRoot { --pn-gutter: 16px; }
  .pn-gcab { margin-top: -8px; }
  .pn-gtabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .pn-gtabs.is-fin { -webkit-mask-image: none; mask-image: none; }
  .pn-gtab { padding: 0 14px; }
  .pn-gbar { position: static; box-shadow: var(--pn-sombra); }
}
@media (max-width: 767px) {
  .pn-fila { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .pn-fila__meta, .pn-fila__acc { justify-content: flex-start; text-align: left; }
  .pn-fila__extra { padding: 2px 12px 14px; }
  .pn-gbar__buscar, .pn-gbar__sel { flex-basis: 100%; max-width: none; }
  .pn-partes, .pn-observar__grid { grid-template-columns: minmax(0, 1fr); }
  .pn-logo { flex-wrap: wrap; }
  .pn-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pn-stat { padding: 10px 12px; }
  .pn-stat--defecto { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .pn-stat--defecto .insc-err { flex-basis: 100%; }
  .pn-stat__v { font-size: 24px; line-height: 32px; }
  .pn-gbar--t .pn-t2 { flex-basis: 100%; margin: 2px 2px 0; }
  .pn-tcab { display: none; }
  .pn-tfila, .pn-tabla:has(.pn-tcel--acc) .pn-tfila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 14px; }
  .pn-tcel--nombre, .pn-tcel--acc { grid-column: 1 / -1; }
  .pn-tcel--acc { justify-content: flex-start; }
  .pn-tcel__r { position: static; display: block; width: auto; height: auto; margin: 0 0 2px; overflow: visible; clip: auto; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: left; white-space: normal; }
  .pn-tcel--n, .pn-tfila .pn-tcel--in input { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .pn-gtab { 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); }
}

/* ---------------------------------------------------------------- Inscriptos: the filter bar over the whole base, the chips of the
   active filters, the dense list (one row per person under a sticky header that sorts) and one person's detail in a drawer at the
   right (a sheet from the bottom on phones). The list adapts to its own width: every column, then the essentials, then two lines. */
.pn-pane .pn-ins-f { padding: 16px 18px 14px; }
.pn-ins-f__fila { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px 14px; align-items: end; }
.pn-ins-f__mas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pn-borde); }
.pn-ins-f__mas[hidden] { display: none; }
.pn-ins-f .insc-f { gap: 5px; }
.pn-ins-f .insc-f input, .pn-ins-f .insc-f select { height: 44px; padding: 0 12px; }
.pn-ins-f #pnFBuscar { padding-left: 38px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") no-repeat 12px 50% / 17px 17px; }
.pn-ins-f__mas-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(11, 42, 82, 0.22); border-radius: 10px; background: #fbf9f4;
  font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--navy); white-space: nowrap; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.pn-ins-f__mas-btn:hover { border-color: rgba(192, 177, 12, 0.7); }
.pn-ins-f__mas-btn[aria-expanded="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.pn-ins-f__mas-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pn-ins-f__mas-btn .pn-n { margin: 0; background: var(--gold); color: var(--navy); }
.pn-ins-f__mas-btn .pn-n[hidden] { display: none; }
.pn-ins-f__mas > [data-k="orden"] { display: none; } /* the header sorts on computers; phones choose the order here */
.pn-ins-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0 0; }
.pn-ins-chips[hidden] { display: none; }
.pn-ins-chips__l { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.pn-ins-chips__l li { min-width: 0; max-width: 100%; }
.pn-fchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 34px; padding: 0 8px 0 13px; border: 1px solid rgba(0, 81, 147, 0.2); border-radius: 999px; background: rgba(0, 81, 147, 0.06);
  font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--navy); cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.pn-fchip span { min-width: 0; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-fchip svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: 0.7; }
.pn-fchip:hover { border-color: rgba(0, 81, 147, 0.4); background: rgba(0, 81, 147, 0.11); }
.pn-fchip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pn-ins-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 18px 0 12px; }
.pn-ins-barra .pn-cuenta, .pn-ins-barra .pn-acciones { margin: 0; }
.pn-ins-barra .pn-cuenta { font-variant-numeric: lining-nums tabular-nums; }

.pn-ins { container: pnins / inline-size; position: relative; margin-bottom: 8px; border: 1px solid var(--pn-borde); border-radius: 16px; background: #fff; box-shadow: var(--pn-sombra); }
.pn-ins__cab, .pn-ins .pn-p__fila { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.45fr) 84px minmax(0, 1fr) 128px minmax(0, 0.95fr) 122px 92px; gap: 0 14px; align-items: center; padding: 0 16px; }
.pn-ins__cab { position: sticky; top: var(--pn-top-h, 0px); z-index: 6; min-height: 40px; border-bottom: 1px solid var(--pn-borde); border-radius: 16px 16px 0 0; background: #fbf9f4;
  font-family: var(--sans); font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pn-ins__h { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-ins__h button { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 40px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.pn-ins__h button:hover, .pn-ins__h[data-sentido="asc"] button, .pn-ins__h[data-sentido="desc"] button { color: var(--navy); }
.pn-ins__h button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.pn-ins__h svg { flex: none; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pn-ins__h svg path { opacity: 0.35; }
.pn-ins__h[data-sentido="asc"] svg path:first-child, .pn-ins__h[data-sentido="desc"] svg path:last-child { opacity: 1; stroke: var(--gold-ink); }
.pn-ins__lista { margin: 0; padding: 0; list-style: none; }
.pn-pane .pn-ins .pn-p { padding: 0; border: 0; border-radius: 0; background: #fff; box-shadow: none; transition: background-color 0.15s; }
.pn-pane .pn-ins .pn-p:nth-child(even) { background: #fcfbf7; }
.pn-pane .pn-ins .pn-p + .pn-p { border-top: 1px solid rgba(11, 42, 82, 0.07); }
.pn-pane .pn-ins .pn-p:hover { background: rgba(0, 81, 147, 0.045); box-shadow: none; }
.pn-pane .pn-ins .pn-p.is-abierta { background: rgba(0, 81, 147, 0.08); box-shadow: inset 3px 0 0 var(--gold); }
.pn-pane .pn-ins .pn-p:last-child { border-radius: 0 0 16px 16px; }
.pn-ins__lista > .pn-vacio { margin: 14px; }
.pn-ins .pn-p__fila { width: 100%; height: 42px; margin: 0; border: 0; border-radius: inherit; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.pn-ins .pn-p__fila:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.pn-p__c { min-width: 0; overflow: hidden; font-size: 13px; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); }
.pn-ins .pn-p__c--per, .pn-ins .pn-p__c--inst, .pn-ins .pn-p__c--cod { display: flex; flex-direction: column; justify-content: center; }
.pn-ins .pn-p__c small { display: block; overflow: hidden; font-size: 11.5px; line-height: 1.25; text-overflow: ellipsis; color: var(--muted); }
.pn-ins .pn-p__nombre { overflow: hidden; font-family: var(--sans); font-size: 13.5px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; color: var(--navy); overflow-wrap: normal; }
.pn-ins .pn-p.is-baja .pn-p__nombre { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(91, 100, 116, 0.55); }
.pn-ins .pn-p__dni, .pn-ins .pn-p__cod { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.pn-ins .pn-p__inst { overflow: hidden; text-overflow: ellipsis; }
.pn-ins .pn-p__c--nivel { font-size: 12.5px; color: var(--muted); }
.pn-ins .pn-p__ev { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; }
.pn-ins .pn-p__ev em { position: relative; display: inline-flex; flex: none; align-items: baseline; gap: 3px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 81, 147, 0.08);
  font-family: var(--sans); font-size: 11px; font-style: normal; font-weight: 700; line-height: 1.35; color: var(--blue); }
.pn-ins .pn-p__ev em i { font-size: 10px; font-style: normal; font-weight: 600; opacity: 0.8; }
.pn-ins .pn-p__ses { font-size: 12.5px; font-weight: 600; color: var(--gold-ink); }
.pn-ins .pn-p__nada { font-weight: 500; font-style: italic; color: var(--muted); }
#panelRoot .pn-ins .pn-p__c .chip { max-width: 100%; padding: 3px 8px; overflow: hidden; font-size: 10.5px; letter-spacing: 0.05em; text-overflow: ellipsis; white-space: nowrap; }
.pn-ins .pn-p__cod { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--navy); }
.pn-ins__mas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; padding: 14px 16px 16px; border-top: 1px solid var(--pn-borde); }
.pn-ins__mas[hidden] { display: none; }
.pn-ins__mas .pn-nota { margin: 0; font-size: 13.5px; }
.pn-ins__mas .btn { min-height: 44px; }
/* narrower lists keep the essentials, then go to two lines per person */
@container pnins (max-width: 1039px) {
  .pn-ins__cab, .pn-ins .pn-p__fila { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) 80px 120px 118px 88px; }
  .pn-ins__h--nivel, .pn-ins__h--ses, .pn-ins .pn-p__c--nivel, .pn-ins .pn-p__ses { display: none; }
}
@container pnins (max-width: 719px) {
  .pn-ins__cab { display: none; }
  .pn-ins .pn-p__fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "per pago" "inst ev"; gap: 4px 10px; height: auto; min-height: 60px; padding: 9px 14px; }
  .pn-ins .pn-p__c--per { grid-area: per; }
  .pn-ins .pn-p__c--inst { grid-area: inst; }
  .pn-ins .pn-p__c--pago { grid-area: pago; justify-self: end; }
  .pn-ins .pn-p__ev { grid-area: ev; justify-self: end; }
  .pn-ins .pn-p__c--cat, .pn-ins .pn-p__c--nivel, .pn-ins .pn-p__ses, .pn-ins .pn-p__c--cod, .pn-ins .pn-p__c small { display: none; }
  .pn-ins .pn-p__nombre { font-size: 15px; }
  .pn-ins .pn-p__inst { font-size: 13px; color: var(--muted); }
  .pn-ins .pn-p__ev em, .pn-ins .pn-p__ev em i, #panelRoot .pn-ins .pn-p__c .chip { font-size: 12px; }
}

/* the drawer: one person at a time, beside the list; the top bar makes room so what just happened stays readable */
.pn-cajon { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(560px, 46vw); border-left: 1px solid var(--pn-borde); background: #fff;
  box-shadow: -28px 0 56px -32px rgba(8, 33, 63, 0.5); animation: pn-cajon-entra 0.28s var(--ease); }
.pn-cajon[hidden] { display: none; }
@keyframes pn-cajon-entra { from { opacity: 0; transform: translateX(28px); } }
@keyframes pn-hoja-entra { from { opacity: 0; transform: translateY(36px); } }
.pn-cajon__cab { position: relative; display: flex; flex: none; align-items: flex-start; gap: 12px; padding: 22px 22px 16px; border-bottom: 1px solid var(--pn-borde); background: linear-gradient(180deg, #fbf9f4, #fff); }
.pn-cajon__cab::before { content: ""; position: absolute; top: 0; left: 22px; width: 48px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
.pn-cajon__txt { flex: 1; min-width: 0; }
.pn-cajon__eyebrow { margin: 0 0 4px; font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); }
.pn-cajon__t { margin: 0; font-family: var(--pn-serif); font-size: 25px; font-weight: 700; line-height: 1.15; letter-spacing: -0.005em; color: var(--navy); outline: none; overflow-wrap: anywhere; }
.pn-cajon__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; }
.pn-cajon__inst { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.pn-cajon__cerrar { display: grid; flex: none; place-items: center; width: 44px; height: 44px; margin: -8px -10px 0 0; border: 0; border-radius: 50%; background: none; color: var(--navy); cursor: pointer; transition: background-color 0.2s; }
.pn-cajon__cerrar:hover { background: rgba(11, 42, 82, 0.07); }
.pn-cajon__cerrar:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; }
.pn-cajon__cerrar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pn-cajon__cuerpo { flex: 1; min-height: 0; padding: 18px 22px 28px; overflow: auto; overscroll-behavior: contain; }
.pn-cajon .pn-p__det { margin: 0; padding: 0; border: 0; }
.pn-cajon .pn-det-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.pn-cajon .pn-dl > div { grid-template-columns: 136px minmax(0, 1fr); }
.pn-cajon .pn-det-pase { width: 100%; max-width: 340px; }
.pn-cajon .pn-det-acc { margin-top: 20px; padding: 16px; }
.pn-cajon .pn-historial li { grid-template-columns: 104px auto minmax(0, 1fr); }
.pn-cajon-velo { display: none; }
@media (min-width: 900px) {
  .pn-ins-f .insc-f input, .pn-ins-f .insc-f select { font-size: 14.5px; }
  #panelApp:has(#panelPane-inscriptos:not([hidden]) #pnCajon:not([hidden])) .pn-top,
  #panelApp:has(#panelPane-pagos:not([hidden]) #pnPCajon:not([hidden])) .pn-top { padding-right: calc(min(560px, 46vw) + 24px); }
}
@media (max-width: 1179px) {
  .pn-ins-f__fila { grid-template-columns: repeat(2, minmax(0, 1fr)) repeat(2, minmax(0, 0.8fr)); }
  .pn-ins-f__fila > [data-k="q"] { grid-column: 1 / -2; }
  .pn-ins-f__mas-btn { grid-column: -2 / -1; }
}
@media (max-width: 899px) {
  .pn-pane .pn-ins-f { padding: 14px; }
  .pn-ins-f__fila, .pn-ins-f__mas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-ins-f__fila > [data-k="q"], .pn-ins-f__fila > .insc-f:nth-child(2), .pn-ins-f__mas-btn { grid-column: 1 / -1; }
  .pn-ins-f__mas > [data-k="orden"] { display: flex; }
  .pn-ins-barra { align-items: flex-start; }
  .pn-cajon { z-index: 76; top: auto; left: 0; width: auto; max-height: 88vh; max-height: 88dvh; padding-bottom: env(safe-area-inset-bottom, 0px); border-left: 0; border-radius: 22px 22px 0 0;
    box-shadow: 0 -24px 48px -24px rgba(8, 33, 63, 0.55); animation-name: pn-hoja-entra; }
  .pn-cajon__cab { padding: 22px 16px 14px; border-radius: 22px 22px 0 0; }
  .pn-cajon__cab::before { left: 50%; width: 40px; height: 4px; margin-left: -20px; top: 8px; border-radius: 4px; background: rgba(11, 42, 82, 0.18); }
  .pn-cajon__cuerpo { padding: 16px 16px 24px; }
  .pn-cajon .pn-dl > div, .pn-cajon .pn-historial li { grid-template-columns: minmax(0, 1fr); }
  .pn-cajon-velo:not([hidden]) { position: fixed; inset: 0; z-index: 75; display: block; background: rgba(8, 26, 50, 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
}
@media (max-width: 767px) {
  .pn-fchip { min-height: 44px; }
  .pn-ins-barra .pn-acciones { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .pn-cajon { animation: none; } .pn-pane .pn-ins .pn-p, .pn-fchip, .pn-ins-f__mas-btn, .pn-cajon__cerrar { transition: none; } }

/* Pagos: the receipt viewer, over the drawer */
.pn-rec-velo { position: fixed; inset: 0; z-index: 90; background: rgba(8, 26, 50, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.pn-rec { position: fixed; z-index: 91; top: 50%; left: 50%; display: flex; flex-direction: column; width: min(980px, 94vw); height: min(88vh, 88dvh); transform: translate(-50%, -50%); overflow: hidden;
  border: 1px solid var(--pn-borde); border-radius: 18px; background: #fff; box-shadow: 0 32px 72px -28px rgba(8, 33, 63, 0.6); animation: pn-rec-entra 0.24s var(--ease); }
@keyframes pn-rec-entra { from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); } }
.pn-rec__cab { position: relative; display: flex; flex: none; align-items: flex-start; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--pn-borde); background: linear-gradient(180deg, #fbf9f4, #fff); }
.pn-rec__cab::before { content: ""; position: absolute; top: 0; left: 22px; width: 48px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
.pn-rec__txt { flex: 1; min-width: 0; }
.pn-rec__t { margin: 0; font-family: var(--pn-serif); font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--navy); outline: none; overflow-wrap: anywhere; }
.pn-rec__barra { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 22px; border-bottom: 1px solid var(--pn-borde); }
.pn-rec__barra[hidden] { display: none; }
.pn-rec__barra a.btn { text-decoration: none; }
.pn-rec__zoom { display: inline-flex; gap: 6px; margin-right: 6px; }
.pn-rec__zoom .btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.pn-rec__cuerpo { flex: 1; min-height: 0; display: grid; place-items: center; padding: 14px; overflow: auto; overscroll-behavior: contain; background: #f4f1ea; }
.pn-rec__estado { margin: 0; max-width: 46ch; text-align: center; color: var(--muted); }
.pn-rec__pdf { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.pn-rec__cuerpo:has(.pn-rec__pdf) { padding: 0; place-items: stretch; }
.pn-rec__img { display: block; background: #fff; }
.pn-rec__cuerpo.is-ajuste .pn-rec__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pn-rec__cuerpo.is-real { place-items: start center; }
.pn-rec__cuerpo.is-real .pn-rec__img { max-width: none; width: auto; height: auto; }
@media (max-width: 899px) {
  .pn-rec { top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; transform: none; border: 0; border-radius: 0; animation-name: pn-rec-entra-m; }
  @keyframes pn-rec-entra-m { from { opacity: 0; transform: translateY(24px); } }
  .pn-rec__cab { padding: 18px 16px 12px; }
  .pn-rec__cab::before { left: 16px; }
  .pn-rec__t { font-size: 19px; }
  .pn-rec__barra { padding: 10px 16px; }
  .pn-rec__cuerpo { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { .pn-rec { animation: none; } }

/* Gestión › Correos: the scheduled reminders above the log (a switch per template, its fields under "Editar") and the e-mail preview */
.pn-recs { margin-bottom: 26px; }
.pn-recs__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.pn-recs__cab .pn-t3 { margin: 0; }
.pn-recs__cab .btn { min-height: 44px; }
.pn-recs__lista { margin-top: 12px; }
.pn-recs__log { margin-top: 8px; }
.pn-rec-fila { display: flex; align-items: flex-start; gap: 12px; }
.pn-rec-fila .pn-sub { margin-top: 2px; }
.pn-rec-salio { color: var(--verde); font-weight: 600; }
.pn-switch { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -8px 0 0 -6px; cursor: pointer; }
.pn-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.pn-switch__pista { position: relative; width: 40px; height: 24px; border-radius: 999px; background: rgba(11, 42, 82, 0.24); transition: background-color 0.2s; }
.pn-switch__pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.2s var(--ease); }
.pn-switch input:checked + .pn-switch__pista { background: var(--verde); }
.pn-switch input:checked + .pn-switch__pista::after { transform: translateX(16px); }
.pn-switch input:focus-visible + .pn-switch__pista { outline: 2px solid var(--blue); outline-offset: 2px; }
.pn-switch:has(input:disabled) { cursor: default; opacity: 0.6; }
.pn-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-bottom: 14px; }
.pn-recs .insc-f + .insc-f { margin-top: 14px; }
.pn-recs textarea { width: 100%; min-height: 120px; padding: 12px 16px; font: 15px/1.5 var(--body); color: var(--ink); border: 1px solid rgba(11, 42, 82, 0.22); border-radius: 10px; background: #fff; resize: vertical; }
.pn-recs textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.pn-rec--vista { width: min(720px, 94vw); }
.pn-rec__cuerpo:has(.pn-rec__correo) { background: #f4efe4; }
@media (max-width: 640px) { .pn-grid2 { grid-template-columns: minmax(0, 1fr); } .pn-rec--vista { width: 100%; } }

/* Pagos: the state groups as one segmented control with their counts, then one dense row per payment; the detail opens in the drawer */
.pn-seg { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; padding: 4px; border: 1px solid var(--pn-borde); border-radius: 14px; background: #fbf9f4; }
.pn-seg__b { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: none;
  font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--muted); white-space: nowrap; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.pn-seg__b:hover { color: var(--navy); background: rgba(11, 42, 82, 0.05); }
.pn-seg__b[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(11, 42, 82, 0.12), inset 0 -3px 0 var(--gold); }
.pn-seg__b:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.pn-seg__b .pn-n { margin: 0; }
.pn-pg { container: pnpg / inline-size; position: relative; margin-bottom: 16px; border: 1px solid var(--pn-borde); border-radius: 16px; background: #fff; box-shadow: var(--pn-sombra); }
.pn-pg__cab, .pn-pg .pn-p__fila { display: grid; grid-template-columns: 116px minmax(0, 1.5fr) minmax(0, 1.3fr) 48px 96px 108px 136px 72px 28px; gap: 0 12px; align-items: center; padding: 0 16px; }
.pn-pg__cab { min-height: 40px; border-bottom: 1px solid var(--pn-borde); border-radius: 16px 16px 0 0; background: #fbf9f4; font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pn-pg__h { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-pg__lista { margin: 0; padding: 0; list-style: none; }
.pn-pg__lista > .pn-vacio { margin: 14px; }
.pn-pane .pn-pg .pn-p { padding: 0; border: 0; border-radius: 0; background: #fff; box-shadow: none; transition: background-color 0.15s; }
.pn-pane .pn-pg .pn-p:nth-child(even) { background: #fcfbf7; }
.pn-pane .pn-pg .pn-p + .pn-p { border-top: 1px solid rgba(11, 42, 82, 0.07); }
.pn-pane .pn-pg .pn-p:hover { background: rgba(0, 81, 147, 0.045); }
.pn-pane .pn-pg .pn-p.is-abierta { background: rgba(0, 81, 147, 0.08); box-shadow: inset 3px 0 0 var(--gold); }
.pn-pane .pn-pg .pn-p:last-child { border-radius: 0 0 16px 16px; }
.pn-pg .pn-p__fila { width: 100%; min-height: 46px; margin: 0; border: 0; border-radius: inherit; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pn-pg .pn-p__fila:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.pn-pg .pn-p__c small { display: block; overflow: hidden; font-size: 11.5px; line-height: 1.25; text-overflow: ellipsis; color: var(--muted); }
.pn-pg .pn-pg__c--cont, .pn-pg .pn-pg__c--fecha { display: flex; flex-direction: column; justify-content: center; }
.pn-pg .pn-p__cod { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.pn-pg .pn-p__nombre { display: block; overflow: hidden; font-family: var(--sans); font-size: 13.5px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; color: var(--navy); }
.pn-pg .pn-pg__c--n, .pn-pg .pn-pg__c--monto { font-family: var(--sans); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--navy); }
.pn-pg__cab .pn-pg__c--n, .pn-pg__cab .pn-pg__c--monto { text-align: right; }
.pn-pg .pn-pg__c--medio { font-size: 12.5px; color: var(--muted); }
#panelRoot .pn-pg .pn-p__c .chip { max-width: 100%; padding: 3px 8px; overflow: hidden; font-size: 10.5px; letter-spacing: 0.05em; text-overflow: ellipsis; white-space: nowrap; }
.pn-pg__clip { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: rgba(0, 81, 147, 0.08); color: var(--blue); }
.pn-pg__clip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pn-pg__sin { color: rgba(91, 100, 116, 0.6); }
.pn-pg__cobro > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pn-pg__cobro-e { font-family: var(--body); font-size: 13.5px; font-weight: 400; color: var(--muted); }
.pn-pg__cobro .pn-cobro { margin: 0; }
.pn-pg__acciones .pn-acc { margin-top: 0; }
.pn-pg__acciones { margin-bottom: 18px; }
.pn-pg__det .pn-observar__grid { grid-template-columns: minmax(0, 1fr); }
.pn-pg__det .pn-gente { margin: 0; }
@container pnpg (max-width: 1099px) {
  .pn-pg__cab, .pn-pg .pn-p__fila { grid-template-columns: 112px minmax(0, 1.5fr) minmax(0, 1.2fr) 40px 92px 128px 64px 24px; }
  .pn-pg .pn-pg__c--medio { display: none; }
}
@container pnpg (max-width: 819px) {
  .pn-pg__cab, .pn-pg .pn-p__fila { grid-template-columns: 108px minmax(0, 1fr) 88px 124px 24px; }
  .pn-pg .pn-pg__c--cont, .pn-pg .pn-pg__c--n, .pn-pg .pn-pg__c--fecha { display: none; }
}
@container pnpg (max-width: 559px) {
  .pn-pg__cab { display: none; }
  .pn-pg .pn-p__fila { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "inst estado" "cod monto"; gap: 4px 10px; min-height: 60px; padding: 9px 14px; }
  .pn-pg .pn-pg__c--inst { grid-area: inst; }
  .pn-pg .pn-pg__c--estado { grid-area: estado; justify-self: end; }
  .pn-pg .pn-pg__c--cod { grid-area: cod; }
  .pn-pg .pn-pg__c--monto { grid-area: monto; justify-self: end; }
  .pn-pg .pn-pg__c--rec { display: none; }
  .pn-pg .pn-p__nombre { font-size: 15px; }
  .pn-pg .pn-p__cod, #panelRoot .pn-pg .pn-p__c .chip { font-size: 12px; }
}
@media (max-width: 767px) {
  .pn-seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pn-seg::-webkit-scrollbar { display: none; }
  .pn-seg__b { flex: none; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .pn-seg__b, .pn-pane .pn-pg .pn-p { transition: none; } }

/* ---------------------------------------------------------------- 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); }
/* the staff a school or a sponsor invited: a reminder that one day is needed, and the parallel session beside the days once it is open */
.acred-hint { margin: 0; padding: 10px 14px; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; background: var(--gold-soft); font-size: 14.5px; color: var(--ink); }
.acred-ses { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.acred-inst { max-width: 460px; }
.acred-inst[hidden] { display: none; }
.acred-ses .par__ops { margin: 0; padding: 0; border: 0; min-width: 0; }
.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 hoja A4, siempre, con cualquier combinación de actividades (hasta seis). Sin barra ni pie ni botones, en blanco con el texto azul
   (no gasta tinta): arriba el sello y el evento, el nombre grande a la izquierda y el QR (48 mm) con el código a la derecha, y las actividades
   en una tabla compacta (día, título y horario, lugar y dirección en una línea chica). El margen de la hoja es el del @page; no depende del
   encabezado y pie del navegador (el título de la página dice "Entrada · nombre" por si el usuario los deja activados). */
@page entrada { size: A4; margin: 10mm; }
@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 .tk-vacio, .tk-page .pass__stamp { display: none !important; }
  .tk-page, .tk-page main, .tk-page .tk { margin: 0; background: #fff !important; }
  .tk-page .tk, .tk-page .tk * { page-break-after: avoid; break-after: avoid; }
  .tk { display: block; min-height: 0; padding: 0; }
  .tk .wrap { width: 100%; max-width: none; margin: 0; padding: 0; }
  .tk__wrap { display: block; }
  .tk-stack { width: 100%; }
  .tk-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto; grid-template-areas: "top top" "who qr" "chips qr" "ev ev"; column-gap: 8mm; row-gap: 3.5mm; width: 100%; padding: 7mm 8mm 6mm !important; overflow: visible; border: 1.5pt solid #0b2a52; border-radius: 5mm; background: #fff !important; color: #0b2a52 !important; box-shadow: none !important; break-inside: avoid; page-break-inside: avoid; }
  .tk-card::before { display: none; }
  .tk-card .pass__top { grid-area: top; gap: 5mm; padding-bottom: 3mm; border-bottom: 0.75pt solid #0b2a52; }
  .tk-card .pass__seal { width: 13mm; height: 13mm; padding: 1.6mm; border-radius: 50%; background: #0b2a52; }
  .tk-card .pass__event small { font-size: 8pt; }
  .tk-card .pass__event b { font-size: 13pt; }
  .tk-card .pass__who { grid-area: who; align-self: end; gap: 1.5mm; }
  .tk-card .pass__who small { font-size: 9pt; }
  .tk-card .pass__who b { font-size: 25pt; line-height: 1.08; }
  .tk-card .pass__who span { font-size: 11.5pt; }
  .tk-card .pass__chips { grid-area: chips; align-self: start; }
  .tk-card .pass__chips:empty { display: none; }
  .tk-card .pass__chip { padding: 1.2mm 3mm; font-size: 9pt; }
  .tk-qrbox { grid-area: qr; align-self: center; gap: 2.5mm; }
  .tk-card .pass__ev { grid-area: ev; padding-top: 3mm; border-top: 0.75pt solid #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 span, .tk-card .pass__ev li, .tk-ev li small, .tk-ses { color: #222 !important; }
  .tk-id span { color: #0b2a52; }
  .tk-id b { font-size: 16pt; letter-spacing: 0.06em; }
  .tk-id span { margin-top: 1mm; font-size: 9pt; }
  .tk-card .pass__chip { background: #fff3b0; color: #0b2a52; }
  .tk-card .pass__foot, .tk-ses { border-color: #999; }
  .tk-qr { width: 48mm; padding: 2.5mm; border: 1pt solid #0b2a52; border-radius: 2.5mm; }
  .tk-qr > svg { animation: none; }
  .tk-card.is-pending .tk-qr { color: #222; border-color: #999; font-size: 9pt; }
  /* the activities: one table row each (day, title and time, venue and address) */
  .tk-card .pass__ev small { font-size: 8.5pt; }
  .tk-card .pass__ev ul { gap: 0; margin-top: 2mm; }
  .tk-ev li { display: grid; grid-template-columns: 17mm minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "dia titulo donde" "dia cuando donde"; column-gap: 4mm; row-gap: 0.4mm; align-items: start; padding: 1.7mm 0; border-bottom: 0.5pt dotted #999; font-size: 10pt; line-height: 1.25; break-inside: avoid; }
  .tk-ev li:last-child { border-bottom: 0; }
  .tk-card .pass__ev li b { grid-area: dia; align-self: center; min-width: 0; padding: 0.8mm 0; border: 0.75pt solid #0b2a52; border-radius: 1.5mm; text-align: center; font-size: 9pt; color: #0b2a52 !important; }
  .tk-ev li > span { display: contents; }
  .tk-ev li strong { grid-area: titulo; font-size: 10.5pt; line-height: 1.2; }
  .tk-ev li small { font-size: 9pt; line-height: 1.25; }
  .tk-ev li small:nth-of-type(1) { grid-area: cuando; }
  .tk-ev li small:nth-of-type(2) { grid-area: donde; font-size: 0; }
  .tk-ev li small:nth-of-type(2) .tk-lugar { display: block; font-size: 9.5pt; font-weight: 700; color: #0b2a52; }
  .tk-ev li small:nth-of-type(2) .tk-dir { display: block; font-size: 7.5pt; line-height: 1.25; color: #444; }
  .tk-ses { margin-top: 2mm; padding-top: 2mm; font-size: 10pt; }
}

/* ------------------------------------------------------------- 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; }
/* "Consultas": el correo copiado, dicho en la tarjeta, con el enlace para abrir el correo igual */
.act__aviso { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; margin: 12px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.act__aviso:empty { margin: 0; }
.act__aviso strong { color: var(--navy); overflow-wrap: anywhere; }
.act__aviso a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--sans); font-weight: 700; color: var(--blue); text-decoration: underline; text-decoration-color: rgba(192, 177, 12, 0.7); text-underline-offset: 4px; }
.act__aviso a:hover { text-decoration-color: currentColor; }
/* 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); }
/* galería de una actividad (Encuentros de Arte): una foto por ítem con su epígrafe; sin foto, una ficha neutra con el ícono */
.act__gal { margin-top: 26px; }
.act__gal 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-gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.act-gal__it { margin: 0; min-width: 0; }
.act-gal__ph { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--cream); box-shadow: inset 0 0 0 1px var(--line); color: var(--gold-ink); }
.act-gal__ph svg { width: 32px; height: 32px; opacity: 0.55; }
.act-gal__ph[data-cms-filled] > svg { display: none; }
.act-gal__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.act-gal__it figcaption { margin-top: 8px; font-family: var(--sans); font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--navy); overflow-wrap: anywhere; }
@media (min-width: 561px) { .act-gal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 901px) { .act-gal { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); } }
@media (min-width: 1200px) { .act-gal { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@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-vacio .est-ficha:nth-child(2) { opacity: 0.8; } /* only the placeholder cards fade; real projects stay solid */
.est-vacio .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; }
/* every tile of a tier is the same card (size, hairline, soft shadow, radius) whatever logo it holds */
.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; box-shadow: 0 1px 2px rgba(11, 42, 82, 0.05), 0 8px 20px rgba(11, 42, 82, 0.06); }
/* the link fills the tile: the whole card is the target and the logo's 80 % x 70 % box is measured against the tile */
.spons-logo > a, .spons-slot > a { display: grid; place-items: center; width: 100%; height: 100%; }
.spons-logo > a:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; border-radius: 14px; }
.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; }
/* sponsor wall: every logo in a single tone at rest, in full colour on hover or focus, so bright brands, grey wordmarks and dark symbols weigh the same */
.spons-logo img { filter: grayscale(1) contrast(1.05) opacity(0.82); transition: filter 0.25s, opacity 0.25s; }
.spons-logo:hover img, .spons-logo:focus-within img { filter: none; opacity: 1; }
@media (hover: none) { .spons-logo img { filter: none; opacity: 1; } } /* touch has no hover: full colour */
@media (prefers-reduced-motion: reduce) { .spons-logo img { transition: none; } }
/* 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; }
/* the size of the tiers added by the Polo (settings.sponsor_tiers, size "small"): four tiles per row on desktop */
.spons-nivel--small { --w: 168px; --h: 80px; }
.spons-nivel--small .spons-fila { max-width: calc(4 * var(--w) + 3 * 16px); margin-inline: auto; }
/* a tier that is not visible and has no sponsor, and the section when no tier shows (js/cms.js, build.spons_nivel) */
.spons-nivel[hidden], #sponsors[hidden], .subnav li[hidden], .cong-sep:has(+ #sponsors[hidden]) { display: none !important; }
.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, .spons-nivel--small { --w: calc(50% - 6px); --h: 84px; }
  .spons-nivel--small { --h: 64px; }
  .spons-nivel--small .spons-fila { max-width: none; }
  .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" -- (the top padding goes through --pad-top so
     the arrival margin of each section can take it back out). Since design 05 every boundary carries the painted stroke
     separator (.cong-sep, 132x15px here), centred on it: 44px leaves it more than 36px of air on each side, and
     #inscripciones keeps 40px on top for the same reason. */
  #cronograma, #programa, #speakers, #estaciones, #historico { --pad-top: clamp(44px, 7vw, 84px); padding-bottom: clamp(44px, 7vw, 84px); }
  #inscripciones { --pad-top: 40px; padding-bottom: clamp(44px, 7vw, 84px); }
  .cong-sep img { width: 132px; }
}

/* ================================================================ 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-entrada { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 420px; }
.auth-entrada[hidden], .auth-entrada [hidden] { display: none !important; }
.auth-dlg .auth-entrada { max-width: none; }
.auth-entrada__lead { margin: 0 0 2px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
/* the phrase the eye lands on after the title: bold navy against the muted lead, with the site's gold underline (follows the phrase across lines) */
.auth-entrada__hi { font-style: normal; font-weight: 700; color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-skip-ink: none; }
.auth-entrada__hint { margin: 0; font-size: 13.5px; line-height: 1.5; text-align: center; color: var(--muted); }
.auth-prov { display: grid; gap: 12px; }
.auth-prov__b { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 52px; border: 1px solid rgba(11, 42, 82, 0.14); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(11, 42, 82, 0.05), 0 10px 24px -18px rgba(11, 42, 82, 0.45); font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.005em; color: var(--navy); cursor: pointer; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
.auth-prov__b svg { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; margin-top: -10px; }
.auth-prov__mail { fill: none; stroke: var(--navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.auth-prov__b:hover { border-color: rgba(11, 42, 82, 0.26); box-shadow: 0 1px 2px rgba(11, 42, 82, 0.06), 0 16px 30px -18px rgba(11, 42, 82, 0.5); transform: translateY(-1px); }
.auth-prov__b:active { transform: none; }
.auth-prov__b:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.auth-back { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; min-height: 44px; margin: -12px 0 -8px -8px; padding: 0 10px 0 4px; border: 0; border-radius: 10px; background: none; font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--blue); cursor: pointer; }
.auth-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auth-back:hover { color: var(--navy); }
.auth-info { display: flex; flex-direction: column; gap: 14px; }
.auth-info__t { 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; }
.auth-info__t:empty { display: none; }
.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-back[hidden], .auth-entrada__lead[hidden], .auth-entrada__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; }
/* the landing after a confirmation link: one calm line above the form */
.auth-ok { margin: 0; padding: 12px 14px; border-left: 3px solid var(--gold); border-radius: 4px 12px 12px 4px; background: var(--gold-soft); font-size: 14.5px; line-height: 1.5; font-weight: 500; color: var(--ink); }
/* "Reenviar el correo": the spam hint (form only), the button, its countdown and the answer */
.auth-resend { display: flex; flex-direction: column; gap: 8px; }
.auth-resend__h { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.auth-resend__b { width: 100%; justify-content: center; }
.auth-resend__b:disabled, .auth-resend__b:disabled:hover { opacity: 0.55; cursor: default; box-shadow: none; }
.auth-resend__c { font-size: 13.5px; line-height: 1.4; text-align: center; color: var(--muted); }
.auth-resend__m { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 500; text-align: center; color: var(--navy); }
.auth-resend__m.is-err { color: var(--auth-err); }
.auth-resend__c:empty, .auth-resend__m:empty { display: none; }
.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, .auth-entrada.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; }
  .auth-prov__b:hover { transform: none; }
}

/* home: «Socios» as a larger kicker (the Polo, 14/10) */
.head--socios .eyebrow { font-size: clamp(18px, 2vw, 24px); letter-spacing: .12em; }

/* step 3 for a group: activities once, a chip per person (the owner, 14/10) */
.insc-mx__gente { position: sticky; top: calc(var(--nav-h, 64px) + var(--subnav-h, 0px)); z-index: 3; margin: 0 0 16px; padding: 10px 0 12px; background: var(--paper); border-bottom: 1px solid var(--line); }
.insc-mx__gente ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.insc-mx__p { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-family: var(--sans); font-size: 12.5px; }
.insc-mx__p b { color: var(--navy); font-weight: 700; }
.insc-mx__p small { color: var(--muted); font-weight: 600; }
.insc-mx__p i, .insc-chip i { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c, var(--navy)); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 800; flex: none; }
.insc-mx__hint { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.insc-mx__cards { display: grid; gap: 14px; }
.insc-mx__q { display: grid; gap: 8px; margin-top: 12px; }
.insc-mx__l { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.insc-mx__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.insc-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 14px 0 7px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.insc-chip svg { width: 14px; height: 14px; display: none; }
.insc-chip[aria-pressed="true"] { background: #e7f3ea; border-color: #2f7d4f; color: #1f5c39; }
.insc-chip[aria-pressed="true"] svg { display: block; }
.insc-chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.insc-chip--todos { padding: 0 16px; border-style: dashed; color: var(--muted); font-weight: 600; }
.insc-chip--todos[aria-pressed="true"] { background: var(--gold-soft); border: 1.5px solid var(--gold); color: var(--navy); }
.insc-mx__res-t { margin: 28px 0 4px; font-family: var(--sans); font-size: 15px; color: var(--navy); }
.insc-evp__res { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.insc-evp--solo .insc-evp__res { display: none; }
.insc-evp__res li { padding: 3px 10px; border-radius: 999px; background: var(--gold-soft); color: var(--navy); font-family: var(--sans); font-size: 12px; font-weight: 700; }
.insc-evp__res li.is-vacio { background: transparent; border: 1px dashed var(--line); color: var(--muted); font-weight: 600; }
.insc-evp--res + .insc-evp--res { margin-top: 18px; }
.insc-evp--res .insc-evp__t { margin-bottom: 8px; padding-top: 14px; }
.insc-evp--res .insc-ev { display: none; }
.insc-evp--res .insc-ev:has([data-par-elegir]:not([hidden])) { display: block; margin-top: 10px; }
.insc-evp--res .insc-ev:has([data-par-elegir]:not([hidden])) > :not([data-par-elegir]) { display: none; }

/* team portal by activity (the owner, 14/10) */
.eq-vista { display: flex; gap: 8px; margin: 0 0 10px; }
.eq-mx { margin-top: 6px; }
.eq-mx__barra { position: sticky; top: calc(var(--nav-h, 72px) + 8px); z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--gold); border-radius: 12px; background: var(--gold-soft); }
.eq-mx__cuenta { margin: 0; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--navy); }
.eq-mx__err { flex-basis: 100%; margin: 0; }
.eq-mx__acc { display: flex; gap: 8px; margin-left: auto; }
.eq-mx__nota { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.insc-chip.is-cambio { box-shadow: 0 0 0 2px var(--gold); }

/* an account that already registered (the owner, 15/10) */
.insc-ya { margin: 8px 0 18px; padding: 22px 24px; border: 1px solid var(--gold); border-radius: 16px; background: var(--gold-soft); }
.insc-ya .eyebrow { margin: 0 0 6px; }
.insc-ya__t { margin: 0 0 6px; font-family: var(--sans); font-size: 20px; color: var(--navy); }
.insc-ya__p { margin: 0 0 14px; color: var(--ink); }
.insc-ya__acc { display: flex; flex-wrap: wrap; gap: 10px; }
.insc.is-ya .insc-steps, .insc.is-ya .insc-nav, .insc.is-ya .insc-arc { display: none; }

/* the rooms of the afternoon for a group (the owner, 15/10) */
.insc-salas { margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.insc-salas__t { margin: 0 0 4px; font-family: var(--sans); font-size: 16px; color: var(--navy); }
.insc-salas__p { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }
.insc-salas__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.insc-sala { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.insc-sala header { display: grid; gap: 2px; }
.insc-sala header b { font-family: var(--sans); font-size: 14.5px; color: var(--navy); }
.insc-sala header small { font-size: 12.5px; color: var(--muted); }
.insc-sala.is-llena { opacity: .7; }
.insc-chip:disabled { opacity: .45; cursor: not-allowed; }
.insc-mx.con-salas ~ .insc-evp--res .insc-ev:has([data-par-elegir]:not([hidden])) { display: none; }
/* panel on large monitors: more columns where the content is a grid of cards */
@media (min-width: 1600px) {
  .pn-pane .pn-lista--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mis inscripciones: rooms board of a registration */
.mis-salas { margin-top: 14px; }
.mis-salas__acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; justify-content: flex-end; }
.mis-salas__err { flex-basis: 100%; margin: 0; }
/* ==========================================================================
   Motion vocabulary · one set of durations and easings for every press, hover and enter.
   Only transform, opacity, box-shadow and colours animate; never a layout property.
   Press 120 ms, hover/state 180 ms, enter 240 ms; nothing is slower than 300 ms.
   ========================================================================== */
:root {
  --t-press: 120ms;
  --t-state: 180ms;
  --t-enter: 240ms;
  --ease-enter: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-hover: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --focus-ring: var(--blue);
}

/* Shared transitions of the controls that are pressed: quick colour and shadow, instant-feeling press. */
.btn, .insc-chip, .eq-filtro, .mis-accion, .consent__op, .mis-sumar, .mis-cuenta__otra, .insc-add__btn,
.pn-tab, .pn-gtab, .pn-fchip, .pn-seg__b, .pn-kpi, .pn-tarea, .pn-acceso-ir, .pn-ins-f__mas-btn, .pn-cajon__cerrar,
.spk-chips button, .spk-tabs button, .hist-tabs button {
  transition-property: transform, opacity, box-shadow, background-color, color, border-color;
  transition-duration: var(--t-state);
  transition-timing-function: var(--ease-hover);
}

/* Press feedback: a small, fast squeeze and a slightly deeper colour. */
.btn:active, .insc-chip:active, .eq-filtro:active, .mis-accion:active, .consent__op:active, .mis-sumar:active,
.mis-cuenta__otra:active, .insc-add__btn:active, .pn-tab:active, .pn-gtab:active, .pn-fchip:active, .pn-seg__b:active,
.pn-kpi:active, .pn-tarea:active, .pn-acceso-ir:active, .pn-ins-f__mas-btn:active, .pn-cajon__cerrar:active,
.spk-chips button:active, .spk-tabs button:active, .hist-tabs button:active {
  transform: scale(0.97);
  transition-duration: var(--t-press);
  filter: brightness(0.96);
}
/* The nav CTA is centred with its own transform: keep that translate while it is pressed. Hover never moves it. */
.nav__cta:active { transform: translateY(-50%) scale(0.97); }
.btn--blue:active { background-color: #003e70; }
.btn--gold:active { background-color: #a89b0a; }
.btn--ghost:active, .btn--white:active { background-color: rgba(11, 42, 82, 0.07); }
.btn:active svg { transform: translateX(1px); }
.btn:disabled:active, .btn[aria-disabled="true"]:active, .consent__op:disabled:active, .pn-kpi:disabled:active { transform: none; filter: none; }
.nav__cta.btn:disabled:active { transform: translateY(-50%); }

/* Focus ring: one 2 px ring, 2 px offset, navy on light surfaces and gold on dark ones. */
.btn:focus-visible, .insc-chip:focus-visible, .eq-filtro:focus-visible, .mis-accion:focus-visible,
.consent__op:focus-visible, .mis-sumar:focus-visible, .mis-cuenta__otra:focus-visible, .insc-add__btn:focus-visible,
.pn-gtab:focus-visible, .pn-fchip:focus-visible, .pn-seg__b:focus-visible, .pn-kpi:focus-visible,
.pn-tarea:focus-visible, .pn-acceso-ir:focus-visible, .pn-ins-f__mas-btn:focus-visible, .pn-cajon__cerrar:focus-visible,
.nav__acct-btn:focus-visible, .auth-prov__b:focus-visible, .auth-dlg__x:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.pn-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.footer .btn:focus-visible, .btn--gold:focus-visible, .pn-rail .pn-tab:focus-visible { outline-color: var(--gold); }
.btn--gold:focus-visible { outline-color: var(--navy); }

/* Things that appear: a short fade and a 6 px rise. */
@keyframes motion-in { from { opacity: 0; transform: translateY(6px); } }
/* fill-mode backwards: a filling transform would make these the containing block of fixed children (the panel's drawers and sheets),
   so the panel panes, which hold them, get an opacity-only fade */
.mis-panel, .mis-nueva, .eq-mx { animation: motion-in var(--t-enter) var(--ease-enter) backwards; }
@keyframes motion-fade { from { opacity: 0; } }
.pn-pane:not([hidden]) { animation: motion-fade var(--t-enter) var(--ease-enter) backwards; }
.insc.is-live .insc-step { animation-duration: var(--t-enter); animation-timing-function: var(--ease-enter); }
.insc-done { animation-duration: var(--t-enter); }
.pn-cajon { animation-duration: var(--t-enter); animation-timing-function: var(--ease-enter); }
.spk-x.is-tabs .spk-anio, .spk-ses.is-tabs .spk-ses__panel { animation-duration: var(--t-enter); animation-timing-function: var(--ease-enter); }

@media (prefers-reduced-motion: reduce) {
  :root { --t-press: 1ms; --t-state: 1ms; --t-enter: 1ms; }
  .btn:active, .insc-chip:active, .eq-filtro:active, .mis-accion:active, .consent__op:active, .mis-sumar:active,
  .mis-cuenta__otra:active, .insc-add__btn:active, .pn-tab:active, .pn-gtab:active, .pn-fchip:active, .pn-seg__b:active,
  .pn-kpi:active, .pn-tarea:active, .pn-acceso-ir:active, .pn-ins-f__mas-btn:active, .pn-cajon__cerrar:active,
  .spk-chips button:active, .spk-tabs button:active, .hist-tabs button:active { transform: none; filter: none; }
  .nav__cta:active { transform: translateY(-50%); }
  .mis-panel, .mis-nueva, .eq-mx, .pn-pane:not([hidden]) { animation: none; }
}