/* =====================================================================
   Media Maratón de Cundinamarca 2026 · Anapoima
   Hoja de estilos única. Orden: tokens, base, layout, componentes,
   secciones, utilidades, impresión.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme: light;

  /* Fondos: blanco, y el gris de fondo de gov.co para alternar franjas */
  --crema:      #FFFFFF;
  --crema-2:    #F6F8F9;
  --superficie: #FFFFFF;
  --tinta:      #152437;
  --tinta-2:    #4B4B4B;
  --tinta-3:    #6E7B88;
  --linea:      #DCE4EC;
  --linea-2:    #B9C6D3;

  /* Bandas oscuras, iguales en los dos temas */
  --noche:      #00244A;
  --noche-2:    #003765;
  --sobre-noche:#FFFFFF;

  /* Paleta institucional del Kit UI de gov.co */
  --azul-profundo: #004884;
  --azul-marca:    #3366CC;
  --azul-primario: #0943B5;
  --azul-claro:    #E6EFFD;
  /* Azul de la familia institucional aclarado para leerse sobre la foto de
     portada. El azul del logotipo sobre ese fondo da 1,9:1 y no se lee; este
     da 6,9:1 y sigue siendo reconociblemente el mismo azul. */
  --azul-titular:  #7FA9F5;

  /* El boton principal lleva su propio par de colores y no reutiliza el azul
     de los enlaces. En tema oscuro ese azul se aclara para que los enlaces se
     lean, y el texto blanco encima caia a 2,88:1. Con su propio par, el boton
     cumple en los dos temas. */
  --boton-azul:       #0943B5;
  --sobre-boton-azul: #FFFFFF;   /* 8,46:1 */

  --verde:      #004884;   /* superficie institucional */
  --verde-vivo: #0943B5;   /* acento legible sobre blanco, 8.46:1 */
  --verde-claro:#FFAB00;   /* acento sobre oscuro */
  --lima:       #FFAB00;
  --sol:        #FFAB00;
  --sol-texto:  #9E6A00;   /* amarillo legible sobre blanco, 4.65:1 */
  --brasa:      #A80521;   /* rojo institucional, accion */
  --brasa-texto:#A80521;   /* ya cumple sobre blanco, 7.75:1 */
  --agua:       #068561;   /* verde gov legible sobre blanco, 4.63:1 */
  --agua-vivo:  #069169;

  --sobre-verde:#FFFFFF;
  --sobre-sol:  #152437;
  --sobre-brasa:#FFFFFF;   /* blanco sobre rojo, 7.75:1 */
  --sobre-lima: #152437;
  --foco:       #0943B5;

  /* Escala de profundidad, en azul de sombra y no en negro neutro */
  --elev-1: 0 1px 2px rgba(0,36,74,.06), 0 1px 3px rgba(0,36,74,.09);
  --elev-2: 0 2px 4px -1px rgba(0,36,74,.08), 0 4px 8px -2px rgba(0,36,74,.08);
  --elev-3: 0 4px 8px -2px rgba(0,36,74,.09), 0 12px 20px -6px rgba(0,36,74,.12);
  --elev-4: 0 8px 16px -4px rgba(0,36,74,.11), 0 24px 40px -12px rgba(0,36,74,.16);
  --elev-5: 0 16px 32px -8px rgba(0,36,74,.16), 0 40px 64px -20px rgba(0,36,74,.24);

  --sombra-1: var(--elev-1);
  --sombra-2: var(--elev-3);
  --sombra-3: var(--elev-5);

  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --texto:   "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ancho: 1180px;
  --ancho-texto: 68ch;
  --r: 3px;
  --r-g: 10px;

  --nav-h: 68px;
}

/* ---------- Puente con Bootstrap ---------- */
:root{
  --bs-body-bg: var(--crema);
  --bs-body-color: var(--tinta);
  --bs-body-font-family: var(--texto);
  --bs-body-font-size: 16.5px;
  --bs-body-line-height: 1.58;
  --bs-emphasis-color: var(--tinta);
  --bs-secondary-color: var(--tinta-2);
  --bs-tertiary-color: var(--tinta-3);
  --bs-border-color: var(--linea);
  --bs-border-radius: var(--r-g);
  --bs-link-color: var(--azul-primario);
  --bs-link-hover-color: var(--azul-profundo);
  --bs-primary: #004884;
  --bs-primary-rgb: 0,72,132;
  --bs-danger: #A80521;
  --bs-danger-rgb: 168,5,33;
  --bs-warning: #FFAB00;
  --bs-warning-rgb: 255,171,0;
  --bs-success: #069169;
  --bs-success-rgb: 6,145,105;
  --bs-info: #3366CC;
  --bs-info-rgb: 51,102,204;
  --bs-focus-ring-color: rgba(9,67,181,.35);
  --bs-focus-ring-width: 3px;
}

/* El tema oscuro. El claro es el de :root, asi que no necesita bloque propio:
   poner data-tema="claro" simplemente no activa este. */
:root[data-tema="oscuro"]{
  color-scheme: dark;
  --crema:      #001A33;
  --crema-2:    #002444;
  --superficie: #032C50;
  --tinta:      #EAF2FB;
  --tinta-2:    #A8BDD2;
  --tinta-3:    #7E93A8;
  --linea:      #0B3A63;
  --linea-2:    #1A5286;
  --azul-profundo: #004884;
  --azul-marca:    #5B9BE8;
  --azul-primario: #5B9BE8;
  --azul-claro:    #0B3A63;
  --boton-azul:       #5B9BE8;
  --sobre-boton-azul: #0B1B2B;   /* 6,05:1 sobre el azul claro del tema oscuro */
  --verde:      #003765;
  --verde-vivo: #FFAB00;
  --verde-claro:#FFC24D;
  --lima:       #FFAB00;
  --sol:        #FFAB00;
  --sol-texto:  #FFC24D;
  --brasa:      #E0142F;
  --brasa-texto:#FF8A99;
  --agua:       #14B98A;
  --agua-vivo:  #14B98A;
  --sobre-verde:#FFFFFF;
  --sobre-sol:  #152437;
  --sobre-brasa:#FFFFFF;
  --sobre-lima: #152437;
  --foco:       #FFAB00;
  --elev-1: 0 1px 2px rgba(0,0,0,.5);
  --elev-2: 0 2px 6px rgba(0,0,0,.55);
  --elev-3: 0 6px 16px rgba(0,0,0,.6);
  --elev-4: 0 12px 28px rgba(0,0,0,.66);
  --elev-5: 0 24px 56px rgba(0,0,0,.75);
  --bs-body-bg: #001A33;
  --bs-body-color: #EAF2FB;
  --bs-border-color: #0B3A63;
  --bs-link-color: #5B9BE8;
}

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

/* overflow-x: clip y no hidden. Parece lo mismo y no lo es: "hidden" convierte
   este elemento en un contenedor de desplazamiento, y eso deja sin efecto el
   position:sticky de la barra de navegacion, que se quedaba arriba del todo en
   vez de acompanar al lector. "clip" recorta igual sin crear ese contenedor. */
html{ overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16.5px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Por el mismo motivo que en html: hidden crearia un contenedor de
     desplazamiento y la barra dejaria de quedarse fija al desplazar. */
  overflow-x: clip;
}

img{ max-width:100%; display:block; }
a{ color: inherit; }
:focus-visible{ outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 2px; }

h1,h2,h3,h4{ margin:0; text-wrap: balance; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.salto-contenido{
  position:absolute; left:-9999px; top:0; z-index:100;
  background: var(--verde); color: var(--sobre-verde);
  padding:12px 18px; font-weight:700; text-decoration:none;
}
.salto-contenido:focus{ left:12px; top:12px; }

/* ---------- 3. Layout ---------- */
.envoltura{ max-width: var(--ancho); margin:0 auto; padding: 0 26px; }
.envoltura-ancha{ max-width: 1480px; margin:0 auto; padding: 0 26px; }
@media (max-width:640px){ .envoltura, .envoltura-ancha{ padding: 0 18px; } }

section[id]{ padding: 84px 0; border-bottom: 1px solid var(--linea); position: relative; }
@media (max-width:760px){ section[id]{ padding: 58px 0; } }
section.sin-linea{ border-bottom: 0; }

/* ---------- 4. Aviso de borrador ---------- */
.aviso{
  background: var(--sol); color: var(--sobre-sol);
  font-family: var(--mono); font-size: 12px; letter-spacing:.02em;
  padding: 10px 26px; text-align:center; line-height:1.5;
  display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap;
}
.aviso b{ font-weight:600; }
.aviso button{
  font-family: var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  background: var(--sobre-sol); color: var(--sol); border:0; border-radius:99px;
  padding:4px 12px; cursor:pointer;
}

/* ---------- 5. Navegación ---------- */
.nav{
  position: sticky; top:0; z-index:60;
  background: color-mix(in srgb, var(--crema) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--linea);
}
.nav-in{
  display:flex; align-items:center; gap:22px; height: var(--nav-h);
  max-width: var(--ancho); margin:0 auto; padding: 0 26px;
}
.marca{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; }
.marca-sigla{
  font-family: var(--display); font-size: 21px; line-height:1; letter-spacing:.02em;
  text-transform: uppercase; white-space:nowrap;
}
.marca-sigla i{ font-style:normal; color: var(--verde-vivo); }
.marca-pie{
  font-family: var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--tinta-3); display:block; margin-top:2px;
}
.nav-links{ display:flex; gap:18px; margin-left:auto; font-size:13.5px; font-weight:500; }
.nav-links a{ text-decoration:none; color: var(--tinta-2); padding:5px 0; border-bottom:2px solid transparent; white-space:nowrap; }
.nav-links a:hover{ color: var(--tinta); border-bottom-color: var(--sol); }
.nav-links a[aria-current="true"]{ color: var(--tinta); border-bottom-color: var(--verde-vivo); }
@media (max-width:1080px){ .nav-links{ display:none; } }

