@charset "UTF-8";
/* ==========================================================================
   TRAVESÍA Y BAJADA DE KAYAK · PARQUE NACIONAL LOS ALERCES
   FCE UNPSJB Sede Esquel

   Dirección de arte: dossier de expedición. Papel cálido, serif editorial,
   reglas capilares, cartografía dibujada a mano y movimiento contenido.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · TIPOGRAFÍAS
   Fraunces (corte Wonky) e Instrument Sans, ambas variables y con licencia
   OFL. Se sirven desde el propio dominio: nada de Google Fonts. Eso evita un
   CSS externo que bloquea el pintado, un pedido a un tercero desde el
   navegador de cada visitante, y que el sitio se caiga en redes restringidas.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-latin.woff2') format('woff2-variations'),
       url('assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-latin-ext.woff2') format('woff2-variations'),
       url('assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/instrument-sans-latin.woff2') format('woff2-variations'),
       url('assets/fonts/instrument-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/fonts/instrument-sans-latin-ext.woff2') format('woff2-variations'),
       url('assets/fonts/instrument-sans-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1 · TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* superficies */
  --paper:      #EEF7F5;
  --paper-2:    #DDEDEA;
  --paper-3:    #C8E0DC;

  /* tinta */
  --ink:        #092A25;
  --ink-2:      #315850;
  /* --ink-3 se usa en textos chicos (epígrafes, rótulos de 11-13 px).
     Está calibrado para superar 4.5:1 sobre las tres superficies claras. */
  --ink-3:      #50756D;

  /* reglas */
  --rule:       #B8D1CC;
  --rule-soft:  #D1E3DF;

  /* agua */
  --lake:       #087C8C;
  --lake-2:     #35B5C5;
  --lake-wash:  #D5F0F1;
  /* La franja de inscripción es oscura en los dos modos: por eso su color de
     texto es un token propio y no --paper, que se invierte. */
  --deep:       #062F2A;
  --on-deep:    #F2FBF9;

  /* brasa */
  --ember:      #B8A44B;
  --ember-wash: #EEF0D8;

  /* tipografía */
  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans:  'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* medidas */
  --shell: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --band-y: clamp(72px, 11vh, 140px);

  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: .45s;
}

html.dark {
  --paper:      #061714;
  --paper-2:    #0A211D;
  --paper-3:    #10302A;

  --ink:        #E8F5F2;
  --ink-2:      #A7C3BC;
  --ink-3:      #82A59C;

  --rule:       #1B3B34;
  --rule-soft:  #123029;

  --lake:       #58D2DF;
  --lake-2:     #8AE8EF;
  --lake-wash:  #0C302F;
  --deep:       #041F1C;
  --on-deep:    #E8F5F2;

  --ember:      #D8C46A;
  --ember-wash: #252613;
}

/* --------------------------------------------------------------------------
   2 · BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(16px, .55vw + 14.4px, 17.5px);
  line-height: 1.62;
  /* SOFT ablanda los terminales de Fraunces: menos mecánica, más escrita a
     mano. Se hereda; Instrument Sans no tiene ese eje y lo ignora. */
  font-variation-settings: 'SOFT' 28;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Grano de papel: una sola capa, muy tenue. Da textura sin costo de imagen. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(circle at 18% 22%, color-mix(in oklab, var(--lake) 5%, transparent) 0, transparent 42%),
    radial-gradient(circle at 82% 78%, color-mix(in oklab, var(--ember) 4%, transparent) 0, transparent 46%);
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--lake); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ember); }

img { max-width: 100%; display: block; }
em { font-style: italic; }

::selection { background: var(--lake); color: var(--paper); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

.sprite { position: absolute; }
.sprite symbol { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ic--sm { width: .95em; height: .95em; }
.eyebrow .ic { margin-top: .1em; }

.num {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 10px 18px; border-radius: 3px; font-size: .9rem; font-weight: 500;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: var(--paper); }

/* --------------------------------------------------------------------------
   3 · LAYOUT
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band-y); border-top: 1px solid var(--rule); }
.band--alt { background: var(--paper-2); }

/* Encabezado de sección con numeral en el margen */
.head {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 clamp(16px, 3vw, 40px);
  margin-bottom: clamp(40px, 6vw, 72px);
}
.head__num {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--ink-3);
  margin: .55em 0 0;
  padding-top: .1em;
  border-top: 1px solid var(--ink);
  align-self: start;
}
.head__title {
  grid-column: 2;
  font-size: clamp(2rem, 4.4vw, 3.05rem);
  max-width: 20ch;
}
.head__lede {
  grid-column: 2;
  margin: 1.1rem 0 0;
  color: var(--ink-2);
  font-size: 1.06rem;
  max-width: 56ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4 · PRIMITIVAS
   -------------------------------------------------------------------------- */
.eyebrow {
  /* flex-start para que el ícono quede en la primera línea cuando envuelve */
  display: inline-flex; align-items: flex-start; gap: .5em;
  font-size: .76rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.6rem;
}
.eyebrow--light { color: color-mix(in oklab, var(--on-deep) 68%, transparent); }

.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--sans);
  font-size: .92rem; font-weight: 500; line-height: 1;
  padding: .82em 1.35em;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--lg { font-size: 1rem; padding: 1em 1.6em; }
.btn--full { width: 100%; justify-content: center; }

.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--lake); color: var(--paper); }

.btn--ghost {
  background: #ffffff00;
  color: #00a6b9;
  border-color: #fff;
}

.btn--ghost:hover {
  background: #f0f0f0;
  color: #111;
  border-color: #f0f0f0;
}

.btn--paper { background: var(--on-deep); color: var(--deep); }
.btn--paper:hover { background: var(--ember); color: #fff; }

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

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  background: transparent; color: inherit;
  border: 1px solid var(--rule); border-radius: 2px;
  cursor: pointer; font-size: 1rem;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-btn:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); border-color: var(--ink); }

/* Fila-enlace: reemplaza a las "tarjetas CTA" con ícono en cuadrado */
.linkrow {
  display: flex; align-items: center; gap: 1.15rem;
  margin-top: clamp(36px, 5vw, 56px);
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink); text-decoration: none;
  background: color-mix(in oklab, var(--paper) 60%, transparent);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.linkrow:hover { border-color: var(--lake); background: var(--lake-wash); color: var(--ink); }
.linkrow > .ic:first-child { width: 1.5rem; height: 1.5rem; color: var(--lake); }
.linkrow span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.linkrow b { font-weight: 600; font-size: 1rem; }
.linkrow em { font-style: normal; font-size: .87rem; color: var(--ink-3); }
.linkrow__go { color: var(--ink-3); transition: transform var(--dur) var(--ease); }
.linkrow:hover .linkrow__go { transform: translate(2px, -2px); color: var(--lake); }

/* Nota al margen */
.note {
  margin-top: clamp(40px, 5vw, 64px);
  padding: 1.4rem 1.6rem;
  border-left: 2px solid var(--ember);
  background: #0a6358;
  font-size: .97rem;
  color: var(--ink-2);
  max-width: 72ch;
}
.note strong {color: #ff8f00;font-weight: 600;}

/* --------------------------------------------------------------------------
   5 · CABECERA
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  border-bottom: 1px solid var(--rule);
}
@supports (backdrop-filter: blur(1px)) {
  .masthead { backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
}

.masthead__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: .8rem var(--gutter);
  display: flex; align-items: center; gap: 1.5rem;
}

.wordmark { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.wordmark__mark { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; }
.wordmark__mark svg,
.wordmark__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wordmark__text { display: flex; flex-direction: column; line-height: 1.18; }
.wordmark__text b { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; letter-spacing: -.01em; }
.wordmark__text i { font-style: normal; font-size: .68rem; letter-spacing: .085em; text-transform: uppercase; color: var(--ink-3); }

.nav { display: flex; gap: .35rem; }
.nav__mobile-actions { display: none; }
.nav a {
  position: relative;
  padding: .5rem .78rem;
  font-size: .89rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  border-radius: 2px;
  transition: color var(--dur) var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: .78rem; right: .78rem; bottom: .18rem;
  height: 1px; background: var(--ember);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a.is-current::after { transform: scaleX(1); }
.nav a.is-current { color: var(--ink); }

.nav-toggle { display: none; }

.masthead__progress {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  width: 100%; transform: scaleX(var(--p, 0)); transform-origin: left;
  background: var(--ember);
  transition: transform .1s linear;
}

/* --------------------------------------------------------------------------
   6 · PORTADA
   -------------------------------------------------------------------------- */
.cover { padding-block: clamp(48px, 8vh, 104px) clamp(56px, 9vh, 120px); }

.cover__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
}

.cover__title {
  font-size: clamp(2.9rem, 7.6vw, 5.6rem);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: .96;
}
.cover__header-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 32px);
}
.cover__shield {
  margin: 0;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover__shield-img {
  height: clamp(85px, 10vw, 135px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.95;
  filter: contrast(1.15) brightness(0.9);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.cover__shield-img:hover {
  opacity: 1;
  transform: scale(1.03);
}
html.dark .cover__shield-img {
  filter: invert(1) brightness(1.2);
}

.cover__title::after {
  content: ""; display: block;
  width: 92px; height: 1px; margin-top: clamp(24px, 3vw, 36px);
  background: var(--ink);
}

.cover__lede {
  margin: clamp(22px, 3vw, 32px) 0 0;
  font-size: clamp(1.06rem, 1.2vw, 1.19rem);
  color: var(--ink-2);
  max-width: 46ch;
  text-wrap: pretty;
}
.cover__lede em { font-style: normal; color: var(--ink); box-shadow: inset 0 -.42em 0 var(--lake-wash); }

.cover__logos-row {
  margin: 16px 0 12px 0;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 26px);
  flex-wrap: wrap;
}
.cover__univ-img {
  height: clamp(65px, 7.5vw, 95px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: .92;
  transition: opacity .2s var(--ease);
}
.cover__logos-sep {
  width: 1px;
  height: 48px;
  background: var(--rule-soft);
  flex: none;
}
.cover__emblem-hero-img {
  height: clamp(65px, 7.5vw, 95px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: .92;
  transition: opacity .2s var(--ease);
}
.cover__univ-img:hover,
.cover__emblem-hero-img:hover {
  opacity: 1;
}
html.dark .cover__univ-img,
html.dark .cover__emblem-hero-img,
html.dark .wordmark__img {
  filter: invert(1) brightness(1.2);
}

/* Ficha técnica */
.datasheet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(20px, 3vw, 32px) 0 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.datasheet > div { padding: .85rem .4rem .95rem 0; }
.datasheet > div + div { border-left: 1px solid var(--rule-soft); padding-left: .9rem; }
.datasheet dt {
  font-size: .68rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
}
.datasheet dd { margin: .25rem 0 0; font-size: 1.02rem; color: var(--ink-2); }
.datasheet .num { font-size: 1.72rem; color: var(--ink); line-height: 1; margin-right: .12em; }

.cover__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: clamp(28px, 3.5vw, 40px); }

/* Dirección de arte: portada oscura patagónica */
.cover {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 25%, color-mix(in oklab, var(--lake-2) 18%, transparent), transparent 34%),
    linear-gradient(135deg, #052B25 0%, var(--deep) 56%, #063F4A 100%);
  color: var(--on-deep);
}
.cover::before {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(circle at 70% 65%, rgba(53,181,197,.11), transparent 28%);
  animation: coverGlow 9s ease-in-out infinite alternate;
}
.cover > .shell { position: relative; z-index: 1; }
.cover .eyebrow { color: color-mix(in oklab, var(--on-deep) 70%, transparent); }
.cover .cover__title { color: var(--on-deep); }
.cover .cover__title::after { background: var(--lake-2); }
.cover .cover__lede { color: color-mix(in oklab, var(--on-deep) 76%, transparent); }
.cover .cover__lede em { color: var(--on-deep); box-shadow: inset 0 -.42em 0 rgba(53,181,197,.22); }
.cover .datasheet { border-color: rgba(232,245,242,.24); }
.cover .datasheet > div + div { border-color: rgba(232,245,242,.16); }
.cover .datasheet dt { color: color-mix(in oklab, var(--on-deep) 58%, transparent); }
.cover .datasheet dd, .cover .datasheet .num { color: var(--on-deep); }
.cover .cover__shield-img, .cover .cover__univ-img, .cover .cover__emblem-hero-img {
  filter: brightness(0) invert(1); opacity: .94;
}
.cover .cover__logos-sep { background: rgba(232,245,242,.22); }
.cover .btn--solid { background: var(--lake-2); color: #062F2A; }
.cover .btn--solid:hover { background: #74DCE6; color: #062F2A; }
.cover .btn--ghost { color: var(--on-deep); border-color: rgba(232,245,242,.28); }
.cover .btn--ghost:hover { color: var(--on-deep); border-color: var(--lake-2); background: rgba(53,181,197,.08); }
@keyframes coverGlow { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.05); } }

/* --------------------------------------------------------------------------
   7 · CARTOGRAFÍA
   -------------------------------------------------------------------------- */
.chart { margin: 0; }
/* overflow:hidden recorta las curvas de nivel contra el marco del croquis,
   que es como se recorta una carta. Con visible se salían del viewBox y
   provocaban scroll horizontal en pantallas de 320 px. */
.routemap { width: 100%; height: auto; display: block; overflow: hidden; }

.rm-contours path { fill: none; stroke: color-mix(in oklab, var(--lake) 18%, var(--rule)); stroke-width: 1; opacity: .55; }

.rm-lake {
  fill: url(#waterGradient);
  stroke: color-mix(in oklab, var(--lake) 72%, white);
  stroke-width: 1.5;
  stroke-opacity: .65;
  filter: drop-shadow(0 8px 14px color-mix(in oklab, var(--lake) 16%, transparent));
}
.rm-river {
  fill: none;
  stroke: url(#riverGradient);
  stroke-width: 15;
  stroke-opacity: .7;
  stroke-linecap: round;
  filter: drop-shadow(0 3px 7px color-mix(in oklab, var(--lake) 20%, transparent));
}
.rm-river::after { content: none; }
.rm-river--thin { stroke-width: 5; stroke-opacity: .22; }
.rm-water-ripple { fill: none; stroke: color-mix(in oklab, white 55%, var(--lake)); stroke-width: 1.3; opacity: .5; stroke-linecap: round; stroke-dasharray: 3 12; animation: waterDrift 7s linear infinite; }
@keyframes waterDrift { to { stroke-dashoffset: -90; } }

.rm-route {
  fill: none;
  stroke: url(#routeGradient);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(184,164,75,.34));
}
/* Con JS el trazado arranca oculto y se dibuja animado en un bucle de 6 segundos. */
.js .rm-route {
  stroke-dasharray: var(--len, 1400);
  stroke-dashoffset: var(--len, 1400);
}

@keyframes drawRouteLoop {
  0% {
    stroke-dashoffset: var(--len, 1400);
  }
  38% {
    stroke-dashoffset: 0;
  }
  88% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: var(--len, 1400);
  }
}

.js .routemap.is-drawn .rm-route {
  animation: drawRouteLoop 6s cubic-bezier(.35, 0, .12, 1) infinite;
}

.rm-node circle { fill: var(--paper); stroke: var(--lake); stroke-width: 2.5; }
.rm-node-pulse { fill: none; stroke: var(--lake-2); stroke-width: 2; opacity: 0; }
.js .routemap.is-drawn .rm-node-pulse { animation: nodeRipple 2.4s ease-out infinite; }
@keyframes nodeRipple { 0% { opacity: .7; r: 12px; } 100% { opacity: 0; r: 28px; } }
.rm-node text {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  fill: var(--ember); text-anchor: middle; dominant-baseline: middle;
}
.rm-node--end circle { fill: var(--ember); stroke: var(--ember); }
.rm-node--end text { fill: var(--paper); }

.js .rm-nodes .rm-node { opacity: 0; transform-box: fill-box; transform-origin: center; }
.js .routemap.is-drawn .rm-node:nth-child(1) { animation: nodePop1 6s var(--ease) infinite; }
.js .routemap.is-drawn .rm-node:nth-child(2) { animation: nodePop2 6s var(--ease) infinite; }
.js .routemap.is-drawn .rm-node:nth-child(3) { animation: nodePop3 6s var(--ease) infinite; }
.js .routemap.is-drawn .rm-node:nth-child(4) { animation: nodePop4 6s var(--ease) infinite; }

/* Los hitos van apareciendo justo en el instante preciso en que la línea roja del trazado los alcanza */
@keyframes nodePop1 {
  0%, 1% { opacity: 0; transform: scale(.4); }
  5%, 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.4); }
}

@keyframes nodePop2 {
  0%, 7% { opacity: 0; transform: scale(.4); }
  13%, 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.4); }
}

@keyframes nodePop3 {
  0%, 22% { opacity: 0; transform: scale(.4); }
  28%, 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.4); }
}

@keyframes nodePop4 {
  0%, 36% { opacity: 0; transform: scale(.4); }
  42%, 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.4); }
}

/* Resaltado cruzado con la lista de tramos */
.rm-node.is-lit circle { fill: var(--ember); stroke: var(--ember); }
.rm-node.is-lit text { fill: var(--paper); }

.rm-label {
  font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  letter-spacing: .01em; fill: var(--ink-3);
}
.rm-label--water { fill: var(--lake); font-style: italic; }
.rm-label--end { fill: var(--ember); font-weight: 600; }
/* Contexto: cuerpos de agua que no son parte del recorrido. */
.rm-label--soft { fill: var(--ink-3); font-style: italic; font-size: 11px; opacity: .85; }

