/* ==========================================================================
   Color de marca — 10K Independencia de Ambato
   Amarillo tomado de la camiseta oficial.

   Medido sobre cuatro fotos: tono 52°, tela #E3CA2D en la zona sin sombra.
   Saturado para pantalla queda en #F2D30C.

   El molde pinta las superficies con `bg="green"`, así que basta redefinir
   esa familia de variables: el amarillo entra en hero, pestañas, marquee,
   botones y puntos sin tocar una sola regla de layout.
   ========================================================================== */

:root {
  --color-green: #f2d30c;
  --bg-green: #f2d30c;
  --button-green-bg-hover: #ffdf19;
  --line-on-green: #c9ae0a;
  --text-green-secondary: #6b5c00;
  --text-green-captions: #6b5c00;
}

/* El logo y la hamburguesa van en negro sobre el amarillo. */
.green .header.transparent,
.green .header.transparent .logo::after {
  color: var(--color-black);
}

/* Aliados sin logo: el nombre en texto, dentro de la misma celda. */
.partner-icon .item span {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-grey);
}

/* Marca en texto: todavía no hay archivo de logotipo propio. */
.logo-wordmark {
  display: block;
  font-family: 'Organetto', sans-serif;
  font-weight: bold;
  font-size: 1.15rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.header .logo::after {
  content: none;
}

@media screen and (max-width: 768px) {
  .logo-wordmark {
    font-size: 1.5rem;
  }
  .badge-text .badge {
    font-size: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   Fuera el azul del molde. La paleta es amarillo + negro + beige, así que
   todo lo que era azul pasa a negro y los textos azules a tinta.
   -------------------------------------------------------------------------- */

:root {
  --color-blue: #1a1d1f;
  --bg-blue: #1a1d1f;
  --color-light-blue: #4a4a4a;
  --button-blue-white-bg-hover: #2d2d2d;
  --button-white-blue-text: #1a1d1f;
  --button-white-blue-bg-default: #fbfbfb;
  --icon-white: #cfcfcf;
  --text-white-secondary: #6b6b6b;
}

/* El punto pulsante sobre superficies oscuras, en amarillo de marca. */
[bg='blue'] .dot,
[bg='black'] .dot,
[bg='dark'] .dot {
  background: var(--color-green);
}

[bg='blue'] .btn,
[bg='black'] .btn {
  background-color: var(--color-green);
  color: var(--color-black);
}

.btn-blue {
  background-color: var(--color-black);
  color: var(--color-green);
}

/* ==========================================================================
   Secciones propias del home
   Usan la misma retícula, tipografía y ritmo de espaciado que el molde:
   contenedor con 2rem de lado, títulos en Organetto, cuerpo en HalvarBreit,
   y separadores de 1px como los de .list.bordered.
   ========================================================================== */

.event-cifras,
.event-recorrido,
.event-pasos {
  padding: 13rem 0;
}

.event-cifras h2,
.event-recorrido h2,
.event-pasos h2 {
  text-transform: uppercase;
  margin-bottom: 6rem;
}

/* --- Cifras --------------------------------------------------------------- */

.cifras-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  list-style: none;
  border-top: 1px solid currentColor;
}

.cifra {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 3.2rem 2rem 3.2rem 0;
  border-bottom: 1px solid currentColor;
}

.cifra__number {
  font-family: 'Organetto', sans-serif;
  font-weight: bold;
  font-size: 6rem;
  line-height: 1;
  color: var(--color-green);
}

.cifra__label {
  opacity: 0.75;
  max-width: 22rem;
}

/* --- Recorrido ------------------------------------------------------------ */

.recorrido-cols {
  display: grid;
  grid-template-columns: 34rem 1fr;
  gap: 0 8rem;
  align-items: start;
}

.recorrido-intro {
  position: sticky;
  top: 12rem;
}

.recorrido-lista {
  list-style: none;
  border-top: 1px solid currentColor;
}

.recorrido-punto,
.recorrido-hito {
  display: flex;
  align-items: baseline;
  gap: 2rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid currentColor;
}

.recorrido-n {
  font-variant-numeric: tabular-nums;
  min-width: 4rem;
  opacity: 0.55;
  font-size: 1.3rem;
}

.recorrido-nombre {
  font-size: 1.8rem;
}

.recorrido-hito {
  padding: 2.4rem 0;
}

.recorrido-hito .recorrido-marca {
  min-width: 4rem;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
}

.recorrido-hito .recorrido-nombre {
  font-family: 'Organetto', sans-serif;
  font-weight: bold;
  font-size: 2.8rem;
  line-height: 1.1;
  text-transform: uppercase;
}

/* --- Pasos ---------------------------------------------------------------- */

.pasos-intro {
  max-width: 62rem;
  margin-top: -3rem;
  margin-bottom: 6rem;
}

.pasos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 4rem;
  list-style: none;
  border-top: 1px solid currentColor;
}

.paso {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 3.2rem 0;
}

.paso__n {
  font-family: 'Organetto', sans-serif;
  font-weight: bold;
  font-size: 3.2rem;
  line-height: 1;
}

.paso__title {
  font-size: 2.2rem;
  line-height: 1.15;
  text-transform: uppercase;
}

.paso__text {
  max-width: 34rem;
}

.pasos-nota {
  margin-top: 3.2rem;
  max-width: 62rem;
}

.event-pasos .btn {
  margin-top: 4rem;
}

/* --- Móvil ---------------------------------------------------------------- */

@media screen and (max-width: 1000px) {
  .recorrido-cols {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .recorrido-intro {
    position: static;
  }
  .cifras-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pasos-grid {
    grid-template-columns: 1fr;
  }
  .paso {
    border-bottom: 1px solid currentColor;
  }
  .paso__text {
    max-width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .event-cifras,
  .event-recorrido,
  .event-pasos {
    padding: 5rem 0;
  }
  .event-cifras h2,
  .event-recorrido h2,
  .event-pasos h2 {
    margin-bottom: 3rem;
  }
  .cifra__number {
    font-size: 3.6rem;
  }
  .recorrido-hito .recorrido-nombre {
    font-size: 2rem;
  }
  .recorrido-nombre {
    font-size: 1.6rem;
  }
  .pasos-intro {
    margin-top: 0;
    margin-bottom: 3rem;
  }
}

/* --------------------------------------------------------------------------
   El molde pinta el footer de un color aleatorio en cada carga. Aquí se fija
   en negro: cierra el ritmo y evita que coincida con el marquee amarillo.
   -------------------------------------------------------------------------- */

.footer .footer__section,
.footer .footer__section[bg] {
  background: var(--bg-black) !important;
  color: var(--color-white) !important;
}

.footer .footer__section .btn-link {
  background-color: var(--color-green);
  color: var(--color-black);
}

/* --------------------------------------------------------------------------
   Cuenta atrás del hero. La rellena Timer() de scripts.js, que ya venía en el
   molde. Discreta: va bajo el estado de inscripción, en tamaño de dato.
   -------------------------------------------------------------------------- */

.event__status .hero__oferta {
  display: grid;
  gap: 0.2rem;
  margin-top: 1.2rem;
  font-size: var(--font-size-sm);
}

.event__status .hero__oferta strong {
  font-size: var(--font-size-md);
  line-height: 1.3;
}

.event__status .countdown {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 1.6rem;
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(45, 45, 34, 0.25);
  font-size: var(--font-size-sm);
  color: var(--text-green-secondary);
}

.event__status .countdown__row {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* El número grande manda; todo lo demás se aparta en peso y en color. */
.event__status .countdown-days {
  font-family: 'Organetto', sans-serif;
  font-weight: normal;
  font-size: 6.4rem;
  line-height: 1.15;
  letter-spacing: 0;
  margin-right: 0.8rem;
  color: var(--color-black);
}

.event__status .countdown-time {
  font-family: 'Organetto', sans-serif;
  font-weight: normal;
  font-size: 2.4rem;
  letter-spacing: 0.04em;
  opacity: 0.55;
}

.event__status .countdown__nota {
  flex-basis: 100%;
  margin-top: 0.6rem;
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

@media screen and (max-width: 768px) {
  .event__status .countdown-days {
    font-size: min(5.6rem, 72px);
  }
  .event__status .countdown-time {
    font-size: min(2rem, 26px);
  }
}

/* --------------------------------------------------------------------------
   Fuera el naranja. El molde lo usa como color principal (#FF4800) y en varios
   acentos. Aquí no se usa en ningún sitio: se sustituye por el amarillo de
   marca donde era acento, y por negro donde era superficie.
   -------------------------------------------------------------------------- */

:root {
  --color-red: #1a1d1f;
  --bg-red: #1a1d1f;
  --button-red-bg-hover: #2d2d2d;
  --button-white-red-bg-hover: #fbfbfb;
  --button-white-red-text: #1a1d1f;
  --color-text-secondary: #6b5c00;
  --text-red-dark-secondary: #6b5c00;
  --text-red-dark-captions: #6b5c00;
  --text-button-black-on-red: #1a1d1f;
  --line-black-on-red: #1a1d1f;
}

/* Acentos que en el molde eran naranjas y deben ser amarillo de marca. */
.stat-number,
.h-color:hover {
  color: var(--color-green);
}

.badge {
  background-color: var(--color-green);
  color: var(--color-black);
}

.lang__dropdown a.active::after {
  background-color: var(--color-green);
}

[bg='red'] {
  background: var(--bg-black);
  color: var(--color-white);
}

[bg='red'] .dot {
  background: var(--color-green);
}

[bg='red'] .btn {
  background-color: var(--color-green);
  color: var(--color-black);
}

/* Los cuatro naranjas que el molde lleva escritos a mano. */
.selectbox__item.is-active::before {
  border-color: var(--color-green) !important;
}

.selectbox__item.is-active::after {
  border-color: var(--color-green) !important;
}

.form-field + .selectbox .selectbox__arrow,
.selectbox__toggle::after {
  border-top-color: var(--color-black) !important;
}

/* --------------------------------------------------------------------------
   Menú hamburguesa
   El molde lo tenía como <div> de 10px de alto: no se podía tabular, no tenía
   estado accesible y era diminuto al tacto. Ahora es un <button> con área de
   44×44, que es la mínima recomendada, sin mover las dos líneas de sitio.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 1160px) {
  button.menu.mobile {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    box-sizing: content-box;
    width: 2.6rem;
    min-width: 44px;
    min-height: 44px;
    margin-top: 0;
    cursor: pointer;
    color: inherit;
    /* el alto visual de las líneas sigue siendo 10px, centrado en los 44 */
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  button.menu.mobile .line {
    left: 50%;
    width: 2.6rem;
    transform: translateX(-50%);
    height: 2px;
    border-radius: 2px;
  }

  button.menu.mobile .line1 {
    top: calc(50% - 5px);
  }

  button.menu.mobile .line2 {
    top: calc(50% + 3px);
  }

  button.menu.mobile.is-active .line1 {
    top: 50%;
    transform: translateX(-50%) rotate(15deg);
  }

  button.menu.mobile.is-active .line2 {
    top: 50%;
    transform: translateX(-50%) rotate(-15deg);
  }

  button.menu.mobile:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* El panel: el molde le ponía un color aleatorio en cada carga.
     Se fija en negro, con los enlaces en amarillo de marca al tocarlos. */
  .header__menu.is-active {
    background: var(--bg-black) !important;
    color: var(--color-white) !important;
    padding-top: 8rem;
    padding-bottom: max(2rem, env(safe-area-inset-bottom, 0px));
  }

  .header__menu.is-active .nav__item a:active,
  .header__menu.is-active .nav__item a:focus-visible {
    color: var(--color-green);
  }

  .header__menu.is-active .menu__items {
    margin-top: 2rem;
  }

  .header__menu.is-active .badge-text .badge {
    border-color: var(--color-green);
    color: var(--color-green);
  }
}

/* --------------------------------------------------------------------------
   Logo oficial (public/marca/logo-10k.webp): blanco sobre transparente.
   Sobre la cabecera amarilla se invierte a negro, como hace el molde con el
   suyo; sobre el panel negro del menú móvil vuelve a blanco.
   -------------------------------------------------------------------------- */

.header .logo {
  width: 16rem;
  /* un poco más abajo, alineado con la línea base del menú */
  transform: translateY(0.45rem);
}

.header .logo img {
  display: block;
  width: 100%;
  height: auto;
  /* El logo es blanco (#F8F8F8). brightness(0.18) lo deja en #2D2D2D, el
     gris oscuro del texto, para las secciones claras. */
  filter: brightness(0.18);
  transition: filter 0.2s;
}

/* La variante cambia con la sección: el molde pone body.inverse cuando la
   cabecera pasa sobre un fondo oscuro (negro). Ahí el logo vuelve a blanco. */
body.inverse .header .logo img,
.header:has(.header__menu.is-active) .logo img {
  filter: none;
}

@media screen and (max-width: 768px) {
  .header .logo {
    width: 15rem;
  }
}

/* --------------------------------------------------------------------------
   Vídeo del hero por YouTube: cubre el banner entero, sin controles ni foco.
   -------------------------------------------------------------------------- */

/* El vídeo llena TODA la capa del parallax (150vh), no solo 100vh: si no, al
   hacer scroll aparecía con una banda amarilla debajo, como recortado. */
.sbanner .banner {
  height: 100%;
}

.banner .video {
  position: relative;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg-black);
}

.banner .video .video__yt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(177.78vh, 100vw);
  height: max(56.25vw, 100vh);
  transform: translate(-50%, -50%) scale(1.15);
  border: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Aire entre la cabecera y el título del hero. El molde usaba 6rem; con el
   logo oficial la cabecera es más alta y el título quedaba pegado.
   -------------------------------------------------------------------------- */

.banner-card.event {
  padding-top: 10rem;
}

@media screen and (max-width: 768px) {
  .banner-card.event {
    padding-top: 12rem;
  }
}

/* Páginas interiores: la cabecera es fija y blanca; el contenido empieza
   por debajo de ella. */
.page-interior {
  padding-top: 7rem;
}

@media screen and (max-width: 768px) {
  .page-interior {
    padding-top: 8rem;
  }
}

/* --------------------------------------------------------------------------
   Páginas interiores
   -------------------------------------------------------------------------- */

.pagina-cabecera {
  padding: 6rem 0 5rem;
}

.pagina-cabecera h1 {
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.pagina-intro {
  max-width: 62rem;
}

.page-interior .section {
  padding: 8rem 0;
}

.page-interior .section__header {
  margin-bottom: 4rem;
}

.page-interior .section__header h2 {
  text-transform: uppercase;
}

.page-interior .text__content {
  padding: 0;
  max-width: 76rem;
  display: grid;
  gap: 1.6rem;
}

.page-interior .text__content h3,
.page-interior .text__content h4 {
  font-family: 'HalvarBreit', sans-serif;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.2;
  margin-top: 2.4rem;
}

.page-interior .distance-info {
  width: 100%;
  max-width: 76rem;
  gap: 2.4rem;
}

.page-interior .distance-info li {
  border-bottom: 1px solid currentColor;
  padding-bottom: 1.6rem;
}

.page-interior .results_content table + table {
  margin-top: 4rem;
}

.premios th:first-child {
  width: 60%;
}

/* --------------------------------------------------------------------------
   Formulario de inscripción y /verificar/ (prefijo insc-)
   -------------------------------------------------------------------------- */

.form-inscripcion {
  max-width: 76rem;
}

.form-inscripcion .form__content {
  padding: 4rem 3.2rem;
}

.form-inscripcion .form__title {
  margin-bottom: 1.6rem;
}

.insc-texto {
  margin-bottom: 3.2rem;
}

.insc-subtitulo {
  margin-top: 4rem;
}

/* Indicador de pasos */
.insc-pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  list-style: none;
  padding: 0;
  margin: 0 0 3.2rem;
}

.insc-pasos li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 0;
  border-top: 3px solid rgba(45, 45, 34, 0.15);
  color: rgba(45, 45, 34, 0.5);
  font-size: 1.4rem;
  text-transform: uppercase;
}

.insc-pasos li.activo {
  border-top-color: #2d2d2d;
  color: #2d2d2d;
}

.insc-pasos li.hecho {
  border-top-color: var(--color-green);
  color: #2d2d2d;
}

.insc-pasos__num {
  font-family: 'Organetto', sans-serif;
  font-size: 1.8rem;
}

/* [hidden] gana a cualquier display del molde (botones, enlaces, listas) */
.form-inscripcion [hidden],
.insc-dialogo[hidden] {
  display: none !important;
}

/* Botón secundario (Atrás, Empezar de nuevo): contorno, no amarillo */
.insc-botones .btn-white,
.insc-dialogo .btn-white,
.insc-copiar-todo {
  background: transparent;
  color: #2d2d2d;
  box-shadow: inset 0 0 0 1px rgba(45, 45, 34, 0.35);
}

.insc-botones .btn-white .dot,
.insc-dialogo .btn-white .dot,
.insc-copiar-todo .dot {
  background: #2d2d2d;
}

.insc-botones .btn-dark,
.insc-dialogo .btn-dark {
  background: #2d2d2d;
  color: #fff;
}

.insc-botones .btn-dark .dot,
.insc-dialogo .btn-dark .dot {
  background: var(--color-green);
}

.insc-botones .btn-green {
  background: var(--color-green);
  color: #2d2d2d;
}

.insc-botones .btn-green .dot {
  background: #2d2d2d;
}

.form-inscripcion [data-categoria-elegida] + .insc-enlace {
  margin-left: 0.8rem;
}

/* Paso 1: tarjetas de categoría */
.insc-categorias {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  margin-bottom: 2.4rem;
}

.insc-categoria {
  display: grid;
  gap: 0.6rem;
  padding: 2.4rem;
  border: 1px solid rgba(45, 45, 34, 0.15);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.insc-categoria:hover,
.insc-categoria:focus-visible {
  border-color: #2d2d2d;
  background: var(--color-green);
  outline: none;
}

.insc-categoria__nombre {
  font-family: 'Organetto', sans-serif;
  font-size: 2.2rem;
  text-transform: uppercase;
}

.insc-categoria__edades {
  font-size: 1.4rem;
  opacity: 0.7;
}

.insc-categoria__precio {
  font-size: 2.8rem;
  margin-top: 0.8rem;
}

.insc-categoria__precio small {
  display: block;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Campos */
.form-inscripcion .form-group .note {
  margin-top: 0.8rem;
}

.insc-error {
  margin-top: 0.8rem;
  font-size: 1.3rem;
  color: #b00020;
}

.form-inscripcion .form-group.error .form-field {
  border-color: #b00020;
  color: inherit;
}

.form-inscripcion .required {
  color: #b00020;
}

.form-inscripcion .checkbox {
  align-items: flex-start;
  gap: 1.2rem;
}

.form-inscripcion .checkbox label {
  display: block;
  line-height: 1.5;
}

.form-inscripcion .checkbox input {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  margin-top: 0.2rem;
}

.insc-enlace,
.insc-sugerencia {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: inherit;
}

.insc-sugerencia {
  display: block;
  margin-top: 0.8rem;
  font-size: 1.4rem;
}

.insc-aviso {
  padding: 1.6rem 2rem;
  border-left: 4px solid var(--color-green);
  background: rgba(242, 211, 12, 0.15);
  font-size: 1.5rem;
  line-height: 1.5;
  margin-bottom: 2.4rem;
}

.insc-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 3.2rem;
}

.insc-botones--columna {
  flex-direction: column;
  align-items: flex-start;
}

.insc-trampa,
.insc-oculto {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Paso 3: banco y archivo */
.insc-banco {
  margin-bottom: 2.4rem;
}

.insc-banco .distance-info {
  margin-bottom: 1.6rem;
}

.insc-total {
  font-size: 2rem;
}

.insc-copiar {
  background: none;
  border: 1px dashed rgba(45, 45, 34, 0.4);
  padding: 0.4rem 0.8rem;
  font: inherit;
  cursor: pointer;
  color: inherit;
}

.insc-copiar:hover {
  border-style: solid;
}

.insc-copiar-todo {
  margin-top: 1.6rem;
}

.insc-archivo {
  display: grid;
  place-items: center;
  gap: 0.4rem;
  min-height: 14rem;
  padding: 2.4rem;
  border: 2px dashed rgba(45, 45, 34, 0.3);
  background: #fff;
  cursor: pointer;
  text-align: center;
}

.insc-archivo:hover,
.insc-archivo:focus-within {
  border-color: #2d2d2d;
}

.insc-archivo__texto {
  font-size: 1.6rem;
}

.insc-archivo-elegido {
  padding: 1.6rem;
  border: 1px solid rgba(45, 45, 34, 0.15);
  background: #fff;
}

.insc-archivo-elegido img {
  display: block;
  max-height: 28rem;
  width: auto;
  margin: 0 auto 1.6rem;
}

.insc-archivo-elegido__fila {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  word-break: break-all;
}

/* Paso 4 y /verificar/ */
.insc-codigo {
  display: grid;
  gap: 0.4rem;
  padding: 2.4rem;
  margin-bottom: 3.2rem;
  border: 1px solid rgba(45, 45, 34, 0.15);
  background: #fff;
}

.insc-codigo strong {
  font-family: 'Organetto', sans-serif;
  font-size: 3.2rem;
  letter-spacing: 0.05em;
}

.insc-estado {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(242, 211, 12, 0.35);
  margin-bottom: 2.4rem;
}

.insc-estado--ok {
  background: #cdeccd;
}

.insc-estado--mal,
.insc-estado--falta {
  background: #f7d4d4;
}

.insc-resumen {
  margin-bottom: 3.2rem;
}

.insc-ticket {
  margin-top: 2.4rem;
}

.insc-dialogo {
  max-width: 48rem;
  padding: 3.2rem;
  border: 0;
  background: #fff;
  color: #2d2d2d;
}

.insc-dialogo::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.insc-dialogo h3 {
  margin-bottom: 1.6rem;
}

.insc-toast {
  position: fixed;
  left: 50%;
  bottom: 3.2rem;
  transform: translate(-50%, 2rem);
  padding: 1.2rem 2rem;
  background: #2d2d2d;
  color: #fff;
  font-size: 1.4rem;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 100;
}

.insc-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media screen and (max-width: 768px) {
  .pagina-cabecera {
    padding: 3rem 0;
  }
  .page-interior .section {
    padding: 4rem 0;
  }
  .form-inscripcion .form__content {
    padding: 2.4rem 1.6rem;
  }
  .insc-categorias,
  .form-inscripcion .form__data {
    grid-template-columns: 1fr;
  }
  .insc-pasos {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
  }
  .insc-pasos__nombre {
    display: none;
  }
  .insc-pasos li.activo .insc-pasos__nombre {
    display: inline;
  }
  .insc-botones .btn {
    width: auto;
    flex: 1;
    justify-content: center;
  }
  /* Barra de botones fija abajo en los pasos 2 y 3: "Siguiente" siempre a un
     toque, sin bajar hasta el fondo a buscarlo (mejora heredada de la 8K). */
  #paso-datos .insc-botones,
  #paso-pago .insc-botones {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    margin: 0;
    padding: 1.2rem 1.6rem calc(1.2rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid rgba(45, 45, 34, 0.15);
    backdrop-filter: blur(6px);
  }
  #paso-datos,
  #paso-pago {
    padding-bottom: 10rem;
  }
}

/* Mapa oficial del recorrido (vertical): que no se salga de la tarjeta */
.distance-map img {
  max-height: 44rem;
  width: auto;
}

/* Promo de preventa en el paso 1 */
.insc-promo {
  display: grid;
  grid-template-columns: 18rem 1fr;
  gap: 2.4rem;
  align-items: center;
  padding: 2rem;
  margin-bottom: 2.4rem;
  border: 1px solid rgba(45, 45, 34, 0.15);
  background: #fff;
}

.insc-promo img {
  width: 100%;
  height: auto;
}

.insc-promo__titulo {
  display: block;
  font-family: 'Organetto', sans-serif;
  font-size: 2.6rem;
  text-transform: uppercase;
  margin: 0.4rem 0 0.8rem;
}

@media screen and (max-width: 768px) {
  .insc-promo {
    grid-template-columns: 1fr;
  }
}

/* Paso 3: método de pago y QR */
.insc-metodo {
  margin-bottom: 2.4rem;
}

.insc-qr img {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
  margin: 1.6rem 0;
  border: 1px solid rgba(45, 45, 34, 0.15);
  background: #fff;
}

/* Cabecera: «Inscríbete» como botón, siempre a un toque */
.header__inscribete {
  background: #2d2d2d;
  color: #fff;
  margin-right: 2.4rem;
  white-space: nowrap;
}

.header__inscribete .dot {
  background: var(--color-green);
}

.header__inscribete:hover {
  background: #000;
}

/* Sobre fondo oscuro (menú móvil, secciones negras) se invierte */
body.inverse .header .header__inscribete,
.header:has(.header__menu.is-active) .header__inscribete {
  background: var(--color-green);
  color: #2d2d2d;
}

body.inverse .header .header__inscribete .dot,
.header:has(.header__menu.is-active) .header__inscribete .dot {
  background: #2d2d2d;
}

@media screen and (max-width: 768px) {
  .header__inscribete {
    margin: 0 0 1.6rem;
    padding: 1.2rem 2.4rem;
    font-size: 1.8rem;
  }
}

/* --------------------------------------------------------------------------
   Hero: franja inferior (claim · salida/meta · categorías)
   -------------------------------------------------------------------------- */

.banner-card .hero__franja {
  align-items: flex-start;
  border-top-color: rgba(45, 45, 34, 0.35);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.banner-card .hero__franja .hero__claim {
  flex-basis: 40%;
  text-transform: none;
  font-size: var(--font-size-md);
  line-height: 1.45;
  max-width: 48rem;
}

.hero__ruta {
  display: grid;
  gap: 1.2rem;
  margin: 0;
  font-size: var(--font-size-sm);
}

.hero__ruta dt {
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.hero__ruta dd {
  margin: 0;
}

.banner-card .hero__franja .hero__categorias {
  min-width: 22vw;
  font-size: var(--font-size-sm);
}

.hero__categorias li {
  border-color: rgba(45, 45, 34, 0.3);
}

.hero__categorias a {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 0.6rem 0;
  transition: padding-left 0.25s ease;
}

.hero__categorias a:hover {
  padding-left: 0.6rem;
}

.hero__categorias .text-opacity {
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .banner-card .hero__franja {
    flex-direction: column;
    gap: 2rem;
  }
  .banner-card .hero__franja .hero__claim {
    flex-basis: auto;
  }
  .banner-card .hero__franja .hero__categorias {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Entrada sutil. Solo al cargar, corta y con desplazamiento mínimo; se apaga
   si el sistema pide menos movimiento.
   -------------------------------------------------------------------------- */

@keyframes hero-subir {
  from {
    opacity: 0;
    transform: translateY(0.8rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes logo-entrar {
  from {
    opacity: 0;
    transform: translateX(-0.8rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .header .logo img {
    animation: logo-entrar 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .banner-card .card-title,
  .banner-card .event__status,
  .banner-card .hero__claim,
  .banner-card .hero__ruta,
  .banner-card .hero__categorias {
    animation: hero-subir 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .banner-card .card-title {
    animation-delay: 0.1s;
  }
  .banner-card .event__status {
    animation-delay: 0.25s;
  }
  .banner-card .hero__claim {
    animation-delay: 0.4s;
  }
  .banner-card .hero__ruta {
    animation-delay: 0.5s;
  }
  .banner-card .hero__categorias {
    animation-delay: 0.6s;
  }
  .hero__categorias li {
    animation: hero-subir 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero__categorias li:nth-child(1) { animation-delay: 0.65s; }
  .hero__categorias li:nth-child(2) { animation-delay: 0.72s; }
  .hero__categorias li:nth-child(3) { animation-delay: 0.79s; }
  .hero__categorias li:nth-child(4) { animation-delay: 0.86s; }
}

/* Título del hero: fluido en todos los anchos. «INDEPENDENCIA» en Organetto
   mide 13,7 em con este tracking; la columna del título es el 60 % del ancho
   en escritorio y el ancho completo (≈ 93 %) en móvil. Con estos valores la
   palabra cabe siempre en una línea y el título no se rompe. */
.banner-card .event-title {
  font-size: min(5.4rem, 3.4vw);
  line-height: 1.18;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* La fecha, un punto por debajo del título: jerarquía, no dos títulos iguales */
.banner-card .card-title .title-xl {
  font-size: min(4.2rem, 2.7vw);
  line-height: 1.18;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* Aire entre el título y la fecha: con líneas apretadas se tocaban */
.banner-card .card-title .title-xl {
  margin-top: 0.4rem;
}

@media screen and (max-width: 768px) {
  .banner-card .event-title {
    font-size: clamp(2rem, 6.5vw, 4.4rem);
    line-height: 1.2;
  }
  .banner-card .card-title .title-xl {
    font-size: clamp(1.6rem, 5.2vw, 3.4rem);
    line-height: 1.2;
  }
}

/* Pantallas bajas: la franja y el hueco bajo la cabecera se compactan */
@media screen and (max-height: 820px) and (min-width: 769px) {
  .banner-card.event {
    padding-top: 8rem;
  }
  .banner-card .hero__franja {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
  .hero__categorias a {
    padding: 0.35rem 0;
  }
  .hero__ruta {
    gap: 0.6rem;
  }
}

/* Datos clave en el centro del hero: una sola línea discreta, separada por
   puntos. Solo sale cuando sobra altura para que el vídeo siga asomando. */
.banner-card .hero__datos {
  display: none;
  flex-wrap: wrap;
  gap: 0.4rem 0;
  margin: 1.2rem 0 0;
  font-size: var(--font-size-sm);
}

.banner-card .hero__datos > div {
  display: inline-flex;
  gap: 0.5rem;
  align-items: baseline;
}

.banner-card .hero__datos > div + div::before {
  content: '·';
  margin: 0 1.2rem;
  opacity: 0.5;
}

.banner-card .hero__datos dt {
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.banner-card .hero__datos dd {
  margin: 0;
}

@media screen and (min-height: 1150px) and (min-width: 1100px) {
  .banner-card .hero__datos {
    display: flex;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .banner-card .hero__datos {
    animation: hero-subir 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: 0.35s;
  }
}

/* Botón de inscripción bajo el contador del hero */
.event__status .hero__cta {
  margin-top: 1.6rem;
  padding: 0.4rem 1.6rem;
  min-height: 3rem;
  font-size: var(--font-size-sm);
  background: #2d2d2d;
  color: #fff;
}

.event__status .hero__cta .dot {
  background: var(--color-green);
}

.event__status .hero__cta:hover {
  background: #000;
}

/* Pantallas bajas: contador un punto menor para que el vídeo siga asomando */
@media screen and (max-height: 820px) and (min-width: 769px) {
  .event__status .countdown-days {
    font-size: 4rem;
  }
  .event__status .countdown-time {
    font-size: 1.6rem;
  }
  .event__status .hero__oferta {
    margin-top: 0.6rem;
  }
  .event__status .countdown {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
  }
  .banner-card.event {
    padding-top: 7rem;
  }
}

/* Móvil: el botón flotante de abajo ya es el CTA; el del hero sobra */
@media screen and (max-width: 768px) {
  .event__status .hero__cta {
    display: none;
  }
  .event__status .countdown {
    gap: 0 1.2rem;
  }
  .event__status .hero__oferta strong {
    font-size: var(--font-size-sm);
  }
}

/* Tablet: el molde hincha los rem y el bloque de estado se leía enorme */
@media screen and (max-width: 1000px) and (min-width: 600px) {
  .event__status .text-md,
  .event__status .hero__oferta strong {
    font-size: min(var(--font-size-md), 18px);
  }
  .event__status .hero__oferta .text-opacity,
  .event__status .countdown {
    font-size: min(var(--font-size-sm), 15px);
  }
}

/* --------------------------------------------------------------------------
   Base responsive (notas/21): protección contra el scroll horizontal, medios
   que nunca desbordan, toques sin retardo y menos movimiento si se pide.
   -------------------------------------------------------------------------- */

html {
  overflow-x: clip;
}

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

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

.event-title,
.pagina-cabecera h1,
.section__header h2 {
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Pantallas muy bajas (portátil pequeño): todo un punto más apretado para
   que las cuatro categorías entren en el hero sin cambiar su altura */
@media screen and (max-height: 760px) and (min-width: 769px) {
  .banner-card.event {
    padding-top: 6rem;
  }
  .event__status .hero__oferta .text-opacity {
    display: none;
  }
  .event__status .countdown-days {
    font-size: 3.4rem;
  }
  .banner-card .hero__franja {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }
  .banner-card .hero__franja .hero__claim {
    font-size: var(--font-size-sm);
  }
  .hero__categorias a {
    padding: 0.15rem 0;
  }
  .hero__ruta {
    gap: 0.4rem;
  }
}

/* --------------------------------------------------------------------------
   Cabecera: detalles finos. Enlace activo marcado, subrayado que crece al
   pasar, sombra suave cuando la cabecera deja de ser transparente, y el botón
   de inscribirse con un leve relieve al pasar.
   -------------------------------------------------------------------------- */

.header .nav__item a {
  position: relative;
  padding-bottom: 0.3rem;
  transition: opacity 0.2s ease;
}

.header .nav__item a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.header .nav__item a:hover::after,
.header .nav__item a:focus-visible::after,
.header .nav__item a[aria-current='page']::after {
  transform: scaleX(1);
}

.header .nav__item a[aria-current='page'] {
  font-weight: 700;
}


.header__inscribete {
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.header__inscribete:hover,
.header__inscribete:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}

.header .login {
  transition: opacity 0.2s ease;
}

.header .login:hover {
  opacity: 0.7;
}

/* Tarjetas de categoría del formulario en 320 px: que el texto haga wrap */
.insc-categoria {
  min-width: 0;
}

.insc-categoria__precio small {
  white-space: normal;
}

/* Nombres de categoría fluidos: «DISCAPACIDAD» en Organetto no cabía a 320 px */
.insc-categoria > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.insc-categoria__nombre {
  font-size: clamp(1.5rem, 6.5vw, 2.2rem);
}

.insc-categoria__precio {
  font-size: clamp(2rem, 8vw, 2.8rem);
}

/* --------------------------------------------------------------------------
   Menú móvil (UX/UI). Filas táctiles con separador, página actual en amarillo,
   «Inscríbete» como botón principal a todo el ancho, WhatsApp secundario y la
   preventa al pie. Entrada escalonada breve; sin movimiento si se pide.
   -------------------------------------------------------------------------- */

.menu__pie {
  display: none;
}

@media screen and (max-width: 1160px) {
  .header__menu.is-active {
    display: flex !important;
    flex-direction: column;
    /* Fijo al viewport, no al contenedor centrado: así el logo del panel
       cae exactamente donde está el logo de la cabecera */
    position: fixed;
    inset: 0;
    width: auto;
    height: 100dvh;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    align-items: stretch;
    justify-content: flex-start;
    text-transform: none;
  }

  .header__menu.is-active .header__nav,
  .header__menu.is-active .menu__cabecera,
  .header__menu.is-active .menu__items,
  .header__menu.is-active .header__extras {
    width: 100%;
  }

  .header__menu.is-active .header__nav {
    flex: 1;
  }

  /* Cabecera del panel: logo blanco a la izquierda, a la misma altura que
     el botón de cerrar; el panel empieza justo debajo */
  .header__menu.is-active {
    padding-top: 2.2rem;
  }

  .header__menu.is-active .menu__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding-right: 6rem; /* hueco para la X, que está fuera del panel */
  }

  .header__menu.is-active .menu__logo {
    display: block;
    width: 13.6rem;
  }

  .header__menu.is-active .menu__logo img {
    display: block;
    width: 100%;
    height: auto;
    filter: none; /* el logo ya es blanco */
  }

  .header__menu.is-active .menu__etiqueta {
    font-size: 1.2rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.5;
  }

  .header__menu.is-active .menu__items {
    margin-top: 2.4rem;
    width: 100%;
  }

  .header__menu.is-active .nav__item {
    margin: 0;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .header__menu.is-active .nav__item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .header__menu.is-active .nav__item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: clamp(52px, 5.6rem, 64px);
    padding: clamp(10px, 1.2rem, 14px) 0;
    line-height: 1.2;
    font-family: 'Organetto', sans-serif;
    font-size: clamp(1.5rem, 4.6vw, 1.9rem);
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #fff;
  }

  /* Flecha discreta que se desplaza al tocar: indica que es un enlace */
  .header__menu.is-active .nav__item a::before {
    content: '→';
    order: 2;
    font-family: 'HalvarBreit', sans-serif;
    font-size: 1.8rem;
    opacity: 0.35;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .header__menu.is-active .nav__item a:active::before,
  .header__menu.is-active .nav__item a:focus-visible::before {
    transform: translateX(0.4rem);
    opacity: 1;
  }

  /* En el panel no se usa el subrayado de escritorio */
  .header__menu.is-active .nav__item a::after {
    display: none;
  }

  .header__menu.is-active .nav__item a[aria-current='page'] {
    color: var(--color-green);
  }

  .header__menu.is-active .nav__item a[aria-current='page']::before {
    opacity: 1;
    color: var(--color-green);
  }

  .header__menu.is-active .header__extras {
    width: 100%;
    margin-top: 2.4rem;
    gap: 1.2rem;
  }

  .header__menu.is-active .header__inscribete {
    width: 100%;
    justify-content: center;
    min-height: clamp(52px, 5.6rem, 64px);
    margin: 0;
    font-size: clamp(1.6rem, 2.2vw, 1.8rem);
  }

  .header__menu.is-active .login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: clamp(48px, 5.2rem, 60px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 2rem;
    font-size: 1.6rem;
    color: #fff;
  }

  .header__menu.is-active .menu__pie {
    display: grid;
    gap: 0.3rem;
    width: 100%;
    margin: 1.6rem 0 0;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 1.3rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
  }

  .header__menu.is-active .menu__pie strong {
    color: var(--color-green);
    font-size: 1.5rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    .header__menu.is-active .nav__item,
    .header__menu.is-active .header__extras > *,
    .header__menu.is-active .menu__cabecera {
      animation: hero-subir 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
    .header__menu.is-active .nav__item:nth-child(1) { animation-delay: 0.05s; }
    .header__menu.is-active .nav__item:nth-child(2) { animation-delay: 0.09s; }
    .header__menu.is-active .nav__item:nth-child(3) { animation-delay: 0.13s; }
    .header__menu.is-active .nav__item:nth-child(4) { animation-delay: 0.17s; }
    .header__menu.is-active .nav__item:nth-child(5) { animation-delay: 0.21s; }
    .header__menu.is-active .nav__item:nth-child(6) { animation-delay: 0.25s; }
    .header__menu.is-active .header__extras > *:nth-child(1) { animation-delay: 0.3s; }
    .header__menu.is-active .header__extras > *:nth-child(2) { animation-delay: 0.35s; }
    .header__menu.is-active .header__extras > *:nth-child(3) { animation-delay: 0.4s; }
  }
}

/* --------------------------------------------------------------------------
   Vídeo del hero: sin sombra (el molde lo oscurecía al 65 %) y centrado, para
   que el recorte a pantalla completa deje a los corredores en medio y no
   corte los pies. El archivo es 640×360 (lo único que YouTube dejó bajar):
   con un original en 1080p en public/marca/video-hero.mp4 se verá nítido.
   -------------------------------------------------------------------------- */

.banner .video video,
.video video {
  -webkit-filter: none;
  filter: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.banner .video .video__yt {
  filter: none;
}

/* Franja del vídeo: cita y botón encima, abajo a la izquierda */
.video__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding-bottom: 6rem;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 45%);
  color: #fff;
}

.video__overlay .container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.4rem;
  pointer-events: auto;
}

.video__cita {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  font-size: var(--font-size-sm);
}

.video__cita strong {
  font-family: 'Organetto', sans-serif;
  font-weight: normal;
  font-size: clamp(2.4rem, 4vw, 4.8rem);
  line-height: 1.18;
  text-transform: uppercase;
}

.video__cta {
  flex-shrink: 0;
}

@media screen and (max-width: 768px) {
  .video__overlay {
    padding-bottom: 9rem; /* deja sitio al botón flotante de inscripción */
  }
  .video__overlay .container {
    flex-direction: column;
    align-items: flex-start;
  }
  .video__cta {
    display: none; /* en móvil ya está el botón flotante */
  }
}

/* --------------------------------------------------------------------------
   Que no se aplasten las letras. Organetto tiene ascendentes y descendentes
   generosos y el molde pone line-height: 1 en todos los títulos grandes, con
   lo que las líneas se tocan. Aquí se abre a 1.18 en todos, de una vez.
   -------------------------------------------------------------------------- */

:root {
  --line-height-h1: 1.18;
}

h1,
h2,
.title-xl,
.title-lg,
.section__title,
.card-header h2,
.footer .section__title,
.marquee__content,
.cifra__number,
.paso__n,
.event__status .countdown-days,
.insc-codigo strong,
.insc-categoria__nombre {
  line-height: 1.18 !important;
}

/* Grano fino sobre el vídeo: disimula el desenfoque del reescalado. Se quita
   el día que llegue el original en 1080p (notas/25). */
.banner .video::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}

/* --------------------------------------------------------------------------
   Hamburguesa desde 1160 px, no desde 768. Entre 769 y 1160 el menú
   horizontal se montaba sobre el logo y tocaba el botón de inscribirse. Aquí
   se replica lo que el molde hace en layouts.css/base.css a ≤ 768 para la
   cabecera, solo para esa franja intermedia.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 769px) and (max-width: 1160px) {
  .header .container {
    justify-content: space-between;
    align-items: center;
  }

  .header .logo {
    margin-right: 0;
  }

  .header__menu {
    display: none;
  }

  .header__menu.is-active {
    position: fixed;
    inset: 0;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 111;
    padding: 1.2rem 2rem max(2rem, env(safe-area-inset-bottom, 0px));
    align-items: stretch;
    background: var(--bg-black) !important;
    color: var(--color-white) !important;
  }

  .header__menu.is-active .header__nav,
  .header__menu.is-active .menu__items {
    flex-direction: column;
    align-items: flex-start;
  }

  .header__menu.is-active .nav__item:not(:last-child) {
    margin-right: 0;
  }

  .header__menu.is-active .header__extras {
    flex-direction: column;
    align-items: flex-start;
  }

  /* El botón: visible, y en blanco cuando el panel está abierto */
  .menu.mobile {
    display: flex !important;
    z-index: 1000;
    width: 6rem;
  }

  .menu.mobile .line {
    position: absolute;
    background-color: var(--color-text-light);
    transition: transform 0.2s, top 0.2s;
  }

  .header:not(.transparent) .menu.mobile {
    filter: invert(1);
  }

  .header:not(.transparent) .menu.mobile.is-active,
  .inverse .header:not(.transparent) .menu.mobile {
    filter: none;
  }

  .menu__pie.mobile {
    display: none;
  }

  .header__menu.is-active .menu__pie.mobile {
    display: grid;
  }
}

/* La cabecera del panel solo existe dentro del panel abierto */
.menu__cabecera {
  display: none;
}

/* Botón de cerrar más evidente: X grande y blanca cuando el panel está abierto */
@media screen and (max-width: 1160px) {
  button.menu.mobile.is-active {
    filter: none !important;
  }
  button.menu.mobile.is-active .line {
    background: #fff !important;
    width: 2.8rem;
    height: 3px;
  }
  button.menu.mobile.is-active .line1 {
    transform: translateX(-50%) rotate(45deg);
  }
  button.menu.mobile.is-active .line2 {
    transform: translateX(-50%) rotate(-45deg);
  }
}

/* --------------------------------------------------------------------------
   Auditoría del 11-sep-2026 (notas 21–24): desbordes en móvil, jerarquía de
   encabezados, áreas táctiles y tamaños mínimos.
   -------------------------------------------------------------------------- */

/* Cifras: el número en Organetto se salía de su columna en móvil */
.cifras-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cifra {
  min-width: 0;
}

.cifra__number {
  font-size: clamp(3.2rem, 9vw, 6rem);
  overflow-wrap: anywhere;
}

@media screen and (max-width: 1000px) {
  .cifras-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Documentos: la columna crecía al ancho de «DOCUMENTOS» y se salía a 320 px */
.event-documents .col {
  min-width: 0;
  width: 100%;
}

.event-documents h2 {
  overflow-wrap: anywhere;
}

@media screen and (max-width: 768px) {
  .event-documents h2 {
    font-size: clamp(2.2rem, 8.4vw, 2.8rem);
  }
  /* Aliados: dos columnas que caben, no dos de ancho fijo */
  .partner-container .flex.gap-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .partner-icon {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  /* Enlaces dentro del texto: área táctil más cómoda sin romper la línea */
  main .text-underline,
  .footer a {
    display: inline-block;
    padding-block: 0.6rem;
    margin-block: -0.6rem;
  }
}

/* Los títulos de los acordeones del home eran h4 (saltaban de h2 a h4);
   ahora son h3 con el aspecto que el molde daba a esos h4 */
.event-info .tab-contents h3 {
  font-family: 'HalvarBreit', sans-serif;
  font-weight: 400;
  font-size: 3rem;
  line-height: 1.2;
  margin: 0;
  text-transform: none;
}

@media screen and (max-width: 768px) {
  .event-info .tab-contents h3 {
    font-size: 3rem;
    font-weight: lighter;
  }
}

/* Títulos de diálogos y avisos del formulario: son h2 por jerarquía */
.insc-dialogo__titulo {
  font-family: 'HalvarBreit', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1.6rem;
  text-transform: none;
}

/* Nada por debajo de 12 px */
.insc-categoria__precio small {
  font-size: max(1.1rem, 12px);
}

/* Etiqueta del campo trampa: fuera de pantalla, como el campo */
label.insc-trampa {
  position: absolute;
  left: -9999px;
}

/* Pie: las columnas de contacto tenían anchos fijos (24rem + 16rem) que a
   820–1280 px se salían del contenedor; ahora se reparten el espacio */
.footer .contacts {
  max-width: 48%;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 3.2rem 4rem;
}

.footer .contacts .group {
  min-width: 0;
}

@media screen and (max-width: 1000px) {
  .footer .contacts {
    max-width: 100%;
    grid-template-columns: repeat(1, 100%);
    gap: 3.2rem;
  }
  .footer .flex.space-between {
    flex-direction: column;
    gap: 4rem;
  }
}

/* Pie: cinta de aliados en blanco sobre el fondo oscuro del molde. Los logos
   son de color; se pasan a silueta blanca para que la cinta sea uniforme. */
.partners .logos img {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.partners .logos .swiper-slide:hover img {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  /* Sin carrusel: solo los cuatro logos reales, no las repeticiones */
  .logos .swiper-slide:nth-child(n + 5) {
    display: none;
  }
}

/* Botones del formulario y de /verificar/: siempre área táctil suficiente */
.form-inscripcion .btn,
.insc-botones .btn {
  min-height: 44px;
}

.insc-archivo-elegido img {
  height: auto;
}

/* --------------------------------------------------------------------------
   Hero: título a la izquierda y estado a la derecha, como el molde. (Se probó
   centrado todo en columna el 14-sep-2026 y se descartó.)
   -------------------------------------------------------------------------- */

/* Año, bien discreto: pequeño, sin peso, junto a la fecha */
.hero__anio {
  display: inline-block;
  margin-left: 0.35em;
  font-size: max(0.42em, 1.2rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  vertical-align: 0.25em;
  opacity: 0.55;
}

/* En móvil «15 DE NOVIEMBRE» llena la línea: el año baja a la siguiente
   (nota 24: nunca se recorta ni se oculta; se reorganiza) */
@media screen and (max-width: 768px) {
  .hero__anio {
    display: block;
    margin-left: 0;
  }
}


/* --------------------------------------------------------------------------
   Hero (14-sep-2026): el bloque de título y estado queda centrado en vertical
   en el hueco sobre la franja de categorías; el estado un punto más grande, el
   contador más presente y un botón discreto «Corre ahora» bajo el contador.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 769px) {
  .banner-card .card-header {
    margin-block: auto;
  }

  .banner-card .card-header-right {
    width: 28vw;
    min-width: 30rem;
  }

  .event__status .text-md {
    font-size: min(1.6rem, 18px);
    line-height: 1.5;
  }

  .event__status .hero__oferta strong {
    font-size: min(1.8rem, 20px);
  }

  .event__status .countdown-days {
    font-size: min(7.2rem, 4.8vw, 84px);
  }

  .event__status .countdown-time {
    font-size: min(2.8rem, 2vw, 30px);
  }

  /* Botón sutil: contorno fino, sin relleno, se llena al pasar */
  .event__status .hero__cta {
    display: inline-flex;
    margin-top: 1.4rem;
    padding: 0.6rem 1.6rem;
    min-height: 3.6rem;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    background: transparent;
    color: var(--color-black);
    border: 1.5px solid var(--color-black);
    border-radius: 999px;
  }

  .event__status .hero__cta .dot {
    background: var(--color-black);
  }

  .event__status .hero__cta:hover,
  .event__status .hero__cta:focus-visible {
    background: var(--color-black);
    color: #fff;
  }

  .event__status .hero__cta:hover .dot,
  .event__status .hero__cta:focus-visible .dot {
    background: var(--color-green);
  }
}

@media screen and (max-height: 820px) and (min-width: 769px) {
  .event__status .countdown-days {
    font-size: min(6rem, 5vw);
  }
  .event__status .countdown-time {
    font-size: min(2.2rem, 1.8vw);
  }
}

/* Pantallas muy anchas (rem = 14 px): los márgenes del estado se contienen
   para que el bloque no toque el borde superior */
@media screen and (min-width: 1800px) {
  .event__status .hero__oferta {
    margin-top: 0.8rem;
  }
  .event__status .countdown {
    margin-top: 1rem;
    padding-top: 1rem;
  }
  .event__status .hero__cta {
    margin-top: 1rem;
  }
  .event__status .text-md {
    line-height: 1.4;
  }
}

/* --------------------------------------------------------------------------
   El hero nunca se recorta. El molde apilaba la tarjeta amarilla como capa
   absoluta de 100vh dentro de una sección de 150vh con overflow hidden: en
   ventanas bajas cortaba la franja de categorías. Ahora la tarjeta va en el
   flujo (la sección mide lo que mida la tarjeta + 50vh de vídeo debajo) y
   100vh es solo su mínimo.
   -------------------------------------------------------------------------- */
.events-sliders {
  height: auto;
  min-height: 0;
  padding-bottom: 50vh;
}

.events-sliders .layer-1 {
  position: relative;
  height: auto;
}

.banner-card.event {
  height: auto;
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Vídeo completo, sin recorte (14-sep-2026). Deja de ser un fondo a pantalla
   completa recortado: va en el flujo, justo debajo de la tarjeta amarilla, a
   todo el ancho y con su proporción 16:9. Sin capa parallax (el efecto abría
   un hueco negro entre la tarjeta y el vídeo).
   -------------------------------------------------------------------------- */
.events-sliders {
  padding-bottom: 0;
  overflow: hidden;
}

.events-sliders .layer-1 {
  transform: none !important;
}

.events-sliders .sbanner {
  position: relative;
  height: auto;
}

.sbanner .banner {
  position: relative;
  inset: auto;
  height: auto;
}

.banner .video {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  background: var(--bg-black);
}

.banner .video video,
.video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: none;
}

/* --------------------------------------------------------------------------
   Referencia del organizador (14-sep-2026): la tarjeta del hero termina un
   poco antes del borde inferior de la ventana, de modo que el vídeo asoma
   debajo (≈ 10 rem, como el molde), y bajo el menú va una línea fina.
   -------------------------------------------------------------------------- */
.banner-card.event {
  min-height: calc(100vh - 10rem);
}

@media screen and (max-width: 768px) {
  .banner-card.event {
    min-height: calc(100vh - 7rem);
  }
}

/* Cabecera: arriba del todo, como el molde. Solo cuando se vuelve sticky
   (fondo activo) gana un poco de altura para que el logo respire. */
.header.background-active {
  padding-top: 1.6rem;
  padding-bottom: 1.4rem;
  background: var(--color-green) !important;
  background-image: none !important;
  color: var(--color-black) !important;
  box-shadow: 0 1px 0 rgba(26, 29, 31, 0.18), 0 8px 22px rgba(26, 29, 31, 0.08);
}

/* El header comparte el patrón suave del hero, pero como capa independiente
   para que logo, navegación y CTA permanezcan completamente legibles. */
.header {
  isolation: isolate;
  overflow: hidden;
  background: var(--color-green) !important;
}

.header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('/marca/patron-ruta-10k-2026-suave.webp') center / 280px 280px repeat;
  opacity: 0.22;
  mix-blend-mode: multiply;
}

.header .container,
.header__menu,
.header .logo,
.header .menu.mobile {
  position: relative;
  z-index: 1;
}

/* Al desplazarse, la cabecera es una superficie independiente. El patrón y
   el fondo del hero no deben asomarse dentro de ella ni crear una unión rota. */
.header.background-active::before,
.header.background-active::after {
  content: '' !important;
}

.header.background-active::before {
  opacity: 0.16;
}

.header.background-active .logo img {
  filter: invert(1);
}

.header.background-active .nav__item a,
.header.background-active .login,
.header.background-active .header__extras {
  color: var(--color-black) !important;
}

.header.background-active .header__inscribete {
  background: var(--color-black) !important;
  color: var(--color-green) !important;
}

@media screen and (max-width: 768px) {
  .header.background-active {
    padding: 0;
    box-shadow: 0 1px 0 rgba(26, 29, 31, 0.18), 0 5px 16px rgba(26, 29, 31, 0.08);
  }
  .header.background-active .container {
    padding-top: 2.4rem;
    padding-bottom: 1.2rem;
  }
}

/* El título del hero, centrado en vertical respecto al bloque de estado */
.banner-card .card-header {
  align-items: center;
}

/* La cabecera fija mide 66 px arriba y 85 px en sticky (90 en móvil):
   el contenido del hero empieza siempre por debajo de ella, en cualquier
   altura de ventana. La tarjeta crece si hace falta, así que ya no hay
   motivo para apretar este margen. */
.banner-card.event {
  padding-top: max(10rem, 96px);
}

@media screen and (max-height: 820px) and (min-width: 769px) {
  .banner-card.event {
    padding-top: max(9.6rem, 96px);
  }
}

@media screen and (max-width: 768px) {
  .banner-card.event {
    padding-top: max(11rem, 100px);
  }
}

/* Identidad 10K 2026: patrón urbano y fondo de recorrido.
   Son activos propios de la marca; se mantienen como textura secundaria para
   no competir con el logo, el contador ni la información de inscripción. */
.banner-card.event {
  isolation: isolate;
  background: var(--color-green);
  /* Sin altura fija ni máximo: 100vh − 10rem es el mínimo y la tarjeta crece
     si el contenido lo pide (nunca se cortan las categorías). El overflow
     solo recorta el fondo decorativo, que va en posición absoluta. */
  min-height: calc(100vh - 10rem);
  overflow: hidden;
}

.banner-card.event::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 58%;
  z-index: -2;
  pointer-events: none;
  background-image: url('/marca/fondo-ruta-10k-2026.webp');
  background-size: cover;
  background-position: center right;
  opacity: 0.82;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 28%);
  mask-image: linear-gradient(to right, transparent 0%, black 28%);
}

.banner-card.event::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('/marca/patron-ruta-10k-2026-suave.webp');
  background-size: 430px 430px;
  background-position: 70% 14%;
  opacity: 0.18;
  mix-blend-mode: multiply;
}

.banner-card.event .container,
.event-marquee,
.distances .accordion-header,
.event-documents {
  position: relative;
  isolation: isolate;
}

.banner-card.event .container {
  z-index: 1;
}

/* La identidad se ve alrededor del contenido, nunca por encima de él. */
.banner-card.event .event__status {
  position: relative;
  z-index: 2;
  padding: 1.4rem 1.6rem 1.6rem;
  border-radius: 1.4rem;
  background: rgba(242, 211, 12, 0.9);
  box-shadow: 0 0.8rem 2.4rem rgba(26, 29, 31, 0.08);
}

.banner-card.event .card-header-right {
  position: relative;
  z-index: 3;
  padding: 1.2rem;
  border-radius: 1.6rem;
  background: #f2d30c !important;
  color: #1a1d1f !important;
  opacity: 1;
  isolation: isolate;
  box-shadow: 0 0.8rem 2.4rem rgba(26, 29, 31, 0.1);
}

.banner-card.event .card-header-right .event__status {
  padding: 0.4rem 0.6rem 0.6rem;
  background: transparent;
  box-shadow: none;
}

.banner-card.event .card-header-right a,
.banner-card.event .card-header-right p,
.banner-card.event .card-header-right strong,
.banner-card.event .card-header-right span,
.banner-card.event .card-header-right .countdown {
  color: #1a1d1f !important;
}

.banner-card.event .hero__datos,
.banner-card.event .hero__franja {
  position: relative;
  z-index: 2;
}

.event-marquee::before,
.event-documents::before,
.distances .accordion-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('/marca/patron-ruta-10k-2026-suave.webp');
  background-repeat: repeat;
  background-size: 280px 280px;
  opacity: 0.08;
  mix-blend-mode: multiply;
}

.event-marquee::before {
  opacity: 0.07;
  background-size: 330px 330px;
}

.distances .accordion-header::before {
  background-position: right center;
  opacity: 0.055;
}

.event-documents::before {
  background-position: center;
  opacity: 0.06;
}

/* El mismo lenguaje aparece en las secciones de información para que la
   identidad no se quede únicamente en el hero. */
.event-info,
.partners,
.event-results,
.event-news,
.event-about,
.event-charity,
.event-volunteering {
  position: relative;
  isolation: isolate;
}

.event-info::after,
.partners::after,
.event-results::after,
.event-news::after,
.event-about::after,
.event-charity::after,
.event-volunteering::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('/marca/patron-ruta-10k-2026.webp');
  background-repeat: repeat;
  background-size: 420px 420px;
  background-position: center;
  opacity: 0.035;
  mix-blend-mode: screen;
}

.event-info::after,
.event-charity::after {
  opacity: 0.05;
}

.partners::after,
.event-news::after,
.event-about::after,
.event-volunteering::after {
  mix-blend-mode: multiply;
}

/* El botón bajo el contador: la regla de color forzado de arriba lo dejaba
   con texto negro sobre fondo negro. Es el botón principal de la tarjeta. */
.banner-card.event .card-header-right .hero__cta {
  background: var(--color-black) !important;
  color: #fff !important;
  border-color: var(--color-black);
}

.banner-card.event .card-header-right .hero__cta .dot {
  background: var(--color-green);
}

.banner-card.event .card-header-right .hero__cta:hover,
.banner-card.event .card-header-right .hero__cta:focus-visible {
  background: #000 !important;
}

/* Punto del botón «Inscríbete» de la cabecera, siempre amarillo */
.header .header__inscribete .dot {
  background: var(--color-green);
}

/* Las tarjetas y bloques claros reciben una marca de esquina mínima. */
.accordion-content,
.documents-list,
.tabs,
.partners .container {
  background-image: linear-gradient(
    135deg,
    transparent 0 94%,
    rgba(242, 211, 12, 0.22) 94% 96%,
    transparent 96%
  );
}

@media (prefers-reduced-motion: reduce) {
  .banner-card.event,
  .banner-card.event::after,
  .event-marquee::before,
  .event-documents::before,
  .distances .accordion-header::before {
    background-attachment: initial;
  }
}

@media screen and (max-width: 768px) {
  .banner-card.event {
    background-position: center;
    min-height: calc(100vh - 7rem);
  }

  .banner-card.event::before {
    width: 100%;
    opacity: 0.42;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 42%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 42%);
  }

  .banner-card.event::after {
    background-size: 270px 270px;
    opacity: 0.14;
  }

  .banner-card.event .event__status {
    padding: 1.1rem 1.2rem 1.3rem;
    background: rgba(242, 211, 12, 0.94);
  }

  .banner-card.event .card-header-right {
    padding: 0.7rem;
    border-radius: 1.2rem;
  }

  .event-marquee::before,
  .event-documents::before,
  .distances .accordion-header::before {
    background-size: 220px 220px;
    opacity: 0.045;
  }
}

/* --------------------------------------------------------------------------
   Hero a su tamaño (14-sep-2026): en portátiles bajos (≤ 760 px de alto) el
   contenido se compacta para caber en 100vh − 10rem, que es la altura de
   referencia. Nada se corta: se reduce espacio y se retira lo secundario
   (nota 24, orden de reducción), nunca precio, fecha, estado ni categorías.
   -------------------------------------------------------------------------- */
@media screen and (max-height: 760px) and (min-width: 769px) {
  .banner-card.event {
    padding-top: max(6.8rem, 68px);
  }
  .banner-card .container {
    gap: 1.6rem;
  }
  .banner-card.event .card-header-right {
    padding: 0.6rem 0.8rem;
  }
  .banner-card.event .card-header-right .event__status {
    padding: 0.2rem 0.4rem 0.4rem;
  }
  .event__status .text-md {
    font-size: min(1.4rem, 15px);
    line-height: 1.35;
  }
  .event__status .hero__oferta {
    margin-top: 0.4rem;
    gap: 0;
  }
  .event__status .hero__oferta strong {
    font-size: min(1.5rem, 16px);
  }
  /* Detalle de la preventa: se retira aquí (nivel B); el precio y la fecha
     límite siguen en la página de inscripción y en el pie */
  .event__status .hero__oferta .text-opacity {
    display: none;
  }
  .event__status .countdown {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    gap: 0 1rem;
  }
  .event__status .countdown-days {
    font-size: min(4.4rem, 44px);
    line-height: 1.05;
  }
  .event__status .countdown-time {
    font-size: min(1.6rem, 16px);
  }
  /* El botón bajo el contador se retira: «Inscríbete» sigue en la cabecera */
  .event__status .hero__cta {
    display: none;
  }
  .banner-card .hero__franja {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .banner-card .event-title {
    font-size: min(4.6rem, 3vw);
  }
  .banner-card .card-title .title-xl {
    font-size: min(3.6rem, 2.4vw);
  }
}

@media screen and (max-height: 640px) and (min-width: 769px) {
  .banner-card.event {
    padding-top: max(6.6rem, 66px);
  }
  .banner-card .container {
    gap: 1rem;
  }
  .event__status .countdown-days {
    font-size: min(3.6rem, 36px);
  }
  .banner-card .hero__franja {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}

/* --------------------------------------------------------------------------
   Patrones de la identidad 2026 en todo el sitio, siempre como textura de
   fondo (opacidad baja, nunca sobre el texto). Secciones oscuras: patrón
   claro en «screen»; secciones claras: patrón suave en «multiply».
   -------------------------------------------------------------------------- */
.event-cifras,
.event-recorrido,
.event-pasos,
.footer__section,
.footer .partners,
.pagina-cabecera,
.page-interior .section,
.page-interior .pagina-intro,
.event-marquee {
  position: relative;
  isolation: isolate;
}

.event-cifras::after,
.event-recorrido::after,
.event-pasos::after,
.footer__section::after,
.footer .partners::after,
.pagina-cabecera::after,
.page-interior .section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 420px 420px;
  background-position: center;
}

/* Oscuras (negro): patrón claro, muy tenue */
.event-cifras::after,
.footer .partners::after,
.page-interior .section[bg='black']::after,
.page-interior .section[bg='dark']::after {
  background-image: url('/marca/patron-ruta-10k-2026.webp');
  mix-blend-mode: screen;
  opacity: 0.05;
}

/* Claras (amarillo, beige, blanco): patrón suave en multiply */
.event-recorrido::after,
.event-pasos::after,
.footer__section::after,
.pagina-cabecera::after,
.page-interior .section::after {
  background-image: url('/marca/patron-ruta-10k-2026-suave.webp');
  mix-blend-mode: multiply;
  opacity: 0.07;
}

/* Cabeceras de las páginas interiores (amarillas): el fondo del recorrido a
   la derecha, como en el hero, más discreto */
.pagina-cabecera::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  z-index: -2;
  pointer-events: none;
  background: url('/marca/fondo-ruta-10k-2026.webp') center right / cover no-repeat;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40%);
  mask-image: linear-gradient(to right, transparent 0%, black 40%);
}

.pagina-cabecera .container {
  position: relative;
  z-index: 1;
}

/* El formulario sigue sobre superficie lisa: nada compite con los campos
   (nota 24). (Los diálogos NO van aquí: position: relative rompía el
   centrado nativo de <dialog>.) */
.form-inscripcion {
  position: relative;
  z-index: 1;
  background: var(--color-white);
}

@media screen and (max-width: 768px) {
  .event-cifras::after,
  .event-recorrido::after,
  .event-pasos::after,
  .footer__section::after,
  .footer .partners::after,
  .pagina-cabecera::after,
  .page-interior .section::after {
    background-size: 260px 260px;
  }
  .pagina-cabecera::before {
    width: 100%;
    opacity: 0.3;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
  }
}

/* Cabecera fundida con el hero: arriba del todo es transparente y deja ver
   el patrón y el fondo del hero sin costura; solo al hacerse sticky recupera
   su superficie amarilla con el patrón suave. */
.header.transparent {
  background: transparent !important;
  box-shadow: none;
}

.header.transparent::before {
  display: none;
}

/* Con min-height en la tarjeta, el «height: 100 %» del contenedor ya no se
   resolvía y el contenido se apelotonaba arriba dejando el resto vacío. El
   contenedor estira hasta el fondo de la tarjeta: la franja de categorías
   vuelve abajo y el título y el estado se centran en el hueco. */
.banner-card.event {
  display: flex;
  flex-direction: column;
}

.banner-card.event .container {
  flex: 1 1 auto;
  height: auto;
}

/* El fondo del recorrido se desvanece hacia la franja de categorías: el
   texto de salida/meta y de las categorías no queda sobre las líneas
   oscuras (nota 24: nada de texto sobre zonas oscuras o recortadas). */
.banner-card.event::before {
  opacity: 0.6;
  /* Tres máscaras que se intersecan: entra por la izquierda, se apaga en
     la franja de abajo y se apaga bajo la cabecera (WhatsApp y el menú
     tienen que leerse sobre amarillo liso) */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%),
    linear-gradient(to top, transparent 0%, transparent 22%, black 55%),
    linear-gradient(to bottom, transparent 0, transparent 90px, black 200px);
  mask-image: linear-gradient(to right, transparent 0%, black 30%),
    linear-gradient(to top, transparent 0%, transparent 22%, black 55%),
    linear-gradient(to bottom, transparent 0, transparent 90px, black 200px);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Legibilidad por encima de la decoración: la franja de categorías va
   sobre amarillo liso, y en móvil el fondo del recorrido queda muy tenue y
   solo en la zona media, lejos del título y de las categorías. */
.banner-card .hero__franja {
  position: relative;
  z-index: 2;
  background: var(--color-green);
}

/* Transición suave por encima de la franja: la ilustración se funde en el
   amarillo en vez de cortarse con un borde recto */
.banner-card .hero__franja::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 12rem;
  background: linear-gradient(to bottom, rgba(242, 211, 12, 0), var(--color-green));
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .banner-card.event::before {
    opacity: 0.28;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 30%, black 50%, black 70%, transparent 90%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 30%, black 50%, black 70%, transparent 90%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  .banner-card .card-title {
    position: relative;
    z-index: 2;
  }
}

/* Botón flotante: aparece solo cuando el hero ya ha pasado */
.reg-btn {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.reg-btn.reg-btn--oculto {
  opacity: 0;
  transform: scale(0.96); /* sin desplazar: no asoma fuera del viewport */
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Patrones de public/marca/patrones-2026, cada uno donde su README lo sugiere.
   Siempre textura: la legibilidad manda (opacidades bajas, nunca tras texto
   denso). Los PNG de 1–3 MB se sirven como WebP; los originales están en
   _fuentes/marca/patrones.
   -------------------------------------------------------------------------- */

/* Velocidad: fondo energético → cifras (negro) */
.event-cifras::after {
  background-image: url('/marca/patrones-2026/patron-velocidad-ruta.webp');
  background-size: 520px 520px;
  mix-blend-mode: screen;
  opacity: 0.09;
}

/* Mapa urbano: recorrido y categorías (líneas claras sobre amarillo) */
.event-recorrido::after,
.distances .accordion-header::before {
  background-image: url('/marca/patrones-2026/patron-mapa-urbano.webp');
  background-size: 560px 560px;
  mix-blend-mode: soft-light;
  opacity: 0.55;
}

/* Arcos suaves: detrás de texto y documentos (beige/blanco) */
.event-pasos::after,
.event-documents::before,
.footer__section::after,
.page-interior .section::after {
  background-image: url('/marca/patrones-2026/patron-arcos-suave.webp');
  background-size: 480px 480px;
  mix-blend-mode: multiply;
  opacity: 0.08;
}

/* Geométrico: alto contraste → cinta de aliados (oscura) */
.footer .partners::after {
  background-image: url('/marca/patrones-2026/patron-ruta-geometrico.webp');
  background-size: 360px 360px;
  mix-blend-mode: screen;
  opacity: 0.06;
}

/* Panorama: cabeceras de las páginas interiores */
.pagina-cabecera::before {
  background-image: url('/marca/patrones-2026/fondo-ruta-panorama.webp');
}

/* Ruta suave: cabecera sticky y hero (ya aplicado arriba con el mismo activo) */

/* Páginas interiores: fuera la franja blanca entre la cabecera (amarilla) y
   la cabecera de página (amarilla). El hueco para la cabecera fija va dentro
   del bloque amarillo, no como margen blanco del main. */
.page-interior {
  padding-top: 0;
}

.page-interior .pagina-cabecera {
  padding-top: calc(6rem + 7rem);
}

@media screen and (max-width: 768px) {
  .page-interior .pagina-cabecera {
    padding-top: calc(3rem + 8rem);
  }
}

/* Inscripción (14-sep-2026, tras la investigación de formularios):
   contador «Paso X de 4», resumen de errores con enlaces y ayuda por chat */
.insc-pasos__contador {
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.insc-resumen-errores {
  margin: 0 0 1.2rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid currentColor;
  font-size: 1.4rem;
  line-height: 1.5;
}

.insc-resumen-errores a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-weight: 700;
}

.insc-ayuda {
  margin-top: 1.6rem;
}

/* Inscripción: la sección del formulario y todo el cuadro en blanco, sin
   patrón detrás; el afiche va después de las categorías, más discreto. */
.insc-seccion::after {
  display: none;
}

.insc-seccion,
.form-inscripcion,
.form-inscripcion .form__content,
.insc-promo,
.insc-banco {
  background: #fff;
}

.insc-promo--abajo {
  margin: 2.4rem 0 0;
  grid-template-columns: 12rem 1fr;
  padding: 1.6rem;
}

.insc-promo--abajo .insc-promo__titulo {
  font-size: 2rem;
}

@media screen and (max-width: 768px) {
  .insc-promo--abajo {
    grid-template-columns: 1fr;
  }
  .insc-promo--abajo img {
    max-width: 22rem;
  }
}

/* Menos aire antes del formulario: las categorías entran en la primera
   pantalla, que es lo que hace fácil empezar */
.insc-seccion {
  padding-top: 4rem;
}

@media screen and (max-width: 768px) {
  .insc-seccion {
    padding-top: 2.4rem;
  }
}

/* Inscripción: las categorías en la primera pantalla. Menos aire entre la
   cabecera de la página, el indicador de pasos y el título del paso. */
.page-interior .insc-seccion {
  padding-top: 3rem;
}

.page-interior .pagina-cabecera.pagina-cabecera--corta {
  padding-bottom: 4rem;
}

.form-inscripcion .insc-pasos {
  margin-bottom: 2rem;
}

.form-inscripcion .form__content {
  padding-top: 0;
}

/* Inscripción: el formulario a la izquierda y el afiche de la preventa a su
   lado, a tamaño moderado y fijo al hacer scroll; en móvil, debajo. */
.insc-seccion__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(34rem, 40%);
  gap: 4rem;
  align-items: start;
}

.insc-afiche {
  position: sticky;
  top: 10rem;
}

.insc-afiche img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.6rem;
  box-shadow: 0 2rem 4rem -2.4rem rgba(26, 29, 31, 0.4);
}

@media screen and (max-width: 1000px) {
  .insc-seccion__grid {
    grid-template-columns: 1fr;
  }
  .insc-afiche {
    position: static;
    max-width: min(40rem, 100%);
    margin: 0 auto;
  }
}

/* --------------------------------------------------------------------------
   /inscripcion/ como pantalla de conversión (nota 34): barra mínima con el
   logo y «Volver al inicio», franja de contexto (preventa, precio, contador
   y fecha en texto), formulario sobre blanco y afiche lateral solo en
   escritorio. Sin cabecera ni pie del sitio.
   -------------------------------------------------------------------------- */
.page-inscripcion {
  background: #fff;
}

.insc-barra {
  background: var(--color-green);
  color: var(--color-black);
}

.insc-barra__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  min-height: 7.2rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}

.insc-barra__marca {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-width: 0;
}

.insc-barra__marca img {
  width: 12rem;
  min-width: 96px;
  height: auto;
  filter: invert(1); /* el logo es blanco; sobre amarillo va en negro */
}

.insc-barra__fecha {
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.insc-barra__volver {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0.6rem 1.6rem;
  font-size: 1.3rem;
}

.insc-pagina {
  padding: 3.2rem 0 4.8rem;
}

.insc-pagina__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(30rem, 36%);
  gap: 4rem;
  align-items: start;
}

.insc-pagina__titulo {
  margin: 0 0 1.6rem;
  font-family: 'Organetto', sans-serif;
  font-size: clamp(2.4rem, 4vw, 4rem);
  text-transform: uppercase;
  line-height: 1.1;
}

/* Franja de contexto: precio, preventa, estado y contador, antes del primer CTA */
.insc-contexto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.6rem 3.2rem;
  align-items: center;
  margin-bottom: 2.4rem;
  padding: 1.6rem 2rem;
  border: 1px solid rgba(45, 45, 34, 0.15);
  border-left: 4px solid var(--color-green);
  background: #fff;
}

.insc-contexto__oferta {
  display: grid;
  gap: 0.3rem;
}

.insc-contexto__estado {
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.insc-contexto__oferta strong {
  font-family: 'Organetto', sans-serif;
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  text-transform: uppercase;
  line-height: 1.15;
}

.insc-contexto__cuenta {
  display: grid;
  gap: 0.2rem;
  justify-items: end;
  text-align: right;
}

.insc-contexto .countdown {
  display: flex;
  align-items: baseline;
  gap: 0 1rem;
  font-size: 1.3rem;
  color: var(--text-green-secondary);
}

.insc-contexto .countdown-days {
  font-family: 'Organetto', sans-serif;
  font-size: 3.2rem;
  line-height: 1;
  margin-right: 0.4rem;
  color: var(--color-black);
}

.insc-contexto .countdown-time {
  font-family: 'Organetto', sans-serif;
  font-size: 1.6rem;
  opacity: 0.6;
}

.insc-pagina__pie {
  margin-top: 2rem;
}

.page-inscripcion .form-inscripcion {
  max-width: none;
}

@media screen and (max-width: 1000px) {
  .insc-pagina__grid {
    grid-template-columns: 1fr;
  }
  /* El afiche es decoración (nivel C, nota 24): en móvil y tablet se retira
     para que las categorías queden a mano */
  .insc-afiche {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .insc-barra__fecha {
    display: none;
  }
  .insc-barra__volver {
    padding: 0.6rem 1.2rem;
  }
  .insc-pagina {
    padding: 2rem 0 4rem;
  }
  .insc-contexto {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 1.4rem 1.6rem;
  }
  .insc-contexto__cuenta {
    justify-items: start;
    text-align: left;
  }
  /* Inputs a 16 px: Safari iOS no hace zoom al enfocar */
  .form-inscripcion .form-field,
  .form-inscripcion select {
    font-size: max(1.6rem, 16px);
  }
}

/* --------------------------------------------------------------------------
   Touch friendly (nota 36): en móvil, botones de 52 px a todo el ancho con
   12 px entre ellos, inputs de 48 px con relleno, tarjetas de categoría con
   separación y estado elegido con borde + relleno + texto.
   -------------------------------------------------------------------------- */
.insc-categoria {
  position: relative;
}

.insc-categoria--elegida {
  border: 2px solid var(--color-black);
  background: rgba(242, 211, 12, 0.18);
}

.insc-categoria--elegida::after {
  content: '✓ Elegida';
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.insc-categorias {
  gap: 1.2rem;
}

.form-inscripcion .option-group label,
.form-inscripcion .checkbox label {
  min-height: 48px;
  display: flex;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .form-inscripcion .insc-botones {
    flex-direction: column;
    gap: 1.2rem;
  }
  .form-inscripcion .insc-botones .btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }
  .form-inscripcion .form-field,
  .form-inscripcion select {
    min-height: 48px;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
  .form-inscripcion .form-group {
    margin-bottom: 1.2rem;
  }
  .insc-categoria {
    min-height: 52px;
  }
  .form-inscripcion .insc-copiar-todo {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }
}

/* Nota 40 (#12–13): sin alturas fijas en cajas de contenido variable. Las
   tarjetas de aliados llevan a veces texto largo en vez de logo: la altura
   pasa a mínimo para que crezcan. */
.partner-icon {
  height: auto;
  min-height: 12.8rem;
}

@media screen and (max-width: 768px) {
  .partner-icon {
    height: auto;
    min-height: 12.5rem;
  }
}

/* En móvil el molde centra el botón flotante con translateX(50%): el estado
   oculto debe conservarlo o el botón se va fuera de pantalla por la izquierda */
@media screen and (max-width: 768px) {
  .reg-btn.reg-btn--oculto {
    transform: translateX(50%) scale(0.96);
  }
}

/* /inscripcion/ sin ninguna cabecera (14-sep-2026): solo una línea discreta
   con «Volver al inicio» y el nombre del evento, encima del título */
.insc-volver {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.6rem;
  margin: 0 0 1.6rem;
  font-size: 1.3rem;
}

.insc-volver__btn {
  min-height: 48px;
  padding: 0.8rem 2rem;
  font-size: 1.4rem;
  border: 1.5px solid var(--color-black);
}

@media screen and (max-width: 768px) {
  .insc-volver__btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }
}

.insc-volver__evento {
  align-self: center;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.insc-pagina {
  padding-top: 1.6rem;
}

/* El afiche lateral acompaña al hacer scroll. El molde pone overflow-x:
   hidden en body; con el html en overflow-x: clip, eso convierte al body en
   su propio contenedor de scroll y position: sticky deja de funcionar. En
   esta página el body vuelve a visible (el html ya evita el scroll lateral). */
body.page-inscripcion {
  overflow: visible;
}

.insc-afiche {
  top: 2.4rem;
}

/* CTA principal del formulario en amarillo de marca (nota 28 §8 y nota 41
   #29–30: color distintivo, no negro); el secundario sigue blanco con borde.
   Contraste negro sobre #F2D30C = 13:1. */
.form-inscripcion .btn-dark,
.insc-dialogo .btn-dark {
  background: var(--color-green);
  color: var(--color-black);
  border: 1.5px solid var(--color-black);
}

.form-inscripcion .btn-dark .dot,
.insc-dialogo .btn-dark .dot {
  background: var(--color-black);
}

.form-inscripcion .btn-dark:hover,
.form-inscripcion .btn-dark:focus-visible,
.insc-dialogo .btn-dark:hover,
.insc-dialogo .btn-dark:focus-visible {
  background: var(--color-black);
  color: #fff;
}

.form-inscripcion .btn-dark:hover .dot,
.form-inscripcion .btn-dark:focus-visible .dot,
.insc-dialogo .btn-dark:hover .dot,
.insc-dialogo .btn-dark:focus-visible .dot {
  background: var(--color-green);
}

.form-inscripcion .btn-dark:disabled {
  opacity: 0.6;
}

/* Microcopy tranquilizador junto al botón de pago (nota 41 #41–42) */
.insc-tras-cta {
  margin-top: 0.8rem;
  font-size: 1.3rem;
  opacity: 0.75;
}

/* Diálogos y avisos siempre en el centro de la pantalla, en cualquier
   dispositivo: fijos al viewport, centrados con margin: auto, con margen de
   seguridad y scroll interno si no caben. */
.insc-dialogo[open] {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(48rem, calc(100vw - 3.2rem));
  max-width: calc(100vw - 3.2rem);
  max-height: calc(100vh - 3.2rem);
  max-height: calc(100dvh - 3.2rem);
  overflow: auto;
  border-radius: 0.8rem;
  box-shadow: 0 2.4rem 6rem -2rem rgba(26, 29, 31, 0.5);
  z-index: 2000;
}

.insc-dialogo[open] .insc-botones {
  margin-top: 2rem;
}

@media screen and (max-width: 768px) {
  .insc-dialogo[open] {
    padding: 2.4rem 2rem;
  }
  .insc-dialogo[open] .insc-botones {
    flex-direction: column;
  }
  .insc-dialogo[open] .insc-botones .btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }
}

/* Páginas interiores (categorías, kit, reglamento…): la cabecera es una
   franja amarilla desde el primer momento, no la barra transparente del hero;
   con la altura del home se veía apretada. Va con la altura del sticky. */
body.page-interior .header {
  padding-top: 1.6rem;
  padding-bottom: 1.4rem;
}

@media screen and (max-width: 768px) {
  body.page-interior .header {
    padding: 0;
  }
  body.page-interior .header .container {
    padding-top: 2.4rem;
    padding-bottom: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   Cabecera responsive (≤ 1160 px, donde hay hamburguesa) siempre en su
   variante oscura: fondo negro, logo y enlaces en blanco, «Inscríbete» en
   amarillo. Coherente con el panel del menú, que también es negro. Y el
   panel siempre se puede cerrar: X del botón, botón «Cerrar» dentro del
   panel y Escape; la cabecera no se transforma ni recorta mientras el panel
   está abierto.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1160px) {
  .header,
  .header.transparent,
  .header.background-active,
  body.page-interior .header {
    background: var(--color-black) !important;
    color: #fff !important;
    box-shadow: none;
  }

  .header::before {
    display: none;
  }

  .header .logo img,
  .header.background-active .logo img {
    filter: none; /* el logo es blanco: sobre negro va tal cual */
  }

  .header .menu.mobile .line,
  .header.transparent .menu.mobile .line,
  .header:not(.transparent) .menu.mobile .line,
  .inverse .header .menu.mobile .line {
    background: #fff !important;
  }

  .header .header__inscribete {
    background: var(--color-green) !important;
    color: var(--color-black) !important;
  }

  .header .header__inscribete .dot {
    background: var(--color-black);
  }

  /* Con el panel abierto, nada de transform (is-hide) ni overflow: si no, el
     panel fijo se recorta o se esconde con la cabecera */
  .header:has(.header__menu.is-active) {
    transform: none !important;
    overflow: visible !important;
  }

  .menu__cerrar {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    color: #fff;
    font: inherit;
    font-size: 1.3rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    min-height: 44px;
    padding: 0.4rem 1.4rem;
    margin-right: 5.6rem; /* deja sitio a la X del botón hamburguesa */
    cursor: pointer;
  }

  .menu__cerrar:focus-visible {
    outline: 2px solid var(--color-green);
    outline-offset: 2px;
  }
}

/* Anclas del menú (Categorías, Recorrido, Cómo inscribirte): que al saltar
   no queden bajo la cabecera fija */
#categorias,
#recorrido-seccion,
#como-inscribirse {
  scroll-margin-top: 10rem;
}