.nav-acciones{ display:flex; align-items:center; gap:10px; margin-left:auto; }
@media (min-width:1081px){ .nav-acciones{ margin-left:0; } }
.btn-tema{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--linea-2);
  background: transparent; color: var(--tinta-2); cursor:pointer;
  display:grid; place-items:center; font-size:15px; line-height:1; flex:0 0 auto;
}
.btn-tema:hover{ border-color: var(--tinta-2); color: var(--tinta); }
.btn-nav{
  background: var(--boton-azul); color: var(--sobre-boton-azul); text-decoration:none;
  font-weight:700; font-size:13px; padding:10px 18px; border-radius:99px;
  letter-spacing:.01em; white-space:nowrap;
}
.btn-nav:hover{ background: color-mix(in srgb, var(--brasa) 85%, #000); }
@media (max-width:420px){ .btn-nav{ display:none; } }

.progreso{ position:absolute; left:0; bottom:-1px; height:2px; background: var(--verde-vivo); width:0; }

/* ---------- 6. Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--texto); font-weight:700; font-size:15px;
  /* Capsula. El radio va muy por encima de la altura del boton para que se
     redondee entero sin tener que calcularlo segun el tamano de cada uno. */
  padding:14px 28px; border-radius:99px; border:2px solid transparent;
  text-decoration:none; cursor:pointer; line-height:1.2;
  transition: transform .12s ease, background .16s ease, border-color .16s ease;
}
.btn:active{ transform: translateY(1px); }
/* Blanco sobre este azul da 8,46:1, muy por encima de lo exigido. */
.btn-primario{ background: var(--boton-azul); color: var(--sobre-boton-azul); border-color: var(--boton-azul); }
.btn-primario:hover{
  background: color-mix(in srgb, var(--boton-azul) 86%, #000);
  border-color: color-mix(in srgb, var(--boton-azul) 86%, #000);
}
.btn-solido{ background: var(--verde); color: var(--sobre-verde); border-color: var(--verde); }
.btn-solido:hover{ background: var(--verde-vivo); border-color: var(--verde-vivo); }
.btn-fantasma{ background: transparent; color: var(--tinta); border-color: var(--linea-2); }
.btn-fantasma:hover{ border-color: var(--tinta); background: var(--crema-2); }
.btn-claro{ background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(6px); }
.btn-claro:hover{ background: rgba(255,255,255,.22); border-color:#fff; }

/* ---------- 7. Portada ---------- */
.portada{
  position: relative; isolation: isolate;
  min-height: min(92vh, 860px);
  display: grid; align-items: end;
  color:#fff;
  background: var(--verde);
  overflow: hidden;
}
.portada-foto{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit: cover; object-position: 50% 42%;
}
.portada::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(0,26,52,.60) 0%, rgba(0,26,52,.22) 38%, rgba(0,26,52,.90) 100%),
    radial-gradient(125% 85% at 10% 110%, rgba(0,72,132,.95) 0%, transparent 64%);
}
.portada-in{
  position:relative; max-width: var(--ancho); margin:0 auto; width:100%;
  padding: 128px 26px 46px;
  display:grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
  gap: 48px; align-items:end;
}
@media (max-width:960px){
  .portada-in{ grid-template-columns:1fr; gap:32px; padding-top: 96px; }
}
@media (max-width:640px){ .portada-in{ padding-left:18px; padding-right:18px; } }

.cintillo{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(6px);
  padding:7px 14px; border-radius:99px; margin-bottom:22px;
}
.cintillo::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--sol); }

.portada h1{
  font-family: var(--display); font-weight:400;
  font-size: clamp(44px, 8.6vw, 112px); line-height:.88;
  text-transform: uppercase; letter-spacing:-.005em;
  margin:0 0 22px; text-shadow: 0 2px 34px rgba(0,0,0,.45);
}
.portada h1 i{ font-style:normal; display:block; color: var(--azul-titular); }
.portada h1 u{ text-decoration:none; display:block; font-size:.44em; letter-spacing:.02em; opacity:.92; }

.portada-lede{
  font-size: 18.5px; line-height:1.5; max-width: 48ch; margin:0 0 20px;
  color: rgba(255,255,255,.9);
}

.tiras{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.tira{
  font-family: var(--display); font-size: 26px; line-height:1; letter-spacing:.02em;
  padding:10px 16px 8px; border:1.5px solid rgba(255,255,255,.42); border-radius: var(--r);
  text-transform:uppercase;
}
.tira b{ display:block; font-family: var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.14em; opacity:.78; margin-top:5px; }
.tira.destacada{ background: var(--sol); color: var(--sobre-sol); border-color: var(--sol); }

/* Precio y plazo de la portada.

   Va pegado a los botones y no arriba del todo: es el dato que se mira justo
   antes de decidir, no el titular. El amarillo es el mismo de la distancia
   destacada, para que la vista lo encuentre sin buscarlo. */
.portada-precio{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
  margin:0 0 18px;
}
.pp-valor{
  font-family: var(--display); font-weight:400; text-transform:uppercase;
  font-size: clamp(30px, 3.4vw, 42px); line-height:1; letter-spacing:.01em;
  color: var(--sol);
}
/* Sin cifra confirmada el texto es largo, y al tamaño del precio no cabe ni
   dice nada: se baja a tamaño de lectura. */
.pp-pendiente{ font-size: clamp(22px, 3vw, 30px); color: rgba(255,255,255,.92); }
/* En una linea, no apilado: la portada ya es mas alta que la pantalla y cada
   bloque que se añade empuja el boton de inscripcion mas abajo del pliegue. */
.pp-nota{
  font-family: var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color: rgba(255,255,255,.82); max-width:46ch;
}
.pp-nota b{ font-weight:600; color:#FFFFFF; }

.portada-acciones{ display:flex; flex-wrap:wrap; gap:12px; }

.baja{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  font-family: var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color: rgba(255,255,255,.7); text-decoration:none; display:grid; justify-items:center; gap:6px;
}
.baja span{ display:block; width:1px; height:22px; background: rgba(255,255,255,.5); animation: caer 1.9s ease-in-out infinite; }
@keyframes caer{ 0%,100%{ transform: scaleY(.4); transform-origin: top; opacity:.4 } 50%{ transform: scaleY(1); transform-origin: top; opacity:1 } }
@media (max-width:960px){ .baja{ display:none; } }

/* cronómetro */
.crono{
  background: rgba(0,26,52,.62); backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.2); border-radius: var(--r-g);
  padding: 22px; box-shadow: var(--sombra-3);
}
.crono h2{
  font-family: var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; margin:0 0 16px; opacity:.8;
}
.crono-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:7px; text-align:center; }
.crono-celda{ padding:13px 3px; background: rgba(255,255,255,.09); border-radius:3px; }
.crono-num{
  display:block; font-family: var(--mono); font-weight:600;
  font-size: clamp(22px, 4vw, 32px); line-height:1;
  font-variant-numeric: tabular-nums; color: var(--sol);
}
.crono-lab{ display:block; font-family: var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; opacity:.62; margin-top:7px; }
.crono-pie{ margin:16px 0 0; padding-top:14px; border-top:1px solid rgba(255,255,255,.18); font-size:13px; line-height:1.5; opacity:.86; }

/* ---------- 8. Marquesina ---------- */
.marquesina{
  background: var(--verde); color: var(--sobre-verde);
  overflow:hidden; padding:13px 0; border-bottom:1px solid var(--linea);
}
.marquesina-pista{ display:flex; gap:0; width:max-content; animation: correr 34s linear infinite; }
.marquesina:hover .marquesina-pista{ animation-play-state: paused; }
@keyframes correr{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.marquesina span{
  font-family: var(--display); font-size:17px; letter-spacing:.05em; text-transform:uppercase;
  padding:0 22px; white-space:nowrap; display:flex; align-items:center; gap:22px;
}
.marquesina span::after{ content:""; width:6px; height:6px; border-radius:50%; background: var(--sol); }

/* ---------- 9. Encabezados de sección ---------- */
.sec-cab{ margin-bottom:38px; max-width: var(--ancho-texto); }
.sec-num{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color: var(--verde-vivo); font-weight:500;
}
.sec-num::before{ content:""; width:26px; height:2px; background: var(--verde-vivo); }
.tit{
  font-family: var(--display); font-weight:400; text-transform:uppercase;
  font-size: clamp(30px, 5vw, 54px); line-height:.98; margin:12px 0 14px;
}
.tit em{ font-style:normal; color: var(--verde-vivo); }
.sec-cab p{ margin:0; color: var(--tinta-2); font-size:17px; }

.pendiente{
  display:inline-flex; align-items:center; gap:7px;
  font-family: var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  border:1px dashed var(--linea-2); color: var(--tinta-3);
  padding:3px 9px; border-radius:99px; margin-left:8px; vertical-align:middle;
  max-width:100%; text-wrap:pretty;
}
.pendiente::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--sol); flex:0 0 auto; }

/* ---------- 10. Franja de cifras ---------- */
.cifras{ background: var(--noche); color: var(--sobre-noche); padding:0; border-bottom:1px solid var(--linea); }
.cifras-in{ display:grid; grid-template-columns: repeat(4,1fr); max-width: var(--ancho); margin:0 auto; }
@media (max-width:820px){ .cifras-in{ grid-template-columns: repeat(2,1fr); } }
.cifra{ padding:34px 26px; border-right:1px solid rgba(255,255,255,.12); }
.cifra:last-child{ border-right:0; }
@media (max-width:820px){
  .cifra:nth-child(2n){ border-right:0; }
  .cifra:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.12); }
}
.cifra dt{ font-family: var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.6; margin-bottom:10px; }
.cifra dd{ margin:0; font-family: var(--display); font-size: clamp(30px,4.6vw,46px); line-height:.95; letter-spacing:.01em; }
.cifra dd small{ display:block; font-family: var(--texto); font-size:13px; font-weight:400; opacity:.72; margin-top:8px; letter-spacing:0; }
.cifra:nth-child(2) dd{ color: var(--sol); }
.cifra:nth-child(4) dd{ color: var(--verde-claro); }