/* El relleno tapa las curvas de nivel que pasan por detrás de la rosa. */
.rm-compass-ring { fill: var(--paper); stroke: var(--rule); stroke-width: 1; }
.rm-compass-needle { fill: var(--ink-3); }
.rm-compass-n { font-family: var(--mono); font-size: 9px; fill: var(--ink-3); text-anchor: middle; letter-spacing: .1em; }

.chart__cap {
  margin-top: 1.1rem;
  font-size: .78rem;
  color: var(--ink-3);
  font-style: italic;
  text-align: right;
}

/* --------------------------------------------------------------------------
   8 · TRAMOS
   -------------------------------------------------------------------------- */
.stages {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 3rem 0 2rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}
.stages::before {
  content: "";
  position: absolute;
  left: 5%; right: 5%;
  top: 4.65rem;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lake), var(--lake-2), var(--ember));
  box-shadow: 0 0 22px color-mix(in oklab, var(--lake-2) 24%, transparent);
}
.stage {
  position: relative;
  min-width: 0;
  padding: 0 clamp(.6rem, 1.8vw, 1.5rem);
  border: 0;
  background: transparent;
  text-align: center;
  transition: transform var(--dur) var(--ease);
}
.stage + .stage { border-left: 0; padding-left: clamp(.6rem, 1.8vw, 1.5rem); }
.stage:hover, .stage.is-lit { background: transparent; transform: translateY(-7px); }
.stage--end:hover, .stage--end.is-lit { background: transparent; }
.stage__step {
  position: relative; z-index: 2;
  width: 3rem; height: 3rem;
  margin: 0 auto 2.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 3px solid var(--paper);
  background: var(--deep);
  color: var(--on-deep);
  box-shadow: 0 0 0 2px var(--lake), 0 8px 22px rgba(4,31,28,.18);
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .05em;
}
.stage--end .stage__step { background: var(--ember); box-shadow: 0 0 0 2px var(--ember), 0 8px 22px rgba(4,31,28,.18); }
.stage__name { font-size: clamp(1.05rem, 1.7vw, 1.32rem); margin-bottom: .6rem; }
.stage__text { font-size: .9rem; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.stage::after {
  content: ""; position: absolute; top: 4.05rem; left: 50%;
  width: 12px; height: 12px; transform: translateX(-50%);
  border-radius: 50%; background: var(--lake-2); opacity: 0;
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--lake-2) 40%, transparent);
}
.stage.is-lit::after { animation: routePulse 1.5s ease-out infinite; }
@keyframes routePulse { 0% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in oklab, var(--lake-2) 45%, transparent); } 100% { opacity: 0; box-shadow: 0 0 0 16px transparent; } }

@media (max-width: 820px) {
  .stages { grid-template-columns: 1fr; gap: 1.6rem; padding: 1rem 0; }
  .stages::before { left: 1.45rem; right: auto; top: 1.5rem; bottom: 1.5rem; width: 3px; height: auto; background: linear-gradient(var(--lake), var(--lake-2), var(--ember)); }
  .stage { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1.2rem; text-align: left; align-items: start; }
  .stage__step { margin: 0; }
  .stage__name { margin-top: .2rem; }
  .stage::after { top: 1.35rem; left: 1.5rem; }
}

/* --------------------------------------------------------------------------
   9 · ARTÍCULO
   -------------------------------------------------------------------------- */
.article {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 76px);
  align-items: start;
}
.article__body { max-width: 64ch; font-size: 1.04rem; color: var(--ink-2); }
.article__body p + p { margin-top: 1.15em; }

.lead-para { color: var(--ink); font-size: 1.13rem; }
.lead-para::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 3.55em;
  line-height: .82;
  font-weight: 400;
  padding: .06em .1em 0 0;
  color: var(--lake);
}

.pull {
  margin: 2.2rem 0;
  padding: 1.6rem 0 1.6rem 1.7rem;
  border-left: 2px solid var(--lake);
}
.pull__mark { width: 1.6rem; height: 1.6rem; color: var(--lake); opacity: .5; margin-bottom: .5rem; }
.pull p {
  font-family: var(--serif); font-size: 1.32rem; line-height: 1.34;
  color: var(--ink); font-weight: 400; letter-spacing: -.012em;
  margin: 0 0 .9rem;
}
.pull footer { font-size: .84rem; color: var(--ink-3); }
.pull cite { font-style: italic; }

.article__aside { position: sticky; top: 110px; }
@media (max-width: 880px) { .article__aside { position: static; } }

.timeline { list-style: none; margin: 0 0 1.8rem; padding: 0; border-top: 1px solid var(--ink); }
.timeline li {
  display: grid; grid-template-columns: 4.6rem 1fr; gap: 1rem;
  padding: .95rem 0; border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.timeline__year { font-family: var(--serif); font-size: 1.28rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.timeline__what { font-size: .89rem; color: var(--ink-2); }
.timeline--gap { opacity: .55; }
.timeline--gap .timeline__year { color: var(--ink-3); }
.timeline--next .timeline__year { color: var(--ember); }
.timeline--next .timeline__what { color: var(--ink); font-weight: 500; }

.unesco {
  display: flex; gap: .55rem; align-items: flex-start;
  font-size: .84rem; color: var(--ink-3); line-height: 1.5;
}
.unesco .ic { margin-top: .28em; color: var(--lake); }

/* --------------------------------------------------------------------------
   10 · REGISTRO
   -------------------------------------------------------------------------- */
.film {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper-3);
  aspect-ratio: 16 / 7;
  overflow: hidden;
  margin-bottom: clamp(24px, 3vw, 36px);
}
/* Cinta de película: perforaciones arriba y abajo. Sugiere el fotograma sin
   pedirle la miniatura a YouTube, que sería un pedido a un tercero. */
.film::before {
  --hole: color-mix(in oklab, var(--ink) 9%, transparent);
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 26px, var(--hole) 26px 40px) 0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 26px, var(--hole) 26px 40px) 0 100% / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 62px, color-mix(in oklab, var(--ink) 4%, transparent) 62px 63px),
    linear-gradient(158deg, var(--lake-wash), var(--paper-3) 72%);
}
.film__btn {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  font-family: inherit;
}
.film__ring {
  display: grid; place-items: center;
  width: 66px; height: 66px;
  border: 1px solid var(--ink); border-radius: 50%;
  font-size: 1.35rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.film__btn:hover .film__ring { background: var(--ember); border-color: var(--ember); color: #fff; transform: scale(1.06); }
.film__label { display: flex; flex-direction: column; gap: .2rem; font-size: 1rem; font-weight: 500; text-align: center; }
.film__label em { font-style: normal; font-size: .8rem; color: var(--ink-3); }
.film iframe,
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; z-index: 2; border-radius: 2px; }

.plates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  counter-reset: plate;
}
.video-hub {
  margin-bottom: 2rem;
}
.video-hub__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.video-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.2rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.video-tab-btn:hover, .video-tab-btn.active {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.linkrow--highlight {
  background: color-mix(in srgb, var(--lake) 12%, var(--paper));
  border-color: color-mix(in srgb, var(--lake) 40%, transparent);
}
.linkrow--highlight:hover {
  background: color-mix(in srgb, var(--lake) 22%, var(--paper));
  border-color: var(--lake);
}

.plate {
  position: relative; margin: 0;
  counter-increment: plate;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper-3);
  cursor: pointer;
}
.plate img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease); }
.plate:hover img { scale: 1.045; }

.plate figcaption {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-direction: column;
  padding: 1.5rem .95rem .85rem;
  color: #fff;
  background: linear-gradient(to top, rgba(10, 20, 18, .82), transparent);
}
.plate figcaption b { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; }
.plate figcaption span { font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; opacity: .78; }

/* Estado sin foto: no se rompe, se vuelve una lámina en blanco con trama */
.plate.is-empty { cursor: default; }
.plate.is-empty img { display: none; }

/* Trama diagonal + marcas de corte en las esquinas: una lámina de archivo
   todavía sin copiar, no un hueco. */
.plate.is-empty::before {
  --m: color-mix(in oklab, var(--lake) 34%, transparent);
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(var(--m) 0 0) 12px 12px / 15px 1px no-repeat,
    linear-gradient(var(--m) 0 0) 12px 12px / 1px 15px no-repeat,
    linear-gradient(var(--m) 0 0) calc(100% - 12px) 12px / 15px 1px no-repeat,
    linear-gradient(var(--m) 0 0) calc(100% - 12px) 12px / 1px 15px no-repeat,
    linear-gradient(var(--m) 0 0) 12px calc(100% - 12px) / 15px 1px no-repeat,
    linear-gradient(var(--m) 0 0) 12px calc(100% - 12px) / 1px 15px no-repeat,
    linear-gradient(var(--m) 0 0) calc(100% - 12px) calc(100% - 12px) / 15px 1px no-repeat,
    linear-gradient(var(--m) 0 0) calc(100% - 12px) calc(100% - 12px) / 1px 15px no-repeat,
    repeating-linear-gradient(45deg, transparent 0 9px, color-mix(in oklab, var(--lake) 7%, transparent) 9px 10px),
    var(--lake-wash);
}
/* relative + z-index: si no, la trama (::before, absoluta) tapa el epígrafe. */
.plate.is-empty figcaption {
  color: var(--ink); background: none;
  position: relative; z-index: 1;
  height: 100%; justify-content: flex-end;
  padding: 1.6rem;
}
.plate.is-empty figcaption span { opacity: 1; color: var(--ink-3); }
.plate.is-empty::after {
  content: "Lámina " counter(plate, decimal-leading-zero) " · pendiente";
  position: absolute; top: 1.55rem; left: 1.6rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--lake);
}

/* --------------------------------------------------------------------------
   11 · ORGANIZACIÓN
   -------------------------------------------------------------------------- */
.person {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 56px);
  align-items: center;
  padding-bottom: clamp(44px, 6vw, 72px);
  border-bottom: 1px solid var(--rule);
}
.person__plate {
  position: relative; margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-3);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.12);
}
.person__plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transition: transform .4s var(--ease);
}
.person__plate:hover img {
  transform: scale(1.03);
}

@media (max-width: 768px) {
  .person { grid-template-columns: 1fr; }
}
.person__plate.is-empty img { display: none; }
.person__plate.is-empty::before {
  content: attr(data-initials);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 4.6rem; font-weight: 300;
  color: var(--lake);
  background: repeating-linear-gradient(45deg, transparent 0 9px, color-mix(in oklab, var(--lake) 7%, transparent) 9px 10px), var(--lake-wash);
}

.person__role {
  font-size: .74rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 .5rem;
}
.person__name { font-size: clamp(1.65rem, 3vw, 2.15rem); margin-bottom: 1.1rem; }
.person__body > p { color: var(--ink-2); max-width: 60ch; }
.person__quote {
  margin: 1.6rem 0; padding-left: 1.4rem;
  border-left: 2px solid var(--lake);
  font-family: var(--serif); font-size: 1.14rem; line-height: 1.4;
  color: var(--ink); max-width: 56ch;
}
.person__quote p { margin: 0; }
.person__contact { font-size: .88rem; color: var(--ink-3); }

.commissions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
  margin: 0;
  padding-top: clamp(32px, 4.5vw, 48px);
}
.commissions > div {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: clamp(1.2rem, 2vw, 1.6rem);
  display: flex;
  flex-direction: column;
}
.commissions dt {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 600;
  margin-bottom: .6rem;
  color: var(--ink);
}
.commissions dd {
  margin: 0;
  font-size: .93rem;
  line-height: 1.58;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   12 · VOCES
   -------------------------------------------------------------------------- */
.voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(28px, 4vw, 52px);
}
.voice { margin: 0; padding-top: 1.15rem; border-top: 1px solid var(--ink); }
.voice p {
  font-family: var(--serif); font-size: 1.16rem; line-height: 1.42;
  color: var(--ink); letter-spacing: -.008em; text-wrap: pretty;
}
.voice p::before { content: "«"; color: var(--lake); }
.voice p::after  { content: "»"; color: var(--lake); }
.voice footer { display: flex; flex-direction: column; margin-top: 1rem; }
.voice b { font-size: .93rem; font-weight: 600; }
.voice span { font-size: .8rem; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   LÍNEA DE TIEMPO CLICKEABLE
   -------------------------------------------------------------------------- */
.timeline__btn {
  display: grid;
  grid-template-columns: 4.6rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  width: 100%;
  padding: 0; margin: 0;
  background: none; border: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
.timeline__year { font-family: var(--serif); font-size: 1.28rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.timeline__what {font-size: .89rem;color: #ffffff;}
.timeline--gap { opacity: .55; }
.timeline--gap .timeline__year { color: var(--ink-3); }
.timeline--next .timeline__year { color: var(--ember); }
.timeline--next .timeline__what { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   CARRUSEL DEL DIÁLOGO POR AÑO
   -------------------------------------------------------------------------- */
.reel { position: relative; }
.reel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 2px;
}
.reel__track::-webkit-scrollbar { display: none; }
.reel__shot {
  scroll-snap-align: center;
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.reel__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Las tomas de los noventa se muestran viradas, para que se lean como archivo. */
.reel__shot--aged img { filter: grayscale(1) sepia(.28) contrast(.92) brightness(1.04); }
.reel__shot figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 1.6rem .9rem .8rem;
  color: #fff; font-size: .85rem;
  background: linear-gradient(to top, rgba(10,20,18,.85), transparent);
}
.reel__shot.is-empty img { display: none; }
.reel__shot.is-empty::before {
  --m: color-mix(in oklab, var(--lake) 34%, transparent);
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(var(--m) 0 0) 12px 12px / 15px 1px no-repeat,
    linear-gradient(var(--m) 0 0) 12px 12px / 1px 15px no-repeat,
    linear-gradient(var(--m) 0 0) calc(100% - 12px) calc(100% - 12px) / 15px 1px no-repeat,
    linear-gradient(var(--m) 0 0) calc(100% - 12px) calc(100% - 12px) / 1px 15px no-repeat,
    repeating-linear-gradient(45deg, transparent 0 9px, color-mix(in oklab, var(--lake) 7%, transparent) 9px 10px),
    var(--lake-wash);
}
.reel__shot.is-empty figcaption {
  position: relative; z-index: 1;
  height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--ink); background: none; padding: 1.4rem;
}
.reel__shot.is-empty::after {
  content: "Imagen pendiente";
  position: absolute; top: 1.3rem; left: 1.4rem; z-index: 1;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--lake);
}

.reel__nav {
  position: absolute; top: 50%; translate: 0 -50%;
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  backdrop-filter: blur(6px);
}
.reel__nav--prev { left: .6rem; }
.reel__nav--next { right: .6rem; }
.reel__dots { display: flex; justify-content: center; gap: .4rem; margin-top: .9rem; }
.reel__dot {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--rule); cursor: pointer;
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.reel__dot.is-on { background: var(--ember); width: 20px; border-radius: 100px; }

/* --------------------------------------------------------------------------
   DESTACADO DE PRENSA
   -------------------------------------------------------------------------- */
.press {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 36px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ember);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.press:hover { background: var(--ember-wash); color: var(--ink); }
.press__brand {
  display: grid; place-items: center;
  min-height: 58px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 12px;
}
.press__brand img { max-width: 100%; max-height: 46px; width: auto; height: auto; }
/* Si todavía no está el archivo del logo, queda el nombre compuesto. */
.press__fallback {
  display: none;
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem;
  letter-spacing: -.02em; color: #E0A800;
}
.press.is-nologo .press__brand img { display: none; }
.press.is-nologo .press__fallback { display: block; }

.press__body { display: flex; flex-direction: column; gap: .3rem; }
.press__kicker {
  font-size: .68rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ember);
}
.press__title {
  font-family: var(--serif); font-size: clamp(1.08rem, 1.7vw, 1.32rem);
  line-height: 1.3; letter-spacing: -.01em;
}
.press__meta { font-size: .83rem; color: var(--ink-3); }
.press__go { color: var(--ink-3); transition: transform var(--dur) var(--ease); }
.press:hover .press__go { transform: translate(2px, -2px); color: var(--ember); }

@media (max-width: 760px) {
  .press { grid-template-columns: 1fr auto; }
  .press__brand { grid-column: 1 / -1; justify-self: start; min-width: 160px; }
}

/* --------------------------------------------------------------------------
   VIDEO VERTICAL + FOTOTECA AL COSTADO
   -------------------------------------------------------------------------- */
.reelhub {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 42px);
  align-items: start;
}
.film--portrait {
  position: sticky;
  top: 96px;
  aspect-ratio: 9 / 16;
  margin-bottom: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  z-index: 10;
}
.film--portrait .film__ring { width: 58px; height: 58px; }
.reelhub__side { display: flex; flex-direction: column; }
.reelhub__label {
  font-size: .68rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 .9rem; padding-bottom: .7rem;
  border-bottom: 1px solid var(--rule);
}
.reelhub .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .reelhub {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .film--portrait {
    position: relative !important;
    top: auto !important;
    max-width: 240px;
    width: 100%;
    margin-inline: auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
}

/* Borrador: la cita todavía no fue aprobada por la persona a la que se le
   atribuye. Se marca a la vista para que nadie la tome por declaración
   confirmada. Al aprobarla, quitar la clase y el span. */
.voice--draft { border-top-color: var(--ember); }
.voice__flag {
  align-self: start;
  margin-top: .5rem;
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ember);
  border: 1px solid color-mix(in oklab, var(--ember) 40%, transparent);
  border-radius: 2px; padding: .2em .5em;
}

/* --------------------------------------------------------------------------
   13 · INSCRIPCIÓN
   -------------------------------------------------------------------------- */
