/* ============================================================
   Scott Marathon 2027 — hoja de estilos única

   Los tokens son los del handoff de diseño. El prototipo usaba
   estilos inline por limitaciones de la herramienta: acá están
   agrupados en clases.

   Responsive sin media queries: todo fluido con clamp() y
   grillas auto-fit. Las dos tablas anchas (comparativa y
   resultados) scrollean horizontal dentro de su contenedor.
   ============================================================ */

:root {
  /* Fondos y superficies */
  --bg:            #12201A;
  --bg-alt:        #0E1A15;
  --surface:       #18271F;
  --surface-hover: #1E2E25;
  --surface-aniv:  #1A140C;
  --surface-wa:    #16281F;
  --surface-aviso: #241A12;

  /* Texto */
  --fg:        #F4F1EA;
  --fg-2:      #C7D2C8;
  --fg-3:      #A9B8AC;
  --fg-muted:  #8FA394;
  --fg-min:    #5E6F62;

  /* Acento aniversario */
  --gold:       #C08A2E;
  --gold-light: #E0B25C;

  /* Modalidades */
  --marathon: #3E9A64;
  --short:    #E1653A;
  --gravel:   #2E9AA0;
  --ebike:    #8E7BD6;

  /* WhatsApp */
  --wa:       #4FBF7A;
  --wa-hover: #6FD494;
  --wa-fg:    #BFEBD0;

  /* Bordes */
  --bd-1: rgba(244, 241, 234, .10);
  --bd-2: rgba(244, 241, 234, .14);
  --bd-3: rgba(244, 241, 234, .20);

  /* Layout */
  --ancho:   1280px;
  --pad-x:   clamp(18px, 4vw, 32px);
  --sep-y:   clamp(48px, 7vw, 80px);
  --pastilla: 999px;

  --fuente: Archivo, Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------
   Reset mínimo
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* Sin line-height global, igual que el prototipo: ahí el body solo
   fija familia y suavizado, y cada bloque declara su interlineado.
   Ponerlo global inflaba botones y tarjetas unos pocos píxeles y
   descuadraba las alturas contra el diseño. */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--fuente);
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--gold-light); text-decoration: none; }
a:hover { color: #F2D298; }

button { font-family: inherit; cursor: pointer; }

::selection { background: var(--gold); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* Salto al contenido, para teclado y lectores de pantalla */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--bg);
  padding: 12px 20px;
  font-weight: 800;
  z-index: 200;
}
.saltar:focus { left: 8px; top: 8px; }

/* ------------------------------------------------------------
   Tipografía
   ------------------------------------------------------------ */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 { font-size: clamp(34px, 5.5vw, 60px); }
h2 { font-size: clamp(26px, 3.6vw, 42px); }
h3 { font-size: clamp(19px, 2vw, 25px); letter-spacing: -.02em; }
h4 { font-size: clamp(16px, 1.5vw, 19px); letter-spacing: -.01em; }

p { margin: 0; text-wrap: pretty; }

.etiqueta {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.etiqueta-ancha { letter-spacing: .24em; font-size: 10px; }

.sub {
  color: var(--fg-2);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  max-width: 62ch;
}

.nota {
  color: var(--fg-min);
  font-size: 12px;
  line-height: 1.5;
}

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

/* ------------------------------------------------------------
   Layout
   ------------------------------------------------------------ */
.wrap {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.seccion { padding-block: var(--sep-y); }
.seccion-alt { background: var(--bg-alt); }

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.grid-2   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid-3   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-4   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid-fino{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

.pila     { display: flex; flex-direction: column; gap: 14px; }
.fila     { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.entre    { justify-content: space-between; }

.cabecera-seccion {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 32px;
}

/* Contenedor de tablas anchas: scroll propio, el body nunca
   se desborda en horizontal. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------
   Botones
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--pastilla);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  transition: background .18s, color .18s, border-color .18s;
}

.btn-oro {
  background: var(--gold);
  color: var(--bg);
}
.btn-oro:hover { background: var(--gold-light); color: var(--bg); }

.btn-linea {
  background: transparent;
  border-color: var(--bd-3);
  color: var(--fg-2);
}
.btn-linea:hover { border-color: var(--fg-3); color: var(--fg); }

.btn-claro {
  background: var(--fg);
  color: var(--bg);
}
.btn-claro:hover { background: #fff; color: var(--bg); }

.btn-wa {
  background: var(--wa);
  color: #06251A;
}
.btn-wa:hover { background: var(--wa-hover); color: #06251A; }

.btn-bloque { width: 100%; }

.btn[aria-disabled="true"],
.btn:disabled {
  background: #4A5B4E;
  color: var(--fg-muted);
  cursor: not-allowed;
  pointer-events: none;
}

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(18, 32, 26, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bd-2);
}

.header-fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 26px;
  row-gap: 12px;
  min-height: 88px;
  padding-block: 14px;
}

.header-logo img { height: 44px; width: auto; }

.header-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-left: auto;
}

.header-nav a {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-3);
  letter-spacing: .01em;
}
.header-nav a:hover { color: var(--fg); }
.header-nav a[aria-current] { color: var(--gold-light); }

/* Barra INFORMACIÓN */
.header-info {
  border-top: 1px solid var(--bd-1);
  background: rgba(14, 26, 21, .6);
}

.header-info-fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-block: 10px;
  min-height: 44px;
}

.header-info a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fg-muted);
}
.header-info a:hover { color: var(--fg-2); }
.header-info a[aria-current] { color: var(--gold-light); }

/* Selector de idioma */
.lang {
  display: inline-flex;
  border: 1px solid var(--bd-3);
  border-radius: var(--pastilla);
  overflow: hidden;
}
.lang a {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--fg-3);
}
.lang a[aria-current] { background: var(--fg); color: var(--bg); }

/* Desplegable de años de Resultados */
.desplegable { position: relative; }

.desplegable-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 150px;
  background: var(--surface);
  border: 1px solid var(--bd-3);
  padding: 6px;
  display: none;
  z-index: 60;
}
.desplegable[data-abierto="1"] .desplegable-menu { display: block; }

.desplegable-menu a {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--fg-2);
}
.desplegable-menu a:hover { background: var(--surface-hover); color: var(--fg); }

.desplegable-btn {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.desplegable-btn:hover { color: var(--fg-2); }

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: clamp(460px, 72vh, 720px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* ------------------------------------------------------------
   Fondos con WebP y respaldo

   Las vistas emiten --bg-img (JPEG) y --bg-webp con el helper
   fondo(). Primero se declara el JPEG, que entiende todo el
   mundo; después image-set() lo pisa donde está soportado y
   sirve el WebP, un 84% más liviano.
   ------------------------------------------------------------ */
.con-fondo { background-image: var(--bg-img); }

@supports (background-image: image-set(url("i.webp") type("image/webp"))) {
  .con-fondo {
    background-image: image-set(
      var(--bg-webp) type("image/webp"),
      var(--bg-img)  type("image/jpeg")
    );
  }
}

.hero-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,32,26,.35) 0%, rgba(18,32,26,.75) 55%, var(--bg) 100%);
}

.hero-cont {
  position: relative;
  width: 100%;
  padding-block: clamp(36px, 6vw, 72px);
}

.hero h1 {
  font-size: clamp(38px, 7vw, 76px);
  letter-spacing: -.04em;
}

/* El "10" con textura: gradiente dorado + trama diagonal
   recortada al texto. */
.diez {
  font-size: clamp(110px, 17vw, 250px);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.06em;
  background-image:
    repeating-linear-gradient(45deg, rgba(18,32,26,.34) 0 3px, transparent 3px 8px),
    radial-gradient(circle at 30% 25%, #F0CE86 0%, var(--gold-light) 38%, var(--gold) 72%, #8C6220 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border: 1px solid var(--bd-3);
  border-radius: var(--pastilla);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--fg-2);
  background: rgba(18, 32, 26, .5);
}
.chip::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--chip-color, var(--fg-3));
}

.hero-fecha {
  font-size: clamp(17px, 2.2vw, 26px);
  font-weight: 900;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------
   Tarjetas
   ------------------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--bd-1);
  display: flex;
  flex-direction: column;
  transition: background .18s, border-color .18s;
}
.card:hover { background: var(--surface-hover); border-color: var(--bd-3); }

.card-cuerpo { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }

/* Franja de 4px con el color de la modalidad */
.card-franja { height: 4px; background: var(--franja, var(--fg-min)); }

.card-foto {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}

.card-precio {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: -.03em;
}

/* Tarjeta de servicio con icono */
.card-icono {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bd-2);
  color: var(--gold-light);
}

/* ------------------------------------------------------------
   Tabla comparativa (Tres caminos)
   ------------------------------------------------------------ */
.comparativa { min-width: 760px; width: 100%; border-collapse: collapse; }

.comparativa th,
.comparativa td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--bd-1);
  vertical-align: top;
  font-size: 14px;
}

.comparativa thead th {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--bd-3);
}

.comparativa tbody th {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--fg-muted);
  white-space: nowrap;
  width: 1%;
}

.comparativa td { color: var(--fg-2); }

.comparativa-cabecera { display: flex; flex-direction: column; gap: 4px; }
.comparativa-cabecera .barra { height: 4px; width: 44px; }

/* ------------------------------------------------------------
   Tabla de resultados
   ------------------------------------------------------------ */
.tabla-res { min-width: 720px; width: 100%; border-collapse: collapse; }

.tabla-res th {
  padding: 12px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--bd-3);
  white-space: nowrap;
}

.tabla-res td {
  padding: 13px 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--bd-1);
  color: var(--fg-2);
}

.tabla-res tbody tr:nth-child(odd) { background: rgba(244, 241, 234, .03); }

.tabla-res .pos,
.tabla-res .tiempo,
.tabla-res .dorsal { font-variant-numeric: tabular-nums; }

.tabla-res .podio { color: var(--gold-light); font-weight: 900; }
.tabla-res .corredor { color: var(--fg); font-weight: 700; }

/* ------------------------------------------------------------
   Pestañas y filtros
   ------------------------------------------------------------ */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }

.tab {
  padding: 9px 18px;
  border: 1px solid var(--bd-3);
  border-radius: var(--pastilla);
  background: transparent;
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
}
.tab:hover { border-color: var(--fg-3); color: var(--fg); }
.tab[aria-selected="true"] {
  background: var(--tab-color, var(--fg));
  border-color: var(--tab-color, var(--fg));
  color: var(--bg-alt);
}

.buscador {
  flex: 1;
  min-width: 220px;
  padding: 11px 16px;
  background: var(--bg-alt);
  border: 1px solid var(--bd-3);
  color: var(--fg);
  font-size: 14px;
  font-family: inherit;
}
.buscador::placeholder { color: var(--fg-min); }
.buscador:focus { border-color: var(--gold); outline: none; }

/* ------------------------------------------------------------
   Bloque aniversario y línea de tiempo
   ------------------------------------------------------------ */
.aniv { background: var(--surface-aniv); }

.timeline {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 92px), 1fr));
}