/* ---------- 11. Bloques con foto ---------- */
.dupla{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 52px; align-items:center;
}
.dupla.invertida > .dupla-foto{ order:2; }
@media (max-width:900px){
  .dupla{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .dupla.invertida > .dupla-foto{ order:0; }
}
.dupla-foto{ position:relative; }
.dupla-foto img{
  width:100%; aspect-ratio: 4/3; object-fit:cover;
  border-radius: var(--r-g); box-shadow: var(--sombra-2);
}
.dupla-foto figcaption, .pie-foto{
  font-family: var(--mono); font-size:10.5px; letter-spacing:.06em;
  color: var(--tinta-3); margin-top:10px; line-height:1.45;
}
.sello{
  position:absolute; right:-14px; bottom:-14px;
  background: var(--sol); color: var(--sobre-sol);
  font-family: var(--display); font-size:15px; text-transform:uppercase; letter-spacing:.04em;
  padding:14px 18px; border-radius: var(--r); box-shadow: var(--sombra-2);
  max-width:190px; line-height:1.15;
}
@media (max-width:900px){ .sello{ right:12px; bottom:-12px; font-size:13px; padding:11px 14px; } }

.banda{
  position:relative; isolation:isolate; color:#fff;
  min-height: 460px; display:grid; align-items:center;
  border-bottom:1px solid var(--linea);
}
.banda > img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.banda::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(100deg, rgba(0,36,74,.94) 0%, rgba(0,36,74,.66) 46%, rgba(0,36,74,.24) 100%);
}
.banda-in{ max-width: var(--ancho); margin:0 auto; padding: 72px 26px; width:100%; }
.banda h2{
  font-family: var(--display); font-weight:400; text-transform:uppercase;
  font-size: clamp(30px,5.4vw,60px); line-height:.96; margin:12px 0 16px; max-width:18ch;
}
.banda p{ max-width: 52ch; color: rgba(255,255,255,.88); font-size:17px; }
.banda .sec-num{ color: var(--sol); }
.banda .sec-num::before{ background: var(--sol); }

/* ---------- 12. Modalidades ---------- */
.mods{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; margin-bottom:26px; }
@media (max-width:860px){ .mods{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:430px){ .mods{ grid-template-columns:minmax(0,1fr); } }
.mod{
  appearance:none; text-align:left; cursor:pointer; font-family:inherit; color:inherit;
  background: var(--superficie); border:1px solid var(--linea); border-top:4px solid var(--linea-2);
  border-radius: var(--r); padding:20px 18px 18px;
  transition: border-color .16s, transform .14s, box-shadow .16s;
}
.mod:hover{ transform: translateY(-3px); box-shadow: var(--sombra-2); }
.mod[aria-pressed="true"]{ border-color: var(--verde-vivo); border-top-color: var(--verde-vivo); box-shadow: var(--sombra-2); }
.mod-dist{ font-family: var(--display); font-size:40px; line-height:.86; text-transform:uppercase; display:block; }
.mod[aria-pressed="true"] .mod-dist{ color: var(--verde-vivo); }
.mod-nom{ display:block; font-size:13px; color: var(--tinta-2); margin-top:8px; }
.mod-hora{ display:block; font-family: var(--mono); font-size:12px; color: var(--tinta-3); margin-top:12px; font-weight:500; }

.panel{
  background: var(--superficie); border:1px solid var(--linea); border-radius: var(--r-g);
  overflow:hidden; display:grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
}
@media (max-width:900px){ .panel{ grid-template-columns:minmax(0,1fr); } }
.panel-foto{ position:relative; min-height:260px; }
.panel-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.panel-foto .etiqueta{
  position:absolute; left:0; bottom:0; background: var(--verde); color: var(--sobre-verde);
  font-family: var(--display); font-size:30px; text-transform:uppercase; padding:10px 18px 8px;
}
.panel-cuerpo{ padding:30px; }
@media (max-width:640px){ .panel-cuerpo{ padding:22px; } }
.panel-cuerpo h3{ font-family: var(--display); text-transform:uppercase; font-weight:400; font-size:30px; margin:0 0 4px; }
.panel-cuerpo .sub{ font-family: var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--tinta-3); margin:0 0 16px; }
.panel-cuerpo .nota{ color: var(--tinta-2); font-size:15.5px; max-width:52ch; margin:0 0 20px; }

.ficha{ display:grid; grid-template-columns:auto 1fr; gap:9px 22px; font-size:14.5px; margin:0 0 22px; }
.ficha dt{ color: var(--tinta-3); font-family: var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; padding-top:3px; }
.ficha dd{ margin:0; font-weight:500; }
.fichas{ display:flex; flex-wrap:wrap; gap:6px; }
.etiq{ font-family: var(--mono); font-size:11px; padding:3px 9px; border:1px solid var(--linea-2); border-radius:99px; color: var(--tinta-2); }

/* ---------- 13. Perfil y mapa ---------- */
.recorrido-caja{
  background: var(--superficie); border:1px solid var(--linea); border-radius: var(--r-g);
  padding:22px; display:grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap:26px;
}
@media (max-width:920px){ .recorrido-caja{ grid-template-columns:minmax(0,1fr); } }
.perfil-top{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:10px; flex-wrap:wrap; }
.perfil-top :is(h3,h4){ margin:0; font-family: var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--tinta-3); font-weight:500; }
.lectura{ font-family: var(--mono); font-size:13px; font-weight:600; font-variant-numeric: tabular-nums; color: var(--verde-vivo); }
svg.perfil{ display:block; width:100%; min-width:0; height:auto; background: var(--crema-2); border-radius: var(--r); }
.perfil-nota{ font-size:12.5px; color: var(--tinta-3); margin:12px 0 0; }

/* El perfil se recorre con el teclado, asi que tiene que verse cuando recibe
   el foco. Sin esto, quien navega con el tabulador no sabe que llego aqui. */
svg.perfil:focus-visible{ outline:3px solid var(--sol); outline-offset:3px; }

.perfil-ayuda{ font-size:12.5px; color: var(--tinta-2); margin:10px 0 0; }
.perfil-leyenda{
  display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:10px;
  font-family: var(--mono); font-size:11px; color: var(--tinta-2);
}
.perfil-leyenda i{
  display:inline-block; width:14px; height:3px; border-radius:2px;
  margin-right:6px; vertical-align:3px;
}

.perfil-datos{ margin-top:14px; }
.perfil-datos summary{
  cursor:pointer; font-family: var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color: var(--tinta-3);
}
.perfil-datos summary:focus-visible{ outline:2px solid var(--sol); outline-offset:3px; border-radius:4px; }

/* La tabla puede ser larga: se desplaza dentro de su marco y nunca empuja el
   ancho de la pagina. */
.perfil-tabla-marco{ max-height:260px; overflow:auto; margin-top:10px; border:1px solid var(--linea); border-radius: var(--r); }
.perfil-tabla{ width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric: tabular-nums; }
.perfil-tabla th, .perfil-tabla td{ padding:6px 12px; text-align:left; border-bottom:1px solid var(--linea); }
.perfil-tabla thead th{
  position:sticky; top:0; background: var(--superficie);
  font-family: var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color: var(--tinta-3); font-weight:500;
}
.perfil-tabla tbody tr:last-child td{ border-bottom:0; }
svg.mapa{ display:block; width:100%; height:auto; background: var(--crema-2); border-radius: var(--r); }
.mapa-leyenda{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-family: var(--mono); font-size:11px; color: var(--tinta-2); }
.mapa-leyenda i{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:-1px; }

/* ---------- 14. Calculadora ---------- */
.calc{ display:grid; grid-template-columns: minmax(0,330px) minmax(0,1fr); gap:38px; align-items:start; }
@media (max-width:860px){ .calc{ grid-template-columns:minmax(0,1fr); } }
.campo{ margin-bottom:16px; }
.campo label{ display:block; font-family: var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--tinta-3); margin-bottom:7px; }
.campo input, .campo select{
  width:100%; font-family: var(--mono); font-size:16px; font-variant-numeric: tabular-nums;
  padding:12px 13px; border:1px solid var(--linea-2); border-radius: var(--r);
  background: var(--superficie); color: var(--tinta);
}
.rango{ width:100%; accent-color: var(--verde-vivo); margin-top:10px; }
.ritmo-out{ background: var(--verde); color: var(--sobre-verde); border-radius: var(--r-g); padding:20px 22px; margin-top:8px; }
.ritmo-out .k{ font-family: var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.8; }
.ritmo-out .v{ font-family: var(--mono); font-size:34px; font-weight:600; line-height:1.1; font-variant-numeric: tabular-nums; display:block; margin-top:6px; color: var(--sol); }
.ritmo-out .n{ font-size:13px; margin:10px 0 0; opacity:.92; }

table.datos{ width:100%; border-collapse:collapse; font-family: var(--mono); font-size:13.5px; font-variant-numeric: tabular-nums; }
table.datos caption{ text-align:left; font-family: var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--tinta-3); padding-bottom:12px; }
table.datos th{ text-align:left; font-weight:500; color: var(--tinta-3); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:0 12px 9px 0; border-bottom:1px solid var(--linea-2); }
table.datos td{ padding:9px 12px 9px 0; border-bottom:1px solid var(--linea); }
table.datos tr.meta td{ font-weight:600; color: var(--verde-vivo); }
.tabla-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- 15. Tarjetas y rejillas ---------- */
.rejilla{ display:grid; grid-template-columns: repeat(auto-fit, minmax(262px,1fr)); gap:14px; }
.rejilla-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
@media (max-width:860px){ .rejilla-3{ grid-template-columns:minmax(0,1fr); } }