.enroll {background: var(--deep);color: #102e29;padding-block: clamp(64px, 9vw, 108px);}
.enroll__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
.enroll__date {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: .98; font-weight: 400; letter-spacing: -.03em;
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em;
}
.enroll__date .num { color: var(--on-deep); }
.enroll__date em {
  font-family: var(--sans); font-style: normal;
  font-size: .96rem; font-weight: 500; letter-spacing: .02em;
  color: color-mix(in oklab, var(--on-deep) 72%, transparent);
  flex-basis: 100%; margin-top: .7rem;
}
.enroll__where {
  margin: 1.1rem 0 0;
  font-size: .95rem;
  color: color-mix(in oklab, var(--on-deep) 62%, transparent);
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in oklab, var(--on-deep) 22%, transparent);
  max-width: 34ch;
}
.enroll__grid > * { min-width: 0; }
.enroll__side p {
  font-size: .97rem;
  color: color-mix(in oklab, var(--on-deep) 74%, transparent);
  max-width: 42ch;
}
/* El correo es una cadena larga sin espacios: sin esto, el nowrap de .btn
   ensancha la grilla y saca la página de cuadro en pantallas angostas. */
.enroll__side .btn { margin-top: 1.2rem; white-space: normal; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   14 · AUSPICIANTES
   -------------------------------------------------------------------------- */
.patrons {
  padding-block: var(--band-y);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--deep);
  color: var(--on-deep);
}

.patrons .head__title, .patrons .head__lede, .patrons .head__num { color: var(--on-deep); }
.patrons .head__lede { color: color-mix(in oklab, var(--on-deep) 72%, transparent); }

/* Encabezado centrado: el numeral pasa arriba en vez de al margen. */
.head--center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.head--center .head__num { border-top: 0; margin: 0 0 1rem; }
.head--center .head__title,
.head--center .head__lede { grid-column: 1; }
.head--center .head__lede { margin-inline: auto; }

.patrons__label {
  font-size: .7rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: color-mix(in oklab, var(--on-deep) 60%, transparent);
  text-align: center; margin: 0 0 1.4rem;
  padding-top: 1.3rem; border-top: 1px solid var(--rule);
}
.patrons__label:not(:first-of-type) { margin-top: clamp(44px, 6vw, 72px); }

.patrons__inst {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 0;
}
.patrons__inst li {
  font-family: var(--serif); font-size: clamp(.92rem, 1.4vw, 1.06rem);
  color: color-mix(in oklab, var(--on-deep) 78%, transparent); padding: 0 clamp(.8rem, 1.8vw, 1.5rem);
  border-right: 1px solid var(--rule); line-height: 1.3;
}
.patrons__inst li:last-child { border-right: 0; }

.patrons__inst-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3.2vw, 36px);
  margin-top: 1.2rem;
  margin-bottom: 2rem;
  padding-block: 0.6rem;
}
.patrons__inst-logos img {
  height: clamp(38px, 4.5vw, 54px);
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: none;
  opacity: .95;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.patrons__inst-logos img:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* Muro de logos. Las marcas ajenas se muestran sobre fondo claro en los dos
   modos: un logo con tinta oscura desaparecería sobre el fondo nocturno. */
.wall {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  /* start, no stretch: con stretch la altura de la fila la fija el logo más
     alto, el aspect-ratio del recuadro queda ignorado y las placas salen
     desparejas. Con start manda el 5/3 y todas miden igual. */
  align-items: start;
}
/* El logo va fuera del flujo a propósito: si contribuye a la altura del
   recuadro, su max-height:100% pasa a resolverse contra una altura que
   depende de él mismo, el navegador lo ignora y cada placa termina midiendo
   distinto. Fuera de flujo, manda el aspect-ratio y todas quedan parejas. */
.cover__header-block {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.cover__shield {
  margin: 0;
  flex-shrink: 0;
  width: clamp(100px, 12vw, 140px);
}
.cover__shield-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.08));
  opacity: 0.88;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cover__shield-img:hover {
  opacity: 1;
  transform: scale(1.04);
}
@media (max-width: 640px) {
  .cover__header-block {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }
  .cover__shield {
    width: 90px;
  }
}

.wall__tile {
  --pad: clamp(10px, 1.2vw, 16px);
  position: relative;
  aspect-ratio: 5 / 3;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 3px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.wall__tile:hover {
  border-color: var(--lake);
  background: color-mix(in srgb, var(--lake) 5%, transparent);
  transform: translateY(-2px);
}
.wall__tile img {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto;
  max-width: calc(100% - var(--pad) * 2);
  max-height: calc(100% - var(--pad) * 2);
  object-fit: contain;
  /* Monocromo fino negro para todos los logos de auspiciantes en el home */
  filter: none;
  opacity: .92;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.wall__tile:hover img {
  filter: none;
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cover__shield-img {
    filter: invert(1) drop-shadow(0 4px 14px rgba(255, 255, 255, 0.12));
  }
  :root:not([data-theme="light"]) .wall__tile img {
    filter: grayscale(100%) brightness(0) invert(1) opacity(0.8);
  }
  :root:not([data-theme="light"]) .wall__tile:hover img {
    filter: grayscale(100%) brightness(0) invert(1) opacity(1);
  }
}

.patrons__cta { text-align: center; margin-top: clamp(40px, 5vw, 64px); }

/* --------------------------------------------------------------------------
   14b · SUBPÁGINA DE AUSPICIANTES
   -------------------------------------------------------------------------- */
.backlink {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .88rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
}
.backlink:hover { color: var(--ember); }
.backlink .ic { transition: transform var(--dur) var(--ease); }
.backlink:hover .ic { transform: translateX(-3px); }

.sub-cover { padding-block: clamp(44px, 7vh, 88px) clamp(36px, 5vh, 64px); }
.sub-cover__grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.sub-cover__emblem {
  margin: 0;
  background: transparent;
  border: none;
  padding: 0;
}
.sub-cover__emblem img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.08));
}
.sub-cover__title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 400; letter-spacing: -.03em; line-height: 1;
}
.sub-cover__lede {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  font-size: clamp(1.02rem, 1.15vw, 1.14rem);
  color: var(--ink-2); max-width: 58ch; text-wrap: pretty;
}

.backlink {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: .45rem .95rem;
  background: color-mix(in oklab, var(--paper-2) 80%, transparent);
  border: 1px solid var(--rule);
  border-radius: 6px;
  transition: all .2s var(--ease);
}
.backlink:hover {
  background: var(--lake-wash);
  color: var(--lake);
  border-color: var(--lake);
}

