/* =========================================================================
   Vuelta Ciclística El Heraldo 2026 — Refinamientos visuales
   Se carga desde bloques/footer.bloque.php, justo después de footer.css,
   así queda DESPUÉS de home.css, header.css, footer.css y del CSS propio
   de cada módulo (categorias, rutas, estado, inscripcion) en todas las páginas.
   Secciones 0–13: pulido, estados e interacción.
   Sección 14: sistema de tipografía, espaciado y CTAs (tokens en :root).
   Sección 15: capa moderna/minimal (velos, tipografía de lectura, sticky header).
   Sección 16: ritmo de secciones, footer en grid y motion al hacer scroll.
   Sección 17: páginas internas (Categorías, Rutas, Estado, Inscripción).
   ========================================================================= */

/* ---------- 0. Tokens (extiende los existentes de home.css) ---------- */
:root {
  --rojo-oscuro: #5E0915;
  --crema: #F7F3EC;
  --crema-borde: #E4DCCD;
  --focus-ring: 0 0 0 3px var(--crema), 0 0 0 6px var(--amarillo, #FFC400);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --sombra-cta: 0 10px 24px rgba(13, 20, 36, .35);
}

/* ---------- 1. Base: render de texto y selección ---------- */
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--amarillo, #FFC400); color: var(--azul, #0D1424); }

/* Headlines con quiebres balanceados; párrafos sin viudas */
.bloque1-headline, .bloque3-headline, .bloque4-headline, .bloque5-headline,
.bloque6-headline, .bloque7-headline, .bloque9-headline { text-wrap: balance; }
.bloque3-parrafo, .bloque5-sub, .bloque6-sub, .bloque7-sub { text-wrap: pretty; }

/* ---------- 2. Foco visible (hoy no hay ninguno custom) ---------- */
a:focus-visible,
button:focus-visible,
.burger-menu:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 999px;
}
.header .menu-horizontal > li > a:focus-visible { border-radius: 4px; }