.tarjeta{
  background: var(--superficie); border:1px solid var(--linea); border-radius: var(--r-g);
  padding:24px; display:flex; flex-direction:column;
}
.tarjeta :is(h3,h4){ margin:0 0 10px; font-size:16.5px; font-weight:700; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px; }
.tarjeta p{ font-size:14.5px; color: var(--tinta-2); }
.tarjeta ul{ margin:10px 0 0; padding-left:19px; font-size:14.5px; color: var(--tinta-2); }
.tarjeta li{ margin-bottom:6px; }
.tarjeta li:last-child{ margin-bottom:0; }
.tarjeta .icono{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background: var(--crema-2); color: var(--verde-vivo); font-size:18px; margin-bottom:14px;
}
.tarjeta.acento{ border-color: var(--verde-vivo); border-left-width:4px; }

.tarjeta-foto{
  background: var(--superficie); border:1px solid var(--linea); border-radius: var(--r-g);
  overflow:hidden; display:flex; flex-direction:column;
}
.tarjeta-foto > img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.tarjeta-foto .cuerpo{ padding:20px 22px 22px; flex:1; }
.tarjeta-foto :is(h3,h4){ margin:0 0 8px; font-size:17px; font-weight:700; }
.tarjeta-foto p{ margin:0; font-size:14.5px; color: var(--tinta-2); }

.lista-lineas{ border-top:1px solid var(--linea); }
.linea{ display:grid; grid-template-columns: 150px 1fr; gap:20px; padding:16px 0; border-bottom:1px solid var(--linea); align-items:start; }
@media (max-width:640px){ .linea{ grid-template-columns:1fr; gap:6px; } }
.linea dt, .linea .k{ font-family: var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--tinta-3); padding-top:2px; }
.linea dd, .linea .v{ margin:0; font-size:15.5px; }

/* ---------- 16. Horarios / programación ---------- */
.horario{ display:grid; gap:0; border-top:2px solid var(--tinta); }
.horario-fila{
  display:grid; grid-template-columns: 92px 92px 1fr auto; gap:18px; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--linea);
}
@media (max-width:760px){
  .horario-fila{ grid-template-columns: 80px 1fr; gap:8px 14px; }
  .horario-fila .h-dist{ grid-column:2; }
  .horario-fila .h-desc{ grid-column:1/-1; }
  .horario-fila .h-etiq{ grid-column:1/-1; justify-self:start; }
}
.h-hora{ font-family: var(--mono); font-weight:600; font-size:15px; font-variant-numeric: tabular-nums; color: var(--verde-vivo); }
.h-dist{ font-family: var(--display); font-size:24px; line-height:1; text-transform:uppercase; }
.h-desc{ font-size:14.5px; color: var(--tinta-2); }
.h-etiq{ font-family: var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--tinta-3); border:1px solid var(--linea-2); padding:3px 9px; border-radius:99px; }
.dia-cab{
  font-family: var(--display); text-transform:uppercase; font-size:22px;
  padding:22px 0 10px; color: var(--tinta-3); letter-spacing:.04em;
}

/* ---------- 17. Kits ---------- */
.kits{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,320px); gap:16px; }
@media (max-width:1000px){ .kits{ grid-template-columns:1fr 1fr; } .kits .kit-qr{ grid-column:1/-1; } }
@media (max-width:640px){ .kits{ grid-template-columns:minmax(0,1fr); } }
.kit-dia{
  background: var(--superficie); border:1px solid var(--linea); border-radius: var(--r-g);
  padding:26px; position:relative; overflow:hidden;
}
.kit-dia::before{
  content: attr(data-dia); position:absolute; right:-8px; top:-16px;
  font-family: var(--display); font-size:96px; color: var(--crema-2); line-height:1; z-index:0;
}
.kit-dia > *{ position:relative; z-index:1; }
.kit-dia :is(h3,h4){ font-family: var(--display); text-transform:uppercase; font-weight:400; font-size:24px; margin:0 0 4px; }
.kit-dia .cuando{ font-family: var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--verde-vivo); margin-bottom:16px; }
.kit-qr{ background: var(--verde); color: var(--sobre-verde); border-radius: var(--r-g); padding:26px; display:flex; flex-direction:column; gap:16px; }
.kit-qr :is(h3,h4){ font-family: var(--display); text-transform:uppercase; font-weight:400; font-size:22px; margin:0; }
.qr-marco{ background:#fff; border-radius: var(--r); padding:12px; align-self:flex-start; }
.qr-marco svg{ display:block; width:132px; height:132px; }
.kit-qr p{ font-size:13.5px; opacity:.9; margin:0; }

.alerta{
  background: color-mix(in srgb, var(--brasa) 10%, var(--superficie));
  border:1px solid var(--brasa); border-left-width:5px;
  border-radius: 0 var(--r-g) var(--r-g) 0; padding:20px 24px; margin-top:18px;
}
.alerta strong{ color: var(--brasa-texto); }
.alerta p{ margin:0; font-size:15.5px; }

.contenido-kit{ display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:0; border-top:1px solid var(--linea); margin-top:26px; }
.contenido-kit div{ padding:18px 20px 18px 0; border-right:1px solid var(--linea); }
.contenido-kit div:last-child{ border-right:0; }
.contenido-kit :is(h4,h5){ margin:0 0 5px; font-size:14.5px; font-weight:700; }
.contenido-kit p{ margin:0; font-size:13.5px; color: var(--tinta-2); }

/* ---------- 18. Tarifas ---------- */
.tarifas{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
@media (max-width:800px){ .tarifas{ grid-template-columns:minmax(0,1fr); } }
.tarifa{ background: var(--superficie); border:1px solid var(--linea); border-radius: var(--r-g); padding:26px; }
.tarifa.viva{ border-color: var(--verde-vivo); border-width:2px; box-shadow: var(--sombra-2); }
.tarifa .fase{ font-family: var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--tinta-3); }
.tarifa .valor{ font-family: var(--display); font-size:44px; line-height:1; margin:12px 0 6px; }
.tarifa.viva .valor{ color: var(--verde-vivo); }
.tarifa .cuando{ font-size:14px; color: var(--tinta-2); }
.tarifa .marca-viva{
  display:inline-block; margin-top:14px; font-family: var(--mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; background: var(--brasa); color: var(--sobre-brasa);
  padding:4px 10px; border-radius:99px;
}

/* ---------- 19. Mosaico ---------- */
.mosaico{ display:grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 190px; gap:10px; }
@media (max-width:900px){ .mosaico{ grid-template-columns: repeat(2,1fr); grid-auto-rows:160px; } }
.mosaico figure{ margin:0; position:relative; overflow:hidden; border-radius: var(--r); }
.mosaico img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.mosaico figure:hover img{ transform: scale(1.05); }
.mosaico figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:12px 14px;
  background: linear-gradient(180deg, transparent, rgba(0,26,52,.88));
  color:#fff; font-family: var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
}
.mosaico .ancha{ grid-column: span 2; }
.mosaico .alta{ grid-row: span 2; }
@media (max-width:900px){ .mosaico .alta{ grid-row: span 1; } }

/* ---------- 20. Emergencias ---------- */
.emergencia{
  background: var(--noche); color: var(--sobre-noche); border-radius: var(--r-g);
  padding:30px; display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap:34px;
}
@media (max-width:860px){ .emergencia{ grid-template-columns:minmax(0,1fr); gap:24px; padding:24px; } }
.emergencia h3{ font-family: var(--display); text-transform:uppercase; font-weight:400; font-size:30px; margin:0 0 10px; }
.emergencia .linea-123{
  font-family: var(--display); font-size:74px; line-height:1; color: var(--sol); margin:10px 0 6px;
}
.emergencia p{ font-size:15px; opacity:.86; }
.emergencia ol{ margin:0; padding-left:20px; font-size:15px; }
.emergencia li{ margin-bottom:10px; }
.emergencia li::marker{ color: var(--sol); font-weight:700; }

/* ---------- 21. FAQ ---------- */
.faq{ max-width: 78ch; }
details{ border-bottom:1px solid var(--linea); }
details summary{
  cursor:pointer; list-style:none; padding:18px 40px 18px 0; position:relative;
  font-weight:600; font-size:16.5px;
}
details summary::-webkit-details-marker{ display:none; }
details summary::after{
  content:"+"; position:absolute; right:6px; top:15px;
  font-family: var(--mono); font-size:22px; color: var(--verde-vivo); line-height:1;
}
details[open] summary::after{ content:"\2013"; }
details .respuesta{ padding-bottom:20px; color: var(--tinta-2); font-size:15.5px; max-width:68ch; }

/* ---------- 22. Responsabilidad ---------- */
.legal-bloque{ display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.legal-item{ border-top:3px solid var(--tinta); padding-top:16px; }
.legal-item :is(h3,h4){ font-size:16px; margin:0 0 8px; font-weight:700; }
.legal-item p{ font-size:14.5px; color: var(--tinta-2); margin:0; }

/* ---------- 23. Registro ---------- */
.registro{ background: var(--verde); color: var(--sobre-verde); border-bottom:0; }
.registro .sec-num{ color: var(--sol); }
.registro .sec-num::before{ background: var(--sol); }
.registro h2.tit em{ color: var(--sol); }
.registro .sec-cab p{ color: rgba(245,242,234,.82); }
.form-caja{
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  border-radius: var(--r-g); padding:28px;
  display:grid; grid-template-columns: repeat(2,1fr); gap:18px; max-width:680px;
}
@media (max-width:640px){ .form-caja{ grid-template-columns:minmax(0,1fr); padding:20px; } }
.form-caja .ancho{ grid-column:1/-1; }
.form-caja label{ display:block; font-family: var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: rgba(245,242,234,.7); margin-bottom:7px; }
.form-caja input, .form-caja select{
  width:100%; font-family: var(--texto); font-size:15px; padding:12px 13px;
  border:1px solid rgba(255,255,255,.28); border-radius: var(--r);
  background: rgba(0,0,0,.22); color: var(--sobre-verde);
}
.form-caja input::placeholder{ color: rgba(245,242,234,.4); }
.form-caja select option{ color:#111; }
.err{ color: #FFB4A0; font-size:12.5px; margin-top:6px; min-height:1em; }
.ok-msg{
  grid-column:1/-1; background: rgba(255,255,255,.12); border-left:3px solid var(--sol);
  padding:16px 18px; font-size:14.5px; border-radius: 0 var(--r) var(--r) 0;
}

/* ---------- 24. Barra fija ---------- */
.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none; gap:12px; align-items:center;
  background: var(--superficie); border-top:1px solid var(--linea-2);
  padding:10px 16px; box-shadow: 0 -10px 30px -20px rgba(0,0,0,.7);
}
.barra .txt{ font-family: var(--mono); font-size:11.5px; color: var(--tinta-2); line-height:1.3; }
.barra .txt b{ display:block; color: var(--tinta); font-size:13px; }
.barra .btn{ margin-left:auto; padding:12px 18px; font-size:14px; }
@media (max-width:760px){ .barra{ display:flex; } body{ padding-bottom:70px; } }

/* ---------- 25. Pie ---------- */
footer{ background: var(--noche); color: var(--sobre-noche); padding:56px 0 40px; }
.pie-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:36px; }
footer strong{
  display:block; color:#fff; font-family: var(--display); font-weight:400;
  text-transform:uppercase; font-size:19px; margin-bottom:12px; letter-spacing:.02em;
}
footer a{ color: var(--sol); }
footer p{ font-size:14px; opacity:.82; }
.creditos{
  margin-top:38px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  font-size:12px; opacity:.62; line-height:1.6;
}
.creditos h6{ font-family: var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; margin:0 0 10px; opacity:.9; }
.creditos ul{ margin:0; padding:0; list-style:none; columns:2; column-gap:32px; }
@media (max-width:700px){ .creditos ul{ columns:1; } }
.creditos li{ margin-bottom:5px; break-inside:avoid; }
.legal-pie{ margin-top:24px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); font-size:12.5px; opacity:.62; max-width:88ch; }

/* --- Pie unificado (componente _componentes/pie.html.twig) ---
   Las opacidades de aqui se midieron sobre --noche #00244A: .82 da 10.8:1 y
   .68 da 7.7:1, ambas holgadas para WCAG AA. Si alguien oscurece --noche hay
   que volver a medirlas antes de bajarlas mas. */
.pie-lista{ list-style:none; margin:0; padding:0; font-size:14px; }
.pie-lista li{ margin-bottom:7px; opacity:.82; line-height:1.45; }
.pie-lista a{ text-decoration:none; border-bottom:1px solid transparent; }
.pie-lista a:hover, .pie-lista a:focus-visible{ border-bottom-color: currentColor; }

/* El unico numero del pie que alguien puede necesitar con prisa. Se separa del
   resto para que no compita con la linea de atencion administrativa. */
.pie-emergencia{
  display:flex; align-items:baseline; gap:10px;
  margin:18px 0 0; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.14);
}
.pie-emergencia span{
  font-family: var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; opacity:.72;
}
.pie-emergencia a{
  font-family: var(--display); font-size:26px; line-height:1;
  text-decoration:none; color: var(--sol);
}