.sponsors { list-style: none; margin: 0; padding: 0; }
.sponsor {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(22px, 4vw, 56px);
  align-items: start;
  padding: clamp(24px, 3.5vw, 36px);
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 12px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.sponsor__logo {
  --pad: 16px;
  position: relative;
  aspect-ratio: 5 / 3;
  margin: 0;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  overflow: hidden;
}
.sponsor__logo img {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto;
  max-width: calc(100% - var(--pad) * 2);
  max-height: calc(100% - var(--pad) * 2);
  object-fit: contain;
}

.sponsor__rubro {
  font-size: .7rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 .45rem;
}
.sponsor__name { font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin: 0 0 .6rem; color: var(--ink); }
.sponsor__tag {
  font-family: var(--serif); font-size: 1.12rem; line-height: 1.35;
  color: var(--lake); font-style: italic;
  margin: 0 0 .8rem; max-width: 46ch;
}
.sponsor__text { color: var(--ink-2); font-size: .98rem; max-width: 62ch; margin: 0; }
.sponsor__meta {
  margin: .9rem 0 0; padding-top: .75rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: .76rem; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
}

@media (max-width: 720px) {
  .sub-cover__grid { grid-template-columns: 1fr; }
  .sub-cover__emblem { max-width: 190px; margin: 0 auto 1rem; }
  .sponsor {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 1.3rem;
  }
  .sponsor__logo {
    max-width: 220px;
    height: 90px;
  }
}

/* --------------------------------------------------------------------------
   15 · PIE
   -------------------------------------------------------------------------- */
.foot { padding-block: clamp(40px, 5vw, 64px); background: var(--paper-2); }
.foot__grid { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: flex-start; }
.foot__inst { font-family: var(--serif); font-size: 1.14rem; margin: 0 0 .2rem; }
.foot__univ { font-size: .88rem; color: var(--ink-2); margin: 0 0 .9rem; max-width: 46ch; }
.foot__legal { font-size: .78rem; color: var(--ink-3); margin: 0; line-height: 1.4; }
.foot__collab-row {
  margin-top: .7rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
.foot__collab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: var(--ink-2);
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: .35rem .75rem;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.foot__collab:hover {
  border-color: var(--ink-3);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.foot__collab a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur) var(--ease);
}
.foot__collab a:hover {
  color: var(--ember);
}
.foot__links { display: flex; flex-direction: column; gap: .55rem; }
.foot__links a {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .88rem; color: var(--ink-2); text-decoration: none;
}
.foot__links a:hover { color: var(--ember); }
.foot__links .ic { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   16 · DIÁLOGOS
   -------------------------------------------------------------------------- */
dialog { border: 0; padding: 0; color: inherit; }
dialog::backdrop { background: color-mix(in srgb, #0A1412 74%, transparent); backdrop-filter: blur(3px); }

.dlg {
  width: min(620px, calc(100vw - 2rem));
  max-height: min(86vh, 780px);
  margin: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 30px 70px -20px rgba(10, 20, 18, .45);
}
.dlg__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.35rem 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.dlg__head h2 { font-size: 1.3rem; }
.dlg__body { padding: 1.5rem; overflow-y: auto; }

.endorse { padding-bottom: 1.3rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--rule-soft); }
.endorse__who {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
  font-weight: 600; font-size: .95rem; margin: 0 0 .5rem;
}
.endorse__who span {
  font-weight: 500; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lake); border: 1px solid color-mix(in oklab, var(--lake) 30%, transparent);
  padding: .18em .5em; border-radius: 2px;
}
.endorse__text { font-size: .93rem; color: var(--ink-2); margin: 0; }

/* Visor */
.viewer {
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  background: color-mix(in srgb, #0A1412 96%, transparent);
  display: none; place-items: center;
}
.viewer[open] { display: grid; }
.viewer__stage { margin: 0; padding: clamp(48px, 7vw, 80px); text-align: center; }
.viewer__stage img { max-width: 100%; max-height: 76vh; margin-inline: auto; border-radius: 2px; }
.viewer__stage figcaption { margin-top: 1.1rem; color: #E9E4D8; font-size: .93rem; }
.viewer .icon-btn { position: absolute; color: #E9E4D8; border-color: rgba(233, 228, 216, .28); background: rgba(10, 20, 18, .5); }
.viewer .icon-btn:hover { background: rgba(233, 228, 216, .14); border-color: #E9E4D8; }
.viewer__close { top: 1.1rem; right: 1.1rem; }
.viewer__nav { top: 50%; translate: 0 -50%; }
.viewer__nav--prev { left: 1.1rem; }
.viewer__nav--next { right: 1.1rem; }

/* El top negativo lo pone el JS con la posición guardada; sin position:fixed
   el navegador no conserva dónde estaba leyendo el visitante. */
body.is-locked {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   17 · APARICIONES
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   18 · ADAPTATIVO
   -------------------------------------------------------------------------- */
@media (max-width: 1020px) {
  .cover__grid { grid-template-columns: 1fr; }
  /* El croquis va DEBAJO del título: en un teléfono lo primero que se ve
     tiene que ser de qué se trata, no el mapa. */
  .chart { max-width: 520px; margin-inline: auto; }
  .article { grid-template-columns: 1fr; }
  .enroll__grid { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 860px) {
  /* Cabecera y Menú Drawer */
  .masthead {
    background: color-mix(in oklab, var(--paper) 94%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .masthead__inner {
    padding: .7rem var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
  }
  .wordmark__text i {
    display: none;
  }
  .backlink {
    font-size: .82rem;
    padding: .38rem .75rem;
    white-space: nowrap;
  }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #071f1b;
    border-bottom: 2px solid var(--rule);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .14);
    padding: .8rem var(--gutter) 1.2rem;
    display: none;
    flex-direction: column;
    gap: 0;
    z-index: 100;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .nav.is-open {
    display: flex;
    animation: dropdownFade .2s cubic-bezier(.16, 1, .3, 1);
  }
  @keyframes dropdownFade {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .nav a {
    padding: .62rem .4rem;
    font-family: var(--serif);
    font-size: 1.08rem;
    font-weight: 500;
    color: var(--ink);
    border-bottom: 1px solid var(--rule-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    transition: color .15s var(--ease), padding-left .15s var(--ease);
  }
  .nav a::after { display: none; }
  .nav a:active, .nav a.is-current {
    color: var(--lake);
    padding-left: .5rem;
  }
  .nav__mobile-actions {
    margin-top: .9rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }
  .nav__mobile-actions .btn {
    padding: .7rem 1rem;
    font-size: .92rem;
    border-radius: 6px;
    justify-content: center;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
  }
  .masthead__cta { display: none; }

  /* Portada móvil */
  .cover {
    padding-block: clamp(24px, 5vh, 48px) clamp(36px, 6vh, 64px);
  }
  .cover__header-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .cover__shield {
    margin: 0;
    flex: none;
  }
  .cover__shield-img {
    height: clamp(64px, 17vw, 92px);
    width: auto;
  }
  .cover__title {
    font-size: clamp(2.3rem, 7.6vw, 3.4rem);
    line-height: 1.02;
  }
  .cover__title::after {
    margin-top: 18px;
    width: 64px;
  }
  .cover__lede {
    margin-top: 18px;
    font-size: 1.02rem;
    line-height: 1.58;
  }
  .cover__logos-row {
    margin: 18px 0 12px;
    gap: 14px;
    justify-content: flex-start;
  }
  .cover__univ-img {
    height: 48px;
  }
  .cover__emblem-hero-img {
    height: 48px;
  }

  /* Ficha técnica 2x2 en tarjetas limpias */
  .datasheet {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 22px;
    border: none;
  }
  .datasheet > div {
    /* background: color-mix(in oklab, var(--paper-2) 75%, transparent); */
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: .85rem 1rem;
  }
  .datasheet > div + div {
    border-left: 1px solid var(--rule);
    padding-left: 1rem;
  }
  .datasheet dt {
    font-size: .66rem;
    letter-spacing: .08em;
    color: var(--ink-3);
  }
  .datasheet dd {
    margin: .2rem 0 0;
    font-size: .95rem;
  }
  .datasheet .num {
    font-size: 1.6rem;
  }

  /* Botones de acción en portada */
  .cover__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
  }
  .cover__actions .btn {
    width: 100%;
    justify-content: center;
    padding: .88rem 1.4rem;
    font-size: .98rem;
    border-radius: 6px;
  }

  /* Tramos de expedición en tarjetas */
  .stages {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    border-top: none;
    margin-top: 1.5rem;
  }
  .stage {
    background: color-mix(in oklab, #071f1b 55%, #1e5c7a);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 1.2rem 1.3rem;
  }
  .stage + .stage {
    border-left: 1px solid var(--rule);
    padding-left: 1.3rem;
  }
  .stage__no {
    margin-bottom: .4rem;
  }
  .stage__no .num {
    font-size: 1.3rem;
  }

  /* Láminas y galerías */
  .plates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .plate {
    border-radius: 6px;
    overflow: hidden;
  }
  .plate figcaption {
    padding: 1rem .75rem .65rem;
  }
  .plate figcaption b {
    font-size: .88rem;
  }
  .plate figcaption span {
    font-size: .64rem;
  }

  /* Noticias */
  .news-grid {
    grid-template-columns: 1fr;
    gap: 1.3rem;
  }
  .news-card {
    border-radius: 6px;
  }
  .news-card__img-container {
    height: 190px;
  }

  /* Encabezados de sección */
  .head {
    grid-template-columns: 1fr;
  }
  .head__num {
    border-top: 0;
    margin-bottom: .7rem;
  }
  .head__title, .head__lede {
    grid-column: 1;
  }

  .person { grid-template-columns: 1fr; }
  .person__plate { max-width: 200px; }

  /* Comisiones organizadoras en móvil */
  .commissions {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 1.5rem;
  }
  .commissions > div {
    padding: 1.2rem 1.3rem;
    border-radius: 6px;
  }
  .commissions dt {
    font-size: 1.15rem;
    margin-bottom: .45rem;
  }
  .commissions dd {
    font-size: .91rem;
    line-height: 1.55;
  }
}

/* Barra flotante de acción rápida móvil */
.mobile-bar {
  display: none;
}
@media (max-width: 860px) {
  .mobile-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 80;
    background: color-mix(in oklab, var(--paper) 95%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--rule);
    padding: .65rem var(--gutter);
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .08);
    transform: translateY(120%);
    transition: transform .32s cubic-bezier(.16, 1, .3, 1);
  }
  .mobile-bar.is-visible {
    transform: translateY(0);
  }
  .mobile-bar__info {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  .mobile-bar__tag {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lake);
  }
  .mobile-bar__price {
    font-family: var(--serif);
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--ink);
  }
  .mobile-bar__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  .mobile-bar__btn-perks {
    padding: .5rem .75rem;
    font-size: .78rem;
    border-radius: 4px;
    text-decoration: none;
  }
  .mobile-bar__btn {
    padding: .58rem 1.15rem;
    font-size: .88rem;
    font-weight: 600;
    border-radius: 5px;
    white-space: nowrap;
  }

  /* Modales Bottom-Sheet en móvil */
  .dlg {
    width: 100vw;
    max-width: 100vw;
    max-height: 90vh;
    margin: auto 0 0 0;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
  }
  .dlg__head {
    padding: 1.1rem 1.3rem;
  }
  .dlg__body {
    padding: 1.2rem 1.3rem 2.8rem;
  }

  /* Prevenir zoom involuntario en iPhone Safari */
  input, select, textarea, button {
    -webkit-tap-highlight-color: transparent;
  }
  .d-input, .d-select, .d-textarea,
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
  select, textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 560px) {
  .patrons__inst { flex-direction: column; }
  .patrons__inst li { border-right: 0; padding: .3rem 0; }
  .wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .wall__tile {
    background: #ffffff00;
    border: 1px solid var(--rule-soft);
    border-radius: 6px;
    padding: 12px 10px;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .wall__tile img {
    max-height: 44px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
  }
  .patrons__inst-logos {
  background: #F5F3EA;
  padding: 24px;
  border-radius: 12px;
}
  .patrons__inst-logos img {
    background: #fff;
    border: 1px solid var(--rule-soft);
    border-radius: 6px;
    padding: 8px 12px;
    height: 52px;
    width: 100%;
    object-fit: contain;
    filter: none !important;
  }
  .lead-para::first-letter { font-size: 3em; }
}

/* ═══════════════════════════════════════════════
   LOGOS — APOYO INSTITUCIONAL
   ═══════════════════════════════════════════════ */

.patrons__inst-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 20px);

  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
  padding: 0.5rem 0;
}

.patrons__inst-logos img {
  height: clamp(42px, 4vw, 58px);
  width: auto;
  max-width: 145px;

  object-fit: contain;

  background: #f5f1e8;
  padding: 9px 13px;
  border-radius: 7px;

  opacity: 1;
  filter: none;

  box-sizing: content-box;

  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.patrons__inst-logos img:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

/* --------------------------------------------------------------------------
   19 · MOVIMIENTO REDUCIDO / IMPRESIÓN
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .js .rm-route { stroke-dashoffset: 0; }
  .js .rm-nodes .rm-node { opacity: 1; }
}

@media print {
  .masthead, .film, .viewer, .dlg, .cover__actions, .enroll__side .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .band { border-color: #ccc; }
  a::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
}

/* --------------------------------------------------------------------------
   20 · ESTILOS FULL-STACK, BLOG & PANEL DE ADMINISTRACIÓN
   -------------------------------------------------------------------------- */

/* Candado discreto en el footer */
.admin-lock-btn {
  background: transparent;
  border: none;
  font-size: .85rem;
  opacity: .35;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  padding: 2px 4px;
  cursor: pointer;
  margin-left: 6px;
}
.admin-lock-btn:hover {
  opacity: 1;
  transform: scale(1.15);
}

/* Grilla de noticias del blog público */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.8rem;
  margin-top: 2rem;
}

.news-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  cursor: pointer;
}
.news-card:hover {
  transform: translateY(-4px);
  border-color: var(--lake);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.news-card__img-container {
  width: 100%;
  height: 230px;
  background: var(--paper-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
}

.news-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s var(--ease);
}
.news-card:hover .news-card__img {
  transform: scale(1.04);
}

.news-card__body {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--ink-3);
  margin-bottom: .6rem;
}

.news-card__tag {
  font-weight: 600;
  color: var(--lake);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.news-card__title {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0 0 .6rem 0;
}

.news-card__excerpt {
  font-size: .9rem;
  color: var(--ink-2);
  margin: 0 0 1.2rem 0;
  line-height: 1.5;
}

.news-card__btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Estilos de formularios en diálogos (<dialog>) */
.dlg--wide { max-width: 680px; }
.dlg--fullscreen { max-width: 95vw; width: 95vw; max-height: 92vh; height: 92vh; }

.d-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.d-field { display: flex; flex-direction: column; gap: .35rem; }
.d-full { grid-column: 1 / -1; }

.d-field label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-2);
}

.d-field input,
.d-field select,
.d-field textarea {
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: .65rem .85rem;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: .9rem;
  transition: border-color .2s var(--ease);
}

.d-field input:focus,
.d-field select:focus,
.d-field textarea:focus {
  outline: none;
  border-color: var(--lake);
}

/* --------------------------------------------------------------------------
   FORMULARIO DE INSCRIPCIÓN · agrupado por pasos
   -------------------------------------------------------------------------- */
.dlg--wide { max-width: 720px; }

.d-group { border: 0; margin: 0 0 1.9rem; padding: 0; }
.d-group:last-of-type { margin-bottom: 1.4rem; }
.d-legend {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; padding: 0 0 .8rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif); font-size: 1.08rem; font-weight: 500;
  color: var(--ink);
}
.d-legend__n {
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; flex: none;
  border-radius: 50%;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
}

/* Campos más generosos y con foco visible, en vez de la caja mínima. */
.d-field input,
.d-field select,
.d-field textarea {
  padding: .78rem .9rem;
  border-radius: 8px;
  font-size: .93rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.d-field input::placeholder,
.d-field textarea::placeholder { color: color-mix(in oklab, var(--ink-3) 75%, transparent); }
.d-field input:hover,
.d-field select:hover,
.d-field textarea:hover { border-color: color-mix(in oklab, var(--ink) 28%, transparent); }
.d-field input:focus,
.d-field select:focus,
.d-field textarea:focus {
  border-color: var(--lake);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--lake) 18%, transparent);
}
.d-field select { appearance: none; cursor: pointer; padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.d-hint { margin: .85rem 0 0; font-size: .83rem; color: var(--ink-3); line-height: 1.5; }

/* Cuadro destacado de precio de inscripción */
.price-notice-box {
  background: color-mix(in oklab, var(--lake) 8%, var(--paper));
  border: 1.5px solid color-mix(in oklab, var(--lake) 35%, transparent);
  border-radius: 8px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.price-notice-box__badge {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lake);
}
.price-notice-box__amount {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--serif);
}
.price-notice-box__amount em {
  font-size: .92rem;
  font-weight: 500;
  font-style: normal;
  color: var(--ink-2);
  font-family: var(--sans);
}
.price-notice-box__hint {
  font-size: .84rem;
  color: var(--ink-2);
  line-height: 1.45;
  margin: 0;
}

/* Matriz de Permisos Granulares */
.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .75rem;
  margin-top: .4rem;
}
.perm-check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .8rem .95rem;
  background: color-mix(in oklab, var(--paper) 70%, transparent);
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.perm-check:hover {
  border-color: var(--lake);
  background: color-mix(in oklab, var(--lake) 5%, var(--paper));
}
.perm-check input[type="checkbox"] {
  margin-top: .2rem;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.perm-check span {
  display: flex;
  flex-direction: column;
  font-size: .83rem;
  color: var(--ink-2);
  line-height: 1.35;
}
.perm-check b {
  font-size: .88rem;
  color: var(--ink);
  font-weight: 600;
}
.d-check {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .8rem .95rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: color-mix(in oklab, var(--lake) 4%, transparent);
  cursor: pointer;
  transition: border-color .2s var(--ease);
}
.d-check:hover { border-color: var(--lake); }
.d-check:has(:focus-visible) { border-color: var(--lake); box-shadow: 0 0 0 3px color-mix(in oklab, var(--lake) 18%, transparent); }
.d-check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .12rem; accent-color: var(--lake); cursor: pointer; }
.d-check span { flex: 1; font-size: .83rem; color: var(--ink-2); line-height: 1.42; }
.d-check b { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: .2rem; }
.d-check--strong:has(:checked) { background: var(--lake-wash); border-color: var(--lake); }

/* Componente de Subida y Previsualización de Imágenes en Admin */
.img-upload-box {
  background: color-mix(in oklab, var(--paper-2) 65%, var(--paper));
  border: 1px dashed var(--rule);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.img-upload-preview {
  position: relative;
  width: 100%;
  max-height: 180px;
  border-radius: 6px;
  overflow: hidden;
  background: #0f1816;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-upload-preview img {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
}
.btn-remove-img {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.btn-remove-img:hover {
  background: var(--ember);
}
.img-upload-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.img-upload-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Lector de Noticias Completo */
.post-detail__hero-img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1.4rem;
  background: #0f1816;
  border: 1px solid var(--rule);
}

/* Adjuntar comprobante */
.d-drop { position: relative; }
.d-drop__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.d-drop__face {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1.6rem 1rem;
  border: 1px dashed var(--rule); border-radius: 8px;
  text-align: center; color: var(--ink-2);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.d-drop__face .ic { width: 1.5rem; height: 1.5rem; color: var(--lake); }
.d-drop__face b { font-size: .9rem; color: var(--ink); font-weight: 600; }
.d-drop__face em { font-style: normal; font-size: .78rem; color: var(--ink-3); }
.d-drop__input:hover + .d-drop__face,
.d-drop__input:focus-visible + .d-drop__face { border-color: var(--lake); background: color-mix(in oklab, var(--lake) 5%, transparent); }
.d-drop.is-loaded .d-drop__face { border-style: solid; border-color: var(--lake); background: var(--lake-wash); }

@media (max-width: 620px) {
  .d-form-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   BENEFICIOS · tarjetas de prestadores
   La promoción va en otra jerarquía que la descripción: es lo que la persona
   vino a buscar, así que se lee antes que el texto institucional.
   -------------------------------------------------------------------------- */
/* Filtros de beneficios */
.perks-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 2rem;
}
.perks-search-wrap {
  position: relative;
  max-width: 460px;
}
.perks-search-input {
  width: 100%;
  padding: .75rem 1rem .75rem 2.6rem;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: .92rem;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.perks-search-input:focus {
  outline: none;
  border-color: var(--lake);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--lake) 18%, transparent);
}
.perks-search-icon {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  width: 17px;
  height: 17px;
  pointer-events: none;
}
.perks-cats {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.perk-cat-pill {
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: .4rem .9rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s ease;
}
.perk-cat-pill:hover {
  background: var(--paper-3);
  color: var(--ink);
}
.perk-cat-pill.active {
  background: var(--lake);
  color: #FFFFFF;
  border-color: var(--lake);
  box-shadow: 0 2px 8px color-mix(in oklab, var(--lake) 30%, transparent);
}

.perks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: clamp(16px, 2.5vw, 24px);
}
.perks__loading { grid-column: 1 / -1; padding: 2rem 0; color: var(--ink-3); text-align: center; }

.perk {
  display: flex;
  flex-direction: column;
  padding: 1.4rem;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.perk:hover {
  border-color: var(--lake);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.perk__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.perk__logo {
  position: relative;
  width: 68px;
  height: 68px;
  min-width: 68px;
  max-width: 68px;
  flex: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  overflow: hidden;
  padding: 6px;
}
.perk__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.perk__initials {
  display: none;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--lake);
}
.perk__logo.is-empty img { display: none; }
.perk__logo.is-empty .perk__initials { display: block; }

.perk__rubro {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lake);
  margin: 0 0 .2rem;
}
.perk__name {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.perk__desc {
  font-size: .92rem;
  color: var(--ink-2);
  line-height: 1.48;
  margin: 0 0 1.2rem;
}

.perk__offer {
  position: relative;
  margin-top: auto;
  padding: 1.1rem 1.2rem 1.1rem 2.8rem;
  background: var(--ember-wash);
  border-left: 3px solid var(--ember);
  border-radius: 0 8px 8px 0;
  margin-bottom: .9rem;
}
.perk__tag {
  position: absolute;
  top: 1.15rem;
  left: 1rem;
  color: var(--ember);
  width: 18px;
  height: 18px;
}
.perk__deal {
  font-family: var(--serif);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.28;
  color: var(--ink);
  margin: 0;
}
.perk__fine {
  margin: .4rem 0 0;
  font-size: .82rem;
  color: var(--ink-2);
  line-height: 1.42;
}

.perk__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule-soft);
}
.perk__code-btn {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--lake);
  background: var(--lake-wash);
  border: 1.5px dashed color-mix(in oklab, var(--lake) 50%, transparent);
  border-radius: 4px;
  padding: .35em .75em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: all .15s ease;
}
.perk__code-btn:hover {
  background: var(--lake);
  color: #FFFFFF;
}
.perk__valid {
  font-size: .78rem;
  color: var(--ink-3);
}
.perk__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--lake);
  text-decoration: none;
}

.check-label {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  cursor: pointer;
}

.success-alert {
  background: color-mix(in srgb, var(--lake) 12%, var(--paper));
  border: 1px solid var(--lake);
  padding: 1.5rem;
  border-radius: 4px;
  text-align: center;
  margin-top: 1rem;
}

.error-alert {
  background: color-mix(in srgb, var(--ember) 15%, var(--paper));
  border: 1px solid var(--ember);
  color: var(--ember);
  padding: .75rem;
  border-radius: 4px;
  font-size: .85rem;
  margin-top: .75rem;
}

.text-lake { color: var(--lake); }
.text-ember { color: var(--ember); }
.w-100 { width: 100%; justify-content: center; }
.margin-top-sm { margin-top: .75rem; }
.margin-top-md { margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   DASHBOARD BACK-END (Mobile-First & Desktop Optimized)
   -------------------------------------------------------------------------- */
dialog.dlg--fullscreen {
  width: 96vw;
  max-width: 1400px;
  height: 92vh;
  max-height: 920px;
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
  display: none;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
dialog.dlg--fullscreen[open] {
  display: flex;
}

@media (max-width: 860px) {
  dialog.dlg--fullscreen {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    inset: 0 !important;
    margin: 0 !important;
  }
}

.dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--rule);
  background: #FFFFFF;
  flex: none;
}
.dash-brand { display: flex; flex-direction: column; }
.dash-brand b { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.dash-brand span { font-size: .8rem; color: var(--ink-3); }

.dash-actions { display: flex; align-items: center; gap: .6rem; }

.btn--danger {
  color: var(--ember);
  border-color: color-mix(in srgb, var(--ember) 40%, transparent);
}
.btn--danger:hover {
  background: var(--ember);
  color: var(--paper);
}

@media (max-width: 700px) {
  .dash-head {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1rem;
  }
  .dash-actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
  }
  .dash-actions .btn {
    padding: .45rem .65rem;
    font-size: .78rem;
    flex: 1;
    text-align: center;
    justify-content: center;
  }
  .dash-actions .icon-btn {
    flex: none;
  }
}

.dash-tabs {
  display: flex;
  gap: 0;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: none;
}
.dash-tabs::-webkit-scrollbar { display: none; }

.dash-tab-btn {
  background: transparent;
  border: none;
  padding: .85rem 1.2rem;
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
  transition: all .15s ease;
}
.dash-tab-btn:hover {
  color: var(--ink);
  background: color-mix(in oklab, var(--paper) 50%, transparent);
}
.dash-tab-btn.active {
  color: var(--lake);
  border-bottom-color: var(--lake);
  background: #FFFFFF;
}

@media (max-width: 700px) {
  .dash-tab-btn {
    padding: .7rem .85rem;
    font-size: .82rem;
  }
}

.dash-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  background: var(--paper);
}

@media (max-width: 700px) {
  .dash-body {
    padding: 1rem .8rem;
  }
}

.dash-content { display: none !important; }
.dash-content.active { display: block !important; }

.dash-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.dash-search {
  flex: 1;
  max-width: 380px;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  padding: .55rem .85rem;
  border-radius: 6px;
  color: var(--ink);
  font-size: .88rem;
}

.dash-select {
  background: #FFFFFF;
  border: 1px solid var(--rule);
  padding: .55rem .85rem;
  border-radius: 6px;
  color: var(--ink);
  font-size: .88rem;
}

@media (max-width: 700px) {
  .dash-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }
  .dash-search, .dash-select {
    width: 100%;
    max-width: 100%;
  }
}

.table-scroll-hint {
  display: none;
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink-3);
  margin: 0 0 .5rem;
}
@media (max-width: 768px) {
  .table-scroll-hint {
    display: block;
  }
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.dash-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: .86rem;
  text-align: left;
}
.dash-table th {
  background: var(--paper-2);
  padding: .8rem 1rem;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dash-table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
.dash-table tbody tr:hover { background: var(--paper-3); }

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: .25em .65em;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pill-pendiente { background: #FFF4E5; color: #B25E00; border: 1px solid #FFE0B2; }
.pill-confirmada { background: #E8F5E9; color: #2E7D32; border: 1px solid #C8E6C9; }
.pill-cancelada { background: #FFEBEE; color: #C62828; border: 1px solid #FFCDD2; }

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  padding: .32rem .6rem;
  border-radius: 5px;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  transition: all .15s ease;
}
.action-btn:hover { background: var(--lake); color: #FFFFFF; border-color: var(--lake); }

/* ── Panel de Configuración de Precios, Cupos y Convocatoria ── */
.cfg-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: .5rem;
}
.cfg-metric-card {
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
}
.cfg-metric-label {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cfg-metric-val {
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--ink);
  line-height: 1.1;
}
.cfg-metric-sub {
  font-size: .78rem;
  color: var(--ink-2);
}

.cfg-card {
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.4rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
}
.cfg-card__head {
  margin-bottom: 1.1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--rule-soft);
}
.cfg-card__head h4 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}
.cfg-card__head p {
  margin: .25rem 0 0;
  font-size: .84rem;
  color: var(--ink-2);
}

.cfg-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: .9rem 1.1rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

/* Switch Toggle */
.switch-toggle {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 30px;
  flex: none;
}
.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #CBD5E1;
  transition: .25s;
  border-radius: 34px;
}
.switch-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .25s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.switch-toggle input:checked + .switch-slider {
  background-color: #2E7D32;
}
.switch-toggle input:checked + .switch-slider:before {
  transform: translateX(24px);
}