/* ---------- 3. Header (desktop) ---------- */
@media only screen and (min-width: 601px) {
  .header {
    border-bottom: 1px solid var(--crema-borde);
  }

  /* El hover actual mete border-bottom de 3px en el <li> → salto de layout.
     Se reemplaza por un subrayado animado sin afectar el box. */
  .header li.nav-item:hover { border-bottom: 0; }
  .header .menu-horizontal > li > a {
    padding: 8px 0;
    background-image: linear-gradient(var(--rojo, #880D1F), var(--rojo, #880D1F));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 3px;
    transition: background-size .25s var(--ease-out), color .2s ease;
  }
  .header .menu-horizontal > li > a:hover,
  .header .menu-horizontal > li > a[aria-expanded="true"] {
    color: var(--rojo, #880D1F);
    background-size: 100% 3px;
  }

  /* Dropdown "Histórico" */
  .header ul.dropdown-menu {
    border: 1px solid var(--crema-borde);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(13, 20, 36, .18);
    background: var(--crema);
    overflow: hidden;
  }
  .header .dropdown-menu li { transition: background-color .15s ease; }
  .header .dropdown-menu li:hover { background: #EFE7D9; }
  .header .dropdown-menu li:hover .dropdown-item { color: var(--rojo, #880D1F); }
  .header .dropdown-item:hover, .header .dropdown-item:focus { background: transparent; }

  /* CTA del header */
  .header .nav-btn {
    transition: background-color .2s ease, transform .2s var(--ease-out), box-shadow .2s ease;
  }
  .header .nav-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(136, 13, 31, .35);
  }
}

/* Mobile: área táctil mínima en botón "Inscríbete" compacto */
@media only screen and (max-width: 600px) {
  nav.header .nav-btn-sm { height: 44px; border-radius: 999px; }
}

/* ---------- 4. CTAs en imagen: feedback de hover / press ---------- */
.bloque1-btn, .bloque2-btn, .bloque3-btn, .bloque5-btn, .bloque6-btn, .bloque7-card {
  border-radius: 999px;
  transition: transform .22s var(--ease-out), filter .22s ease;
  will-change: transform;
}
.bloque1-btn:hover, .bloque2-btn:hover, .bloque3-btn:hover,
.bloque5-btn:hover, .bloque6-btn:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 10px 18px rgba(13, 20, 36, .35));
}
.bloque7-card:hover { transform: translateY(-4px); filter: drop-shadow(0 12px 20px rgba(29, 17, 19, .18)); }
.bloque1-btn:active, .bloque2-btn:active, .bloque3-btn:active,
.bloque5-btn:active, .bloque6-btn:active, .bloque7-card:active {
  transform: translateY(0) scale(.98);
  transition-duration: .08s;
}

/* ---------- 5. Hero ---------- */
.bloque1-headline {
  text-shadow: 0 2px 24px rgba(40, 0, 8, .28);
}
.bloque1-fecha { text-shadow: 0 1px 10px rgba(40, 0, 8, .35); }

/* ---------- 6. Countdown: dígitos que no "bailan" ---------- */
.bloque2-countdown div,
#countdown div, #countdown-mobile div {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  min-width: 2ch;
}
.bloque2-countdown div span { letter-spacing: .04em; margin-top: .15em; }
.bloque2-countdown div { text-shadow: 0 4px 24px rgba(255, 196, 0, .18); }

/* ---------- 7. Recap / Fundación: marcos de video ---------- */
.bloque3-video {
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(13, 20, 36, .5), 0 0 0 1px rgba(243, 246, 255, .12);
}
.bloque5-video { border-radius: 6px; }

/* ---------- 8. Redes ---------- */
.bloque8-icons a {
  border-radius: 50%;
  transition: transform .2s var(--ease-out);
}
.bloque8-icons a:hover { transform: translateY(-3px) scale(1.05); }
.bloque8-divider { opacity: .7; border-radius: 2px; }

/* ---------- 9. Patrocinadores ---------- */
.grid-patrocinio-destacado img,
.grid-patrocinio-normal img,
.grid-patrocinio-extra img {
  transition: transform .2s var(--ease-out), opacity .2s ease;
}
.grid-patrocinio-normal img:hover,
.grid-patrocinio-extra img:hover { transform: scale(1.04); }

/* Hoy la sección se publica sin logos: evita un bloque vacío de ~280px */
.bloque-9.patrocinadores:not(:has(img)) { padding-top: 48px; padding-bottom: 40px; }
.bloque-9.patrocinadores:not(:has(img)) .bloque9-headline { margin-bottom: 0; }

/* ---------- 10. Barra flotante de compartir (desktop) ---------- */
.framed .text .social-buttons-text .btn {
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 8px 0 8px 6px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(13, 20, 36, .22);
  transition: transform .2s var(--ease-out), box-shadow .2s ease, filter .2s ease;
}
.framed .text .social-buttons-text a.btn svg { width: 24px; height: 24px; }
.framed .text .social-buttons-text .btn:hover {
  transform: translateX(4px);
  box-shadow: 0 6px 16px rgba(13, 20, 36, .3);
  filter: brightness(1.08);
}

/* ---------- 11. Botón "ir arriba" ---------- */
/* Hoy mide 60px y cae sobre el texto del footer ("RESERVADOS") */
.ir-arriba {
  padding: 0;
  right: 20px;
  bottom: 24px;
  border-radius: 50%;
  filter: drop-shadow(0 6px 14px rgba(13, 20, 36, .35));
  transition: transform .2s var(--ease-out);
}
.ir-arriba:hover { transform: translateY(-3px); }
.icon-arrow-up2 { width: 48px; height: 48px; }

/* ---------- 12. Footer ---------- */
footer a { transition: color .2s ease, opacity .2s ease; }
footer a:hover { color: var(--amarillo, #FFC400); }
.footer-terminos a { text-underline-offset: .2em; text-decoration-thickness: 2px; }
.footer-contacto p, .footer-derechos p { letter-spacing: .01em; }

/* ---------- 13. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================================
   14. SISTEMA — escala tipográfica, espaciado y CTAs estandarizados
   Todo sale de tokens. Para ajustar el sitio completo, toca sólo :root.
   ========================================================================= */
:root {
  /* Escala tipográfica (desktop, fluida por vw — mantiene la lógica "póster") */
  --fs-h1:    clamp(32px, 6.4vw, 124px);   /* hero */
  --fs-h2:    clamp(28px, 5.4vw, 104px);   /* titular de sección */
  --fs-h3:    clamp(20px, 3.4vw, 66px);    /* titular secundario / bandas */
  --fs-lead:  clamp(15px, 1.9vw, 36px);    /* kickers, subtítulos, fechas */
  --fs-body:  clamp(15px, 1.5vw, 28px);    /* párrafos */
  --fs-small: clamp(11px, 1.2vw, 22px);    /* labels */

  --lh-display: 1;
  --lh-lead: 1.3;
  --lh-body: 1.45;
  --ls-display: -0.01em;

  /* Ritmo vertical (en em → escala con cada nivel) */
  --mb-kicker: 0.8em;
  --mb-headline: 0.35em;
  --mb-text: 1.2em;

  /* Layout */
  --gutter-x: 7.5%;                          /* línea izquierda común */
  --section-py: clamp(56px, 6vw, 112px);     /* secciones de flujo */
  --stack-gap: 20px;                         /* separación entre elementos apilados */
  --cta-h: clamp(44px, 4.8vw, 88px);         /* alto único de botones */
}

@media only screen and (max-width: 600px) {
  :root {
    --fs-h1:    clamp(30px, 11.2vw, 60px);
    --fs-h2:    clamp(26px, 10.5vw, 52px);
    --fs-h3:    clamp(20px, 6.6vw, 34px);
    --fs-lead:  clamp(14px, 4.4vw, 21px);
    --fs-body:  clamp(14px, 4.2vw, 20px);
    --fs-small: clamp(11px, 3.4vw, 16px);
    --text-w: 82%;
    --section-py: 56px;
    --cta-h: clamp(44px, 11.5vw, 58px);
  }
}

/* ---------- 14.1 Titulares ---------- */
.bloque1-headline { font-size: var(--fs-h1); }
.bloque3-headline,
.bloque4-headline,
.bloque5-headline,
.bloque6-headline,
.bloque7-headline { font-size: var(--fs-h2); }
.bloque4-sub,
.bloque8-headline { font-size: var(--fs-h3); }

.bloque1-headline, .bloque3-headline, .bloque4-headline, .bloque4-sub,
.bloque5-headline, .bloque6-headline, .bloque7-headline, .bloque8-headline {
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.bloque1-headline, .bloque3-headline, .bloque5-headline, .bloque6-headline {
  margin-bottom: var(--mb-headline);
}
.bloque4-sub { line-height: 1.1; margin-top: 0.15em; }

/* Patrocinadores: kicker + titular alineados a la misma escala */
.bloque9-headline { margin-bottom: clamp(28px, 3vw, 56px); line-height: var(--lh-display); }
.bloque9-headline .bloque9-kicker { font-size: var(--fs-h3); margin-bottom: 0.1em; }
.bloque9-headline .accent { font-size: var(--fs-h2); }

/* ---------- 14.2 Kickers, subtítulos y párrafos ---------- */
.bloque3-kicker,
.bloque1-fecha { font-size: var(--fs-lead); line-height: 1.15; }
.bloque3-kicker { margin-bottom: var(--mb-kicker); }

.bloque6-sub,
.bloque7-sub { font-size: var(--fs-lead); line-height: var(--lh-lead); }

.bloque3-parrafo,
.bloque5-sub {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin-bottom: var(--mb-text);
  max-width: 34em;               /* medida de lectura cómoda */
}

.bloque2-banpais-text,
.patrocinio-label { font-size: var(--fs-small); }

.footer-contacto p,
.footer-derechos p { font-size: var(--fs-lead); line-height: var(--lh-lead); }

/* ---------- 14.3 Línea izquierda común (desktop) ---------- */
@media only screen and (min-width: 601px) {
  .bloque1-brand,
  .bloque1-main,
  .bloque3-texto,
  .bloque4-texto,
  .bloque5-texto { left: var(--gutter-x); }

  .bloque-9.patrocinadores { padding: var(--section-py) var(--gutter-x); }
  footer {
    padding: clamp(32px, 3vw, 56px) calc(var(--gutter-x) + 56px) clamp(32px, 3vw, 56px) var(--gutter-x);
  }
}

/* ---------- 14.4 CTAs: mismo alto en toda la página ---------- */
.bloque1-btn-primary,
.bloque2-btn,
.bloque3-btn,
.bloque5-btn-inscribete,
.bloque5-btn-conoce,
.bloque6-btn {
  width: auto;
  height: var(--cta-h);
}
.bloque1-btn-primary img,
.bloque2-btn img,
.bloque3-btn img,
.bloque5-btn-inscribete img,
.bloque5-btn-conoce img,
.bloque6-btn img {
  width: auto;
  height: 100%;
}
/* Los absolutos se centran sin transform (para no romper el hover) */
.bloque2-btn { left: 0; right: 0; width: fit-content; margin-inline: auto; }
@media only screen and (min-width: 601px) {
  .bloque5-btn-conoce { left: 55%; right: 5%; width: fit-content; margin-inline: auto; }
}

/* ---------- 14.5 Mobile: ancho de texto, secciones y apilado ---------- */
@media only screen and (max-width: 600px) {
  .bloque1-main,
  .bloque3-texto,
  .bloque4-texto,
  .bloque5-texto,
  .bloque6-texto { width: var(--text-w); }

  .bloque-3.recap,
  .bloque-4.kits,
  .bloque-5.fundacion { padding: var(--section-py) 0 calc(var(--section-py) - 8px); }
  .bloque-9.patrocinadores { padding: var(--section-py) 9% calc(var(--section-py) - 8px); }
  footer { padding: 40px 9% 88px; }          /* aire para el botón "ir arriba" */
  .ir-arriba { right: 12px; bottom: 16px; }
  .icon-arrow-up2 { width: 44px; height: 44px; }

  .bloque3-video,
  .bloque5-pantalla { width: var(--text-w); margin-top: calc(var(--stack-gap) + 4px); }
  .bloque4-row { margin-top: 12px; }
  .bloque4-fecha { margin-top: var(--stack-gap); }
  .bloque4-ciclista-m,
  .bloque5-btn-conoce { margin-top: var(--stack-gap); }

  .bloque3-parrafo, .bloque5-sub { max-width: none; }
  .bloque5-btn-conoce { width: fit-content; }

  /* La banda de redes es de alto fijo: conserva su tamaño propio */
  .bloque8-headline { font-size: clamp(14px, 4.96vw, 25px); }
}

/* =========================================================================
   15. CAPA MODERNA / MINIMAL
   Mismos elementos, menos ruido: fondos calmados, tipografía de lectura
   sin itálica, kickers editoriales, header sticky y controles monocromo.
   ========================================================================= */
:root {
  --veil-rojo: rgba(120, 10, 28, .42);
  --veil-azul: rgba(10, 15, 28, .5);
  --veil-crema: rgba(247, 243, 236, .72);
  --hairline-light: rgba(243, 246, 255, .16);
  --tracking-kicker: .16em;
}

/* ---------- 15.1 Header sticky con glass ---------- */
@media only screen and (min-width: 601px) {
  .sticky {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  .header {
    padding: 10px 0 !important;
    background-color: rgba(247, 243, 236, .86);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(24, 7, 5, .08);
  }
  .menu-logo { max-height: 64px; }
  .header ul a,
  .header .dropdown-item {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
  }
  .header .nav-btn {
    padding: 12px 26px;
    font-size: 13px;
    letter-spacing: .1em;
  }
}

/* ---------- 15.2 Fondos: velo que baja el ruido del patrón topográfico ---------- */
.bloque-2.evento,
.bloque-3.recap,
.bloque-4.kits,
.bloque-5.fundacion,
.bloque-7.strava,
.bloque-9.patrocinadores,
footer {
  isolation: isolate;               /* el velo queda debajo de TODO el contenido */
}
.bloque-2.evento::before,
.bloque-3.recap::before,
.bloque-4.kits::before,
.bloque-5.fundacion::before,
.bloque-7.strava::before,
.bloque-9.patrocinadores::before,
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.bloque-3.recap::before,
.bloque-5.fundacion::before,
footer::before        { background: var(--veil-rojo); }
.bloque-2.evento::before,
.bloque-4.kits::before,
.bloque-9.patrocinadores::before { background: var(--veil-azul); }
.bloque-7.strava::before { background: var(--veil-crema); }

/* Hero: gradiente lateral para anclar el texto sobre la foto */
.landing-intro { isolation: isolate; }
.landing-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(70, 0, 14, .45) 0%, rgba(70, 0, 14, .15) 45%, transparent 70%);
  pointer-events: none;
}
@media only screen and (max-width: 600px) {
  .landing-intro::before {
    background: linear-gradient(180deg, transparent 10%, rgba(70, 0, 14, .35) 45%, transparent 85%);
  }
}

/* ---------- 15.3 Tipografía de lectura: sin itálica, más aire ---------- */
.bloque3-parrafo,
.bloque5-sub,
.bloque6-sub,
.bloque7-sub,
.bloque2-banpais-text {
  font-style: normal;
  font-weight: 400;
}
.bloque3-parrafo,
.bloque5-sub { opacity: .92; }
.bloque7-sub { font-weight: 500; }
.bloque2-banpais-text { letter-spacing: .08em; }
.bloque2-banpais-text strong { font-weight: 700; }

/* ---------- 15.4 Kickers editoriales (línea + tracking) ---------- */
.bloque3-kicker,
.bloque9-headline .bloque9-kicker {
  font-family: 'Neue Montreal', system-ui, sans-serif;
  font-style: normal;
  letter-spacing: var(--tracking-kicker);
}
.bloque3-kicker {
  display: flex;
  align-items: center;
  gap: .7em;
  font-size: calc(var(--fs-lead) * .8);
  font-weight: 500;
}
.bloque3-kicker::before {
  content: "";
  width: 2.2em;
  height: 2px;
  background: currentColor;
  flex: none;
}
.bloque9-headline .bloque9-kicker {
  font-size: calc(var(--fs-lead) * .9);
  font-weight: 500;
  margin-bottom: .6em;
}
.bloque1-fecha {
  letter-spacing: .04em;
}
@media only screen and (max-width: 600px) {
  .bloque3-kicker { justify-content: center; }
  .bloque3-kicker::before { display: none; }
}

/* ---------- 15.5 Countdown: unidades separadas por hairlines ---------- */
@media only screen and (min-width: 601px) {
  .bloque2-countdown { gap: 0; }
  .bloque2-countdown div { padding: 0 1.6vw; }
  .bloque2-countdown div + div { border-left: 1px solid var(--hairline-light); }
}
.bloque2-countdown div span {
  font-family: 'Neue Montreal', system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .14em;
  font-size: calc(var(--fs-small) * 1.05);
  opacity: .85;
  margin-top: .6em;
}

/* ---------- 15.6 Video: tarjeta limpia ---------- */
.bloque3-video {
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6), 0 0 0 1px var(--hairline-light);
}

/* ---------- 15.7 Redes: separador más fino ---------- */
.bloque8-divider { width: 1px; opacity: .5; }

/* ---------- 15.8 Barra de compartir: monocromo, color sólo en hover ---------- */
.framed .text .social-buttons-text .btn.btn-fb,
.framed .text .social-buttons-text .btn.btn-facebook,
.framed .text .social-buttons-text .btn.btn-twitter,
.framed .text .social-buttons-text .btn.btn-mail {
  background-color: rgba(13, 20, 36, .72) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px var(--hairline-light), 0 6px 16px rgba(13, 20, 36, .2);
  transition: background-color .2s ease, transform .2s var(--ease-out);
}
.framed .text .social-buttons-text .btn.btn-fb:hover       { background-color: #1DA851 !important; }
.framed .text .social-buttons-text .btn.btn-facebook:hover { background-color: #1877F2 !important; }
.framed .text .social-buttons-text .btn.btn-twitter:hover  { background-color: #000 !important; }
.framed .text .social-buttons-text .btn.btn-mail:hover     { background-color: var(--rojo, #880D1F) !important; }
.framed .text .social-buttons-text a.btn svg { width: 20px; height: 20px; }

/* ---------- 15.9 Footer: jerarquía calmada ---------- */
.footer-contacto p,
.footer-derechos p {
  font-style: normal;
  font-weight: 600;
  text-transform: none;
  font-size: var(--fs-body);
  line-height: 1.6;
}
.footer-contacto p:first-child {
  font-family: 'Neue Montreal', system-ui, sans-serif;
  font-size: calc(var(--fs-small) * 1.05);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  opacity: .75;
  margin-bottom: .4em;
}
.footer-derechos p {
  font-weight: 400;
  font-size: calc(var(--fs-body) * .9);
  opacity: .8;
}
.footer-terminos { margin-top: .8em; }
.footer-terminos a { font-weight: 500; text-decoration-thickness: 1px; }
footer { border-top: 1px solid var(--hairline-light); }

/* ---------- 15.10 Entrada suave al hacer scroll (sólo navegadores compatibles) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bloque3-texto, .bloque3-video,
    .bloque4-texto, .bloque4-row,
    .bloque5-texto, .bloque5-pantalla,
    .bloque7-texto, .bloque7-card,
    .bloque8-headline, .bloque8-icons,
    .bloque9-headline {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
  @keyframes reveal-up {
    from { opacity: 0; translate: 0 28px; }
    to   { opacity: 1; translate: 0 0; }
  }
}

/* =========================================================================
   16. RITMO, FOOTER Y MOTION
   ========================================================================= */

/* ---------- 16.1 Ritmo vertical de secciones (desktop) ---------- */
@media only screen and (min-width: 601px) {

  /* Evento: el contenido estaba cargado abajo (129px arriba vs 59px abajo).
     Se sube todo ~6.7% para que el aire arriba y abajo sea el mismo. */
  .bloque2-fecha     { top: 18.16%; }
  .bloque2-salida    { top: 35.11%; }
  .bloque2-circuito  { top: 50.48%; }
  .bloque2-countdown { top: 18.16%; }
  .bloque2-banpais   { top: 42.34%; }
  .bloque2-btn       { top: 70.14%; }

  /* Comunidad (Strava): tenía ~200px muertos arriba y ~140 abajo.
     Pasa a layout de flujo con el mismo padding que el resto. */
  .bloque-7.strava {
    aspect-ratio: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(28px, 3vw, 56px) 4vw;
    padding: var(--section-py) var(--gutter-x);
    background-size: cover;
    background-position: center;
  }
  .bloque7-texto {
    position: static;
    flex: 0 0 100%;
    max-width: 66.4vw;
    margin-inline: auto;
  }
  .bloque7-card { position: static; }
  .bloque7-strava   { width: 16.3vw; }
  .bloque7-whatsapp { width: 26.67vw; }

  /* Patrocinadores vacío: mismo aire arriba y abajo */
  .bloque-9.patrocinadores:not(:has(img)) { padding-block: clamp(48px, 5vw, 88px); }
}

/* ---------- 16.2 Footer reorganizado ---------- */
footer {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "brand contacto"
    "legal legal";
  align-items: center;
  column-gap: 4vw;
  row-gap: clamp(28px, 3vw, 44px);
}
footer::after {                      /* logo blanco existente */
  content: "";
  grid-area: brand;
  width: clamp(120px, 10vw, 190px);
  aspect-ratio: 265 / 187;
  background: url("../img/logo-blanco.png") left center / contain no-repeat;
}
.footer-contacto {
  grid-area: contacto;
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: center;
  column-gap: 0;
  row-gap: .5em;
}
.footer-contacto p:first-child { grid-column: 1 / -1; margin-bottom: 0; }
.footer-contacto p:not(:first-child) { padding-inline: 24px; line-height: 1.3; }
.footer-contacto p:nth-child(2) { padding-left: 0; }
.footer-contacto p:nth-child(n+3) { border-left: 1px solid var(--hairline-light); }
.footer-contacto p.footer-terminos { margin-top: 0; padding-right: 0; }
.footer-terminos a { font-weight: 400; opacity: .85; }

.footer-derechos {
  grid-area: legal;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: clamp(20px, 2vw, 28px);
  border-top: 1px solid var(--hairline-light);
  text-align: left;
}
.footer-derechos p { font-size: calc(var(--fs-body) * .85); }

@media only screen and (min-width: 601px) {
  footer { padding: clamp(48px, 4.5vw, 80px) var(--gutter-x) clamp(28px, 2.5vw, 40px); }
  .footer-derechos { padding-right: 64px; }        /* aire para "ir arriba" */
}

@media only screen and (max-width: 600px) {
  footer {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "contacto" "legal";
    justify-items: center;
    text-align: center;
    row-gap: 28px;
    padding: 48px 9% 96px;
  }
  footer::after { width: 132px; background-position: center; }
  .footer-contacto {
    justify-self: center;
    grid-template-columns: 1fr;
    row-gap: .35em;
  }
  .footer-contacto p:not(:first-child),
  .footer-contacto p:nth-child(n+3) { padding-inline: 0; border-left: 0; }
  .footer-contacto p.footer-terminos { margin-top: .6em; }
  .footer-derechos {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    padding-top: 20px;
  }
}

/* ---------- 16.3 Motion al hacer scroll ----------
   Todo es CSS (scroll-driven animations). Navegadores sin soporte ven la
   página estática; con "reducir movimiento" activado no se anima nada. */
@media (prefers-reduced-motion: no-preference) {

  /* Hero: entrada al cargar, escalonada */
  .bloque1-brand    { animation: fade-up .7s var(--ease-out) both; }
  .bloque1-headline { animation: fade-up .8s var(--ease-out) .12s both; }
  .bloque1-cta      { animation: fade-up .8s var(--ease-out) .28s both; }

  @supports (animation-timeline: scroll()) {

    /* Barra de progreso de lectura bajo el header */
    .sticky::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 2px;
      background: var(--rojo, #880D1F);
      transform-origin: 0 50%;
      transform: scaleX(0);
      animation: progress linear both;
      animation-timeline: scroll(root);
      z-index: 2;
    }

    /* Header gana sombra y logo se compacta al empezar a bajar */
    @media only screen and (min-width: 601px) {
      .header {
        animation: header-elevate linear both;
        animation-timeline: scroll(root);
        animation-range: 0 160px;
      }
    }
    .menu-logo {
      animation: logo-compact linear both;
      animation-timeline: scroll(root);
      animation-range: 0 160px;
    }

    /* Hero: el bloque de texto sube y se desvanece al salir */
    .bloque1-main {
      animation: hero-out linear both;
      animation-timeline: scroll(root);
      animation-range: 0 70vh;
    }

    /* Evento: badges entran desde la izquierda, countdown y CTA suben */
    .bloque2-row {
      animation: slide-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    .bloque2-salida   { animation-range: entry 8% entry 63%; }
    .bloque2-circuito { animation-range: entry 16% entry 71%; }
    .bloque2-countdown,
    .bloque2-banpais,
    .bloque2-btn {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 60%;
    }

    /* Segundo elemento de cada sección entra un poco después (stagger) */
    .bloque3-video,
    .bloque5-pantalla,
    .bloque7-whatsapp { animation-range: entry 12% entry 60%; }

    /* Media: leve zoom-in al entrar */
    .bloque3-video,
    .bloque5-pantalla { animation-name: reveal-scale; }

    /* Kits: parallax suave del ciclista */
    .bloque4-ciclista-d,
    .bloque4-ciclista-m {
      animation: parallax-y linear both;
      animation-timeline: view();
      animation-range: cover;
    }

    /* Redes: íconos con micro-pop */
    .bloque8-icons a {
      animation: pop-in linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
    }
  }
}

@keyframes fade-up       { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes reveal-scale  { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
@keyframes slide-in      { from { opacity: 0; translate: -32px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes pop-in        { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@keyframes parallax-y    { from { translate: 0 6%; } to { translate: 0 -6%; } }
@keyframes hero-out      { to { opacity: 0; translate: 0 -48px; } }
@keyframes progress      { to { transform: scaleX(1); } }
@keyframes logo-compact  { to { max-height: 48px; } }
@keyframes header-elevate {
  to {
    background-color: rgba(247, 243, 236, .94);
    box-shadow: 0 8px 28px -12px rgba(13, 20, 36, .28);
  }
}
@media only screen and (max-width: 600px) {
  @keyframes logo-compact { to { max-height: 40px; } }
}

/* =========================================================================
   17. PÁGINAS INTERNAS — Categorías, Rutas, Estado, Inscripción
   ========================================================================= */

/* ---------- 17.1 Contenedor de página (shell compartido) ---------- */
:is(.categorias, .rutas, .estado, .inscripcion) :is(.categorias-page, .rutas-page, .estado-page, .inscripcion-page) {
  margin: clamp(16px, 2vw, 28px) clamp(12px, 2vw, 28px) clamp(40px, 5vw, 72px);
  padding: clamp(44px, 5vw, 88px) clamp(16px, 4vw, 64px) clamp(52px, 6vw, 104px);
  border-radius: clamp(20px, 2.2vw, 32px);
  isolation: isolate;
}
:is(.categorias-page, .rutas-page, .estado-page, .inscripcion-page)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--veil-azul, rgba(10, 15, 28, .5));
  pointer-events: none;
}

/* Título de página: misma escala en las 4 páginas */
:is(.categorias, .rutas, .estado, .inscripcion) :is(.categorias-page, .rutas-page, .estado-page, .inscripcion-page) h1.modulo-titulo {
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
:is(.categorias, .rutas, .estado, .inscripcion) h1.modulo-titulo::before {
  color: var(--amarillo, #FFC400);       /* el naranja #FD5700 no es de la paleta */
  padding: 0;
  margin-right: .3em;
  font-size: .82em;
  vertical-align: .04em;
}

/* Bajada */
:is(.estado-lead, .inscripcion-lead) {
  font-family: 'Neue Montreal', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--fs-body, clamp(15px, 1.5vw, 28px));
  line-height: 1.45;
  max-width: 34em;
  margin: 16px auto 0;
  opacity: .8;
  text-wrap: balance;
}

/* ---------- 17.2 Categorías ---------- */
.categorias .cat-filtros {
  gap: 14px 40px;
  margin: clamp(24px, 3vw, 40px) 0 clamp(32px, 3.5vw, 52px);
}
.categorias .cat-filtro { gap: 8px; }
.categorias .cat-filtro-label {
  font-family: 'Neue Montreal', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .16em;
  opacity: .7;
  margin-right: 8px;
}
.categorias .cat-filtro-btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-width: 1.5px;
  font-size: 13px;
  letter-spacing: .06em;
}
.categorias .cat-filtro-btn:not(.active):hover { background: rgba(243, 246, 255, .08); }

.categorias .categorias-page .row.gx-0 {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  max-width: 1320px;
  margin-inline: auto;
}
.categorias .col.categoria-mm {
  border-radius: 20px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(13, 20, 36, .04);
  transition: transform .25s var(--ease-out, ease), box-shadow .25s ease;
}
.categorias .col.categoria-mm:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(13, 20, 36, .04);
}
.categorias .col.categoria-mm > a { padding-bottom: 22px; }
.categorias .col.categoria-mm img { margin-bottom: 18px; border-radius: 20px 20px 0 0; }

/* Botón con nombre: siempre al fondo de la card, misma altura en toda la fila */
.categorias h3.cat-nombre {
  margin: auto auto 0;
  width: calc(100% - 40px);
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 999px;
  font: 800 14px/1.2 'Barlow', system-ui, sans-serif;
  letter-spacing: .04em;
  text-wrap: balance;
  transition: background-color .2s ease;
}
.categorias h3.cat-nombre.especial { width: calc(100% - 40px); }
.categorias p.cat-descripcion {
  margin: 10px auto 0;
  font: 500 13px/1.4 'Neue Montreal', system-ui, sans-serif;
  letter-spacing: .02em;
  opacity: .6;
}

/* ---------- 17.3 Rutas ---------- */
.rutas .row.gx-0 { width: min(100%, 920px); }
.rutas .row.gx-0 .col {
  margin-top: clamp(28px, 3vw, 44px);
  padding: clamp(16px, 2.5vw, 32px);
  border-radius: 24px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .65);
}
.rutas .gx-0 h2 {
  width: fit-content;
  max-width: 100%;
  height: auto;
  min-height: 44px;
  padding: 8px 28px;
  margin: 0 auto clamp(16px, 2vw, 24px);
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.15;
  letter-spacing: .02em;
}
.rutas .row.gx-0 img { border-radius: 14px; display: block; }

/* ---------- 17.4 Formularios (Estado + Inscripción) ---------- */
:is(.estado-card, .inscripcion-card) {
  border-radius: 24px !important;
  margin-top: clamp(28px, 3vw, 44px) !important;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .65) !important;
}
.estado .estado-card { padding: clamp(24px, 3vw, 40px); }
.inscripcion .inscripcion-card { padding: clamp(24px, 3.5vw, 48px); }

:is(.estado, .inscripcion) :is(.estado-card, .inscripcion-card) .form-label {
  font-family: 'Neue Montreal', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 6px;
}
:is(.estado, .inscripcion) :is(.estado-card, .inscripcion-card) .form-control,
:is(.estado, .inscripcion) :is(.estado-card, .inscripcion-card) .form-select {
  min-height: 48px;
  font-size: 16px;                       /* evita el zoom automático en iOS */
  background-color: #fff;
  border: 1px solid #D3DAE6;
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
:is(.estado, .inscripcion) :is(.estado-card, .inscripcion-card) .form-control { padding: 10px 14px; }
:is(.estado, .inscripcion) :is(.estado-card, .inscripcion-card) .form-control:hover,
:is(.estado, .inscripcion) :is(.estado-card, .inscripcion-card) .form-select:hover { border-color: #B4BFD3; }
:is(.estado, .inscripcion) :is(.estado-card, .inscripcion-card) .form-control:focus,
:is(.estado, .inscripcion) :is(.estado-card, .inscripcion-card) .form-select:focus,
:is(.estado, .inscripcion) :is(.estado-card, .inscripcion-card) .form-select:focus-within {
  border-color: var(--azul, #0D1424);
  box-shadow: 0 0 0 4px rgba(255, 196, 0, .45);
  outline: none;
}
:is(.estado, .inscripcion) .form-control::placeholder { color: #8A94A6; }
.inscripcion .bootstrap-select > .dropdown-toggle {
  min-height: 46px;
  padding: 10px 40px 10px 14px;
  font-size: 15px;
}
.inscripcion .form-check-input { width: 1.15em; height: 1.15em; margin-top: .15em; }
.inscripcion .form-check-input:checked { background-color: var(--rojo, #880D1F); border-color: var(--rojo, #880D1F); }
.inscripcion .form-check-input:focus { box-shadow: 0 0 0 4px rgba(255, 196, 0, .45); border-color: var(--azul, #0D1424); }
.inscripcion .form-check-label { font-size: 15px; }

/* Títulos de sección del formulario: hairline + acento corto amarillo */
.inscripcion .form-section { margin-bottom: clamp(28px, 3vw, 40px); }
.inscripcion .form-section-title {
  position: relative;
  font-family: 'Barlow', system-ui, sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .01em;
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(13, 20, 36, .12);
}
.inscripcion .form-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--amarillo, #FFC400);
}

/* Botones primarios */
.estado #btn-revisar,
.inscripcion #btn-pagar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 44px;
  font-family: 'Barlow', system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .04em;
  border-radius: 999px;
}
.estado #btn-revisar { width: 100%; margin-top: 8px; }
.inscripcion #btn-pagar { min-width: 260px; }
.inscripcion .inscripcion-actions { margin-top: 28px; }

/* ---------- 17.5 Modales ---------- */
:is(#modal-estado, #modal-pagar, #modal-cambio, #modal-pago) .modal-content {
  border-radius: 20px;
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .55);
}
:is(#modal-estado, #modal-pagar, #modal-cambio, #modal-pago) .modal-header { padding: 18px 24px; }
:is(#modal-estado, #modal-pagar, #modal-cambio, #modal-pago) .modal-body { padding: 24px; }
:is(#modal-estado, #modal-pagar, #modal-cambio, #modal-pago) .modal-title {
  font-family: 'Barlow', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .01em;
}

/* ---------- 17.6 Mobile ---------- */
@media only screen and (max-width: 600px) {
  :is(.categorias, .rutas, .estado, .inscripcion) :is(.categorias-page, .rutas-page, .estado-page, .inscripcion-page) {
    margin: 12px 10px 40px;
    padding: 36px 14px 44px;
    border-radius: 20px;
  }
  :is(.categorias, .rutas, .estado, .inscripcion) :is(.categorias-page, .rutas-page, .estado-page, .inscripcion-page) h1.modulo-titulo {
    font-size: clamp(26px, 8vw, 36px);
  }
  :is(.estado-lead, .inscripcion-lead) { font-size: 15px; margin-top: 12px; }

  .categorias .cat-filtros { gap: 16px; margin: 20px 0 28px; }
  .categorias .cat-filtro-label { flex-basis: 100%; text-align: center; margin: 0 0 2px; }
  .categorias .cat-filtro-btn { min-height: 44px; padding: 0 16px; }
  .categorias .categorias-page .row.gx-0 { grid-template-columns: 1fr; gap: 16px; }

  .rutas .row.gx-0 { width: 100%; }
  .rutas .row.gx-0 .col { padding: 14px; border-radius: 18px; }
  .rutas .gx-0 h2 { font-size: 14px; padding: 8px 18px; min-height: 40px; }

  .estado .estado-card,
  .inscripcion .inscripcion-card { padding: 22px 16px 26px; border-radius: 18px !important; }
  .inscripcion .form-section-title { font-size: 16px; }
  .inscripcion #btn-pagar { width: 100%; }
}