.timeline-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px;
  border: 1px solid var(--bd-1);
}
.timeline-item .barra { height: 4px; }
.timeline-item .anio  { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.timeline-item .tag   { font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.timeline-item .nota  { font-size: 11px; }
.timeline-item[data-sin="1"] { opacity: .55; }
.timeline-item[data-actual="1"] { border-color: var(--gold); background: rgba(192, 138, 46, .08); }

/* ------------------------------------------------------------
   Franja y botón flotante de WhatsApp
   ------------------------------------------------------------ */
.wa-franja {
  background: var(--surface-wa);
  border-block: 1px solid rgba(79, 191, 122, .25);
}

.wa-bullets { display: flex; flex-wrap: wrap; gap: 18px; }
.wa-bullets li {
  list-style: none;
  font-size: 13px;
  color: var(--wa-fg);
  display: flex;
  align-items: center;
  gap: 7px;
}
.wa-bullets li::before { content: "✓"; color: var(--wa); font-weight: 900; }

.wa-flota {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: var(--pastilla);
  background: var(--wa);
  color: #06251A;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.wa-flota:hover { background: var(--wa-hover); color: #06251A; }

/* Se retira cuando el footer entra en pantalla */
.wa-flota[data-oculto="1"] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
}

/* ------------------------------------------------------------
   Avisos
   ------------------------------------------------------------ */
.aviso {
  background: var(--surface-aviso);
  border: 1px solid rgba(192, 138, 46, .3);
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.aviso .icono { color: var(--gold-light); flex-shrink: 0; }
.aviso p { font-size: 14px; color: var(--fg-2); }

/* ------------------------------------------------------------
   Sponsors
   ------------------------------------------------------------ */
.sponsor-tier { border-top: 1px solid var(--bd-1); padding-block: 26px; }

.sponsor-marca {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* PNG blancos con transparencia: siempre contain, nunca cover */
.sponsor-logo {
  height: 52px;
  object-fit: contain;
  object-position: left center;
}

/* ------------------------------------------------------------
   Modal de residencia
   ------------------------------------------------------------ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 15, 12, .82);
  backdrop-filter: blur(4px);
}
.modal[data-abierto="1"] { display: flex; }

.modal-caja {
  background: var(--surface);
  border: 1px solid var(--bd-3);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(22px, 4vw, 38px);
}

.modal-opciones {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.modal-opcion {
  text-align: left;
  background: var(--bg-alt);
  border: 1px solid var(--bd-2);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: inherit;
}
.modal-opcion:hover { border-color: var(--gold); background: var(--surface-hover); }

/* ------------------------------------------------------------
   Inscripción
   ------------------------------------------------------------ */
.inscr-layout {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}
.inscr-principal { min-width: 0; }

.inscr-sidebar {
  position: sticky;
  top: 150px;
  background: var(--surface);
  border: 1px solid var(--bd-2);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pasos { display: flex; flex-wrap: wrap; gap: 10px; }

.paso {
  flex: 1;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border: 1px solid var(--bd-2);
  background: transparent;
  color: var(--fg-muted);
  text-align: left;
}
.paso[aria-current="step"] {
  background: var(--surface);
  border-color: var(--gold);
  color: var(--fg);
}
.paso .n {
  font-size: 15px;
  font-weight: 900;
  color: var(--fg-min);
  font-variant-numeric: tabular-nums;
}
.paso[aria-current="step"] .n { color: var(--gold); }

.monedas { display: flex; flex-wrap: wrap; gap: 6px; }

.moneda {
  padding: 7px 13px;
  border: 1px solid var(--bd-3);
  border-radius: var(--pastilla);
  background: transparent;
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}
.moneda[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--bg); }

.cuotas { display: flex; flex-wrap: wrap; gap: 8px; }

.cuota {
  flex: 1;
  min-width: 76px;
  padding: 12px 10px;
  border: 1px solid var(--bd-2);
  background: transparent;
  color: var(--fg-2);
  text-align: center;
}
.cuota[aria-pressed="true"] {
  background: var(--surface-aniv);
  border-color: var(--gold);
  color: var(--gold-light);
}
.cuota .n { font-size: 19px; font-weight: 900; display: block; }
.cuota .u { font-size: 9px; font-weight: 800; letter-spacing: .16em; }

/* Checklist */
.check-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 0;
  border-bottom: 1px solid var(--bd-1);
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  width: 100%;
  text-align: left;
  color: inherit;
}

.check-caja {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border: 1px solid var(--bd-3);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  color: transparent;
  margin-top: 2px;
}
.check-item[aria-pressed="true"] .check-caja {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--fg);
}

.resumen-linea {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding-block: 7px;
  border-bottom: 1px solid var(--bd-1);
}
.resumen-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-top: 12px;
}
.resumen-total .valor {
  font-size: clamp(23px, 3vw, 31px);
  font-weight: 900;
  letter-spacing: -.03em;
}

/* ------------------------------------------------------------
   Perfil
   ------------------------------------------------------------ */
.anios-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 104px), 1fr));
}

.anio-item {
  padding: 14px 10px;
  border: 1px solid var(--bd-2);
  background: transparent;
  color: var(--fg-muted);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.anio-item .a { font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }
.anio-item .e { font-size: 9px; font-weight: 800; letter-spacing: .14em; }

.anio-item[data-estado="declarada"] {
  background: var(--surface-aniv);
  border-color: rgba(192, 138, 46, .5);
  color: var(--fg);
}
.anio-item[data-estado="declarada"] .e { color: var(--gold-light); }

.anio-item[data-estado="verificada"] {
  background: var(--surface-wa);
  border-color: rgba(79, 191, 122, .5);
  color: var(--fg);
}
.anio-item[data-estado="verificada"] .e { color: #7FC79C; }

.insignia {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--bd-1);
}
.insignia .marca {
  width: 52px; height: 52px;
  flex-shrink: 0;
  border: 2px solid #4A5B4E;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 900;
  color: var(--fg-muted);
}
.insignia[data-activa="1"] {
  border-color: rgba(192, 138, 46, .4);
  background: rgba(192, 138, 46, .08);
}
.insignia[data-activa="1"] .marca { border-color: var(--gold-light); color: var(--fg); }

.avatar {
  width: clamp(110px, 16vw, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bd-3);
  background: var(--bg-alt);
}

/* ------------------------------------------------------------
   Formularios
   ------------------------------------------------------------ */
.campo { display: flex; flex-direction: column; gap: 6px; }

.campo label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.campo input,
.campo select,
.campo textarea {
  padding: 12px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--bd-2);
  color: var(--fg);
  font-size: 15px;
  font-family: inherit;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--gold); outline: none; }

.campo .hint { font-size: 11px; color: var(--fg-min); }

.error-caja {
  border: 1px solid rgba(225, 101, 58, .5);
  background: rgba(225, 101, 58, .1);
  padding: 14px 16px;
  font-size: 14px;
  color: #F2B49A;
}

/* ------------------------------------------------------------
   Footer
   El footer reserva alto libre para que el botón flotante de
   WhatsApp nunca tape el crédito.
   ------------------------------------------------------------ */
.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--bd-1);
  padding-top: var(--sep-y);
  padding-bottom: 96px;
}

.footer-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.footer a { color: var(--fg-3); font-size: 13px; }
.footer a:hover { color: var(--fg); }

.footer-legal {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--bd-1);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fg-min);
}

/* ------------------------------------------------------------
   Iconos Material Symbols
   ------------------------------------------------------------ */