.status-tag {
  padding: .65rem .95rem;
  border-radius: 6px;
  font-size: .86rem;
  font-weight: 600;
  display: inline-block;
}
.status-tag--open {
  background: #E8F5E9;
  color: #2E7D32;
  border: 1px solid #C8E6C9;
}
.status-tag--closed {
  background: #FFEBEE;
  color: #C62828;
  border: 1px solid #FFCDD2;
}

/* Banner de Convocatoria Cerrada / Cupo Agotado */
.enroll-closed-card {
  background: color-mix(in srgb, var(--ember) 8%, var(--paper));
  border: 1.5px solid color-mix(in srgb, var(--ember) 35%, transparent);
  border-radius: 10px;
  padding: 1.8rem 1.4rem;
  text-align: center;
  margin-bottom: 1.2rem;
}
.enroll-closed-icon {
  font-size: 2.2rem;
  margin-bottom: .5rem;
}
.enroll-closed-card h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--ink);
  margin: 0 0 .5rem;
}
.enroll-closed-card p {
  font-size: .92rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}


/* ============================================================================
   21 · IDENTIDAD VISUAL V2 · FCE + PATAGONIA
   ----------------------------------------------------------------------------
   Esta sección concentra los cambios visuales de la nueva versión.
   Para volver al diseño anterior, se puede borrar únicamente este bloque.
   ============================================================================ */
:root {
  --paper:      #F3F7F5;
  --paper-2:    #E7F0ED;
  --paper-3:    #D6E4E0;
  --ink:        #102A2A;
  --ink-2:      #405B58;
  --ink-3:      #607572;
  --rule:       #C8D8D3;
  --rule-soft:  #DCE7E3;
  --lake:       #087E8B;
  --lake-2:     #20A6B2;
  --lake-wash:  #D7F0EE;
  --deep:       #073B4C;
  --on-deep:    #F3F8F7;
  --ember:      #D19A24;
  --ember-wash: #F8EFCF;
  --forest:     #1F5B4F;
  --sky:        #76D5D3;
  --ease:       cubic-bezier(.16, 1, .3, 1);
  --dur: .55s;
}

html.dark {
  --paper:      #071A1B;
  --paper-2:    #0B2525;
  --paper-3:    #103130;
  --ink:        #E7F3EF;
  --ink-2:      #A9C1BB;
  --ink-3:      #7E9A93;
  --rule:       #234341;
  --rule-soft:  #183432;
  --lake:       #55CDD0;
  --lake-2:     #7BE0DE;
  --lake-wash:  #103A3A;
  --deep:       #052A38;
  --on-deep:    #EAF5F2;
  --ember:      #E8BB55;
  --ember-wash: #342B16;
}

/* Fondo con atmósfera de bosque/agua. */
body::before {
  opacity: .72;
  background-image:
    radial-gradient(circle at 12% 8%, color-mix(in oklab, var(--lake) 11%, transparent) 0, transparent 34%),
    radial-gradient(circle at 88% 22%, color-mix(in oklab, var(--ember) 8%, transparent) 0, transparent 30%),
    radial-gradient(circle at 50% 95%, color-mix(in oklab, var(--forest) 7%, transparent) 0, transparent 36%);
}

.masthead {
  background: color-mix(in oklab, var(--paper) 78%, transparent);
  border-bottom-color: color-mix(in oklab, var(--lake) 20%, var(--rule));
  box-shadow: 0 10px 30px color-mix(in oklab, var(--deep) 7%, transparent);
}

.masthead__progress {
  background: linear-gradient(90deg, var(--lake), var(--sky), var(--ember));
  box-shadow: 0 0 14px color-mix(in oklab, var(--lake) 45%, transparent);
}

.wordmark__mark {
  filter: drop-shadow(0 5px 12px color-mix(in oklab, var(--lake) 20%, transparent));
}

.nav a {
  position: relative;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: .55rem;
  right: .55rem;
  bottom: -.3rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lake), var(--sky));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s var(--ease);
}
.nav a:hover { transform: translateY(-1px); }
.nav a:hover::after { transform: scaleX(1); }

.cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 34%, color-mix(in oklab, var(--lake) 13%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in oklab, var(--paper) 92%, var(--lake)), var(--paper));
}
.cover::before,
.cover::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(2px);
}
.cover::before {
  width: 42vw;
  height: 42vw;
  max-width: 560px;
  max-height: 560px;
  right: -12vw;
  top: 5%;
  border: 1px solid color-mix(in oklab, var(--lake) 22%, transparent);
  box-shadow:
    0 0 0 26px color-mix(in oklab, var(--lake) 4%, transparent),
    0 0 0 58px color-mix(in oklab, var(--lake) 2%, transparent);
  animation: heroOrb 12s ease-in-out infinite alternate;
}
.cover::after {
  width: 240px;
  height: 240px;
  left: -120px;
  bottom: -110px;
  background: color-mix(in oklab, var(--ember) 10%, transparent);
  animation: heroOrb 9s ease-in-out -2s infinite alternate-reverse;
}

.cover__body > * {
  animation: heroIn .8s var(--ease) both;
}
.cover__body > :nth-child(2) { animation-delay: .08s; }
.cover__body > :nth-child(3) { animation-delay: .16s; }
.cover__body > :nth-child(4) { animation-delay: .24s; }
.cover__body > :nth-child(5) { animation-delay: .32s; }
.cover__body > :nth-child(6) { animation-delay: .40s; }
.cover__shield-img { animation: shieldFloat 5s ease-in-out .8s infinite; }