.pie-legal{
  margin-top:40px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.14);
  max-width:92ch;
}
.pie-legal h3{
  font-family: var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; margin:0 0 10px; opacity:.72; font-weight:400;
}
.pie-legal p{ font-size:13px; line-height:1.65; opacity:.68; margin:0 0 10px; }
.pie-legal a{ color: var(--sol); }

.pie-creditos{ margin:16px 0; font-size:13px; }
.pie-creditos summary{
  cursor:pointer; opacity:.72; font-size:12.5px;
  font-family: var(--mono); letter-spacing:.06em; text-transform:uppercase;
}
.pie-creditos summary:focus-visible{ outline:2px solid var(--sol); outline-offset:3px; border-radius:4px; }
.pie-creditos p{ margin-top:10px; }
.pie-creditos code{ font-size:.92em; opacity:.9; }

/* Un aviso, no una nota al pie: quien publica cifras provisionales necesita
   que se vea que lo son. */
.pie-borrador{
  border-left:3px solid var(--sol);
  padding:2px 0 2px 14px;
  opacity:.8 !important;
}
.pie-borrador strong{
  display:inline; font-family:inherit; font-size:inherit;
  text-transform:none; letter-spacing:0; margin:0; color:#fff;
}

.pie-firma{
  display:flex; flex-wrap:wrap; gap:8px 22px; align-items:baseline;
  margin-top:22px !important; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.14);
  font-family: var(--mono); font-size:11.5px; letter-spacing:.06em;
}
.pie-arriba{ margin-left:auto; text-decoration:none; }
.pie-arriba:hover, .pie-arriba:focus-visible{ text-decoration:underline; }

@media (max-width:640px){
  footer{ padding:40px 0 32px; }
  .pie-grid{ gap:28px; }
}

/* ---------- 26. Revelado al desplazar ---------- */
.revelar{ opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.revelar.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .revelar{ opacity:1; transform:none; } }