.ms {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

/* ------------------------------------------------------------
   Utilidades
   ------------------------------------------------------------ */
.oculto { display: none !important; }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.oro       { color: var(--gold-light); }
.fg-2      { color: var(--fg-2); }
.fg-3      { color: var(--fg-3); }
.fg-muted  { color: var(--fg-muted); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   FIDELIDAD AL PROTOTIPO
   ============================================================
   Lo que sigue reproduce los valores exactos del prototipo de
   diseno (_diseno/Scott Marathon 2027 - Sitio.dc.html), medida
   por medida. Donde el prototipo usa estilos inline, aca hay una
   clase con el mismo valor: nada se redondeo ni se mejoro.

   Regla para editar esto: si un numero no esta en el prototipo,
   no va aca.
   ============================================================ */

/* ------------------------------------------------------------
   Header - prototipo lineas 37-81
   ------------------------------------------------------------ */
.hd {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18, 32, 26, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(244, 241, 234, .12);
}

.hd-fila {
  max-width: 1280px; margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 32px);
  min-height: 92px;
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: 28px; row-gap: 12px;
}

.hd-logo { flex-shrink: 0; display: flex; align-items: center; }
.hd-logo img { height: clamp(40px, 4.4vw, 58px); width: auto; display: block; }

.hd-nav {
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: 22px; row-gap: 8px;
  margin-left: auto; min-width: 0;
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
}
.hd-nav a { color: #A9B8AC; }
.hd-nav a:hover { color: #F4F1EA; }
.hd-nav a[aria-current] { color: #E0B25C; }

.hd-acciones { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: auto; }

.hd-lang {
  display: flex;
  border: 1px solid rgba(244, 241, 234, .2);
  border-radius: 999px; overflow: hidden;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
}
.hd-lang a { padding: 5px 11px; color: #A9B8AC; }
.hd-lang a[aria-current] { background: #F4F1EA; color: #12201A; }

.hd-cta {
  background: #C08A2E; color: #12201A;
  font-weight: 800; font-size: 13px;
  padding: 11px 20px; border-radius: 999px;
  letter-spacing: .01em; white-space: nowrap;
}
.hd-cta:hover { background: #E0B25C; color: #12201A; }

.hd-info { border-top: 1px solid rgba(244, 241, 234, .08); }

.hd-info-fila {
  max-width: 1280px; margin: 0 auto;
  padding: 9px clamp(16px, 4vw, 32px);
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: 22px; row-gap: 6px;
  font-size: 12.5px; font-weight: 600;
}

.hd-info-label { font-size: 10px; font-weight: 800; letter-spacing: .18em; color: #5E6F62; }
.hd-info a { color: #A9B8AC; }
.hd-info a:hover { color: #F4F1EA; }
.hd-info a[aria-current] { color: #E0B25C; }

.hd-res { position: relative; }
.hd-res-btn {
  background: none; border: 0; padding: 0;
  font: inherit; color: #A9B8AC;
  display: flex; align-items: center; gap: 6px;
}
.hd-res-btn:hover { color: #F4F1EA; }
.hd-res-btn .flecha { font-size: 9px; }

.hd-res-menu {
  position: absolute; top: 26px; left: -12px; z-index: 70;
  background: #18271F;
  border: 1px solid rgba(244, 241, 234, .18);
  min-width: 140px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  display: none;
}
.hd-res[data-abierto="1"] .hd-res-menu { display: block; }
.hd-res-menu a {
  display: block; padding: 11px 16px;
  font-size: 13px; color: #C7D2C8;
  border-bottom: 1px solid rgba(244, 241, 234, .07);
}
.hd-res-menu a:hover { background: #22322A; color: #E0B25C; }

/* El acceso al panel va en dorado: es de la organizacion, no del
   corredor, y conviene que se distinga del resto de la barra. */
.hd-admin { color: #E0B25C !important; font-weight: 800; }

/* ------------------------------------------------------------
   Descuento para quienes corrieron la edicion 2026

   Va en verde y no en dorado: el dorado es el color de todo el
   sitio, y esto tiene que saltar por encima. Es lo unico que hay
   que ver antes de apretar el boton que lleva al pago.
   ------------------------------------------------------------ */
.ins-descuento {
  background: rgba(79, 191, 122, .08);
  border: 1px solid rgba(79, 191, 122, .45);
  border-left: 4px solid #4FBF7A;
  padding: clamp(20px, 3vw, 26px);
  margin-bottom: 18px;
}
.ins-descuento .tag {
  font-size: 12px; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: #7FC79C;
}
.ins-descuento .body { font-size: 15.5px; color: #F4F1EA; margin-top: 10px; max-width: 60ch; text-wrap: pretty; }
.ins-descuento .cta {
  display: inline-block; margin-top: 16px;
  background: #4FBF7A; color: #0E1A15;
  font-size: 14.5px; font-weight: 900; padding: 13px 22px;
}
.ins-descuento .cta:hover { background: #7FC79C; }

/* ------------------------------------------------------------
   Carreras que todavia no se pueden comprar

   Las paginas de Short y Gravel siguen enlazadas en todo el sitio:
   son informacion y el corredor la quiere. Lo unico que se apaga
   es el camino al pago.
   ------------------------------------------------------------ */

/* El boton de comprar: mismo lugar y mismo tamano que el de
   Marathon para que la caja no se descuadre, pero apagado y sin
   ser un enlace. */
.crr-precio .cta.proximo {
  display: block; text-align: center;
  background: transparent; color: #8FA394;
  border: 1px dashed rgba(143, 163, 148, .45);
  cursor: default;
}

/* La fila de la pagina de inscripcion */
.ins-carrera.proximo { cursor: default; opacity: .72; }
.ins-carrera.proximo:hover { border-color: rgba(244, 241, 234, .14); }

.cinta-min {
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #E0B25C;
  border: 1px solid rgba(192, 138, 46, .45); padding: 4px 9px;
  white-space: nowrap;
}

.hd-wa {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  color: #7FC79C; font-weight: 700;
}
.hd-wa:hover { color: #A8DCBC; }

.punto {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4FBF7A; display: inline-block; flex-shrink: 0;
}
.punto-8 { width: 8px; height: 8px; }
.punto-9 { width: 9px; height: 9px; }

/* ------------------------------------------------------------
   Boton flotante de WhatsApp - prototipo lineas 83-85
   Fondo oscuro con borde verde, no un boton verde solido.
   ------------------------------------------------------------ */
.wa-fija {
  position: fixed;
  right: clamp(12px, 3vw, 24px);
  bottom: clamp(12px, 3vw, 24px);
  z-index: 80;
  max-width: calc(100vw - 24px);
  display: flex; align-items: center; gap: 10px;
  background: #12201A;
  border: 1.5px solid #4FBF7A;
  color: #BFEBD0;
  font-size: 13px; font-weight: 800;
  padding: 13px 20px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transition: transform .28s ease, opacity .28s ease;
}
.wa-fija:hover { background: #173026; color: #BFEBD0; }
.wa-fija[data-oculto="1"] {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------
   Contenedores - el prototipo abre cada bloque con su propio
   max-width 1280 y su padding superior, sin una seccion generica.
   ------------------------------------------------------------ */
.blq      { max-width: 1280px; margin: 0 auto; padding: clamp(48px, 7vw, 80px) clamp(18px, 4vw, 32px) 0; }
.blq-wa   { max-width: 1280px; margin: 0 auto; padding: 28px clamp(18px, 4vw, 32px) 0; }
.blq-alto { max-width: 1280px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(18px, 4vw, 32px) 0; }
.blq-med  { max-width: 1280px; margin: 0 auto; padding: clamp(36px, 5vw, 56px) clamp(18px, 4vw, 32px) 0; }
.cola     { height: 80px; }

/* ------------------------------------------------------------
   Hero de la home - prototipo lineas 89-113
   Dos columnas: el 10 con su etiqueta y sus anios a la
   izquierda, el titular y el resto a la derecha.
   ------------------------------------------------------------ */
.hero-home {
  position: relative;
  min-height: clamp(560px, 74vh, 700px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: #0E1A15;
}

/* Slide del hero. Las fotos van apiladas y solo se cruza la
   opacidad: sin desplazamientos ni escalas, que en una foto de
   fondo con un titular encima se leen como un temblor.

   El fundido dura mas que de costumbre a proposito. Es un fondo,
   no un carrusel de producto: tiene que cambiar sin que uno
   levante la vista de lo que estaba leyendo. */
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}
.hero-slide[data-activo="1"] { opacity: 1; }

/* Quien pidio menos movimiento se queda con la primera foto fija.
   El JS ademas ni siquiera descarga las otras tres. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* El helper foto() envuelve la imagen en <picture> para servir WebP con
   respaldo JPEG. El envoltorio se maqueta como bloque y hereda la
   posicion que antes tenia el <img>: asi la caja del diseno no cambia.

   Antes esto usaba display:contents, pero eso convierte al <source> en
   hijo directo del contenedor, lo blockifica y le saca el display:none
   del navegador: pasaba a ocupar lugar y descuadraba las alturas. */
picture { display: block; }
picture > source { display: none; }

/* Imagenes que cubren su contenedor: se posiciona el <picture> y el
   <img> lo llena. */
.hero-home picture,
.hsp-hero picture,
.pert-img picture,
.tj-aniv .img picture,
.crr-galeria > div picture,
.anv-fotos > div picture,
.srv-caja .foto picture {
  position: absolute; inset: 0;
}
.hero-home img,
.hsp-hero img,
.pert-img img,
.tj-aniv .img img,
.crr-galeria img,
.anv-fotos img,
.srv-caja .foto img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Marcos claros de las prendas: la imagen se ajusta al alto fijo. */
.crr-prendas .marco picture,
.anv-canguro .marco picture {
  height: 100%; display: flex; align-items: center; justify-content: center;
}

.hero-home img { object-position: 50% 42%; }

.hero-home .velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(14, 26, 21, .96) 10%,
    rgba(14, 26, 21, .8) 48%,
    rgba(14, 26, 21, .62) 78%,
    rgba(14, 26, 21, .5) 100%);
}

.hero-home .cont {
  position: relative; width: 100%;
  max-width: 1280px; margin: 0 auto;
  padding: clamp(28px, 5vw, 44px) clamp(18px, 4vw, 32px) clamp(78px, 8vw, 96px);
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: clamp(20px, 4vw, 48px);
}

.hero-diez { flex-shrink: 0; line-height: .78; }
.hero-diez .etiq { font-size: 13px; font-weight: 800; letter-spacing: .3em; color: #8FA394; margin-bottom: 14px; }
.hero-diez .anios { font-size: 13px; font-weight: 800; letter-spacing: .28em; color: #C08A2E; margin-top: 6px; }

/* El 10: gradiente radial dorado multiplicado por una trama
   diagonal, recortado al texto. */
.diez-textura {
  font-size: clamp(110px, 17vw, 250px);
  font-weight: 900; letter-spacing: -.06em;
  background-image:
    radial-gradient(circle at 28% 25%, #F5DBA4 0%, #D6A24A 42%, #8A6220 100%),
    repeating-linear-gradient(118deg, rgba(0,0,0,.32) 0 2px, rgba(255,255,255,.07) 2px 5px);
  background-blend-mode: multiply;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.hero-txt { padding-bottom: 14px; max-width: min(100%, 660px); }
.hero-txt h1 { margin: 0; font-size: clamp(38px, 7vw, 76px); font-weight: 900; letter-spacing: -.035em; line-height: .92; }

.chips-mod { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.chip-mod {
  border: 1px solid var(--c-bd);
  color: var(--c-fg);
  border-radius: 999px; padding: 7px 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
}

.hero-sub { margin-top: 22px; font-size: 17px; font-weight: 500; color: #C7D2C8; max-width: min(100%, 470px); text-wrap: pretty; }
.hero-meta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14px; font-weight: 700; letter-spacing: .06em; color: #F4F1EA; }

/* ------------------------------------------------------------
   Franja del canal de WhatsApp - prototipo lineas 116-130
   Caja dentro del contenedor, no una banda a todo el ancho.
   ------------------------------------------------------------ */
.wa-caja {
  background: #16281F;
  border: 1px solid rgba(79, 191, 122, .35);
  padding: clamp(20px, 3vw, 26px) clamp(18px, 3vw, 30px);
  display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap;
}
.wa-caja .txt { flex: 1; min-width: 280px; }
.wa-caja .tit { font-size: clamp(19px, 3vw, 24px); font-weight: 900; letter-spacing: -.02em; }
.wa-caja .bullets { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0 0; padding: 0; }
.wa-caja .bullets li { list-style: none; font-size: 14.5px; color: #A9C7B2; }
.wa-caja .sello { font-size: 12.5px; color: #6E8A78; margin-top: 8px; }
.wa-caja .btn-wa {
  background: #4FBF7A; color: #0E1A15;
  font-weight: 800; font-size: 14px;
  padding: 14px 24px; border-radius: 999px; white-space: nowrap;
}
.wa-caja .btn-wa:hover { background: #6FD494; color: #0E1A15; }

/* ------------------------------------------------------------
   Cabecera de seccion con enlace - prototipo lineas 134-137
   ------------------------------------------------------------ */
.sec-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(244, 241, 234, .14);
  padding-bottom: 18px;
}
.sec-cab h2 { margin: 0; font-size: clamp(26px, 4vw, 38px); font-weight: 900; letter-spacing: -.03em; }
.sec-link { font-size: 13px; font-weight: 700; color: #E0B25C; letter-spacing: .04em; white-space: nowrap; }

/* ------------------------------------------------------------
   Tarjetas de carrera de la home - prototipo lineas 138-152
   Sin precio y sin boton: la tarjeta entera es el enlace.
   ------------------------------------------------------------ */
.rejilla-carreras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 278px), 1fr));
  gap: 20px; margin-top: 32px;
}

.tj-carrera {
  background: #18271F;
  border: 1px solid rgba(244, 241, 234, .1);
  border-top: 4px solid var(--c);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.tj-carrera:hover { background: #1D2E25; }
.tj-carrera .foto {
  height: 190px; position: relative; overflow: hidden;
  background-color: #1E2A22;
  background-size: cover; background-position: 50% 45%;
}
/* Las tarjetas que son enlaces usan <span> por dentro para no
   anidar bloques en el <a>. Sin esto quedan en línea y se pierden
   los márgenes y los anchos máximos del diseño. */
.tj-carrera .foto,
.tj-carrera .cuerpo,
.tj-carrera .tag,
.tj-carrera .nombre,
.tj-carrera .resumen,
.tj-carrera .stats > span,
.tj-carrera .stats .v,
.tj-carrera .stats .k,
.tj-aniv .txt,
.tj-aniv .etiq,
.tj-aniv .tit,
.tj-aniv .sub,
.tj-aniv .img,
.tj-serv .ico,
.tj-serv .nombre,
.tj-serv .desc { display: block; }

.tj-aniv .cta { display: inline-block; }

.tj-carrera .cuerpo { padding: 24px; }
.tj-carrera .tag { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--c); }
.tj-carrera .nombre { font-size: 30px; font-weight: 900; letter-spacing: -.02em; margin-top: 8px; color: #F4F1EA; }
.tj-carrera .resumen { font-size: 14.5px; color: #A9B8AC; margin-top: 10px; line-height: 1.5; text-wrap: pretty; }
.tj-carrera .stats {
  display: flex; flex-wrap: wrap;
  column-gap: 16px; row-gap: 12px;
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(244, 241, 234, .1);
}
.tj-carrera .stats .v { font-size: 22px; font-weight: 900; color: #F4F1EA; }
.tj-carrera .stats .k { font-size: 10.5px; letter-spacing: .14em; color: #8FA394; font-weight: 600; margin-top: 3px; }

/* ------------------------------------------------------------
   Tarjeta de aniversario de la home - prototipo lineas 157-167
   Es una tarjeta con foto, NO la linea de tiempo: esa vive solo
   en /10-ediciones/.
   ------------------------------------------------------------ */
.tj-aniv {
  position: relative; overflow: hidden;
  background: #1A140C;
  border: 1px solid rgba(192, 138, 46, .35);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.tj-aniv .txt { padding: clamp(32px, 5vw, 52px) clamp(24px, 4vw, 48px); }
.tj-aniv .etiq { font-size: 11px; font-weight: 800; letter-spacing: .24em; color: #C08A2E; }
.tj-aniv .tit { font-size: clamp(28px, 4.5vw, 44px); font-weight: 900; letter-spacing: -.03em; margin-top: 14px; line-height: 1.02; color: #F4F1EA; }
.tj-aniv .sub { font-size: 16px; color: #BFB49C; margin-top: 16px; max-width: 430px; line-height: 1.55; text-wrap: pretty; }
.tj-aniv .cta { margin-top: 26px; display: inline-block; border-bottom: 2px solid #C08A2E; padding-bottom: 4px; font-size: 13.5px; font-weight: 800; color: #E0B25C; letter-spacing: .04em; }
.tj-aniv .img { position: relative; min-height: 280px; overflow: hidden; }
.tj-aniv .img img { object-position: 60% 45%; }

/* ------------------------------------------------------------
   Servicios de la home - prototipo lineas 170-181
   ------------------------------------------------------------ */
.sec-tit { margin: 0 0 8px; font-size: clamp(26px, 4vw, 38px); font-weight: 900; letter-spacing: -.03em; }
.sec-sub { font-size: 16px; color: #A9B8AC; max-width: 560px; text-wrap: pretty; }

.rejilla-serv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  gap: 16px; margin-top: 32px;
}
.tj-serv { background: #18271F; border: 1px solid rgba(244, 241, 234, .1); padding: 26px 22px; }
.tj-serv:hover { background: #1E2E25; }
.tj-serv .ico {
  width: 44px; height: 44px;
  border: 1.5px solid #C08A2E; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #E0B25C;
}
.tj-serv .ico .ms { font-size: 24px; }
.tj-serv .nombre { font-size: 18px; font-weight: 800; margin-top: 16px; color: #F4F1EA; }
.tj-serv .desc { font-size: 14px; color: #A9B8AC; margin-top: 7px; line-height: 1.5; text-wrap: pretty; }

/* ------------------------------------------------------------
   Bloque de pertenencia - prototipo lineas 184-195
   ------------------------------------------------------------ */
.rejilla-pert {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
.pert-img { position: relative; min-height: 320px; overflow: hidden; }

.pert-txt {
  background: #18271F; border: 1px solid rgba(244, 241, 234, .1);
  padding: clamp(28px, 4vw, 48px) clamp(22px, 3.5vw, 44px);
  display: flex; flex-direction: column; justify-content: center;
}
.pert-txt .etiq { font-size: 11px; font-weight: 800; letter-spacing: .22em; color: #C08A2E; }
.pert-txt .tit { font-size: clamp(24px, 3.6vw, 34px); font-weight: 900; letter-spacing: -.03em; margin-top: 12px; line-height: 1.08; text-wrap: pretty; }
.pert-txt .body { font-size: 16px; color: #A9B8AC; margin-top: 14px; line-height: 1.6; text-wrap: pretty; }
.pert-txt .cta {
  margin-top: 24px; align-self: flex-start;
  border: 1px solid rgba(244, 241, 234, .28);
  padding: 12px 22px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #F4F1EA;
}
.pert-txt .cta:hover { border-color: #C08A2E; color: #E0B25C; }

/* ------------------------------------------------------------
   Sponsors - prototipo lineas 198-218
   ------------------------------------------------------------ */
.sponsors-tit { font-size: 11px; font-weight: 800; letter-spacing: .24em; color: #8FA394; text-align: center; }
.sponsors-lista { display: flex; flex-direction: column; gap: 2px; margin-top: 26px; }
.sponsor-fila {
  border-top: 1px solid rgba(244, 241, 234, .1);
  padding: 26px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 24px 32px; align-items: center;
}
.sponsor-fila .etiq { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; color: #C08A2E; }
.sponsor-fila .nota { font-size: 14px; color: #8FA394; margin-top: 7px; line-height: 1.5; max-width: 340px; text-wrap: pretty; }
.sponsor-marca2 { display: flex; align-items: center; gap: 18px; min-width: 0; }
.sponsor-marca2 .logo {
  height: 52px; flex-shrink: 0;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: .95;
}
.sponsor-marca2 .nombre { font-size: 15.5px; font-weight: 800; }
.sponsor-marca2 .desc { font-size: 13.5px; color: #8FA394; margin-top: 3px; line-height: 1.45; text-wrap: pretty; }

/* ------------------------------------------------------------
   Footer - prototipo lineas 968-1012
   Los 96px de abajo son los que evitan que el boton flotante
   tape el credito.
   ------------------------------------------------------------ */
.pie {
  margin-top: 96px;
  border-top: 1px solid rgba(244, 241, 234, .12);
  background: #0E1A15;
}

.pie-grid {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(36px, 5vw, 52px) clamp(18px, 4vw, 32px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 32px;
}

.pie-blurb {
  font-size: 13.5px; color: #8FA394;
  margin-top: 10px; line-height: 1.55;
  max-width: 280px; text-wrap: pretty;
}

.pie-tit { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: #5E6F62; }

.pie-lista {
  display: flex; flex-direction: column; gap: 9px;
  margin-top: 12px; font-size: 14px;
}
.pie-lista a { color: #C7D2C8; }
.pie-lista a:hover { color: #E0B25C; }
.pie-lista .pie-wa { color: #7FC79C; }
.pie-lista .pie-wa:hover { color: #A8DCBC; }
.pie-datos { color: #C7D2C8; }

.pie-legal { border-top: 1px solid rgba(244, 241, 234, .08); }
.pie-legal-fila {
  max-width: 1280px; margin: 0 auto;
  padding: 18px clamp(18px, 4vw, 32px) 96px;
  font-size: 11.5px; color: #5E6F62;
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline;
}

/* ------------------------------------------------------------
   Inscripcion - prototipo lineas 448-562

   Dos cambios pedidos por el organizador sobre el diseno: no hay
   selector de moneda ni plan de cuotas. Los precios son fijos y
   distintos por residencia, y cada carrera lleva directo a su
   enlace de lolograste: seis en total, tres nacionales y tres
   del exterior.
   ------------------------------------------------------------ */
.ins-tit { margin: 0; font-size: clamp(30px, 5vw, 44px); font-weight: 900; letter-spacing: -.035em; }
.ins-sub { font-size: 16px; color: #A9B8AC; margin-top: 10px; }

/* Barra del camino de residencia elegido */
.ins-res {
  margin-top: 20px;
  background: #18271F;
  border: 1px solid rgba(244, 241, 234, .14);
  border-left: 4px solid #C08A2E;
  padding: 18px 22px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
}
.ins-res .txt { flex: 1; min-width: 240px; }
.ins-res .tag { font-size: 10px; font-weight: 800; letter-spacing: .18em; color: #C08A2E; }
.ins-res .nombre { font-size: 16.5px; font-weight: 800; margin-top: 6px; }
.ins-res .desc { font-size: 13.5px; color: #8FA394; margin-top: 4px; line-height: 1.5; text-wrap: pretty; }
.ins-res .cambiar {
  border: 1px solid rgba(244, 241, 234, .24);
  background: transparent;
  color: #C7D2C8; font-weight: 700; font-size: 13px;
  padding: 11px 20px; border-radius: 999px; white-space: nowrap;
}
.ins-res .cambiar:hover { border-color: #C08A2E; color: #E0B25C; }

.ins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 32px; margin-top: 36px; align-items: start;
}

/* Pasos */
.ins-pasos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.ins-paso {
  flex: 1; padding: 14px 16px;
  background: transparent;
  border: 1px solid rgba(244, 241, 234, .14);
}
.ins-paso .n { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: #5E6F62; }
.ins-paso .lbl { font-size: 14.5px; font-weight: 700; margin-top: 4px; color: #8FA394; }
.ins-paso[data-activo="1"] { background: #18271F; border-color: #C08A2E; }
.ins-paso[data-activo="1"] .n { color: #C08A2E; }
.ins-paso[data-activo="1"] .lbl { color: #F4F1EA; }

/* Las tres carreras: cada una es el enlace de salida a lolograste */
.ins-carreras { display: flex; flex-direction: column; gap: 12px; }
.ins-carrera {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px 22px;
  padding: 22px clamp(16px, 2.5vw, 24px);
  background: #18271F;
  border: 1px solid rgba(244, 241, 234, .12);
  border-left: 5px solid var(--c);
  color: inherit;
}
.ins-carrera:hover { background: #1E2E25; border-color: var(--c); color: inherit; }
.ins-carrera .marca {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--c); flex-shrink: 0;
}
.ins-carrera .med { flex: 1; min-width: 0; }
.ins-carrera .nombre { font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.ins-carrera .meta { font-size: 14px; color: #A9B8AC; margin-top: 4px; }
.ins-carrera .precio { text-align: right; }
.ins-carrera .precio .v { font-size: 22px; font-weight: 900; }
.ins-carrera .precio .k { font-size: 11.5px; color: #8FA394; font-weight: 600; letter-spacing: .08em; }
.ins-carrera .ir { color: var(--c); font-weight: 900; font-size: 18px; }

/* Requisitos */
.ins-caja {
  background: #18271F;
  border: 1px solid rgba(244, 241, 234, .12);
  padding: 30px;
}
.ins-caja .tit { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #8FA394; }
.ins-checks { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; }

/* La linea divisoria pasa del boton a la caja del requisito, para
   que el enlace quede adentro de su propio item. */
.ins-check-item { border-bottom: 1px solid rgba(244, 241, 234, .08); }

/* Enlace de un requisito. Es un boton chico y no un texto
   subrayado: subrayado se leia como una nota al pie flotando entre
   dos requisitos, y esto es una accion que hay que ir a hacer.
   Sangrado 42 px, que es donde arranca el texto de arriba: 4 del
   padding del boton, 22 del cuadrito y 16 del hueco. */
.ins-check-enlace {
  display: inline-block;
  margin: 0 0 18px 42px;
  padding: 8px 14px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: #E0B25C;
  border: 1px solid rgba(192, 138, 46, .45);
}
.ins-check-enlace:hover {
  background: rgba(192, 138, 46, .14);
  border-color: #C08A2E; color: #F4F1EA;
}
/* Sin borde propio: la linea la pone .ins-check-item, que envuelve
   tambien al enlace. Si la dejaba acá, el item con enlace mostraba
   dos lineas. */
.ins-check {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 4px;
  border: 0;
  background: none; width: 100%; text-align: left; color: inherit;
}
.ins-check .caja {
  width: 22px; height: 22px;
  border: 1.5px solid rgba(244, 241, 234, .3);
  background: transparent;
  color: #12201A; font-weight: 900; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ins-check .nombre { font-size: 15.5px; font-weight: 700; color: #C7D2C8; }
.ins-check .desc { font-size: 13.5px; color: #8FA394; margin-top: 3px; text-wrap: pretty; }
.ins-check[aria-pressed="true"] .caja { background: #C08A2E; border-color: #C08A2E; }
.ins-check[aria-pressed="true"] .nombre { color: #F4F1EA; }

/* Barra lateral */
.ins-lateral {
  position: sticky; top: 96px;
  background: #18271F;
  border: 1px solid rgba(244, 241, 234, .12);
  border-top: 4px solid #C08A2E;
  padding: 26px;
}
.ins-lateral .tit { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #8FA394; }
.ins-lateral .fila {
  margin-top: 10px;
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 15px;
}
.ins-lateral .fila:first-of-type { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(244, 241, 234, .12); }
.ins-lateral .fila .k { color: #A9B8AC; }
.ins-lateral .fila .v { font-weight: 800; }
.ins-lateral .nota { font-size: 11.5px; color: #6E7F72; margin-top: 10px; text-align: center; }
.ins-lateral .wa {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(244, 241, 234, .12);
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #A9C7B2; line-height: 1.4;
}
.ins-lateral .wa strong { font-weight: 800; color: #7FC79C; }
.ins-lateral .wa:hover { opacity: .8; }

/* ============================================================
   Resto de las pantallas, fieles al prototipo
   ============================================================ */

/* Encabezado comun de pagina interior (caminos, fotos, serv, result) */
.pg-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .24em; color: #C08A2E; }
.pg-h1 { margin: 12px 0 0; font-size: clamp(30px, 5.5vw, 52px); font-weight: 900; letter-spacing: -.04em; line-height: 1.02; }
.pg-sub { font-size: 17px; color: #A9B8AC; margin-top: 14px; max-width: 640px; line-height: 1.55; text-wrap: pretty; }

/* ------------------------------------------------------------
   Tres caminos - prototipo lineas 223-263
   Grilla de 4 columnas, no una <table>: 150px para la etiqueta
   y tres fracciones iguales. Ancho minimo 760px con scroll.
   ------------------------------------------------------------ */
.cam-h1 { margin: 12px 0 0; font-size: clamp(34px, 6vw, 60px); font-weight: 900; letter-spacing: -.04em; line-height: 1; }

.cam-scroll { overflow-x: auto; margin-top: 44px; }
.cam-tabla {
  min-width: 760px;
  display: grid;
  grid-template-columns: 150px repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(244, 241, 234, .14);
}
.cam-cab {
  padding: 26px 24px;
  border-left: 1px solid rgba(244, 241, 234, .1);
  border-top: 4px solid var(--c);
  background: #18271F;
}
.cam-cab .tag { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--c); }
.cam-cab .nombre { font-size: 32px; font-weight: 900; letter-spacing: -.025em; margin-top: 6px; color: #F4F1EA; display: block; }

.cam-fila { display: contents; }
.cam-lbl {
  padding: 20px 0;
  border-bottom: 1px solid rgba(244, 241, 234, .1);
  font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #8FA394;
  display: flex; align-items: center;
}
.cam-val {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(244, 241, 234, .1);
  border-left: 1px solid rgba(244, 241, 234, .1);
  font-size: 16px; font-weight: 600;
  display: flex; align-items: center; text-wrap: pretty;
}
.cam-pie { padding: 22px 24px; border-left: 1px solid rgba(244, 241, 234, .1); }
.cam-btn {
  display: block;
  background: var(--c); color: #0E1A15;
  font-weight: 800; font-size: 13.5px;
  padding: 13px 0; text-align: center; border-radius: 999px;
}
.cam-btn:hover { color: #0E1A15; filter: brightness(1.1); }

.cam-duda {
  margin-top: 44px;
  background: #18271F; border: 1px solid rgba(244, 241, 234, .1);
  padding: clamp(22px, 3vw, 30px);
  display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center;
}
.cam-duda .signo { font-size: 44px; font-weight: 900; color: #C08A2E; line-height: 1; }
.cam-duda .tit { font-size: 19px; font-weight: 800; }
.cam-duda .body { font-size: 15px; color: #A9B8AC; margin-top: 6px; text-wrap: pretty; }

/* ------------------------------------------------------------
   Pagina de carrera - prototipo lineas 266-394
   ------------------------------------------------------------ */
.crr-hero {
  position: relative;
  min-height: clamp(340px, 45vh, 420px);
  display: flex; align-items: flex-end;
  background: #0E1A15; overflow: hidden;
}
.crr-hero .foto { position: absolute; inset: 0; background-color: #1E2A22; background-size: cover; background-position: center center; }
.crr-hero .velo { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,26,21,.95) 10%, rgba(14,26,21,.3) 80%); }
.crr-hero .franja { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--c); }
.crr-hero .cont {
  position: relative; width: 100%;
  max-width: 1280px; margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 32px) clamp(32px, 5vw, 52px);
}
.crr-hero .tag { font-size: 11px; font-weight: 800; letter-spacing: .24em; color: var(--c); }
.crr-hero h1 { margin: 10px 0 0; font-size: clamp(40px, 8vw, 82px); font-weight: 900; letter-spacing: -.04em; line-height: .95; }
.crr-hero .resumen { font-size: 18px; color: #C7D2C8; margin-top: 12px; max-width: 560px; text-wrap: pretty; }

.crr-stats { border-bottom: 1px solid rgba(244, 241, 234, .12); background: #18271F; }
.crr-stats .cont {
  max-width: 1280px; margin: 0 auto;
  padding: 26px clamp(18px, 4vw, 32px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(45%, 120px), 1fr));
  gap: 20px;
}
.crr-stats .v { font-size: 28px; font-weight: 900; letter-spacing: -.02em; }
.crr-stats .k { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: #8FA394; margin-top: 4px; }

.crr-cuerpo {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) clamp(18px, 4vw, 32px) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(24px, 4vw, 48px);
}
.crr-h2 { margin: 0; font-size: clamp(24px, 3.6vw, 32px); font-weight: 900; letter-spacing: -.03em; }
.crr-texto { font-size: 16px; color: #A9B8AC; margin-top: 16px; line-height: 1.62; text-wrap: pretty; }

.crr-tramos {
  margin-top: 26px;
  background: #18271F;
  border: 1px solid rgba(244, 241, 234, .1);
  border-left: 4px solid var(--c);
}
.crr-tramo {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(244, 241, 234, .07);
}
.crr-tramo .km { flex-shrink: 0; width: 64px; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--c); }
.crr-tramo .nombre { font-size: 16.5px; font-weight: 800; }
.crr-tramo .desc { font-size: 14px; color: #A9B8AC; margin-top: 4px; line-height: 1.5; text-wrap: pretty; }
.crr-tramos .nota { padding: 16px 24px; font-size: 13px; color: #6E7F72; text-wrap: pretty; }

.crr-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 14px; margin-top: 26px;
}
.crr-galeria > div { position: relative; height: 170px; overflow: hidden; }


.crr-precio {
  background: #18271F;
  border: 1px solid rgba(244, 241, 234, .12);
  border-top: 4px solid var(--c);
  padding: 30px;
}
.crr-precio .lbl { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #8FA394; }
.crr-precio .cifra { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.crr-precio .cifra .v { font-size: clamp(32px, 5vw, 42px); font-weight: 900; letter-spacing: -.03em; }
.crr-precio .cifra .m { font-size: 13px; color: #8FA394; font-weight: 600; }
.crr-precio .nota { font-size: 14px; color: #C7D2C8; margin-top: 10px; line-height: 1.5; text-wrap: pretty; }
.crr-precio .congela {
  margin-top: 12px; background: #1A140C; border-left: 3px solid #C08A2E;
  padding: 12px 14px; font-size: 13.5px; font-weight: 700; color: #E0B25C; text-wrap: pretty;
}
.crr-precio .cta {
  display: block; margin-top: 20px;
  background: #C08A2E; color: #12201A;
  font-weight: 800; font-size: 14.5px;
  padding: 15px 0; text-align: center; border-radius: 999px;
}
.crr-precio .cta:hover { background: #E0B25C; color: #12201A; }
.crr-incluye {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid rgba(244, 241, 234, .12);
  display: flex; flex-direction: column; gap: 9px;
}
.crr-incluye li { list-style: none; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #C7D2C8; }
.crr-incluye li::before { content: "·"; color: var(--c); font-weight: 900; }
.crr-extras { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(244, 241, 234, .12); }
.crr-extras .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .18em; color: #8FA394; }
.crr-extras .lista { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.crr-extras .item { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; }
.crr-extras .item .n { color: #C7D2C8; }
.crr-extras .item .p { font-weight: 800; }
.crr-extras .nota { font-size: 12.5px; color: #6E7F72; margin-top: 10px; }

/* Las dos prendas de los 3 dias */
.crr-prendas {
  margin-top: 20px; background: #18271F;
  border: 1px solid rgba(244, 241, 234, .12); overflow: hidden;
}
.crr-prendas .cab { padding: 22px 24px 0; }
.crr-prendas .tag { font-size: 10.5px; font-weight: 800; letter-spacing: .18em; color: #C08A2E; }
.crr-prendas .tit { font-size: 19px; font-weight: 900; margin-top: 7px; letter-spacing: -.02em; text-wrap: pretty; }
.crr-prendas .body { font-size: 14px; color: #A9B8AC; margin-top: 7px; line-height: 1.5; text-wrap: pretty; }
.crr-prendas .par {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin-top: 20px; background: rgba(244, 241, 234, .1);
}
/* overflow:hidden acota la imagen a la altura de la caja: sin
   esto el <img> aporta su alto intrinseco al alto de la fila
   de la grilla y el pie de la tarjeta cae 96px de mas. */
.crr-prendas .par > div { display: flex; flex-direction: column; }
/* El marco es un <button>: de ahi el reset. El cursor de lupa es
   lo unico que anticipa que la foto se amplia. */
.crr-prendas .marco {
  height: 180px; flex-shrink: 0; overflow: hidden;
  background: #F2F2F0;
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 0; border: 0;
  -webkit-appearance: none; appearance: none;
  font: inherit; color: inherit;
  cursor: zoom-in;
}
.crr-prendas .marco img { height: 100%; width: auto; display: block; }
.crr-prendas .marco:focus-visible { outline: 2px solid #C08A2E; outline-offset: -2px; }
.crr-prendas .rotulo { padding: 14px 16px; background: #18271F; }
.crr-prendas .rotulo .n { font-size: 14.5px; font-weight: 800; }
.crr-prendas .rotulo .d { font-size: 12.5px; color: #8FA394; margin-top: 4px; line-height: 1.4; text-wrap: pretty; }

.crr-otros { margin-top: 20px; background: #18271F; border: 1px solid rgba(244, 241, 234, .12); padding: 24px; }
.crr-otros .lbl { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #8FA394; }
.crr-otros .lista { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.crr-otro {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(244, 241, 234, .14);
  border-left: 4px solid var(--c);
  color: inherit;
}
.crr-otro:hover { background: #1E2E25; color: inherit; }
.crr-otro .n { font-size: 17px; font-weight: 800; }
.crr-otro .d { font-size: 13px; color: #8FA394; margin-top: 2px; }
.crr-otro .flecha { margin-left: auto; color: var(--c); font-weight: 900; }

/* ------------------------------------------------------------
   10 ediciones - prototipo lineas 397-444
   ------------------------------------------------------------ */
.anv { background: #1A140C; }
.anv-cab {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(18px, 4vw, 32px) 0;
  display: flex; flex-wrap: wrap;
  gap: clamp(16px, 3vw, 52px); align-items: flex-end;
}
.anv-diez { line-height: .78; }
.anv-diez .n {
  font-size: clamp(100px, 15vw, 220px);
  font-weight: 900; letter-spacing: -.06em;
  background-image:
    radial-gradient(circle at 28% 25%, #F5DBA4 0%, #D6A24A 42%, #8A6220 100%),
    repeating-linear-gradient(118deg, rgba(0,0,0,.34) 0 2px, rgba(255,255,255,.08) 2px 5px);
  background-blend-mode: multiply;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.anv-txt { padding-bottom: 22px; }
.anv-txt .etiq { font-size: 11px; font-weight: 800; letter-spacing: .24em; color: #C08A2E; }
.anv-txt h1 { margin: 12px 0 0; font-size: clamp(32px, 5.5vw, 56px); font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.anv-txt .sub { font-size: 17px; color: #BFB49C; margin-top: 14px; max-width: 560px; line-height: 1.55; text-wrap: pretty; }

.anv-linea {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(36px, 5vw, 56px) clamp(18px, 4vw, 32px) 0;
}
.anv-anios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
  border-top: 1px solid rgba(192, 138, 46, .3);
}
.anv-anio { padding-top: 20px; border-top: 3px solid var(--barra); min-height: 190px; }
.anv-anio .y { font-size: 19px; font-weight: 900; letter-spacing: -.02em; color: var(--fgc); }
.anv-anio .t { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--tagc); margin-top: 5px; }
.anv-anio .n { font-size: 12.5px; color: #9C907A; margin-top: 10px; line-height: 1.45; text-wrap: pretty; }
.anv-nota { font-size: 12px; color: #7A6E5A; margin-top: 18px; font-family: ui-monospace, Menlo, monospace; }

.anv-fotos {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) clamp(18px, 4vw, 32px) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.anv-fotos > div { position: relative; height: 300px; overflow: hidden; }


.anv-canguro {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) clamp(18px, 4vw, 32px) 0;
}
.anv-canguro .caja {
  background: #12201A; border: 1px solid rgba(192, 138, 46, .35);
  padding: clamp(26px, 4vw, 44px) clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3.5vw, 44px); align-items: center;
}
.anv-canguro .etiq { font-size: 11px; font-weight: 800; letter-spacing: .22em; color: #C08A2E; }
.anv-canguro .tit { font-size: clamp(26px, 4vw, 36px); font-weight: 900; letter-spacing: -.03em; margin-top: 12px; line-height: 1.05; text-wrap: pretty; }
.anv-canguro .body { font-size: 16px; color: #A9B8AC; margin-top: 14px; line-height: 1.6; text-wrap: pretty; }
.anv-canguro .cta {
  margin-top: 24px; display: inline-block;
  background: #C08A2E; color: #12201A;
  font-weight: 800; font-size: 14px;
  padding: 14px 26px; border-radius: 999px;
}
.anv-canguro .cta:hover { background: #E0B25C; color: #12201A; }
/* El fondo del marco es el mismo que traen las fotos de producto.
   Estaba en #F2F2F0, que tira a amarillo, contra el #EFEFEF del
   jersey y el #F0EEEE del canguro: se veia el corte entre la foto
   y el marco, sobre todo con el jersey, que es angosto y deja mas
   marco a la vista. #F0EFEF queda a uno o dos puntos de las dos y
   la union desaparece. */
.anv-canguro .marco {
  height: 340px; overflow: hidden; background: #F0EFEF;
  position: relative;
}
.anv-canguro .marco img { height: 100%; width: auto; display: block; }

/* Las dos prendas apiladas, cruzando la opacidad.
   El fundido es corto: con 1,5 s por prenda, uno largo dejaria la
   imagen a medio camino todo el tiempo. */
.anv-prenda {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .45s ease-in-out;
}
.anv-prenda[data-activo="1"] { opacity: 1; }

.anv-prenda .rotulo {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 12px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; text-align: center;
  color: #4A5B4E; background: rgba(240, 239, 239, .88);
}

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

/* ------------------------------------------------------------
   Resultados - prototipo lineas 672-741
   ------------------------------------------------------------ */
.res-url { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #5E6F62; }
.res-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.res-lbl { font-size: 10px; font-weight: 800; letter-spacing: .18em; color: #5E6F62; }
.res-pill {
  padding: 8px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: .06em;
  background: transparent; color: #A9B8AC;
  border: 1px solid rgba(244, 241, 234, .22);
}
.res-pill[aria-current], .res-pill[aria-selected="true"] { background: #F4F1EA; color: #12201A; border-color: #F4F1EA; }

.res-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px;
  border-bottom: 1px solid rgba(244, 241, 234, .12); padding-bottom: 20px;
}
.res-tab {
  padding: 11px 20px; font-size: 13.5px; font-weight: 800; letter-spacing: .02em;
  background: transparent; color: #C7D2C8;
  border: 1px solid rgba(244, 241, 234, .2);
}
.res-tab[aria-selected="true"] { background: var(--c); color: #0E1A15; border-color: var(--c); }

.res-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }
.res-buscador {
  flex: 1; min-width: 220px;
  background: #18271F; border: 1px solid rgba(244, 241, 234, .16);
  color: #F4F1EA; font-family: inherit; font-size: 14.5px;
  padding: 13px 16px; outline: none;
}
.res-tam { padding: 8px 13px; font-size: 12.5px; font-weight: 800; background: transparent; color: #A9B8AC; border: 1px solid rgba(244, 241, 234, .2); }
.res-tam[aria-selected="true"] { background: #F4F1EA; color: #12201A; border-color: #F4F1EA; }

.res-tabla {
  margin-top: 20px; overflow-x: auto;
  border: 1px solid rgba(244, 241, 234, .12);
  border-top: 4px solid var(--c);
  background: #18271F;
}
.res-tabla .interior { min-width: 720px; }
.res-cab, .res-fila {
  display: grid;
  grid-template-columns: 64px 74px 2fr 1.2fr 1fr;
  gap: 0; padding: 14px 20px;
}
.res-cab {
  border-bottom: 1px solid rgba(244, 241, 234, .14);
  font-size: 10px; font-weight: 800; letter-spacing: .16em; color: #8FA394;
}
.res-fila { border-bottom: 1px solid rgba(244, 241, 234, .07); align-items: center; }
.res-fila:nth-child(odd) { background: rgba(244, 241, 234, .03); }
.res-fila .pos { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.res-fila .pos.podio { color: #E0B25C; }
.res-fila .dorsal { font-size: 14px; color: #8FA394; font-variant-numeric: tabular-nums; }
.res-fila .corredor { font-size: 15.5px; font-weight: 700; }
.res-fila .equipo { font-size: 12.5px; color: #8FA394; margin-top: 2px; }
.res-fila .cat { font-size: 13.5px; color: #C7D2C8; }
.res-fila .tiempo { font-size: 16px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.res-vacio { padding: 48px 20px; text-align: center; font-size: 14.5px; color: #8FA394; }
.res-pie {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 8px 20px; margin-top: 14px; font-size: 12.5px; color: #6E7F72;
}
.res-wa {
  margin-top: 32px; background: #16281F;
  border: 1px solid rgba(79, 191, 122, .35);
  padding: 20px 24px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px;
}
.res-wa .txt { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 700; }
.res-wa .btn {
  background: #4FBF7A; color: #0E1A15;
  font-weight: 800; font-size: 13.5px;
  padding: 12px 22px; border-radius: 999px;
}
.res-wa .btn:hover { background: #6FD494; color: #0E1A15; }
.cola-60 { height: 60px; }

/* ------------------------------------------------------------
   Fotos - prototipo lineas 744-776
   ------------------------------------------------------------ */
.fot-anios { display: flex; gap: 8px; margin-top: 30px; flex-wrap: wrap; }
.fot-anio {
  padding: 9px 22px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: .06em;
  background: transparent; color: #A9B8AC;
  border: 1px solid rgba(244, 241, 234, .22);
}
.fot-anio[aria-selected="true"] { background: #F4F1EA; color: #12201A; border-color: #F4F1EA; }

.fot-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px; margin-top: 26px;
}
.fot-album {
  background: #18271F;
  border: 1px solid rgba(244, 241, 234, .1);
  border-top: 4px solid var(--c);
  color: inherit; display: block;
}
.fot-album:hover { background: #1E2E25; color: inherit; }
.fot-album .foto {
  display: block; height: 180px; position: relative; overflow: hidden;
  background-color: #1E2A22; background-size: cover; background-position: 50% 45%;
}
.fot-album .cuerpo { display: block; padding: 20px 22px; }
.fot-album .mod { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .2em; color: var(--c); }
.fot-album .lbl { display: block; font-size: 21px; font-weight: 900; letter-spacing: -.02em; margin-top: 6px; }
.fot-album .abrir { display: block; font-size: 13px; font-weight: 700; color: #E0B25C; margin-top: 12px; }
.fot-vacio {
  margin-top: 26px; border: 1px dashed rgba(244, 241, 234, .22);
  padding: 44px; text-align: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px; color: #7C8E80; line-height: 1.6; text-wrap: pretty;
}

/* ------------------------------------------------------------
   Hospedaje - prototipo lineas 779-864
   ------------------------------------------------------------ */
.hsp-hero {
  position: relative;
  min-height: clamp(520px, 62vh, 620px);
  display: flex; align-items: flex-end;
  background: #0E1A15; overflow: hidden;
}
.hsp-hero img { object-position: 50% 40%; }
.hsp-hero .velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(14,26,21,.97) 34%, rgba(14,26,21,.55) 52%, rgba(14,26,21,.2) 100%);
}
.hsp-hero .cont {
  position: relative; width: 100%; pointer-events: none;
  max-width: 1280px; margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 32px) clamp(32px, 5vw, 52px);
}
.hsp-hero h1 { margin: 12px 0 0; font-size: clamp(30px, 5.5vw, 52px); font-weight: 900; letter-spacing: -.04em; line-height: 1.02; max-width: 820px; text-wrap: pretty; }
.hsp-hero .sub { font-size: 17px; color: #C7D2C8; margin-top: 14px; max-width: 620px; line-height: 1.55; text-wrap: pretty; }

.hsp-aviso {
  background: #1A140C;
  border: 1px solid rgba(192, 138, 46, .4);
  border-left: 4px solid #C08A2E;
  padding: 22px 26px;
  font-size: 15.5px; color: #D6CBB4; line-height: 1.55;
  max-width: 820px; text-wrap: pretty;
}

.hsp-galeria {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 14px;
}
.hsp-shot {
  position: relative; height: 220px; overflow: hidden;
  background-color: #1E2A22; background-size: cover; background-position: center;
}
.hsp-shot .lbl {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 14px;
  background: linear-gradient(to top, rgba(14,26,21,.9), transparent);
  font-size: 12.5px; font-weight: 700;
}

.hsp-cab {
  margin-top: 48px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(244, 241, 234, .14); padding-bottom: 16px;
}
.hsp-cab h2 { margin: 0; font-size: clamp(24px, 3.6vw, 32px); font-weight: 900; letter-spacing: -.03em; }
.hsp-cab .nota { font-size: 13px; color: #8FA394; }

.hsp-paquetes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 24px; }
.hsp-paquete { background: #18271F; border: 1px solid rgba(244, 241, 234, .1); padding: 26px 24px; display: flex; flex-direction: column; }
.hsp-paquete .n { font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
.hsp-paquete .m { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: #C08A2E; margin-top: 8px; }
.hsp-paquete .d { font-size: 14.5px; color: #A9B8AC; margin-top: 12px; line-height: 1.5; text-wrap: pretty; }

.hsp-cta {
  margin-top: 20px; display: inline-block;
  border: 1px solid #4FBF7A; color: #BFEBD0;
  font-weight: 800; font-size: 13.5px;
  padding: 13px 24px; border-radius: 999px;
}
.hsp-cta:hover { background: #173026; color: #BFEBD0; }

.hsp-kits { margin-top: 52px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.hsp-kit { background: #18271F; border: 1px solid rgba(244, 241, 234, .1); padding: 30px; }
.hsp-kit .lbl { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #8FA394; }
.hsp-kit ul { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0; padding: 0; }
.hsp-kit li { list-style: none; display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.hsp-kit li::before { content: "·"; font-weight: 900; }
.hsp-kit.obligatorio li { color: #F4F1EA; }
.hsp-kit.obligatorio li::before { color: #C08A2E; }
.hsp-kit.recomendado li { color: #C7D2C8; }
.hsp-kit.recomendado li::before { color: #5E6F62; }

.hsp-bicis {
  margin-top: 20px; background: #241A12;
  border: 1px solid rgba(225, 101, 58, .4);
  border-left: 4px solid #E1653A;
  padding: 22px 26px;
}
.hsp-bicis .t { font-size: 17px; font-weight: 800; }
.hsp-bicis .b { font-size: 14.5px; color: #C0AFA2; margin-top: 6px; }

.hsp-h2 { margin: 52px 0 0; font-size: clamp(24px, 3.6vw, 32px); font-weight: 900; letter-spacing: -.03em; }
.hsp-servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 22px; }
.hsp-serv { display: flex; gap: 14px; align-items: center; background: #18271F; border: 1px solid rgba(244, 241, 234, .1); padding: 16px 18px; }
.hsp-serv .ico {
  width: 38px; height: 38px;
  border: 1.5px solid rgba(192, 138, 46, .55); border-radius: 9px;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #E0B25C;
}
.hsp-serv .ico .ms { font-size: 21px; }
.hsp-serv .t { font-size: 14.5px; color: #C7D2C8; text-wrap: pretty; }

.hsp-contacto {
  margin-top: 52px; background: #18271F;
  border: 1px solid rgba(244, 241, 234, .12);
  border-top: 4px solid #C08A2E;
  padding: clamp(22px, 3.5vw, 32px);
}
.hsp-contacto .lbl { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #8FA394; }
.hsp-contacto .n { font-size: 24px; font-weight: 900; margin-top: 8px; letter-spacing: -.02em; }
.hsp-contacto .rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 20px; }
.hsp-contacto .item { border: 1px solid rgba(244, 241, 234, .14); padding: 16px 18px; display: block; color: inherit; }
.hsp-contacto .item:hover { border-color: #C08A2E; color: inherit; }
.hsp-contacto .item .k { display: block; font-size: 10px; font-weight: 800; letter-spacing: .16em; color: #5E6F62; }
.hsp-contacto .item .v { display: block; font-size: 14.5px; font-weight: 700; color: #E0B25C; margin-top: 6px; word-break: break-all; }

/* ------------------------------------------------------------
   Servicios - prototipo lineas 867-936
   ------------------------------------------------------------ */
.srv-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px; margin-top: 36px;
}
.srv-caja {
  background: #18271F;
  border: 1px solid rgba(244, 241, 234, .1);
  border-top: 4px solid var(--c);
  display: flex; flex-direction: column;
}
.srv-caja .foto { position: relative; height: 220px; overflow: hidden; }

.srv-caja .cuerpo { padding: 30px; display: flex; flex-direction: column; flex: 1; }
.srv-caja .marca { display: flex; align-items: center; gap: 12px; }
.srv-caja .marca .ms { font-size: 26px; color: var(--c); }
.srv-caja .marca .n { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--c); }
.srv-caja .claim { font-size: 28px; font-weight: 900; letter-spacing: -.025em; margin-top: 8px; line-height: 1.1; text-wrap: pretty; }
.srv-caja .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .18em; color: #8FA394; margin-top: 22px; }
.srv-caja ul { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; padding: 0; }
.srv-caja li { list-style: none; display: flex; gap: 10px; font-size: 14.5px; color: #C7D2C8; }
.srv-caja li::before { content: "·"; color: var(--c); font-weight: 900; }
.srv-caja .datos {
  display: flex; gap: 28px; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(244, 241, 234, .1); flex-wrap: wrap;
}
.srv-caja .datos > div { flex: 1; min-width: 130px; }
.srv-caja .datos .k { font-size: 10px; font-weight: 800; letter-spacing: .16em; color: #5E6F62; }
.srv-caja .datos .v { font-size: 14px; margin-top: 5px; }
.srv-caja .aviso {
  margin-top: 18px; background: #241A12; border-left: 3px solid #E1653A;
  padding: 12px 16px; font-size: 14px; font-weight: 700; color: #F0A183;
}
.srv-caja .cta {
  display: block; margin-top: 20px;
  background: #4FBF7A; color: #0E1A15;
  font-weight: 800; font-size: 14px;
  padding: 14px 0; text-align: center; border-radius: 999px;
}
.srv-caja .cta:hover { background: #6FD494; color: #0E1A15; }
.srv-caja .cta-abajo { margin-top: auto; padding-top: 20px; }

/* ------------------------------------------------------------
   Modal de residencia - prototipo lineas 939-965
   ------------------------------------------------------------ */
.md {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8, 15, 12, .82);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 40px);
}
.md[data-abierto="1"] { display: flex; }
.md-caja {
  width: 100%; max-width: 720px;
  background: #12201A;
  border: 1px solid rgba(244, 241, 234, .16);
  border-top: 4px solid #C08A2E;
  max-height: 92vh; overflow-y: auto;
}
.md-cab {
  padding: clamp(26px, 4vw, 38px) clamp(22px, 4vw, 38px) 0;
  display: flex; align-items: flex-start; gap: 20px;
}
.md-cab .etiq { font-size: 10.5px; font-weight: 800; letter-spacing: .2em; color: #C08A2E; }
.md-cab .tit { font-size: clamp(24px, 3.6vw, 32px); font-weight: 900; letter-spacing: -.03em; margin-top: 10px; line-height: 1.1; text-wrap: pretty; }
.md-cab .body { font-size: 15.5px; color: #A9B8AC; margin-top: 10px; line-height: 1.55; text-wrap: pretty; }
.md-cerrar {
  margin-left: auto; flex-shrink: 0;
  width: 34px; height: 34px;
  border: 1px solid rgba(244, 241, 234, .2);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #A9B8AC;
}
.md-cerrar:hover { border-color: #C08A2E; color: #E0B25C; }

/* ------------------------------------------------------------
   Lupa — la foto de una prenda, en grande

   Mismo fondo y mismo z-index que el modal de residencia: nunca
   se abren los dos a la vez, y asi se comportan igual.

   La caja no lleva fondo propio a proposito. Las fotos de las
   prendas vienen recortadas sobre gris muy claro; cualquier marco
   oscuro alrededor le dibujaria un borde que la foto no tiene.
   ------------------------------------------------------------ */
.lupa {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8, 15, 12, .92);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 40px);
}
.lupa[data-abierto="1"] { display: flex; }

.lupa-caja { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }

.lupa-marco { display: flex; }

/* width y height en auto pisan los atributos del recorte chico:
   sin esto la imagen ampliada saldria de 300 px, que es la medida
   que declara la miniatura. */
.lupa-marco img {
  display: block;
  width: auto; height: auto;
  max-width: min(100%, 720px);
  max-height: calc(100vh - 150px);
}

.lupa-rotulo {
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: #C7D2C8; text-align: center;
}

.lupa-cerrar {
  position: absolute; top: clamp(12px, 3vw, 24px); right: clamp(12px, 3vw, 24px);
  width: 40px; height: 40px;
  border: 1px solid rgba(244, 241, 234, .25);
  background: rgba(8, 15, 12, .5);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #A9B8AC;
  cursor: pointer;
}
.lupa-cerrar:hover { border-color: #C08A2E; color: #E0B25C; }
.md-ops {
  padding: clamp(22px, 3vw, 30px) clamp(22px, 4vw, 38px) clamp(26px, 4vw, 38px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 14px;
}
.md-op {
  background: #18271F;
  border: 1px solid rgba(244, 241, 234, .14);
  border-left: 4px solid var(--c);
  padding: 24px; text-align: left; color: inherit;
}
.md-op:hover { background: #1E2E25; border-color: var(--c); }
.md-op .tag { display: block; font-size: 10px; font-weight: 800; letter-spacing: .18em; color: var(--fgc); }
.md-op .n { display: block; font-size: 21px; font-weight: 900; letter-spacing: -.02em; margin-top: 8px; }
.md-op .d { display: block; font-size: 14px; color: #A9B8AC; margin-top: 9px; line-height: 1.5; text-wrap: pretty; }
.md-op .m { display: block; font-size: 12.5px; font-weight: 800; color: #E0B25C; margin-top: 16px; letter-spacing: .04em; }

/* ------------------------------------------------------------
   Perfil - prototipo lineas 565-669
   ------------------------------------------------------------ */
.prf-cab { display: flex; flex-wrap: wrap; gap: 22px 28px; align-items: center; }
.prf-avatar {
  width: 104px; height: 104px; border-radius: 50%;
  overflow: hidden; border: 2px solid rgba(192, 138, 46, .5);
  flex-shrink: 0; background: #18271F;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #5E6F62; text-align: center;
}
.prf-cab .etiq { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #8FA394; }
.prf-cab h1 { margin: 6px 0 0; font-size: clamp(30px, 5vw, 46px); font-weight: 900; letter-spacing: -.035em; }
.prf-cab .meta { font-size: 14.5px; color: #A9B8AC; margin-top: 4px; }
.prf-nums { margin-left: auto; display: flex; flex-wrap: wrap; gap: 14px; }
.prf-num { text-align: center; padding: 18px 24px; background: #18271F; border: 1px solid rgba(244, 241, 234, .12); }
.prf-num .v { font-size: 32px; font-weight: 900; }
.prf-num .k { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: #8FA394; margin-top: 3px; }
.prf-num.oro { background: #1A140C; border-color: rgba(192, 138, 46, .4); }
.prf-num.oro .v { color: #E0B25C; }
.prf-num.oro .k { color: #A08A5F; }

.prf-foto {
  margin-top: 26px; background: #16281F;
  border: 1px solid rgba(79, 191, 122, .35);
  border-left: 4px solid #4FBF7A;
  padding: 20px 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
}
.prf-foto .txt { flex: 1; min-width: 260px; }
.prf-foto .t { font-size: 16.5px; font-weight: 800; }
.prf-foto .b { font-size: 14px; color: #A9C7B2; margin-top: 5px; line-height: 1.5; text-wrap: pretty; }
.prf-foto .cta { border: 1px solid #4FBF7A; color: #BFEBD0; font-weight: 800; font-size: 13px; padding: 12px 22px; border-radius: 999px; white-space: nowrap; }

.prf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 32px; margin-top: 40px; align-items: start;
}
.prf-h2 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -.025em; }
.prf-p { font-size: 15px; color: #A9B8AC; margin-top: 8px; line-height: 1.55; text-wrap: pretty; }

.prf-anios { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin-top: 22px; }
.prf-anio {
  padding: 16px 12px; text-align: center;
  background: transparent; border: 1px solid rgba(244, 241, 234, .14);
}
.prf-anio .y { font-size: 20px; font-weight: 900; color: #7C8E80; font-variant-numeric: tabular-nums; }
.prf-anio .e { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; color: #5E6F62; margin-top: 5px; }

.prf-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-top: 18px; }
.prf-campo { background: #18271F; border: 1px solid rgba(244, 241, 234, .1); padding: 18px 20px; }
.prf-campo .k { font-size: 10px; font-weight: 800; letter-spacing: .16em; color: #5E6F62; }
.prf-campo .v { font-size: 15.5px; font-weight: 700; margin-top: 7px; text-wrap: pretty; }
.prf-campo .h { font-size: 12.5px; color: #8FA394; margin-top: 4px; text-wrap: pretty; }

.prf-insignias { background: #1A140C; border: 1px solid rgba(192, 138, 46, .4); padding: 26px; }
.prf-insignias .lbl { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #C08A2E; }
.prf-insignias .lista { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.prf-insignia {
  display: flex; align-items: center; gap: 16px; padding: 16px;
  border: 1px solid rgba(244, 241, 234, .12); background: transparent;
}
.prf-insignia .marca {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid #4A5B4E; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px; color: #4A5B4E; letter-spacing: -.03em;
}
.prf-insignia .n { font-size: 15.5px; font-weight: 800; color: #8FA394; }
.prf-insignia .d { font-size: 13px; color: #8FA394; margin-top: 3px; line-height: 1.45; text-wrap: pretty; }
.prf-insignias .nota { font-size: 12.5px; color: #7A6E5A; margin-top: 14px; text-wrap: pretty; }

.prf-proximos { margin-top: 20px; background: #18271F; border: 1px solid rgba(244, 241, 234, .12); padding: 24px; }
.prf-proximos .lbl { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #8FA394; }
.prf-proximos .lista { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.prf-proximo {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  padding: 14px 16px;
  border: 1px solid rgba(244, 241, 234, .14);
  border-left: 4px solid var(--c);
  color: inherit;
}
.prf-proximo:hover { background: #1E2E25; color: inherit; }
.prf-proximo .n { font-size: 15.5px; font-weight: 800; }
.prf-proximo .d { font-size: 12.5px; color: #8FA394; margin-top: 2px; }
.prf-proximo .ir { margin-left: auto; font-size: 11.5px; font-weight: 800; color: #E0B25C; letter-spacing: .06em; }

.prf-wa {
  margin-top: 20px; background: #16281F;
  border: 1px solid rgba(79, 191, 122, .35);
  padding: 20px 22px; display: block; color: inherit;
}
.prf-wa:hover { background: #1B3226; color: inherit; }
.prf-wa .t { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; }
.prf-wa .b { font-size: 13.5px; color: #A9C7B2; margin-top: 7px; line-height: 1.5; text-wrap: pretty; }

/* ============================================================
   Cuentas de corredor y panel (etapa 2)
   Mismos tokens y medidas que el resto del sitio.
   ============================================================ */

/* ------------------------------------------------------------
   Formularios de registro e ingreso
   ------------------------------------------------------------ */
.cuenta-caja {
  max-width: 460px;
  background: #18271F;
  border: 1px solid rgba(244, 241, 234, .12);
  border-top: 4px solid #C08A2E;
  padding: clamp(24px, 4vw, 38px);
}
.cuenta-caja-ancha { max-width: 720px; }

.cuenta-h1 { margin: 12px 0 0; font-size: clamp(26px, 4vw, 38px); font-weight: 900; letter-spacing: -.035em; }
.cuenta-sub { font-size: 15.5px; color: #A9B8AC; margin-top: 10px; line-height: 1.55; text-wrap: pretty; }

.cuenta-form { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.cuenta-par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 16px;
}

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label {
  font-size: 10px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: #8FA394;
}
.campo label .opc { color: #5E6F62; letter-spacing: .06em; }

.campo input, .campo select, .campo textarea {
  padding: 12px 14px;
  background: #0E1A15;
  border: 1px solid rgba(244, 241, 234, .16);
  color: #F4F1EA;
  font-size: 15px; font-family: inherit;
}
.campo input:focus { border-color: #C08A2E; outline: none; }
.campo input[aria-invalid="true"] { border-color: #E1653A; }
.campo input[readonly] { color: #A9B8AC; background: #16221C; }

.campo .hint { font-size: 12px; color: #6E7F72; line-height: 1.45; text-wrap: pretty; }
.campo-error { font-size: 12.5px; color: #F0A183; line-height: 1.45; }

.cuenta-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: #C7D2C8; cursor: pointer;
}
.cuenta-check input { margin-top: 2px; accent-color: #C08A2E; width: 16px; height: 16px; }

.cuenta-btn {
  background: #C08A2E; color: #12201A;
  border: 0; font-weight: 800; font-size: 14.5px;
  padding: 15px 0; border-radius: 999px; width: 100%;
}
.cuenta-btn:hover { background: #E0B25C; }

.cuenta-pie {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(244, 241, 234, .12);
  font-size: 14px; color: #8FA394;
}
.cuenta-pie a { font-weight: 700; }

.cuenta-error {
  border: 1px solid rgba(225, 101, 58, .5);
  background: rgba(225, 101, 58, .12);
  padding: 13px 16px; margin-top: 20px;
  font-size: 14px; color: #F0A183; text-wrap: pretty;
}
.cuenta-ok {
  border: 1px solid rgba(79, 191, 122, .45);
  background: #16281F;
  padding: 13px 16px; margin-bottom: 20px;
  font-size: 14px; color: #BFEBD0; text-wrap: pretty;
}

/* ------------------------------------------------------------
   Perfil con sesion
   ------------------------------------------------------------ */
.prf-salir {
  background: transparent;
  border: 1px solid rgba(244, 241, 234, .22);
  color: #A9B8AC; font-weight: 700; font-size: 13px;
  padding: 11px 20px; border-radius: 999px; white-space: nowrap;
}
.prf-salir:hover { border-color: #E1653A; color: #F0A183; }

.prf-file {
  font-size: 13px; color: #A9C7B2;
  background: transparent; border: 0; max-width: 220px;
}
.prf-file::file-selector-button {
  background: transparent; border: 1px solid rgba(79, 191, 122, .5);
  color: #BFEBD0; font: inherit; font-weight: 700;
  padding: 8px 14px; border-radius: 999px; margin-right: 10px; cursor: pointer;
}
.prf-foto .cta { background: transparent; }

/* El ano es un <label> con la casilla oculta: se marca clickeando
   toda la tarjeta, como en el prototipo. */
.prf-anio { cursor: pointer; position: relative; display: block; }
.prf-anio:hover { border-color: #C08A2E; }
.prf-anio:has(input:checked) { background: #1A140C; border-color: rgba(192, 138, 46, .5); }
.prf-anio:has(input:checked) .y { color: #F4F1EA; }
.prf-anio:has(input:checked) .e { color: #E0B25C; }

/* El texto de la tarjeta sigue a la casilla.
   Los dos estan en el marcado y aca se elige cual se ve; el
   navegador ya sabe si esta marcada, no hace falta JS.
   `.con` arranca oculto con una regla comun a proposito: en un
   navegador sin :has se ve solo "NO CORRI", que es lo que se veia
   antes, y no los dos textos encimados. */
.prf-anio .e .con { display: none; }
.prf-anio:has(input:checked) .e .sin { display: none; }
.prf-anio:has(input:checked) .e .con { display: inline; }
.prf-anio:has(input:focus-visible) { outline: 2px solid #E0B25C; outline-offset: 2px; }

.prf-anio[data-estado="verificada"] { background: #16281F; border-color: rgba(79, 191, 122, .5); }
.prf-anio[data-estado="verificada"] .y { color: #F4F1EA; }
.prf-anio[data-estado="verificada"] .e { color: #7FC79C; }

.prf-anio[data-estado="rechazada"] { background: #241A12; border-color: rgba(225, 101, 58, .4); }
.prf-anio[data-estado="rechazada"] .y { color: #C0AFA2; }
.prf-anio[data-estado="rechazada"] .e { color: #F0A183; }

/* Barra de guardado del perfil.
   Sticky y no fixed: acompana mientras se recorre el formulario y
   se despega sola al terminarlo, sin quedar flotando sobre las
   insignias ni tapar nada en el resto de la pagina.
   El fondo es opaco porque los campos le pasan por debajo. */
.prf-guardar {
  position: sticky; bottom: 0; z-index: 5;
  margin-top: 26px;
  padding: 14px 0;
  background: #0E1A15;
  border-top: 1px solid rgba(244, 241, 234, .12);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.prf-guardar .nota { font-size: 12.5px; color: #8FA394; max-width: 46ch; line-height: 1.45; }

/* En un telefono la nota se parte en cuatro renglones y la barra
   pasa a comerse el 15% de la pantalla, justo cuando menos sobra.
   El boton solo se explica igual. */
@media (max-width: 620px) {
  .prf-guardar .nota { display: none; }
  .prf-guardar { padding: 12px 0; }
}

.prf-enviar {
  background: #C08A2E; color: #12201A; border: 0;
  font-weight: 800; font-size: 14px;
  padding: 14px 26px; border-radius: 999px;
}
.prf-enviar:hover { background: #E0B25C; }

.prf-datos { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; align-items: flex-start; }
.prf-datos .cuenta-par { width: 100%; }

/* ------------------------------------------------------------
   Panel de administracion
   ------------------------------------------------------------ */
/* Barra de secciones del panel */
.adm-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.adm-nav a {
  padding: 9px 15px; font-size: 13px; font-weight: 700;
  border: 1px solid rgba(244, 241, 234, .16);
  color: #A9B8AC; text-decoration: none;
}
.adm-nav a:hover { border-color: #C08A2E; color: #E0B25C; }
.adm-nav a[aria-current="page"] { background: #C08A2E; border-color: #C08A2E; color: #12201A; }
.adm-nav a.descarga { margin-left: auto; border-color: rgba(79, 191, 122, .45); color: #7FC79C; }
.adm-nav a.descarga:hover { background: rgba(79, 191, 122, .12); color: #BFEBD0; }

.adm-cifras {
  display: grid; gap: 12px; margin-top: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.adm-cifra {
  background: #18271F; border: 1px solid rgba(244, 241, 234, .12);
  padding: 18px 20px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 4px;
}
a.adm-cifra:hover { border-color: #C08A2E; }
.adm-cifra .v { font-size: 30px; font-weight: 900; color: #E0B25C; letter-spacing: -.03em; }
.adm-cifra .k { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: #8FA394; text-transform: uppercase; }

/* Buscador del listado */
.adm-buscar { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.adm-buscar input {
  flex: 1 1 260px; min-width: 0;
  background: #0E1A15; border: 1px solid rgba(244, 241, 234, .18);
  color: #F4F1EA; padding: 10px 13px; font-size: 14px; font-family: inherit;
}
.adm-buscar input:focus { border-color: #C08A2E; outline: none; }
.adm-buscar button {
  padding: 10px 18px; font-size: 13px; font-weight: 800; font-family: inherit;
  background: transparent; border: 1px solid rgba(244, 241, 234, .2);
  color: #A9B8AC; cursor: pointer;
}
.adm-buscar button:hover { border-color: #C08A2E; color: #E0B25C; }

/* La tabla se desborda a lo ancho antes que la pagina: en un
   telefono se arrastra de costado y el resto del sitio no se
   mueve. */
.adm-tabla-marco { margin-top: 20px; overflow-x: auto; border: 1px solid rgba(244, 241, 234, .12); }
.adm-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 780px; }
.adm-tabla th {
  text-align: left; padding: 12px 14px; background: #18271F;
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #8FA394;
  border-bottom: 1px solid rgba(244, 241, 234, .12);
}
.adm-tabla td { padding: 12px 14px; border-bottom: 1px solid rgba(244, 241, 234, .07); vertical-align: top; }
.adm-tabla tr:last-child td { border-bottom: 0; }
.adm-tabla tr:hover td { background: rgba(244, 241, 234, .03); }
.adm-tabla .n { font-weight: 700; display: block; }
.adm-tabla .d { font-size: 12.5px; color: #8FA394; display: block; }
.adm-falta { color: #5E6F62; }
.adm-ficha-link { font-size: 12.5px; font-weight: 700; color: #E0B25C; white-space: nowrap; }

.adm-pica {
  display: inline-block; margin-left: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 6px; border: 1px solid rgba(192, 138, 46, .5); color: #E0B25C;
}
.adm-pica.pend { border-color: rgba(240, 161, 131, .5); color: #F0A183; }

.adm-paginas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.adm-paginas a {
  padding: 7px 12px; font-size: 13px; font-weight: 700;
  border: 1px solid rgba(244, 241, 234, .16); color: #A9B8AC;
}
.adm-paginas a[aria-current="page"] { background: #C08A2E; border-color: #C08A2E; color: #12201A; }

/* Ficha */
.adm-bloque {
  margin-top: 16px; background: #18271F;
  border: 1px solid rgba(244, 241, 234, .12); padding: 20px 22px;
}
/* La salud lleva su propio borde: que se note que no es un dato
   mas antes de leerlo. */
.adm-bloque.salud { border-left: 3px solid #C08A2E; }
.adm-bloque .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #8FA394; }
.adm-aviso { font-size: 12.5px; color: #8FA394; margin: 10px 0 0; line-height: 1.5; text-wrap: pretty; }

.adm-datos {
  display: grid; gap: 12px 22px; margin: 14px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.adm-datos dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #5E6F62; }
.adm-datos dd { margin: 2px 0 0; font-size: 14px; }
.adm-datos .v { overflow-wrap: anywhere; }
.adm-datos .v.vacio { color: #5E6F62; font-style: italic; }

.adm-anios { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.adm-anio-chip {
  border: 1px solid rgba(244, 241, 234, .16); padding: 8px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.adm-anio-chip[data-estado="verificada"] { border-color: rgba(79, 191, 122, .5); }
.adm-anio-chip[data-estado="rechazada"]  { border-color: rgba(225, 101, 58, .45); }
.adm-anio-chip .y { font-size: 16px; font-weight: 900; }
.adm-anio-chip .s { font-size: 11px; color: #8FA394; }

.adm-lista { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }

.adm-item {
  background: #18271F;
  border: 1px solid rgba(244, 241, 234, .12);
  border-left: 4px solid #C08A2E;
  padding: 22px 24px;
}

.adm-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.adm-corredor { font-size: 19px; font-weight: 900; letter-spacing: -.02em; }
.adm-meta { font-size: 13px; color: #8FA394; margin-top: 3px; }
.adm-anio { font-size: 30px; font-weight: 900; color: #E0B25C; letter-spacing: -.03em; }

.adm-coincidencias {
  margin-top: 16px; padding: 14px 16px;
  background: #0E1A15; border: 1px solid rgba(244, 241, 234, .1);
}
.adm-coincidencias .lbl { font-size: 10px; font-weight: 800; letter-spacing: .16em; color: #5E6F62; }
.adm-coincidencia { margin-top: 10px; }
.adm-coincidencia .n { font-size: 14.5px; font-weight: 700; display: block; }
.adm-coincidencia .d { font-size: 12.5px; color: #8FA394; display: block; margin-top: 2px; }
.adm-sin { margin-top: 10px; font-size: 13.5px; color: #F0A183; }

.adm-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; }
.adm-nota {
  flex: 1; min-width: 200px;
  padding: 11px 14px;
  background: #0E1A15; border: 1px solid rgba(244, 241, 234, .16);
  color: #F4F1EA; font-family: inherit; font-size: 14px;
}
.adm-nota:focus { border-color: #C08A2E; outline: none; }

.adm-si, .adm-no {
  border: 0; font-weight: 800; font-size: 13.5px;
  padding: 12px 22px; border-radius: 999px; white-space: nowrap;
}
.adm-si { background: #4FBF7A; color: #0E1A15; }
.adm-si:hover { background: #6FD494; }
.adm-no { background: transparent; border: 1px solid rgba(225, 101, 58, .5); color: #F0A183; }
.adm-no:hover { background: rgba(225, 101, 58, .12); }

/* ============================================================
   Perfil extendido del corredor (etapa 3)
   ============================================================ */

/* Cuanto le falta de la ficha */
.prf-progreso {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding: 14px 18px;
  background: #18271F; border: 1px solid rgba(244, 241, 234, .12);
}
.prf-progreso .barra {
  flex: 1; min-width: 180px; height: 6px;
  background: rgba(244, 241, 234, .1); overflow: hidden;
}
.prf-progreso .barra span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #C08A2E, #E0B25C);
  transition: width .4s ease;
}
.prf-progreso .txt { font-size: 13px; color: #A9B8AC; white-space: nowrap; }

/* Formularios de la ficha */
.prf-form {
  display: flex; flex-direction: column; gap: 18px;
  margin-top: 18px; align-items: flex-start;
}
.prf-form .cuenta-par { width: 100%; }
.prf-form .prf-h2 { margin-top: 26px; }
.prf-form .prf-p { margin-top: 0; }

/* Aviso de datos de salud: se distingue del resto a proposito,
   porque lo que se pide ahi es de otra naturaleza. */
.prf-aviso-salud {
  display: flex; gap: 14px; align-items: flex-start;
  background: #16281F;
  border: 1px solid rgba(79, 191, 122, .3);
  border-left: 4px solid #4FBF7A;
  padding: 16px 18px; width: 100%;
}
.prf-aviso-salud .ms { color: #7FC79C; flex-shrink: 0; font-size: 22px; }
.prf-aviso-salud p { font-size: 13.5px; color: #A9C7B2; line-height: 1.55; text-wrap: pretty; }

/* Cada anio con su modalidad */
.prf-anio-caja { display: flex; flex-direction: column; gap: 6px; }

.prf-modalidad {
  width: 100%;
  padding: 7px 8px;
  background: #0E1A15;
  border: 1px solid rgba(244, 241, 234, .14);
  color: #C7D2C8;
  font-family: inherit; font-size: 11.5px;
}
.prf-modalidad:focus { border-color: #C08A2E; outline: none; }
.prf-modalidad:disabled { opacity: .5; cursor: not-allowed; }

/* Cuando se otorgo cada insignia */
.prf-insignia .cuando {
  display: block; font-size: 11.5px; color: #7A6E5A; margin-top: 5px;
}
.prf-insignia[data-activa="1"] .cuando { color: #A08A5F; }

/* Los <select> comparten el aspecto de los <input> */
.campo select {
  padding: 12px 14px;
  background: #0E1A15;
  border: 1px solid rgba(244, 241, 234, .16);
  color: #F4F1EA;
  font-size: 15px; font-family: inherit;
}
.campo select:focus { border-color: #C08A2E; outline: none; }

/* Las fechas nativas se ven claras sobre fondo oscuro */
.campo input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7); cursor: pointer; }

/* ------------------------------------------------------------
   Entrada a las cuentas
   Los dos caminos —crear cuenta o ingresar— bien a la vista.
   ------------------------------------------------------------ */
.entrada-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 26px;
}
.entrada-cta .cuenta-btn { padding: 15px 32px; display: inline-flex; align-items: center; }
.entrada-cta .prf-salir { display: inline-flex; align-items: center; padding: 14px 24px; }
.entrada-cta .prf-salir:hover { border-color: #C08A2E; color: #E0B25C; }

.entrada-lista { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 0; padding: 0; }
.entrada-lista li {
  list-style: none; display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; color: #C7D2C8; line-height: 1.5; text-wrap: pretty;
}
.entrada-lista .ms { color: #4FBF7A; font-size: 19px; flex-shrink: 0; }

/* La sede de cada edición en la línea de tiempo. Cambió cuatro
   veces en diez años, así que decir dónde fue cada una cuenta
   parte de la historia del evento. */
.anv-anio .s {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #A08A5F;
  margin-top: 8px;
  line-height: 1.35;
  text-wrap: pretty;
}
.anv-anio[data-sin="1"] .s { display: none; }