.btn {
  border-radius: 999px;
  box-shadow: 0 6px 16px color-mix(in oklab, var(--deep) 8%, transparent);
}
.btn--solid {
  background: linear-gradient(
8deg, #18cda6, var(--forest));
  box-shadow: 0 10px 24px color-mix(in oklab, #17e7ba 18%, transparent);
}
.btn--solid:hover {
  background: linear-gradient(135deg, var(--lake), var(--forest));
  transform: translateY(-2px);
  box-shadow: 0 14px 30px color-mix(in oklab, var(--lake) 20%, transparent);
}
.btn--paper {
  background: linear-gradient(135deg, #FFF8DF, #F2D98B);
  color: #173F40;
}
.btn--paper:hover {
  background: linear-gradient(135deg, var(--ember), #E7B944);
  color: #fff;
  transform: translateY(-2px);
}

.band {
  position: relative;
}
.band:not(.band--alt)::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -190px;
  top: 8%;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--lake) 8%, transparent);
  pointer-events: none;
}

.head__num { color: var(--lake); border-top-color: var(--lake); }
.head__title { text-shadow: 0 8px 30px color-mix(in oklab, var(--deep) 5%, transparent); }

/* --------------------------------------------------------------------------
   MAPA V2 · agua, corriente, brillo y nodos vivos
   -------------------------------------------------------------------------- */
.chart {
  position: relative;
  padding: clamp(10px, 2vw, 18px);
  border-radius: 30px;
  background: linear-gradient(145deg, color-mix(in oklab, var(--paper) 80%, var(--lake)), var(--paper));
  box-shadow:
    0 26px 70px color-mix(in oklab, var(--deep) 12%, transparent),
    inset 0 0 0 1px color-mix(in oklab, var(--lake) 10%, transparent);
  overflow: hidden;
}
.chart::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 24px;
  border: 1px solid color-mix(in oklab, var(--lake) 10%, transparent);
  pointer-events: none;
}
.routemap {
  position: relative;
  z-index: 1;
  border-radius: 24px;
  filter: drop-shadow(0 12px 20px color-mix(in oklab, var(--deep) 8%, transparent));
}
.rm-map-bg { fill: url(#mapBg); }
.rm-contours path { stroke: color-mix(in oklab, var(--forest) 30%, transparent); stroke-width: 1.15; opacity: .45; }
.rm-lake {
  fill: url(#lakeGradient);
  stroke: color-mix(in oklab, var(--lake) 70%, #fff);
  stroke-width: 1.4;
  stroke-opacity: .7;
}
.rm-river {
  stroke: url(#riverGradient);
  stroke-width: 13;
  stroke-opacity: .88;
  filter: drop-shadow(0 3px 5px color-mix(in oklab, var(--lake) 18%, transparent));
}
.rm-water-flow {
  fill: none;
  stroke: rgba(255,255,255,.48);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 8 18;
  animation: riverFlow 4s linear infinite;
  opacity: .9;
}
.rm-flow--lake { stroke-width: 2.8; stroke-dasharray: 16 26; opacity: .58; }
.rm-route-glow {
  fill: none;
  stroke: #F4C84E;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .22;
  filter: url(#routeGlow);
  stroke-dasharray: 18 18;
  animation: routeSpark 2.8s linear infinite;
}
.rm-route {
  stroke: url(#routeGradient);
  stroke-width: 3.4;
  filter: drop-shadow(0 0 5px rgba(240,199,94,.42));
}
.rm-node-pulse {
  fill: none;
  stroke: color-mix(in oklab, var(--ember) 80%, #fff);
  stroke-width: 2;
  opacity: 0;
}
.rm-node circle:not(.rm-node-pulse) {
  fill: var(--paper);
  stroke: var(--ember);
  stroke-width: 2.6;
  filter: drop-shadow(0 4px 5px color-mix(in oklab, var(--deep) 18%, transparent));
}
.rm-node text {
  fill: var(--deep);
  font-size: 10px;
  font-weight: 800;
}
.rm-node--end circle:not(.rm-node-pulse) { fill: var(--ember); stroke: #FFF5D7; }
.rm-node--end text { fill: #fff; }
.rm-label {
  paint-order: stroke;
  stroke: rgba(243,247,245,.88);
  stroke-width: 5px;
  stroke-linejoin: round;
  font-weight: 650;
}
.rm-label--water { fill: var(--deep); }
.rm-label--end { fill: #8C6412; }
.rm-compass-ring { fill: color-mix(in oklab, var(--paper) 82%, transparent); stroke: var(--lake); stroke-width: 1.2; }
.rm-compass-needle { fill: var(--ember); }
.rm-compass-n { fill: var(--deep); font-weight: 800; }

/* El recorrido se siente como una navegación, no como una línea dibujada. */
.js .routemap.is-drawn .rm-route { animation: drawRouteLoop 7.5s cubic-bezier(.25,.75,.25,1) infinite; }
.js .routemap.is-drawn .rm-route-glow { animation: routeSpark 2.8s linear infinite, drawRouteGlow 7.5s cubic-bezier(.25,.75,.25,1) infinite; }
.js .routemap.is-drawn .rm-node-pulse { animation: nodePulse 2.4s ease-out infinite; }
.js .routemap.is-drawn .rm-node:nth-child(2) .rm-node-pulse { animation-delay: .55s; }
.js .routemap.is-drawn .rm-node:nth-child(3) .rm-node-pulse { animation-delay: 1.1s; }
.js .routemap.is-drawn .rm-node:nth-child(4) .rm-node-pulse { animation-delay: 1.65s; }
.js .routemap.is-drawn .rm-node:nth-child(5) .rm-node-pulse { animation-delay: 2.2s; }

.stage {
  position: relative;
  transition: background .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.stage:hover, .stage.is-lit {
  background: linear-gradient(135deg, var(--lake-wash), color-mix(in oklab, var(--lake-wash) 35%, transparent));
  transform: translateY(-3px);
  box-shadow: inset 0 -3px 0 var(--lake);
}
.stage--end:hover, .stage--end.is-lit {
  background: linear-gradient(135deg, var(--ember-wash), color-mix(in oklab, var(--ember-wash) 30%, transparent));
  box-shadow: inset 0 -3px 0 var(--ember);
}

.plate, .perk, .commissions > div, .person__plate, .press {
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.plate:hover, .perk:hover, .commissions > div:hover, .person__plate:hover, .press:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px color-mix(in oklab, var(--deep) 11%, transparent);
}

/* Apariciones un poco más cinematográficas. */
[data-reveal] {
  transform: translateY(22px) scale(.985);
  filter: blur(2px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}
[data-reveal].is-in { transform: none; filter: none; }

@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes heroOrb {
  from { transform: translate3d(0,0,0) scale(.96); }
  to { transform: translate3d(-24px,18px,0) scale(1.04); }
}
@keyframes shieldFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(1deg); }
}
@keyframes riverFlow {
  to { stroke-dashoffset: -48; }
}
@keyframes routeSpark {
  to { stroke-dashoffset: -72; }
}
@keyframes drawRouteGlow {
  0%, 4% { stroke-dashoffset: var(--len, 1400); }
  40%, 86% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: var(--len, 1400); }
}
@keyframes nodePulse {
  0% { opacity: 0; transform: scale(.45); }
  25% { opacity: .7; }
  70%,100% { opacity: 0; transform: scale(1.65); }
}

@media (max-width: 860px) {
  .chart { border-radius: 22px; padding: 7px; }
  .chart::before { inset: 7px; border-radius: 17px; }
  .routemap { border-radius: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .cover::before, .cover::after, .cover__body > *, .cover__shield-img,
  .rm-water-flow, .rm-route-glow, .js .routemap.is-drawn .rm-route,
  .js .routemap.is-drawn .rm-route-glow, .js .routemap.is-drawn .rm-node-pulse {
    animation: none !important;
  }
  [data-reveal] { filter: none; }
}


/* =========================================================
   TEMA PATAGÓNICO — versión visual final
   ========================================================= */
:root {
  --paper: #F4F7F1;
  --paper-2: #E5EEE5;
  --paper-3: #D2E2D5;
  --ink: #102E28;
  --ink-2: #3C5E55;
  --ink-3: #648078;
  --rule: #B7CBC0;
  --rule-soft: #D6E2DA;
  --lake: #1599AD;
  --lake-2: #66D2DE;
  --lake-wash: #D8F1F2;
  --deep: #0B3028;
  --on-deep: #F4FAF7;
  --ember: #D2B65A;
  --ember-wash: #F1E9C7;
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(102,210,222,.10), transparent 24rem),
    var(--paper);
  color: var(--ink);
}

/* Header: bosque patagónico */
.masthead {
  background: rgba(7,35,29,.94);
  color: var(--on-deep);
  border-bottom: 1px solid rgba(216,241,242,.16);
  backdrop-filter: blur(14px);
}
.masthead .wordmark__text b,
.masthead .wordmark__text i,
.masthead .nav a { color: var(--on-deep); }
.masthead .nav a:hover { color: var(--lake-2); }
.masthead .btn--solid { background: var(--lake); color: white; }
.masthead .btn--solid:hover { background: var(--lake-2); color: var(--deep); }
.masthead .wordmark__mark { border-color: rgba(102,210,222,.35); }

/* Portada: verde bosque + cielo */
.cover {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 15%, rgba(102,210,222,.30), transparent 25rem),
    linear-gradient(125deg, #092F28 0%, #0E4035 48%, #0B3542 100%);
  color: var(--on-deep);
  padding-block: clamp(70px, 9vw, 125px) clamp(65px, 9vw, 115px);
}
.cover::before,
.cover::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
}
.cover::before {
  width: 420px; height: 420px; right: -150px; bottom: -220px;
  background: rgba(102,210,222,.10);
}
.cover::after {
  width: 320px; height: 320px; left: -170px; top: 20%;
  background: rgba(210,182,90,.07);
}
.cover > * { position: relative; z-index: 1; }
.cover .eyebrow,
.cover .cover__lede,
.cover .datasheet dt { color: rgba(244,250,247,.72); }
.cover__title { color: white; }
.cover__title::after { background: var(--lake-2); }
.cover__lede em { color: white; box-shadow: inset 0 -.42em 0 rgba(102,210,222,.22); }
.cover .datasheet { border-color: rgba(244,250,247,.55); }
.cover .datasheet > div + div { border-color: rgba(244,250,247,.18); }
.cover .datasheet dd, .cover .datasheet .num { color: white; }
.cover .datasheet small { color: rgba(244,250,247,.65) !important; }
.cover__shield-img,
.cover__univ-img,
.cover__emblem-hero-img { filter: brightness(0) invert(1) drop-shadow(0 6px 18px rgba(0,0,0,.18)); }
.cover__logos-sep { background: rgba(244,250,247,.25); }
.cover .btn--solid { background: var(--lake); color: white; }
.cover .btn--solid:hover { background: var(--lake-2); color: var(--deep); }
.cover .btn--ghost { color: white; border-color: rgba(244,250,247,.5); }
.cover .btn--ghost:hover { background: rgba(244,250,247,.1); border-color: var(--lake-2); }

/* MAPA: sin tarjeta, sin marco, integrado al paisaje */
.chart {
  margin: 0;
  position: relative;
  padding: 0;
  filter: drop-shadow(0 22px 34px rgba(2,30,26,.18));
}
.routemap {
  width: min(100%, 560px);
  height: auto;
  margin-inline: auto;
  overflow: visible;
  background: transparent;
}
.rm-map-bg { display: none !important; }
.rm-contours path { stroke: rgba(180,220,210,.25); opacity: .8; }
.rm-lake { stroke: rgba(160,235,240,.8); }
.rm-river { stroke-width: 18; }
.rm-route { stroke-width: 4.5; filter: drop-shadow(0 0 8px rgba(210,182,90,.55)); }
.rm-label { paint-order: stroke; stroke: rgba(8,43,36,.72); stroke-width: 3px; }
.rm-label--water { fill: #E9FFFF; }
.rm-label--end { fill: #F6E6A7; }
.rm-label--sub { fill: #BDE5E5; }
.rm-node circle { fill: #0B3028; stroke: #72DCE5; }
.rm-node--end circle { fill: var(--ember); stroke: #F8EAB0; }

/* Banda de recorrido: cielo/agua, no cajas */
#recorrido {
  background:
    linear-gradient(180deg, #DDF1F1 0%, #F4F7F1 100%);
  position: relative;
  overflow: hidden;
}
#recorrido::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(21,153,173,.13), transparent 55%);
  pointer-events: none;
}
#recorrido > * { position: relative; z-index: 1; }
#recorrido .head__num { color: var(--lake); border-color: var(--lake); }
.stages::before { background: linear-gradient(90deg, var(--lake), var(--lake-2), var(--ember)); }
.stage__step { background: var(--deep); border-color: #DDF1F1; box-shadow: 0 0 0 2px var(--lake), 0 8px 22px rgba(4,31,28,.20); }
.stage__text { color: var(--ink-2); }

/* Alternancia de paisaje en toda la página */
#historia,
#noticias,
#organizacion,
#voces { background: var(--paper); }
#registro {
  background: linear-gradient(135deg, #0A3028 0%, #10483B 55%, #0C5966 100%);
  color: white;
}
#registro .head__title,
#registro .head__lede,
#registro .head__num { color: white; }
#registro .head__num { border-color: rgba(255,255,255,.5); }
#registro .btn--solid { background: var(--lake); }

/* Historia: bosque suave */
#historia {
  background: linear-gradient(180deg, #F4F7F1 0%, #E5EEE5 100%);
}
/* Noticias: cielo patagónico */
#noticias {
  background: linear-gradient(180deg, #DFF2F3 0%, #F4F7F1 100%);
}
/* Organización: verde bosque */
#organizacion {
  background: #123D33;
  color: white;
}
#organizacion .head__title,
#organizacion .head__lede,
#organizacion .head__num { color: white; }
#organizacion .head__num { border-color: rgba(255,255,255,.35); }
#organizacion .card,
#organizacion article,
#organizacion .panel { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); }
/* Voces: agua */
#voces { background: #DDF1F1; }

/* Footer profundo */
.site-footer,
footer {
  background: #08463b00;
  color: #0caf79;
  border-top-color: rgba(102,210,222,.18);
}

/* Sponsors: reservamos el bloque más oscuro para logos */
.patrons { background: #071F1B; }

@media (max-width: 820px) {
  .cover { padding-top: 58px; }
  .routemap { width: 100%; max-width: 500px; }
  #organizacion { background: #123D33; }
}


/* =========================================================
   MAPA WOW · cartografía inmersiva
   ========================================================= */
.chart {
  padding: clamp(8px, 1vw, 14px) 0 0;
  filter: none;
  overflow: visible;
}
.chart::before { display:none; }
.chart::after {
  content:"";
  position:absolute;
  width:240px; height:240px;
  right:-90px; bottom:70px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(102,210,222,.18), transparent 68%);
  pointer-events:none;
}
.routemap {
  width:min(100%, 600px);
  max-width:none;
  display:block;
  overflow:visible;
  filter: drop-shadow(0 28px 38px rgba(1,35,29,.20));
  transform:perspective(1000px) rotateY(-2deg);
}
.rm-map-bg { display:none !important; }
.rm-mountains path { fill:#174B3D; opacity:.22; }
.rm-mountains path:nth-child(2) { fill:#0D3A31; opacity:.15; }
.rm-mountains .rm-snow { fill:#EAF8F5; opacity:.65; }
.rm-forest path { fill:#0B3028; opacity:.32; }
.rm-contours path {
  stroke:rgba(195,235,225,.34);
  stroke-width:1.1;
  stroke-dasharray:2 7;
  opacity:.9;
}
.rm-lake {
  fill:url(#lakeGradient);
  stroke:#8BE8EC;
  stroke-width:1.8;
  stroke-opacity:.78;
  filter:drop-shadow(0 10px 14px rgba(0,70,80,.16));
}
.rm-river {
  stroke:url(#riverGradient);
  stroke-width:19;
  stroke-linecap:round;
  stroke-opacity:.96;
  filter:drop-shadow(0 6px 9px rgba(0,70,80,.22));
}
.rm-route-glow {
  stroke:#F4D66A;
  stroke-width:14;
  opacity:.18;
  filter:url(#routeGlow);
}
.rm-route {
  stroke:url(#routeGradient);
  stroke-width:5.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(244,214,106,.62));
}
.rm-route-traveler {
  fill:#FFF7D4;
  stroke:#A87D18;
  stroke-width:2.5;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.28));
}
.rm-kayak {
  display:none;
}
.rm-node circle:not(.rm-node-pulse) {
  fill:#0B3028;
  stroke:#8CE9EF;
  stroke-width:3;
}
.rm-node text { fill:white; font-size:10px; font-weight:900; }
.rm-node--end circle:not(.rm-node-pulse) { fill:#D2B65A; stroke:#FFF3B8; }
.rm-label {
  paint-order:stroke;
  stroke:rgba(7,42,34,.88);
  stroke-width:5px;
  stroke-linejoin:round;
  font-weight:750;
  letter-spacing:.01em;
}
.rm-label--water { fill:#F1FFFF; }
.rm-label--end { fill:#FFF0AE; }
.rm-label--sub { fill:#BDE5E5; }
.rm-compass-ring { fill:rgba(244,250,247,.08); stroke:#8CE9EF; stroke-width:1.5; }
.rm-compass-needle { fill:#D2B65A; }
.rm-compass-n { fill:#EFFFFC; font-weight:900; }

.chart__cap {
  margin:0 auto;
  max-width:44ch;
  padding:.7rem 1rem 0;
  text-align:center;
  color:color-mix(in oklab, var(--on-deep) 62%, transparent);
  font-size:.74rem;
}

/* El mapa comparte el escenario oscuro de la portada */
.cover .chart__cap { color:rgba(244,250,247,.58); }

@media (max-width:860px) {
  .routemap { transform:none; }
}


/* =========================================================
   MAPA FINAL · recorrido libre, sin marco ni brújula
   ========================================================= */
.chart {
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
}
.chart::before,
.chart::after { display: none !important; }
.routemap {
  width: min(100%, 620px);
  margin-inline: auto;
  display: block;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 24px 30px rgba(0,25,21,.16));
  transform: none !important;
}

/* El mapa se siente dibujado sobre el paisaje, no encerrado en una tarjeta. */
.rm-map-bg { display: none !important; }
.rm-route {
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(244,214,106,.7));
}
.rm-route-glow {
  stroke: #F5D96A;
  stroke-width: 15;
  opacity: .12;
  filter: url(#routeGlow);
}

/* Nueva animación: una expedición luminosa avanza por el recorrido. */
.rm-expedition {
  pointer-events: none;
}
.rm-expedition-glow {
  fill: #DDFBFF;
  opacity: .18;
  filter: blur(4px);
}
.rm-expedition-core {
  fill: #FFFBE4;
  stroke: #D2B65A;
  stroke-width: 2.5;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.3));
}
.rm-expedition-wake {
  fill: none;
  stroke: #DDFBFF;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .8;
  stroke-dasharray: 2 7;
  animation: expeditionWake 1.1s linear infinite;
}
@keyframes expeditionWake {
  to { stroke-dashoffset: -18; opacity: .15; }
}

/* Los hitos se encienden uno detrás de otro, como una expedición real. */
.js .routemap.is-drawn .rm-node-pulse {
  animation: expeditionNode 3.8s ease-out infinite;
}
.js .routemap.is-drawn .rm-node:nth-child(1) .rm-node-pulse { animation-delay: 0s; }
.js .routemap.is-drawn .rm-node:nth-child(2) .rm-node-pulse { animation-delay: .75s; }
.js .routemap.is-drawn .rm-node:nth-child(3) .rm-node-pulse { animation-delay: 1.5s; }
.js .routemap.is-drawn .rm-node:nth-child(4) .rm-node-pulse { animation-delay: 2.25s; }
.js .routemap.is-drawn .rm-node:nth-child(5) .rm-node-pulse { animation-delay: 3s; }
@keyframes expeditionNode {
  0%, 45% { opacity: 0; transform: scale(.55); }
  58% { opacity: .85; transform: scale(1); }
  78%, 100% { opacity: 0; transform: scale(1.65); }
}

/* Etiquetas limpias: sin placas ni apariencia de interfaz. */
.rm-label {
  paint-order: stroke;
  stroke: rgba(7,42,34,.88);
  stroke-width: 4px;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .rm-expedition-wake,
  .js .routemap.is-drawn .rm-node-pulse { animation: none !important; }
}

/* INSCRIPCIONES · grupos, dobles y teams */
.participant-list{display:grid;gap:1rem;margin-top:1rem}
.participant-card{padding:1rem;border:1px solid var(--rule);border-radius:16px;background:rgba(255,255,255,.58)}
.participant-card__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.8rem}
.participant-card__title{font-weight:800;color:var(--ink)}
.participant-card__discount{font-size:.78rem;font-weight:800;color:var(--deep);background:var(--ember-wash);border-radius:999px;padding:.35rem .65rem}
.participant-card__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.participant-card__grid .d-full{grid-column:1/-1}
.registration-rule{margin-top:.75rem;padding:.8rem 1rem;border-radius:12px;background:var(--lake-wash);color:var(--ink);font-size:.9rem;font-weight:650}
.registration-rule.discount{background:var(--ember-wash)}
.price-breakdown{margin-top:1rem;padding:1rem;border:1px solid var(--rule);border-radius:14px;background:rgba(255,255,255,.65)}
.price-breakdown__row{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0}
.price-breakdown__row.total{margin-top:.5rem;padding-top:.7rem;border-top:1px solid var(--rule);font-weight:900;font-size:1.08rem}
@media (max-width:640px){.participant-card__grid{grid-template-columns:1fr}.participant-card__head{align-items:flex-start;flex-direction:column}.participant-card__grid .d-full{grid-column:auto}}

.fecha-destacada {
  display: inline-block;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 3px 8px rgb(0 0 0);
  animation: fechaPulso 3s ease-in-out infinite;
}

@keyframes fechaPulso {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }
}

.fecha-titulo {
  display: block;
  margin-bottom: 10px;

  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 900;
  line-height: 1;

  letter-spacing: 2px;
  text-transform: uppercase;

  color: #D4A72C;

  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.25);

  animation: tituloEntrada 0.8s ease-out;
}

.fecha-destacada {
  display: inline-block;

  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.2;

  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);

  animation: fechaPulso 3s ease-in-out infinite;
}

@keyframes tituloEntrada {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 0.9;
    transform: translateY(0);
  }
}

@keyframes fechaPulso {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }
}

#organizacion {
  color: #fff;
}

#organizacion .head__num,
#organizacion .head__title,
#organizacion .person__role,
#organizacion .person__name,
#organizacion .person__body p,
#organizacion .person__quote,
#organizacion .person__quote p,
#organizacion .person__contact,
#organizacion .commissions dt,
#organizacion .commissions dd,
#organizacion .commissions b {
  color: #fff;
}

#organizacion a {
  color: #fff;
}

/* ================================
   SPONSOR PRINCIPAL
   ================================ */

.sponsor {
  width: 100%;
  padding: 35px 20px;
  box-sizing: border-box;

  /* IMPORTANTE: sin fondo ni borde */
  background: transparent;
  border: none;
}

.sponsor-box {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

.sponsor-label {
  margin-bottom: 12px;

  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 2px;

  color: #52635d;
}

.sponsor-card {
  width: 320px;
  height: 110px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 15px;
  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.65);

  border: 1px solid rgba(50, 82, 76, 0.18);
  border-radius: 12px;

  text-decoration: none;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.sponsor-card:hover {
  transform: translateY(-3px);

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.12);
}

.sponsor-card img {
  display: block;

  max-width: 180px;
  max-height: 65px;

  width: auto;
  height: auto;

  object-fit: contain;
}


/* CELULAR */

@media (max-width: 600px) {

  .sponsor {
    padding: 25px 15px;
  }

  .sponsor-card {
    width: 280px;
    height: 100px;
  }

  .sponsor-card img {
    max-width: 155px;
    max-height: 55px;
  }
}

/* ══ DATOS BANCARIOS EN INSCRIPCIÓN ══ */

.bank-data-box {
  margin-top: 1.1rem;
  padding: 1.15rem;
  border: 1px solid rgba(12, 21, 19, 0.12);
  border-radius: 12px;
  background: rgba(245, 242, 234, 0.7);
}

.bank-data-box__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.bank-data-box__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 2.2rem;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 1rem;
}

.bank-data-box__head strong {
  display: block;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 0.15rem;
}

.bank-data-box__head small {
  display: block;
  color: var(--ink-2);
  font-size: 0.78rem;
  line-height: 1.4;
}

.bank-data-box__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.bank-data-item {
  padding: 0.7rem 0.8rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(12, 21, 19, 0.08);
}

.bank-data-item--full {
  grid-column: 1 / -1;
}

.bank-data-item span {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--ink-3);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bank-data-item strong {
  display: block;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.35;
  word-break: break-word;
}

.bank-data-value {
  font-family: monospace;
  letter-spacing: 0.04em;
  font-size: 0.9rem !important;
}

.bank-data-box__note {
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(12, 21, 19, 0.1);
  color: var(--ink-2);
  font-size: 0.75rem;
  line-height: 1.5;
}

.bank-data-box__note strong {
  color: var(--ink);
}

@media (max-width: 600px) {
  .bank-data-box {
    padding: 0.9rem;
  }

  .bank-data-box__grid {
    grid-template-columns: 1fr;
  }

  .bank-data-item--full {
    grid-column: auto;
  }

  .bank-data-item strong {
    font-size: 0.78rem;
  }

  .bank-data-value {
    font-size: 0.78rem !important;
  }
}

/* ===== SPONSOR CENTRADO ===== */

section.sponsor {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  margin: 0 auto !important;
  padding: 35px 20px !important;

  box-sizing: border-box !important;

  background: transparent !important;
  border: none !important;
}

section.sponsor .sponsor-box {
  width: 100% !important;
  max-width: 500px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
}

section.sponsor .sponsor-label {
  display: block !important;
  width: 100% !important;

  margin: 0 0 12px 0 !important;

  text-align: center !important;
}

section.sponsor .sponsor-card {
  width: 320px !important;
  height: 110px !important;

  margin: 0 auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
}

section.sponsor .sponsor-card img {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 180px !important;
  max-height: 65px !important;

  margin: 0 auto !important;
}

/* Emblema de Travesía en blanco */
.cover__emblem-hero-img {
  filter: brightness(0) invert(1);
}


/* =========================================================
   RESPONSIVE FINAL · 2026-10-04
   Capa final para móviles/tablets.
   Se deja al final para que tenga prioridad sobre reglas
   anteriores del diseño.
   ========================================================= */

/* Evitar desbordes producidos por elementos decorativos */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

.shell,
.masthead__inner {
  min-width: 0;
}

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

button,
input,
select,
textarea {
  max-width: 100%;
}

/* -------------------------
   TABLET / PANTALLAS MEDIAS
   ------------------------- */
@media (max-width: 1020px) {
  :root {
    --gutter: clamp(18px, 4vw, 40px);
    --band-y: clamp(60px, 8vw, 96px);
  }

  .cover__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .cover__body {
    min-width: 0;
  }

  .chart {
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    position: relative;
    overflow: hidden;
  }

  .chart::after {
    display: none;
  }

  .routemap {
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
    transform: none;
  }

  .article,
  .reelhub,
  .enroll__grid {
    min-width: 0;
  }

  .patrons__inst-logos {
    gap: 12px;
  }

  .patrons__inst-logos img {
    max-width: 135px;
  }
}

/* -------------------------
   MÓVIL
   ------------------------- */
@media (max-width: 860px) {
  :root {
    --gutter: 18px;
    --band-y: 58px;
  }

  body {
    font-size: 16px;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Header */
  .masthead__inner {
    min-height: 58px;
    padding-top: .55rem;
    padding-bottom: .55rem;
  }

  .wordmark {
    min-width: 0;
    gap: .55rem;
  }

  .wordmark__mark {
    width: 32px;
    height: 32px;
  }

  .wordmark__text {
    min-width: 0;
  }

  .wordmark__text b {
    display: block;
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav {
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
  }

  /* Portada */
  .cover__header-block {
    align-items: center;
  }

  .cover__title {
    min-width: 0;
  }

  .cover__shield {
    width: auto;
  }

  .cover__shield-img {
    max-width: 88px;
  }

  .cover__logos-row {
    align-items: center;
    flex-wrap: wrap;
  }

  .cover__univ-img,
  .cover__emblem-hero-img {
    max-width: 46vw;
    height: auto;
    max-height: 52px;
  }

  .cover__logos-sep {
    height: 36px;
  }

  /* Mapa */
  .chart {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
  }

  .routemap {
    width: 100%;
    height: auto;
    transform: none;
    filter: none;
  }

  .chart__cap {
    font-size: .72rem;
    line-height: 1.45;
    padding: .65rem .25rem 0;
  }

  /* Encabezados */
  .head {
    gap: 0;
    margin-bottom: 34px;
  }

  .head__title {
    font-size: clamp(1.9rem, 8vw, 2.65rem);
    max-width: 100%;
  }

  .head__lede {
    font-size: .98rem;
    max-width: 100%;
  }

  /* Recorrido */
  .stage {
    min-width: 0;
  }

  .stage__name,
  .stage__text {
    overflow-wrap: anywhere;
  }

  /* Galerías */
  .plates,
  .wall {
    min-width: 0;
  }

  .plate img,
  .wall__tile img {
    max-width: 100%;
  }

  /* Logos institucionales */
  .patrons__inst-logos {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
  }

  .patrons__inst-logos img {
    width: 100%;
    max-width: none;
    height: 54px;
    padding: 8px 10px;
    box-sizing: border-box;
  }

  /* Footer */
  .foot__grid,
  .foot__links {
    min-width: 0;
  }

  .foot__links a {
    overflow-wrap: anywhere;
  }

  /* Barra inferior: que no tape contenido */
  main {
    padding-bottom: 78px;
  }

  .mobile-bar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(.65rem, env(safe-area-inset-bottom));
  }

  .mobile-bar__info {
    min-width: 0;
  }

  .mobile-bar__price {
    white-space: nowrap;
  }

  .mobile-bar__actions {
    min-width: 0;
  }

  .mobile-bar__btn-perks {
    display: none;
  }

  .mobile-bar__btn {
    min-height: 42px;
  }

  /* Dialog / formulario */
  dialog.dlg {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
  }

  .dlg__head,
  .dlg__body {
    min-width: 0;
  }

  .dlg__head h2 {
    font-size: clamp(1.35rem, 6vw, 1.8rem);
  }

  .d-form-grid,
  .bank-data-box__grid {
    min-width: 0;
  }

  .d-field,
  .d-input,
  .d-select,
  .d-textarea,
  input,
  select,
  textarea {
    min-width: 0;
  }

  .d-drop__face {
    min-height: 110px;
  }
}

/* -------------------------
   CELULARES CHICOS
   ------------------------- */
@media (max-width: 640px) {
  :root {
    --gutter: 15px;
    --band-y: 48px;
  }

  .masthead__inner {
    padding-inline: 15px;
  }

  .wordmark__text b {
    font-size: .9rem;
    max-width: 52vw;
  }

  .nav {
    padding-left: 15px;
    padding-right: 15px;
  }

  .cover {
    padding-top: 30px;
    padding-bottom: 44px;
  }

  .cover__header-block {
    gap: 10px;
  }

  .cover__title {
    font-size: clamp(2.15rem, 12vw, 3.15rem);
  }

  .cover__shield-img {
    max-width: 72px;
  }

  .cover__lede {
    font-size: .98rem;
  }

  .cover__logos-row {
    gap: 10px;
  }

  .cover__univ-img,
  .cover__emblem-hero-img {
    max-width: 43vw;
    max-height: 44px;
  }

  .cover__logos-sep {
    display: none;
  }

  .datasheet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .datasheet > div {
    padding: .75rem .8rem;
  }

  .datasheet .num {
    font-size: 1.45rem;
  }

  .cover__actions .btn {
    min-height: 46px;
  }

  .chart__cap {
    font-size: .68rem;
  }

  .head__title {
    font-size: clamp(1.8rem, 9vw, 2.35rem);
  }

  .head__lede {
    font-size: .94rem;
  }

  .stages {
    gap: 12px;
  }

  .stage {
    padding: 1rem;
  }

  .plates {
    grid-template-columns: 1fr;
  }

  .patrons__inst-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .patrons__inst-logos img {
    height: 48px;
    padding: 7px 8px;
  }

  .mobile-bar {
    gap: 8px;
  }

  .mobile-bar__tag {
    font-size: .56rem;
  }

  .mobile-bar__price {
    font-size: 1rem;
  }

  .mobile-bar__btn {
    padding-inline: .9rem;
    font-size: .82rem;
  }

  .bank-data-box {
    overflow: hidden;
  }

  .bank-data-item strong {
    overflow-wrap: anywhere;
  }

  .sponsor {
    padding-inline: 10px;
  }

  .sponsor-card {
    width: min(280px, 100%);
  }
}

/* -------------------------
   TELÉFONOS MUY ANGOSTOS
   ------------------------- */
@media (max-width: 390px) {
  .wordmark__mark {
    width: 29px;
    height: 29px;
  }

  .wordmark__text b {
    font-size: .82rem;
    max-width: 47vw;
  }

  .nav-toggle {
    width: 40px;
    height: 40px;
  }

  .cover__title {
    font-size: 2.05rem;
  }

  .cover__shield-img {
    max-width: 62px;
  }

  .cover__univ-img,
  .cover__emblem-hero-img {
    max-width: 41vw;
    max-height: 40px;
  }

  .datasheet dt {
    font-size: .58rem;
  }

  .datasheet dd {
    font-size: .86rem;
  }

  .datasheet .num {
    font-size: 1.3rem;
  }

  .mobile-bar__price {
    font-size: .92rem;
  }

  .mobile-bar__btn {
    padding-inline: .72rem;
  }
}

/* Respeto por dispositivos sin hover */
@media (hover: none) and (pointer: coarse) {
  .cover__shield-img:hover,
  .wall__tile:hover,
  .patrons__inst-logos img:hover,
  .sponsor-card:hover {
    transform: none;
  }
}

/* Animaciones reducidas */
@media (prefers-reduced-motion: reduce) {
  .chart::after,
  .cover::before {
    animation: none !important;
  }
}

/* =========================================================
   AJUSTE MÓVIL · RECORRIDO TRAMO POR TRAMO
   ========================================================= */
@media (max-width: 820px) {

  .stage {
    width: 100%;
    min-width: 0;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: 1rem;
  }

  .stage__name,
  .stage__text {
    width: 100%;
    min-width: 0;

    /* Evita que las palabras se partan innecesariamente */
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    white-space: normal;
  }

  .stage__name {
    text-wrap: balance;
  }

  .stage__text {
    text-wrap: pretty;
  }
}

/* ==========================================================================
   99 · CAPA VISUAL ORGANIZADA · 2026-10-07
   --------------------------------------------------------------------------
   Esta capa concentra los ajustes visuales generales de la nueva composición.

   FUTURAS ACTUALIZACIONES:
   - Buscar primero la sección correspondiente dentro de este bloque.
   - Los textos y funcionalidades están definidos en index.html.
   - Esta capa está al final del CSS para que sea fácil ajustar el diseño
     sin tocar las reglas originales que ya hacen funcionar la página.
   ========================================================================== */

/* --------------------------------------------------------------------------
   99.1 · RITMO GENERAL
   -------------------------------------------------------------------------- */

.info-section,
.docs-section,
.speakers-section,
.rental-section {
  position: relative;
  padding-block: clamp(58px, 8vw, 96px);
  border-top: 1px solid var(--rule);
}

.section-head {
  max-width: 760px;
  margin: 0 auto clamp(30px, 5vw, 54px);
  text-align: center;
}

.section-head .eyebrow {
  margin-bottom: .8rem;
}

.section-head h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--ink);
}

.section-head > p:not(.eyebrow) {
  max-width: 62ch;
  margin: 1rem auto 0;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   99.2 · INFORMACIÓN DE LA TRAVESÍA
   -------------------------------------------------------------------------- */

.info-section {
  background:
    radial-gradient(circle at 12% 10%, color-mix(in oklab, var(--lake) 5%, transparent), transparent 28%),
    var(--paper);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.info-card {
  min-width: 0;
  padding: clamp(20px, 2.5vw, 30px);
  background: var(--paper);
  transition: background .3s var(--ease), transform .3s var(--ease);
}

.info-card:hover {
  background: color-mix(in oklab, var(--lake-wash) 42%, var(--paper));
  transform: translateY(-2px);
}

.info-card__icon {
  display: block;
  margin-bottom: 1rem;
  font-size: 1.65rem;
  line-height: 1;
}

.info-card h3,
.important-card h3,
.doc-card h3,
.speaker-card h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.08;
  color: var(--ink);
}

.info-card p,
.important-card p,
.doc-card p,
.speaker-card p {
  margin-top: .65rem;
  color: var(--ink-2);
  font-size: .93rem;
  line-height: 1.58;
}

/* --------------------------------------------------------------------------
   99.3 · DATOS IMPORTANTES
   -------------------------------------------------------------------------- */

.info-section--paper {
  background: var(--paper-2);
}

.important-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

.important-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: color-mix(in oklab, var(--paper) 72%, transparent);
}

.important-card--warning {
  border-color: color-mix(in oklab, var(--ember) 55%, var(--rule));
  background: color-mix(in oklab, var(--ember-wash) 58%, var(--paper));
}

.important-card ul {
  margin: .8rem 0 0;
  padding-left: 1.15rem;
  color: var(--ink-2);
}

.important-card li + li {
  margin-top: .35rem;
}

.important-card .info-btn {
  margin-top: auto;
  align-self: flex-start;
}

.info-btn {
  margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   99.4 · DOCUMENTACIÓN
   -------------------------------------------------------------------------- */

.docs-section {
  background: var(--paper);
}

.docs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  max-width: 920px;
  margin-inline: auto;
}

.doc-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.2rem;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-2);
}

.doc-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--lake-wash);
  font-size: 1.35rem;
}

.doc-card .btn {
  margin-top: .65rem;
}

/* --------------------------------------------------------------------------
   99.5 · INSCRIPCIÓN — gran llamada a la acción
   -------------------------------------------------------------------------- */

.enroll {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.enroll::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -180px;
  top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53,181,197,.14), transparent 68%);
  pointer-events: none;
  z-index: -1;
}

.enroll__grid {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   99.6 · CHARLA TÉCNICA
   -------------------------------------------------------------------------- */

.speakers-section {
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
}

.speakers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  max-width: 920px;
  margin-inline: auto;
}

.speaker-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 1.25rem;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
}

.speaker-card__avatar {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--deep);
  color: var(--on-deep);
  font-family: var(--serif);
  font-size: 1.7rem;
}

.speaker-card__role {
  display: block;
  margin-bottom: .25rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.speaker-card .btn {
  margin-top: .45rem;
}

/* --------------------------------------------------------------------------
   99.7 · ALQUILER
   -------------------------------------------------------------------------- */

.rental-section {
  background: var(--paper-2);
}

.rental-card {
  position: relative;
  max-width: 960px;
  margin-inline: auto;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 20%, color-mix(in oklab, var(--lake) 13%, transparent), transparent 32%),
    var(--deep);
  color: var(--on-deep);
}

.rental-card__content {
  max-width: 680px;
}

.rental-card h2 {
  color: var(--on-deep);
  font-size: clamp(2rem, 4vw, 3rem);
}

.rental-card p {
  max-width: 60ch;
  margin-top: 1rem;
  color: color-mix(in oklab, var(--on-deep) 74%, transparent);
}

.rental-card .eyebrow {
  color: color-mix(in oklab, var(--on-deep) 62%, transparent);
}

.rental-card .btn {
  margin-top: .5rem;
}

/* --------------------------------------------------------------------------
   99.8 · SECCIONES EDITORIALES
   -------------------------------------------------------------------------- */

#historia,
#registro,
#voces {
  background: var(--paper-2);
}

#noticias,
#organizacion {
  background: var(--paper);
}

#historia .head,
#noticias .head,
#registro .head,
#organizacion .head,
#voces .head {
  margin-bottom: clamp(34px, 5vw, 64px);
}