/* ---------- 27. Impresión ---------- */
@media print{
  .nav,.barra,.aviso,.baja,.marquesina,.btn,.form-caja{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .portada{ min-height:auto; color:#000; }
  .portada-foto, .portada::after{ display:none; }
  /* El precio de la portada esta pensado sobre la foto: amarillo y blanco. En
     papel, que es blanco, eso no se ve. */
  .pp-valor, .pp-nota, .pp-nota b{ color:#000 !important; }
  section[id]{ padding:18pt 0; page-break-inside:avoid; }
  .banda{ color:#000; min-height:auto; }
  .banda > img, .banda::after{ display:none; }
}

/* ---------- 28. Cupos en vivo por distancia ---------- */
/* La ocupacion sale de la base de datos. El color cambia solo cuando la
   distancia se acerca al lleno: es la unica urgencia honesta de una carrera. */
.mod-cupos{ display:block; margin-top:14px; }
.mod-barra{
  display:block; height:5px; border-radius:99px;
  background: var(--crema-2); overflow:hidden;
}
.mod-barra i{
  display:block; height:100%; width:0; border-radius:99px;
  background: var(--verde-vivo);
  transition: width .9s cubic-bezier(.22,.8,.28,1);
}
.mod.medido .mod-barra i{ width: var(--ocupado, 0%); }
.mod-cupos[data-estado="apretado"] .mod-barra i{ background: var(--sol); }
.mod-cupos[data-estado="critico"]  .mod-barra i{ background: var(--brasa); }
.mod-cupos[data-estado="agotado"]  .mod-barra i{ background: var(--tinta-3); }

.mod-cupos-txt{
  display:block; margin-top:7px;
  font-family: var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color: var(--tinta-3);
}
.mod-cupos[data-estado="apretado"] .mod-cupos-txt{ color: var(--brasa-texto); }
.mod-cupos[data-estado="critico"]  .mod-cupos-txt{ color: var(--brasa-texto); font-weight:600; }
.mod-cupos[data-estado="agotado"]  .mod-cupos-txt{ color: var(--tinta-3); }

@media (prefers-reduced-motion: reduce){
  .mod-barra i{ transition: none; }
}

/* ---------- 29. Iconos ---------- */
/* Trazo, no relleno, y heredan el color del contenedor. Sustituyen a los
   signos tipograficos, que no significaban nada y no se leian pequenos. */
.icono{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background: var(--crema-2); color: var(--verde-vivo);
  margin-bottom:16px; flex:0 0 auto;
}
.icono svg{ width:22px; height:22px; display:block; }
.tarjeta:hover .icono{ background: var(--verde-vivo); color: var(--superficie); }
.tarjeta .icono{ transition: background .2s ease, color .2s ease; }

/* =====================================================================
   30. Profundidad sobre fondo blanco
   Sobre blanco puro el color ya no separa los bloques, asi que la jerarquia
   la construyen la sombra y la elevacion al pasar el cursor.
   ===================================================================== */
body{ background: var(--crema); }

section[id]{ border-bottom: 0; }
/* Franjas alternas para separar secciones sobre blanco. La de inscripción
   queda fuera: tiene su propio fondo verde y su texto cuenta con él. */
section[id]:nth-of-type(even):not(.registro){ background: var(--crema-2); }
section[id].registro{ background: var(--verde); }

.tarjeta, .tarjeta-foto, .kit-dia, .tarifa, .panel, .recorrido-caja, .form-caja{
  border-color: transparent;
  box-shadow: var(--elev-2);
  transition: box-shadow .25s ease, transform .25s cubic-bezier(.22,.8,.28,1);
}
.tarjeta:hover, .tarjeta-foto:hover, .kit-dia:hover, .tarifa:hover{
  box-shadow: var(--elev-4);
  transform: translateY(-4px);
}
.tarifa.viva{ box-shadow: var(--elev-4); border-color: var(--verde-vivo); }
.mod{ box-shadow: var(--elev-1); border-color: transparent; }
.mod:hover{ box-shadow: var(--elev-3); transform: translateY(-4px); }
.mod[aria-pressed="true"]{ box-shadow: var(--elev-4); }

/* La nav flota sobre el contenido en cuanto se desplaza la pagina. */
.nav{ box-shadow: none; transition: box-shadow .25s ease, background .25s ease; }
.nav.flotando{ box-shadow: var(--elev-3); }

/* La portada monta sobre la franja de cifras, en vez de apilarse plana. */
.portada{ box-shadow: var(--elev-5); }
.crono{ box-shadow: var(--elev-5); }
.dupla-foto img{ box-shadow: var(--elev-4); }
.mosaico figure{ box-shadow: var(--elev-2); transition: box-shadow .3s ease, transform .3s ease; }
.mosaico figure:hover{ box-shadow: var(--elev-4); transform: translateY(-3px); }

/* =====================================================================
   31. Movimiento
   Cada animacion dice algo: lo que entra sube, lo que se puede pulsar se
   levanta, y las barras crecen para que se vea cuanto cupo queda.
   ===================================================================== */
.revelar{
  opacity:0; transform: translateY(26px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.8,.28,1);
}
.revelar.visible{ opacity:1; transform:none; }

/* Entrada escalonada: los hijos de una rejilla no entran todos a la vez. */
.escalonar > *{
  opacity:0; transform: translateY(20px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.8,.28,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.escalonar.visible > *{ opacity:1; transform:none; }

/* Cifras que cuentan hacia arriba al entrar en pantalla. */
.cifra dd{ font-variant-numeric: tabular-nums; }

/* Parallax suave de la portada, movido desde el guion. */
.portada-foto{ will-change: transform; }

.btn{ transition: transform .14s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.btn-primario{ box-shadow: 0 6px 16px -6px rgba(9,67,181,.70); }
.btn-primario:hover{ transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(9,67,181,.80); }
.btn-solido:hover, .btn-fantasma:hover{ transform: translateY(-2px); box-shadow: var(--elev-3); }

@media (prefers-reduced-motion: reduce){
  .revelar, .escalonar > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  .portada-foto{ transform:none !important; }
  .tarjeta:hover, .tarjeta-foto:hover, .kit-dia:hover, .tarifa:hover,
  .mod:hover, .btn:hover, .mosaico figure:hover{ transform:none; }
}

/* ---------- 32. Menú lateral para pantallas estrechas ---------- */
.btn-menu{
  display:none; width:40px; height:40px; flex:0 0 auto;
  align-items:center; justify-content:center;
  background: transparent; color: var(--tinta);
  border:1px solid var(--linea-2); border-radius: var(--r);
  cursor:pointer;
}
.btn-menu svg{ width:22px; height:22px; }
.btn-menu:hover{ background: var(--crema-2); border-color: var(--tinta-2); }
@media (max-width:1080px){ .btn-menu{ display:inline-flex; } }

.menu-movil{
  background: var(--noche); color: var(--sobre-noche);
  width: min(88vw, 340px); border-left:1px solid var(--linea-2);
}
.menu-movil .offcanvas-header{ border-bottom:1px solid rgba(255,255,255,.14); padding:20px 24px; }
.menu-movil .offcanvas-title{
  font-family: var(--display); font-weight:400; text-transform:uppercase;
  font-size:22px; letter-spacing:.03em; color: var(--lima);
}
.menu-movil .btn-close{ filter: invert(1) grayscale(1) brightness(2); opacity:.8; }
.menu-movil .offcanvas-body{ padding:12px 24px 28px; display:flex; flex-direction:column; }

.menu-enlaces{ display:flex; flex-direction:column; }
.menu-enlaces a{
  display:block; padding:15px 0; text-decoration:none;
  color: var(--sobre-noche); font-size:17px; font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.10);
  transition: color .16s ease, padding-left .16s ease;
}
.menu-enlaces a:hover, .menu-enlaces a:focus-visible{
  color: var(--lima); padding-left:8px;
}
.menu-cta{ margin-top:26px; justify-content:center; }

/* En pantalla estrecha el botón de inscripción vive dentro del menú. */
@media (max-width:640px){ .nav .btn-nav{ display:none; } }

/* =====================================================================
   33. Formulario de inscripción
   Seis grupos numerados en vez de una lista larga: el atleta ve dónde va y
   cuánto le falta. Bootstrap pone los controles, aquí va la estructura.
   ===================================================================== */
.formulario-inscripcion{ max-width: 860px; }

.grupo-campos{
  border:0; margin:0 0 34px; padding:26px 28px;
  background: var(--superficie); border-radius: var(--r-g); box-shadow: var(--elev-2);
  /* La tarjeta pone su propio fondo, asi que tiene que poner tambien su propio
     color de texto. Sin esto hereda el de la seccion que la contenga, y en la
     de registro —azul con texto blanco— las leyendas salian blancas sobre
     tarjeta blanca: ahi estaban, pero no se veian. */
  color: var(--tinta);
}
.grupo-campos legend{
  /* Una leyenda de fieldset se pinta en el hueco del borde, medio cuerpo fuera
     de la caja, y asi ignora el relleno de la tarjeta. Sobre fondo claro no se
     notaba; en la seccion de registro, que es azul, el titulo quedaba escrito
     encima del azul y no habia forma de leerlo.

     Basta con que deje de ser «leyenda renderizada»: el navegador solo le da
     ese trato a la que no lleva flotacion. Flotada se maqueta como un bloque
     normal, dentro de la tarjeta y respetando su relleno; al ancho completo y
     con el hermano despejado queda igual que antes, una linea propia. */
  float:left; width:100%; padding:0; margin:0 0 18px;
  font-family: var(--display); font-weight:400; text-transform:uppercase;
  font-size:22px; letter-spacing:.02em; display:flex; align-items:center; gap:12px;
}
.grupo-campos legend + *{ clear:both; }
.grupo-campos legend .paso{
  width:32px; height:32px; border-radius:50%; flex:0 0 auto;
  background: var(--azul-profundo); color:#FFFFFF;
  display:grid; place-items:center;
  font-family: var(--mono); font-size:14px; font-weight:600;
}
.nota-grupo{ margin:-6px 0 18px; font-size:14px; color: var(--tinta-2); max-width:62ch; }

.rejilla-campos{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px 22px; }
@media (max-width:680px){ .rejilla-campos{ grid-template-columns: minmax(0,1fr); } }

.campo-bs label{
  display:block; font-family: var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color: var(--tinta-3); margin-bottom:7px; font-weight:500;
}
.campo-bs .form-control, .campo-bs .form-select{
  font-size:16px; padding:11px 13px; border-color: var(--linea-2); border-radius: var(--r);
}
.campo-bs .form-control:focus, .campo-bs .form-select:focus{
  border-color: var(--azul-marca); box-shadow: 0 0 0 3px rgba(51,102,204,.18);
}
.campo-bs .form-text{ font-size:12.5px; color: var(--tinta-3); margin-top:6px; }
.campo-bs ul{ margin:6px 0 0; padding-left:18px; list-style:none; }
.campo-bs ul li, .grupo-campos ul.list-unstyled li, .form-check ul li{
  color: var(--brasa-texto); font-size:13px; font-weight:600;
}

.declaraciones .form-check{
  padding:14px 0 14px 30px; border-bottom:1px solid var(--linea);
}
.declaraciones .form-check:last-child{ border-bottom:0; }
.declaraciones .form-check-label{ font-size:15px; color: var(--tinta); line-height:1.5; }
.declaraciones .form-check-input{ margin-left:-30px; width:20px; height:20px; margin-top:1px; }
.declaraciones .form-check-input:checked{ background-color: var(--azul-profundo); border-color: var(--azul-profundo); }

.cupos-aviso{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.chip-cupo{
  font-family: var(--mono); font-size:11.5px; padding:6px 12px; border-radius:99px;
  background: var(--crema-2); color: var(--tinta-2); border:1px solid var(--linea);
}
.chip-cupo strong{ color: var(--azul-profundo); margin-right:6px; }

.cierre-formulario{ margin-top:8px; }
.nota-cierre{ margin-top:16px; font-size:13.5px; color: var(--tinta-3); max-width:62ch; }
/* La nota de cierre es lo unico del formulario que queda fuera de una tarjeta.
   En la seccion de registro cae sobre el azul, y ahi el gris de texto
   secundario no llega al contraste minimo: se aclara, como el resto de la
   seccion. */
.registro .nota-cierre{ color: rgba(245,242,234,.82); }

/* ---------- 34. Comprobante de inscripción ---------- */
.comprobante{
  background: var(--superficie); border-radius: var(--r-g);
  box-shadow: var(--elev-3); overflow:hidden; margin-bottom:32px;
}
.comprobante-codigo{
  background: var(--noche); color:#FFFFFF; padding:26px 30px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.comprobante-codigo .k{
  font-family: var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; opacity:.7; width:100%;
}
.comprobante-codigo .v{
  font-family: var(--mono); font-size: clamp(26px,5vw,40px); font-weight:600;
  letter-spacing:.04em; color: var(--sol);
}
.estado{
  font-family: var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:99px; background: rgba(255,255,255,.16);
}
.estado-pagado{ background: var(--agua-vivo); color:#FFFFFF; }
.estado-anulado{ background: var(--brasa); color:#FFFFFF; }

.comprobante-datos{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap:0; margin:0; padding:0;
}
.comprobante-datos > div{ padding:18px 24px; border-right:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.comprobante-datos dt{
  font-family: var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color: var(--tinta-3); margin-bottom:5px;
}
.comprobante-datos dd{ margin:0; font-size:15.5px; font-weight:500; }
.comprobante-datos .valor-pago{ font-family: var(--mono); font-size:20px; font-weight:600; color: var(--azul-profundo); }

.bloque-pago{
  background: var(--crema-2); border-radius: var(--r-g);
  padding:28px 30px; margin-bottom:28px; border-left:5px solid var(--brasa);
}
.bloque-pago h3{
  font-family: var(--display); font-weight:400; text-transform:uppercase;
  font-size:24px; margin:0 0 12px;
}
.nota-pago{ margin-top:16px; font-size:13.5px; color: var(--tinta-2); max-width:70ch; }
.nota-pago code{ background: var(--superficie); padding:2px 6px; border-radius:3px; font-size:12.5px; }

/* El paso que faltaba: adjuntar el comprobante. Comparte la forma del bloque
   de pago porque es su continuacion -se paga y se adjunta-, pero en azul y no
   en brasa: aquello avisa de algo pendiente, esto invita a hacerlo. */
.bloque-comprobante{
  background: var(--crema-2); border-radius: var(--r-g);
  padding:28px 30px; margin-bottom:28px; border-left:5px solid var(--azul-profundo);
}
.bloque-comprobante h3{
  font-family: var(--display); font-weight:400; text-transform:uppercase;
  font-size:24px; margin:0 0 12px;
}
.bloque-comprobante p{ max-width:70ch; margin:0 0 18px; color: var(--tinta-2); }

.bloque-correo{ margin-bottom:28px; }
.correo-ok{ color: var(--agua); font-weight:600; }
.correo-pendiente{ color: var(--tinta-2); max-width:70ch; }

.siguientes-pasos h3{
  font-family: var(--display); font-weight:400; text-transform:uppercase;
  font-size:24px; margin:0 0 14px;
}
.siguientes-pasos ol{ margin:0; padding-left:22px; max-width:70ch; }
.siguientes-pasos li{ margin-bottom:10px; font-size:15.5px; }
.siguientes-pasos li::marker{ color: var(--azul-profundo); font-weight:700; }
.volver{ margin-top:32px; }
.volver a{ color: var(--azul-primario); }

/* ---------- 35. Llamada a la acción hacia el formulario ---------- */
.cta-inscripcion{
  display:grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr);
  gap:34px; align-items:center;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius: var(--r-g); padding:32px 34px; box-shadow: var(--elev-4);
}
@media (max-width:820px){
  .cta-inscripcion{ grid-template-columns: minmax(0,1fr); gap:26px; padding:24px; }
}

.cta-precio{ margin:0 0 18px; }
.cta-valor{
  display:block; font-family: var(--display); font-weight:400;
  font-size: clamp(40px,7vw,68px); line-height:1; color: var(--sol);
}
.cta-fase{
  display:block; margin-top:8px;
  font-family: var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color: rgba(255,255,255,.72);
}
.cta-lista{ margin:0; padding-left:20px; color: rgba(255,255,255,.88); font-size:15.5px; }
.cta-lista li{ margin-bottom:8px; }
.cta-lista li:last-child{ margin-bottom:0; }

.cta-accion{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.cta-boton{ font-size:17px; padding:17px 32px; width:100%; justify-content:center; }
.cta-nota{ margin:0; font-size:13px; color: rgba(255,255,255,.66); }

/* ---------- Letreros de advertencia ----------
   Acompañan a toda acción que quita algo: cancelar una inscripción, suspender
   una cuenta, rechazar un pago. El color solo refuerza; lo que informa es el
   texto, para que funcione también en escala de grises o con daltonismo. */

.advertencia{
  color: var(--brasa-texto);
  background: rgba(168,5,33,.055);
  border-left:3px solid var(--brasa);
  border-radius:0 var(--r) var(--r) 0;
}
.adv-icono{
  width:17px; height:17px; flex:0 0 auto; margin-top:1px; color: var(--brasa);
}

/* Una línea, para cuando la acción vive dentro de una tabla. */
.advertencia-breve{
  display:flex; gap:8px; align-items:flex-start;
  margin:0 0 8px; padding:7px 10px;
  font-size:12px; line-height:1.45; max-width:280px;
}

/* Letrero completo, para cuando la acción tiene su propio bloque. */
.advertencia-grave{
  margin:16px 0; padding:16px 18px;
  border-left-width:4px;
}
.adv-titulo{
  display:flex; gap:10px; align-items:center;
  margin:0 0 10px; font-size:15.5px; font-weight:700; letter-spacing:-.01em;
}
.adv-titulo .adv-icono{ width:20px; height:20px; margin-top:0; }
.adv-lista{ margin:0; padding-left:30px; font-size:14px; line-height:1.55; color: var(--tinta-2); }
.adv-lista li{ margin-bottom:5px; }
.adv-lista li:last-child{ margin-bottom:0; }
.adv-remate{ color: var(--brasa-texto); }

@media (prefers-reduced-motion: no-preference){
  .advertencia-grave{ animation: adv-entrada .28s ease-out both; }
}
@keyframes adv-entrada{
  from{ opacity:0; transform: translateY(-4px); }
  to{ opacity:1; transform:none; }
}

/* ---------- Paso condicional del formulario ----------
   El bloque del representante solo aparece para menores. No lleva número de
   paso: si lo llevara, al ocultarse la numeración saltaría del 4 al 6 y
   parecería que falta algo. */
.paso-condicional{
  background: var(--brasa) !important; color: var(--sobre-brasa) !important;
}
.grupo-tutor{
  border-left:3px solid var(--brasa);
  background: rgba(168,5,33,.03);
}
.declaracion-tutor{ margin-top:14px; }

/* ---------- Página de aviso: la inscripción está en otro sitio ---------- */
.pagina-aviso{ padding:120px 0 100px; background: var(--crema-2); min-height:70vh; }
.envoltura-estrecha{ max-width:640px; }
.pagina-aviso .tit{ margin:6px 0 22px; }
.entrada-aviso{ font-size:18px; line-height:1.65; color: var(--tinta-2); }
.nota-aviso{
  margin:18px 0; padding:14px 16px; font-size:15px;
  background: var(--superficie); border-left:3px solid var(--sol);
  border-radius:0 var(--r) var(--r) 0;
}
.acciones-aviso{ display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 0; }
.pie-aviso{ margin-top:26px; font-size:14px; color: var(--tinta-3); line-height:1.6; }

/* ---------- Sesión en la barra pública ---------- */
.btn-entrar, .btn-salir-publico{
  font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap;
  padding:8px 14px; border-radius:99px; border:1px solid var(--linea-2);
  color: var(--tinta-2); background: transparent;
}
.btn-entrar:hover, .btn-salir-publico:hover{ border-color: var(--azul-profundo); color: var(--azul-profundo); }
.nav-sesion{ display:flex; align-items:center; gap:8px; }
.nav-sesion-quien{ text-decoration:none; line-height:1.15; text-align:right; }
.ns-hola{
  display:block; font-family: var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--tinta-3);
}
.ns-nombre{ display:block; font-size:13.5px; font-weight:600; color: var(--tinta); }
@media (max-width:720px){ .nav-sesion, .btn-entrar{ display:none; } }

.menu-sesion{
  display:block; padding:12px 0; text-decoration:none;
  font-size:15px; border-bottom:1px solid rgba(255,255,255,.14);
}
.menu-salir{ color: var(--sol); }

/* ---------- Aviso de cierre de sesión ---------- */
.aviso-sesion{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:24px; background: rgba(0,36,74,.55);
}
.as-caja{
  width:100%; max-width:430px; background: var(--crema);
  border-radius: var(--r-g); box-shadow: var(--elev-5); padding:28px 30px;
}
.as-titulo{ margin:0 0 10px; font-size:21px; letter-spacing:-.01em; }
.as-caja p{ margin:0; font-size:15px; line-height:1.55; color: var(--tinta-2); }
#aviso-sesion-reloj{ font-family: var(--mono); font-size:18px; color: var(--brasa-texto); }
.as-acciones{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }

/* ---------- Tablón de avisos en el panel del atleta ---------- */
.tablon{ margin:0 0 26px; }
.tablon-titulo{
  display:flex; align-items:center; gap:10px;
  margin:0 0 12px; font-size:15px; letter-spacing:-.01em;
}
.tablon-cuantos{
  font-family: var(--mono); font-size:11px; padding:2px 9px; border-radius:99px;
  background: var(--azul-profundo); color:#FFFFFF;
}

.anuncio{
  border-radius: var(--r); border-left:4px solid var(--azul-marca);
  background: var(--crema-2); margin-bottom:10px; overflow:hidden;
}
.anuncio.anuncio-urgente{ border-left-color: var(--brasa); background: rgba(168,5,33,.05); }
.anuncio.anuncio-aviso{ border-left-color: var(--sol); background: rgba(255,171,0,.07); }

.anuncio summary{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  padding:13px 16px; cursor:pointer; list-style:none;
}
.anuncio summary::-webkit-details-marker{ display:none; }
.an-nivel{
  font-family: var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--tinta-3);
}
.anuncio-urgente .an-nivel{ color: var(--brasa-texto); font-weight:600; }
.an-titulo{ font-size:15px; font-weight:600; flex:1 1 auto; min-width:0; }
.an-fecha{ font-family: var(--mono); font-size:11px; color: var(--tinta-3); }
.an-cuerpo{ padding:0 16px 15px; font-size:14.5px; line-height:1.6; color: var(--tinta-2); }
.an-cuerpo p{ margin:0 0 10px; }
.an-cuerpo p:last-child{ margin-bottom:0; }
.an-enlace{ font-weight:600; color: var(--azul-profundo); }

/* ---------- Calculadora de ritmo ----------
   Horas y minutos son un solo dato partido en dos casillas, así que van juntas
   bajo una etiqueta y no cada una con la suya. */
.campo-tiempo{ border:0; padding:0; margin:0 0 18px; }
.campo-tiempo legend{
  padding:0; margin-bottom:8px;
  font-family: var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--tinta-3);
}
.tiempo-casillas{ display:flex; gap:12px; align-items:flex-end; }
.casilla{ display:flex; align-items:baseline; gap:7px; flex:1 1 0; min-width:0; }
.casilla input{ width:100%; min-width:0; }
.casilla label{
  flex:0 0 auto; margin:0;
  font-family: var(--mono); font-size:12px; color: var(--tinta-3);
}

/* Los topes del deslizador se escriben: un control que se detiene sin decir
   por qué parece roto. */
.rango-topes{
  display:flex; justify-content:space-between; gap:12px;
  margin:6px 0 0; font-family: var(--mono); font-size:10.5px; color: var(--tinta-3);
}

.aviso-ritmo{
  margin:10px 0 0; padding:9px 12px; font-size:13px; line-height:1.45;
  background: rgba(255,171,0,.16); border-left:3px solid var(--sol);
  border-radius:0 var(--r) var(--r) 0; color: var(--sobre-sol, var(--tinta));
}

/* ---------- Botón de tema ----------
   Deja de ser un símbolo suelto: lleva la palabra al lado donde cabe, y en
   pantalla estrecha se queda solo el icono para no apretar la barra. */
.btn-tema{
  display:inline-flex; align-items:center; gap:7px;
  width:auto; height:auto; padding:8px 14px; border-radius:99px;
  border:1px solid var(--linea-2); background:transparent;
  color: var(--tinta-2); cursor:pointer;
  font-family: var(--texto); font-size:13px; font-weight:600; line-height:1;
}
.btn-tema:hover,
.btn-tema:focus-visible{ border-color: var(--azul-profundo); color: var(--azul-profundo); }
.bt-icono{ font-size:15px; line-height:1; }
@media (max-width:900px){
  .bt-texto{
    /* Se oculta para la vista pero sigue ahí para los lectores de pantalla. */
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .btn-tema{ padding:8px 11px; }
}

/* ---------- Botón de tema ----------
   Deja de ser un símbolo suelto: lleva la palabra al lado donde cabe, y en
   pantalla estrecha se queda solo el icono para no apretar la barra. */
.btn-tema{
  display:inline-flex; align-items:center; gap:7px;
  width:auto; height:auto; padding:8px 14px; border-radius:99px;
  border:1px solid var(--linea-2); background:transparent;
  color: var(--tinta-2); cursor:pointer;
  font-family: var(--texto); font-size:13px; font-weight:600; line-height:1;
}
.btn-tema:hover,
.btn-tema:focus-visible{ border-color: var(--azul-profundo); color: var(--azul-profundo); }
.bt-icono{ font-size:15px; line-height:1; }
@media (max-width:900px){
  .bt-texto{
    /* Se oculta a la vista pero sigue ahí para los lectores de pantalla. */
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .btn-tema{ padding:8px 11px; }
}

/* ---------- 35. Ver la contraseña ---------- */
/* El botón lo inyecta assets/js/clave.js; sin guion no hay envoltura y el
   campo se pinta como cualquier otro. */
.campo-clave{ position:relative; display:block; }
/* Sitio para el ojo, para que no se monte sobre lo escrito. El campo de
   contraseña es el único que lo necesita, así que el relleno va aquí y no en
   .form-control. */
.campo-clave .form-control{ padding-right:46px; }
.ver-clave{
  position:absolute; top:0; right:0; height:100%; width:44px;
  display:grid; place-items:center;
  background:none; border:0; padding:0; cursor:pointer;
  color: var(--tinta-3); border-radius:0 var(--r) var(--r) 0;
}
.ver-clave:hover{ color: var(--tinta); }
/* El foco se ve: es un control que se alcanza con el tabulador entre el campo
   y el botón de entrar. */
.ver-clave:focus-visible{ outline:2px solid var(--azul-marca); outline-offset:-2px; color: var(--tinta); }
.ver-clave svg{ width:20px; height:20px; }
/* Pulsado = contraseña a la vista. Se marca con color, no solo con el icono. */
.ver-clave[aria-pressed="true"]{ color: var(--azul-primario); }

/* ---------- 36. Guía del atleta ---------- */
/* Tres secciones de consulta se fueron a su propia pagina; en la portada queda
   esta puerta. Las tarjetas son enlaces enteros y no un titulo con un «ver
   mas»: el area pulsable es la tarjeta completa, que en un telefono es la
   diferencia entre acertar y no. */
.guia-accesos{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.guia-tarjeta{
  display:block; text-decoration:none; color:inherit;
  background: var(--superficie); border-radius: var(--r-g); box-shadow: var(--elev-2);
  padding:24px 26px; border-left:4px solid var(--azul-profundo);
  transition: box-shadow .2s ease, transform .2s ease;
}
.guia-tarjeta:hover{ box-shadow: var(--elev-4); transform: translateY(-3px); }
.guia-tarjeta:focus-visible{ outline:2px solid var(--azul-marca); outline-offset:3px; }
.guia-tarjeta strong{
  display:block; margin-bottom:8px; font-size:17px; font-weight:700;
  color: var(--azul-profundo);
}
.guia-tarjeta span{ display:block; font-size:14.5px; color: var(--tinta-2); line-height:1.5; }

.guia-portada{ padding:48px 0 8px; }
.guia-volver{ padding:12px 0 56px; }
.guia-volver a{ color: var(--azul-primario); }

/* ---------- 37. Pago dentro del formulario ---------- */
/* Solo aparece cuando la edicion cobra por adelantado. El bloque de arriba dice
   como pagar; los campos de abajo recogen lo que el atleta declara del pago. */
.grupo-pago .pago-instrucciones{
  background: var(--azul-claro); border-radius: var(--r);
  padding:20px 22px; margin-bottom:22px;
}
.pago-datos{ display:flex; flex-wrap:wrap; gap:8px 32px; margin:0 0 16px; }
.pago-datos div{ margin:0; }
.pago-datos dt{
  font-family: var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color: var(--tinta-3); font-weight:500; margin-bottom:3px;
}
.pago-datos dd{ margin:0; font-size:15px; font-weight:600; color: var(--tinta); }
/* El valor y el convenio son los dos datos que se copian al cajero o a la app
   del banco: en monoespaciada se leen digito a digito sin equivocarse. */
.pago-datos .pago-valor{ font-family: var(--mono); font-size:19px; color: var(--azul-profundo); }
.pago-datos .pago-convenio{ font-family: var(--mono); letter-spacing:.04em; }
.pago-texto{ font-size:14px; color: var(--tinta-2); max-width:66ch; margin:0 0 16px; }

/* La seccion de registro es azul oscura y aclara sus notas para que se lean
   sobre ella. Dentro del panel de pago el fondo vuelve a ser claro, asi que esa
   regla lo dejaba casi blanco sobre azul palido: aqui se devuelve al color de
   texto normal. */
.registro .pago-instrucciones .nota-cierre{ color: var(--tinta-2); }

/* =====================================================================
   38. Navegación en dos niveles

   El sitio pasó de una portada con trece secciones a una página por tema, y el
   menú pasó de un índice plano de diez anclas a cuatro grupos. En el escritorio
   son desplegables; en el teléfono, un acordeón. El comportamiento lo pone
   Bootstrap —dropdown y collapse— y aquí va solo el aspecto.
   ===================================================================== */
/* relative y no static: es lo que Bootstrap espera del contenedor de un
   desplegable para colocar su panel bajo el botón. */
.nav-menu{ position: relative; }
.nav-menu-btn{
  display:inline-flex; align-items:center; gap:5px;
  background: transparent; border:0; padding:5px 0;
  font: inherit; font-weight:500; color: var(--tinta-2);
  border-bottom:2px solid transparent; white-space:nowrap; cursor:pointer;
}
.nav-menu-btn:hover{ color: var(--tinta); border-bottom-color: var(--sol); }
.nav-menu-btn[aria-current="true"]{ color: var(--tinta); border-bottom-color: var(--verde-vivo); }
.nav-menu-btn:focus-visible{ outline:2px solid var(--azul-marca); outline-offset:4px; }
.nav-menu-flecha{ width:13px; height:13px; transition: transform .18s ease; }
.nav-menu-btn[aria-expanded="true"] .nav-menu-flecha{ transform: rotate(180deg); }

/* El panel no hereda nada de Bootstrap salvo la mecánica de abrir y cerrar.
   Ancho fijo y no automático: con el ancho del contenido, cuatro paneles de
   cuatro medidas distintas hacen que la barra parezca moverse. */
.nav-menu-panel.dropdown-menu{
  --bs-dropdown-bg: var(--superficie);
  --bs-dropdown-border-color: var(--linea-2);
  --bs-dropdown-border-radius: var(--r);
  --bs-dropdown-link-hover-bg: transparent;
  --bs-dropdown-link-active-bg: transparent;
  min-width: 306px; padding:8px; margin-top:10px;
  box-shadow: var(--elev-4);
}
.nav-menu-item{
  display:block; text-decoration:none; color:inherit;
  padding:10px 12px; border-radius: calc(var(--r) - 4px);
  border-left:3px solid transparent;
}
.nav-menu-item:hover, .nav-menu-item:focus-visible{
  background: var(--crema-2); border-left-color: var(--sol);
}
.nav-menu-item[aria-current="page"]{ border-left-color: var(--verde-vivo); }
.nav-menu-item strong{
  display:block; font-size:14.5px; font-weight:600; color: var(--tinta); margin-bottom:2px;
}
.nav-menu-item span{ display:block; font-size:12.5px; color: var(--tinta-3); line-height:1.45; }

/* ---------- Acordeón del menú móvil ---------- */
/* Es el cambio que pidió la organización después de probar la página en tres
   teléfonos: catorce enlaces seguidos no se leen, se recorren con el pulgar
   buscando una palabra. Con cuatro títulos a la vista, la decisión es de cuatro
   opciones. */
.menu-inicio{
  display:block; padding:15px 0; text-decoration:none;
  color: var(--lima); font-size:17px; font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.menu-grupo-btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; background: transparent; border:0;
  border-bottom:1px solid rgba(255,255,255,.10);
  padding:16px 0; text-align:left; cursor:pointer;
  font-family: var(--display); font-weight:400; text-transform:uppercase;
  letter-spacing:.03em; font-size:19px; color: var(--sobre-noche);
}
.menu-grupo-btn svg{ width:20px; height:20px; flex:0 0 auto; transition: transform .2s ease; }
.menu-grupo-btn[aria-expanded="true"]{ color: var(--lima); border-bottom-color: transparent; }
.menu-grupo-btn[aria-expanded="true"] svg{ transform: rotate(180deg); }
.menu-grupo-btn:focus-visible{ outline:2px solid var(--lima); outline-offset:2px; }

/* Los hijos van sangrados y en cuerpo menor: el sangrado es lo que dice que
   pertenecen al título de arriba sin necesidad de una línea que los encierre. */
.menu-grupo .menu-enlaces{
  padding-left:14px; border-left:2px solid rgba(255,255,255,.14); margin-bottom:10px;
}
.menu-grupo .menu-enlaces a{ font-size:15.5px; padding:12px 0; border-bottom:0; }
.menu-grupo .menu-enlaces a[aria-current="page"]{ color: var(--lima); }

/* ---------- Selector compacto de distancia ---------- */
/* El mismo contenedor que la portada, con el mismo guion, pero en la página de
   recorridos no se está eligiendo qué correr: se está eligiendo qué recorrido
   mirar. El día, la hora y los cupos sobran y estorban. */
.mods-compacto{ grid-template-columns: repeat(4,1fr); margin-bottom:28px; }
.mods-compacto .mod{ padding:14px 12px; }
.mods-compacto .mod-hora,
.mods-compacto .mod-cupos{ display:none; }
.mods-compacto .mod-nom{ font-size:11.5px; }
@media (max-width:520px){ .mods-compacto{ grid-template-columns: repeat(2,1fr); } }