/* --------------------------------------------------------------------------
   99.9 · AUSPICIANTES
   -------------------------------------------------------------------------- */

#auspiciantes {
  background:
    linear-gradient(180deg, var(--deep), color-mix(in oklab, var(--deep) 94%, var(--lake)));
}

#auspiciantes .head__title,
#auspiciantes .head__lede,
#auspiciantes .head__num {
  color: var(--on-deep);
}

#auspiciantes .head__lede {
  color: color-mix(in oklab, var(--on-deep) 70%, transparent);
}

/* --------------------------------------------------------------------------
   99.10 · SPONSOR PRINCIPAL
   -------------------------------------------------------------------------- */

section.sponsor {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

section.sponsor .sponsor-box {
  padding-block: 8px;
}

section.sponsor .sponsor-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   99.11 · FOOTER
   -------------------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   99.12 · RESPONSIVE — tablets
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .important-grid {
    grid-template-columns: 1fr;
  }

  .speakers-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   99.13 · RESPONSIVE — móviles
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .info-section,
  .docs-section,
  .speakers-section,
  .rental-section {
    padding-block: 52px;
  }

  .section-head {
    margin-bottom: 30px;
    text-align: left;
  }

  .section-head > p:not(.eyebrow) {
    margin-left: 0;
  }

  .info-grid,
  .docs-grid,
  .speakers-grid {
    grid-template-columns: 1fr;
  }

  .info-card,
  .important-card {
    padding: 20px;
  }

  .doc-card {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .doc-card__icon {
    width: 42px;
    height: 42px;
  }

  .speaker-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: .9rem;
    padding: 20px;
  }

  .speaker-card__avatar {
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
  }

  .rental-card {
    padding: 26px 20px;
    border-radius: 9px;
  }

  #historia .head,
  #noticias .head,
  #registro .head,
  #organizacion .head,
  #voces .head {
    margin-bottom: 32px;
  }

  section.sponsor .sponsor-card {
    width: min(280px, 100%) !important;
  }
}

/* --------------------------------------------------------------------------
   99.14 · ACCESIBILIDAD Y PEQUEÑOS COMPONENTES
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .info-card {
    transition: none;
  }

  .enroll::before {
    display: none;
  }
}

/* La nota de la ficha técnica ya no necesita style inline en HTML. */
.datasheet__note {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: .62rem;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: normal;
}

/* ═══════════════════════════════════════════════════════════════
   100 · RECORRIDO TRAMO POR TRAMO · RESPONSIVE
   Ajuste específico para evitar que el recorrido se vea como
   una columna/pilar interminable en dispositivos móviles.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {

  /* Contenedor general del recorrido */
  #recorrido {
    overflow: hidden;
  }

  #recorrido .route,
  #recorrido .route__stages,
  #recorrido .stages,
  #recorrido .route-list {
    width: 100%;
    max-width: 100%;
  }

  /* Cada tramo ocupa todo el ancho disponible */
  #recorrido .stage,
  #recorrido .route__stage,
  #recorrido .route-item,
  #recorrido .stage-item {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /*
   * Evita que el contenido conserve anchos mínimos de escritorio
   * y termine formando una columna extremadamente angosta.
   */
  #recorrido .stage__content,
  #recorrido .route__stage-content,
  #recorrido .stage-content,
  #recorrido .route-item__content {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Títulos de cada tramo */
  #recorrido .stage h3,
  #recorrido .route__stage h3,
  #recorrido .stage-item h3,
  #recorrido .route-item h3 {
    max-width: 100%;
    width: 100%;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  /* Texto descriptivo */
  #recorrido .stage p,
  #recorrido .route__stage p,
  #recorrido .stage-item p,
  #recorrido .route-item p {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    line-height: 1.6;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /*
   * Si los tramos están construidos como columnas en desktop,
   * en celular pasan a una sola estructura vertical.
   */
  #recorrido .route__stage,
  #recorrido .stages,
  #recorrido .route-list {
    grid-template-columns: 1fr;
  }

  /*
   * Reduce el espacio lateral que suele provocar que el texto
   * quede comprimido en pantallas chicas.
   */
  #recorrido .stage,
  #recorrido .stage-item,
  #recorrido .route-item {
    padding-left: 0;
    padding-right: 0;
  }

  /* Indicador/número del tramo */
  #recorrido .stage__number,
  #recorrido .stage-number,
  #recorrido .route__number {
    flex-shrink: 0;
  }

  /*
   * Cuando número + contenido están en flex, permitimos que
   * el contenido realmente pueda ocupar el espacio restante.
   */
  #recorrido .stage,
  #recorrido .stage-item,
  #recorrido .route-item {
    min-width: 0;
  }

  #recorrido .stage > *,
  #recorrido .stage-item > *,
  #recorrido .route-item > * {
    min-width: 0;
  }

  /* Ajuste de tipografía para celular */
  #recorrido .stage h3,
  #recorrido .stage-item h3,
  #recorrido .route-item h3 {
    font-size: clamp(1.15rem, 5vw, 1.5rem);
  }

  #recorrido .stage p,
  #recorrido .stage-item p,
  #recorrido .route-item p {
    font-size: 0.95rem;
  }
}


/* ═══════════════════════════════════════════════════════════════
   100.1 · CELULARES MUY CHICOS
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 430px) {

  #recorrido .stage h3,
  #recorrido .stage-item h3,
  #recorrido .route-item h3 {
    font-size: 1.15rem;
  }

  #recorrido .stage p,
  #recorrido .stage-item p,
  #recorrido .route-item p {
    font-size: 0.9rem;
    line-height: 1.55;
  }

}

/* ==========================================================================
   COLORES SEPARADOS
   --------------------------------------------------------------------------
   IMPORTANTE:
   Este bloque SOLO modifica:
   - fondos
   - colores de texto
   - colores de botones
   - colores de links

   NO modifica:
   - tamaños
   - posiciones
   - márgenes
   - paddings
   - bordes
   - border-radius
   - sombras
   - estructura
   ========================================================================== */


/* ==========================================================================
   HEADER
   ========================================================================== */

/* Fondo del HEADER */
.masthead {
  background: #071F1B;
}

/* Texto principal del HEADER */
.masthead .brand,
.masthead .nav a {
  color: #F4FAF7;
}

/* Texto secundario del HEADER */
.masthead .nav a:not(.is-active) {
  color: #D5E5E0;
}


/* ==========================================================================
   HEADER — BOTÓN "Inscribirme 2026"
   ========================================================================== */

/* Fondo del botón "Inscribirme 2026" */
#openEnrollHeaderBtn {
  background: #D2B65A;
}

/* Texto del botón "Inscribirme 2026" */
#openEnrollHeaderBtn {
  color: #102E29;
}


/* ==========================================================================
   MENÚ MÓVIL — BOTÓN "Inscribirme 2026"
   ========================================================================== */

/* Fondo del botón */
#openEnrollNavBtn {
  background: #D2B65A;
}

/* Texto del botón */
#openEnrollNavBtn {
  color: #102E29;
}


/* ==========================================================================
   PORTADA / HERO
   ========================================================================== */

/* Fondo de la PORTADA */
.cover {
  background: #0B3028;
}

/* Título de la PORTADA */
.cover .cover__title {
  color: #FFFFFF;
}

/* Texto descriptivo de la PORTADA */
.cover .cover__lede {
  color: #DDECE8;
}

/* Etiquetas pequeñas de la PORTADA */
.cover .eyebrow,
.cover .datasheet dt,
.cover .datasheet small {
  color: #BFD8D1;
}

/* Números y datos destacados de la PORTADA */
.cover .datasheet dd,
.cover .datasheet .num {
  color: #FFFFFF;
}


/* ==========================================================================
   HERO — BOTÓN "Inscripción 2026"
   ========================================================================== */

/* Fondo */
#openEnrollHeroBtn {
  background: #D2B65A;
}

/* Texto */
#openEnrollHeroBtn {
  color: #102E29;
}


/* ==========================================================================
   HERO — BOTÓN "Beneficios para Remeros"
   ========================================================================== */

/* Fondo */
#coverBenefitsBtn {
  background: #FFFFFF;
}

/* Texto */
#coverBenefitsBtn {
  color: #173F40;
}


/* ==========================================================================
   BOTÓN "Completar Inscripción 2026"
   ========================================================================== */

/* Fondo */
#openEnrollFormBtn {
  background: #1E7A72;
}

/* Texto */
#openEnrollFormBtn {
  color: #FFFFFF;
}


/* ==========================================================================
   BOTÓN "Consultar por alquiler"
   ========================================================================== */

/* Fondo */
.info-btn--kayak {
  background: #1E7A72;
}

/* Texto */
.info-btn--kayak {
  color: #FFFFFF;
}


/* ==========================================================================
   SECCIÓN "RECORRIDO"
   ========================================================================== */

/* Fondo */
#recorrido {
  background: #0B3028;
}

/* Títulos */
#recorrido h2,
#recorrido h3 {
  color: #FFFFFF;
}

/* Texto */
#recorrido p,
#recorrido li {
  color: #DDECE8;
}


/* ==========================================================================
   SECCIÓN "INFORMACIÓN"
   ========================================================================== */

/* Fondo */
#informacion {
  background: #F4F1E8;
}

/* Títulos */
#informacion h2,
#informacion h3 {
  color: #173F40;
}

/* Texto */
#informacion p,
#informacion li {
  color: #425B57;
}


/* ==========================================================================
   SECCIÓN "DATOS IMPORTANTES"
   ========================================================================== */

/* Fondo */
#datos-importantes {
  background: #FFFFFF;
}

/* Títulos */
#datos-importantes h2,
#datos-importantes h3 {
  color: #173F40;
}

/* Texto */
#datos-importantes p,
#datos-importantes li {
  color: #425B57;
}


/* ==========================================================================
   SECCIÓN "DOCUMENTACIÓN"
   ========================================================================== */

/* Fondo */
#documentacion {
  background: #F4F1E8;
}

/* Títulos */
#documentacion h2,
#documentacion h3 {
  color: #173F40;
}

/* Texto */
#documentacion p,
#documentacion li,
#documentacion label {
  color: #425B57;
}


/* ==========================================================================
   SECCIÓN "INSCRIPCIÓN"
   ========================================================================== */

/* Fondo */
#inscripcion {
  background: #FFFFFF;
}

/* Títulos */
#inscripcion h2,
#inscripcion h3 {
  color: #173F40;
}

/* Texto */
#inscripcion p,
#inscripcion label {
  color: #425B57;
}


/* ==========================================================================
   BOTÓN "Enviar inscripción"
   ========================================================================== */

/* Fondo */
#submitEnrollBtn {
  background: #1E7A72;
}

/* Texto */
#submitEnrollBtn {
  color: #FFFFFF;
}


/* ==========================================================================
   SECCIÓN "CHARLA TÉCNICA"
   ========================================================================== */

/* Fondo */
#charla-tecnica {
  background: #F4F1E8;
}

/* Títulos */
#charla-tecnica h2,
#charla-tecnica h3 {
  color: #173F40;
}

/* Texto */
#charla-tecnica p,
#charla-tecnica li {
  color: #425B57;
}


/* ==========================================================================
   SECCIÓN "ALQUILER DE KAYAKS"
   ========================================================================== */

/* Fondo */
#alquiler-kayaks {
  background: #FFFFFF;
}

/* Títulos */
#alquiler-kayaks h2,
#alquiler-kayaks h3 {
  color: #fafafa;
}

/* Texto */
#alquiler-kayaks p,
#alquiler-kayaks li {
  color: #fafafa;
}


/* ==========================================================================
   SECCIÓN "HISTORIA"
   ========================================================================== */

/* Fondo */
#historia {
  background: #102F28;
}

/* Títulos */
#historia h2,
#historia h3 {
  color: #FFFFFF;
}

/* Texto */
#historia p,
#historia li {
  color: #DDECE8;
}


/* ==========================================================================
   SECCIÓN "NOTICIAS"
   ========================================================================== */

/* Fondo */
#noticias {
  background: #F4F1E8;
}

/* Títulos */
#noticias h2,
#noticias h3 {
  color: #173F40;
}

/* Texto */
#noticias p,
#noticias li {
  color: #425B57;
}


/* ==========================================================================
   SECCIÓN "REGISTRO"
   ========================================================================== */

/* Fondo */
#registro {
  background: #102F28;
}

/* Títulos */
#registro h2,
#registro h3 {
  color: #FFFFFF;
}

/* Texto */
#registro p,
#registro li,
#registro label {
  color: #DDECE8;
}


/* ==========================================================================
   REGISTRO — BOTÓN PRINCIPAL
   ========================================================================== */

/* Fondo */
#registro .btn--solid {
  background: #D2B65A;
}

/* Texto */
#registro .btn--solid {
  color: #102E29;
}


/* ==========================================================================
   SECCIÓN "ORGANIZACIÓN"
   ========================================================================== */

/* Fondo */
#organizacion {
  background: #123D33;
}

/* Títulos */
#organizacion h2,
#organizacion h3 {
  color: #FFFFFF;
}

/* Texto */
#organizacion p,
#organizacion li {
  color: #DDECE8;
}


/* ==========================================================================
   SECCIÓN "VOCES"
   ========================================================================== */

/* Fondo */
#voces {
  background: #102F28;
}

/* Títulos */
#voces h2,
#voces h3 {
  color: #FFFFFF;
}

/* Texto */
#voces p,
#voces li {
  color: #DDECE8;
}


/* ==========================================================================
   SECCIÓN "AUSPICIANTES"
   ========================================================================== */

/* Fondo */
#auspiciantes {
  background: #071F1B;
}

/* Títulos */
#auspiciantes h2,
#auspiciantes h3 {
  color: #FFFFFF;
}

/* Texto */
#auspiciantes p,
#auspiciantes li {
  color: #DDECE8;
}


/* ==========================================================================
   AUSPICIANTES — BOTONES
   ========================================================================== */

/* Fondo de botones sólidos */
#auspiciantes .btn--solid {
  background: #D2B65A;
}

/* Texto de botones sólidos */
#auspiciantes .btn--solid {
  color: #102E29;
}

/* Fondo de botones claros */
#auspiciantes .btn--paper {
  background: #FFF8DF;
}

/* Texto de botones claros */
#auspiciantes .btn--paper {
  color: #173F40;
}

/* Texto de botones transparentes */
#auspiciantes .btn--ghost {
  color: #FFFFFF;
}


/* ==========================================================================
   BARRA MÓVIL — BOTÓN "Inscribirme"
   ========================================================================== */

/* Fondo */
#openEnrollMobileBarBtn {
  background: #D2B65A;
}

/* Texto */
#openEnrollMobileBarBtn {
  color: #102E29;
}


/* ==========================================================================
   ADMIN — "Iniciar Sesión"
   ========================================================================== */

/* Fondo */
#adminLoginDialog button[type="submit"] {
  background: #1E7A72;
}

/* Texto */
#adminLoginDialog button[type="submit"] {
  color: #FFFFFF;
}


/* ==========================================================================
   ADMIN — "Exportar Excel"
   ========================================================================== */

/* Fondo */
#adminExportExcelBtn {
  background: #1E7A72;
}

/* Texto */
#adminExportExcelBtn {
  color: #FFFFFF;
}


/* ==========================================================================
   ADMIN — "Cerrar Sesión"
   ========================================================================== */

/* Fondo */
#adminLogoutBtn {
  background: #B43A3A;
}

/* Texto */
#adminLogoutBtn {
  color: #FFFFFF;
}


/* ==========================================================================
   ADMIN — "Modificar Precio & Cupo"
   ========================================================================== */

/* Fondo */
#btnQuickGoToConfig {
  background: #D2B65A;
}

/* Texto */
#btnQuickGoToConfig {
  color: #102E29;
}


/* ==========================================================================
   ADMIN — "+ Nueva Noticia"
   ========================================================================== */

/* Fondo */
#openNewPostModalBtn {
  background: #1E7A72;
}

/* Texto */
#openNewPostModalBtn {
  color: #FFFFFF;
}


/* ==========================================================================
   ADMIN — "+ Nuevo beneficio"
   ========================================================================== */

/* Fondo */
#openNewBenefitBtn {
  background: #1E7A72;
}

/* Texto */
#openNewBenefitBtn {
  color: #FFFFFF;
}


/* ==========================================================================
   ADMIN — "+ Crear Usuario"
   ========================================================================== */

/* Fondo */
#openNewUserModalBtn {
  background: #1E7A72;
}

/* Texto */
#openNewUserModalBtn {
  color: #FFFFFF;
}


/* ==========================================================================
   ADMIN — "Guardar y Aplicar Cambios"
   ========================================================================== */

/* Fondo */
#dashTabConfig button[type="submit"] {
  background: #1E7A72;
}

/* Texto */
#dashTabConfig button[type="submit"] {
  color: #FFFFFF;
}


/* ==========================================================================
   ADMIN — "Guardar Noticia"
   ========================================================================== */

/* Fondo */
#postEditorDialog button[type="submit"] {
  background: #1E7A72;
}

/* Texto */
#postEditorDialog button[type="submit"] {
  color: #FFFFFF;
}


/* ==========================================================================
   ADMIN — "Guardar beneficio"
   ========================================================================== */

/* Fondo */
#benefitEditorDialog button[type="submit"] {
  background: #1E7A72;
}

/* Texto */
#benefitEditorDialog button[type="submit"] {
  color: #FFFFFF;
}


/* ==========================================================================
   ADMIN — "Guardar Usuario"
   ========================================================================== */

/* Fondo */
#userEditorDialog button[type="submit"] {
  background: #1E7A72;
}

/* Texto */
#userEditorDialog button[type="submit"] {
  color: #FFFFFF;
}


/* ==========================================================================
   ADMIN — "Quitar imagen"
   ========================================================================== */

/* Fondo */
#postRemoveImgBtn {
  background: #B43A3A;
}

/* Texto */
#postRemoveImgBtn {
  color: #FFFFFF;
}


/* ==========================================================================
   ADMIN — "Quitar logo"
   ========================================================================== */

/* Fondo */
#benRemoveLogoBtn {
  background: #B43A3A;
}

/* Texto */
#benRemoveLogoBtn {
  color: #FFFFFF;
}


/* ==========================================================================
   ESTADO — ABIERTO
   ========================================================================== */

/* Fondo */
.status-tag--open {
  background: #E8F5E9;
}

/* Texto */
.status-tag--open {
  color: #2E7D32;
}


/* ==========================================================================
   ESTADO — CERRADO
   ========================================================================== */

/* Fondo */
.status-tag--closed {
  background: #FFEBEE;
}

/* Texto */
.status-tag--closed {
  color: #C62828;
}


/* ==========================================================================
   TARJETAS
   ========================================================================== */

/* Fondo de las tarjetas */
.plate,
.person__plate,
.press,
.perk,
.commissions > div {
  background: #062f2a;
}

/* Títulos de las tarjetas */
.plate h3,
.person__plate h3,
.press h3,
.perk h3,
.commissions > div h3 {
  color: #173F40;
}

/* Texto de las tarjetas */
.plate p,
.person__plate p,
.press p,
.perk p,
.commissions > div p {
  color: #425B57;
}


/* ==========================================================================
   TIMELINE
   ========================================================================== */

/* Texto de los botones del timeline */
.timeline__btn {
  color: #173F40;
}

/* Fondo del botón activo */
.timeline__btn.is-active {
  background: #1E7A72;
}

/* Texto del botón activo */
.timeline__btn.is-active {
  color: #FFFFFF;
}


/* ==========================================================================
   BOTONES DE ICONOS
   ========================================================================== */

/* Fondo */
.icon-btn {
  background: #FFFFFF;
}

/* Icono / texto */
.icon-btn {
  color: #173F40;
}


/* ==========================================================================
   MODALES
   ========================================================================== */

/* Fondo del modal */
.dlg {
  background: #FFFFFF;
}

/* Título del modal */
.dlg__head h2 {
  color: #173F40;
}

/* Texto del modal */
.dlg__body,
.dlg__body label {
  color: #425B57;
}


/* ==========================================================================
   VISOR DE IMÁGENES
   ========================================================================== */

/* Fondo del visor */
.viewer {
  background: rgba(10, 20, 18, .96);
}

/* Texto debajo de la imagen */
.viewer__stage figcaption {
  color: #E9E4D8;
}

/* Fondo de botones del visor */
.viewer .icon-btn {
  background: rgba(10, 20, 18, .5);
}

/* Color de botones del visor */
.viewer .icon-btn {
  color: #E9E4D8;
}


/* ==========================================================================
   LINKS EN SECCIONES CLARAS
   ========================================================================== */

/* Color de links */
.info-section a,
.docs-section a,
.enroll a,
.speakers-section a,
.rental-section a {
  color: #000000;
}


/* ==========================================================================
   LINKS EN SECCIONES OSCURAS
   ========================================================================== */

/* Color de links */
.cover a,
#recorrido a,
#historia a,
#registro a,
#organizacion a,
#voces a,
#auspiciantes a {
  color: #8CE9EF;
}


/* ==========================================================================
   LOGÍSTICA, CONFIRMACIÓN DE ALMUERZO Y PRESTADORES TURÍSTICOS
   ========================================================================== */
.logistics-notice {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px solid color-mix(in oklab, var(--lake) 32%, var(--rule));
  border-left: 4px solid var(--lake);
  border-radius: 12px;
  /* background: color-mix(in oklab, var(--lake-wash) 62%, var(--paper)); */
}
.logistics-notice__icon { font-size: 1.8rem; line-height: 1.2; }
.logistics-notice h3 { margin: 0; font-family: var(--serif); font-size: 1.2rem; color: var(--ink); }
.logistics-notice p { margin: .45rem 0 0; color: var(--ink-2); line-height: 1.6; }
.lunch-confirmation {
  display: grid;
  gap: .65rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #e6c56b;
  border-radius: 10px;
  background: #fff8e6;
  color: #493914;
}
.lunch-confirmation strong { line-height: 1.45; }
.lunch-confirmation p { margin: 0; color: #604d2b; font-size: .9rem; }
.lunch-confirmation__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  padding: .7rem 1rem;
  border-radius: 999px;
  background: #18794e;
  color: #fff !important;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.lunch-confirmation__button:hover { background: #11633e; transform: translateY(-1px); }
.providers-section { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--paper); }
.providers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.provider-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--rule); border-radius: 14px; background: #fff; }
.provider-card__icon { margin-bottom: 1rem; font-size: 2rem; }
.provider-card h3 { margin: 0; font-family: var(--serif); font-size: 1.35rem; line-height: 1.15; color: var(--ink); }
.provider-card p { margin: .75rem 0 1.25rem; color: var(--ink-2); font-size: .94rem; line-height: 1.6; }
.provider-card a { display: inline-flex; gap: .4rem; align-items: center; margin-top: auto; color: var(--lake) !important; font-weight: 700; text-decoration: none; }
.provider-card a:hover { text-decoration: underline; }
.provider-card--invite { background: color-mix(in oklab, var(--lake-wash) 45%, #fff); }
@media (max-width: 800px) { .providers-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .logistics-notice { padding: 1rem; } .lunch-confirmation__button { width: 100%; text-align: center; } }



/* ==========================================
   RECORRIDO POR TRAMOS - AJUSTE PARA CELULARES
   ========================================== */

@media (max-width: 600px) {

  /* Lista de etapas */
  #recorrido .stages {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    margin: 0;
  }

  /* Cada tramo queda dentro de su propio recuadro */
  #recorrido .stage {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.85rem;
    row-gap: 0.35rem;
    align-items: start;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 1rem;
    border: 1px solid var(--rule);
    border-radius: 14px;
    /* background: var(--paper); */
    text-align: left;
    transform: none;
  }

  /* Número del tramo */
  #recorrido .stage__step {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    margin: 0;
    box-sizing: border-box;
    border-radius: 50%;
    font-size: 0.9rem;
  }

  /* Nombre del lugar */
  #recorrido .stage__name {
    grid-column: 2;
    grid-row: 1;

    min-width: 0;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;

    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Descripción del tramo */
  #recorrido .stage__text {
    grid-column: 2;
    grid-row: 2;

    min-width: 0;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;

    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Evita que los efectos desplacen las tarjetas */
  #recorrido .stage:hover,
  #recorrido .stage.is-lit {
    transform: none;
  }

  /* Mantiene el último tramo con el mismo formato */
  #recorrido .stage--end {
    border-radius: 14px;
  }
}