/* Club de Atletismo Artyneon — estilos de la web.
   Naranja de la marca #f15a23. El blanco sobre ese naranja solo alcanza 3,4:1: vale para titulares
   grandes; el texto pequeño va en tinta (5,2:1) o sobre el naranja hondo (4,9:1).
   Motivo: el corte en diagonal del logo. Las carreras se pintan como dorsales. */

@font-face {
  font-family: "Big Shoulders";
  src: url("/fuentes/big-shoulders.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("/fuentes/atkinson-next.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("/fuentes/atkinson-next-cursiva.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --naranja: #f15a23;
  --naranja-hondo: #c8441a;
  --naranja-texto: #b93b12;
  --naranja-claro: #ffe3d6;
  --tinta: #1c1917;
  --tinta-media: #3a3532;
  --tinta-suave: #57534e;
  --sobre-tinta: #f5f5f4;
  --sobre-tinta-suave: #c4bfbb;
  --gris: #f3f3f3;
  --linea: #e2e0de;
  --blanco: #fff;
  --verde: #166534;
  --verde-claro: #dcfce7;

  --titular: "Big Shoulders", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --texto: "Atkinson Next", "Atkinson Hyperlegible", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ancho: 76rem;
  --margen: clamp(1rem, 4vw, 2.5rem);
  --corte: clamp(1.25rem, 0.5rem + 3.5vw, 3.5rem);
  --corte-cabeza: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --seccion-y: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* Escala tipográfica: un tamaño por papel (los fluidos van de móvil a escritorio). */
  --fs-xs: 0.8125rem;      /* crédito, letra pequeñísima */
  --fs-meta: 0.875rem;     /* metadatos, cabeceras de tabla, etiquetas de estado */
  --fs-sm: 0.9375rem;      /* texto secundario: datos, notas, pies de foto, migas */
  --fs-base: 1.0625rem;    /* texto */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);   /* entradillas */
  --fs-et-s: 1.0625rem;    /* etiquetas en Big Shoulders (mayúsculas) */
  --fs-h4: 1.25rem;        /* título de elemento: carrera, noticia, paso */
  --fs-h3: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);     /* título de tarjeta */
  --fs-h2s: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem);     /* apartados de texto, meses */
  --fs-h2: clamp(1.875rem, 1.25rem + 2.2vw, 2.75rem);     /* título de sección */
  --fs-h1-largo: clamp(2.125rem, 1.4rem + 2.6vw, 3.25rem); /* título de página largo */
  --fs-h1: clamp(2.5rem, 1.6rem + 3.2vw, 4rem);           /* título de página */
  --fs-display: clamp(3rem, 1.75rem + 4.5vw, 5rem);       /* portada y grandes llamadas */
  --curva: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
  --curva-suave: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */

  --z-cabecera: 20;
  --z-menu: 30;
  --z-aviso: 40;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body {
  margin: 0;
  font-family: var(--texto);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--naranja-texto); text-underline-offset: 0.18em; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.sobre-naranja :focus-visible, .naranja :focus-visible { outline-color: var(--tinta); }
.oscuro :focus-visible { outline-color: var(--naranja); }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
[hidden] { display: none !important; }
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.mt { margin-top: 1rem; }
.mt-grande { margin-top: 2rem; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 0.5rem; }

.saltar {
  position: absolute; left: 1rem; top: -10rem; z-index: var(--z-aviso);
  padding: 0.75rem 1rem; background: var(--tinta); color: var(--blanco); font-weight: 700;
}
.saltar:focus { top: 1rem; }

.envoltorio { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }

/* ——— Tipografía ——— */

/* En titulares en mayúsculas, ¿ y ¡ suben a la altura de las mayúsculas (Big Shoulders no trae la variante
   «case»); si no, el gancho cuelga y choca con la línea de abajo. */
.abre { display: inline-block; translate: 0 -0.24em; }

.titular {
  font-family: var(--titular);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.005em;
}
.titular-seccion {
  font-family: var(--titular);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.08; /* la cola de la Q cuelga por debajo: con menos interlineado toca la línea siguiente */
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.entradilla { font-size: var(--fs-lead); line-height: 1.5; max-width: 38ch; }

/* ——— Botones ——— */

.boton {
  --fondo: var(--tinta);
  --color: var(--blanco);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3rem; padding: 0.55rem 1.4rem;
  border: 2px solid var(--fondo); background: var(--fondo); color: var(--color);
  font-family: var(--titular); font-weight: 800; font-size: 1.25rem; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none;
  clip-path: polygon(0.6rem 0, 100% 0, calc(100% - 0.6rem) 100%, 0 100%);
  transition: background-color 220ms var(--curva-suave), color 220ms var(--curva-suave), border-color 220ms var(--curva-suave);
}
.boton:hover { --fondo: var(--naranja-hondo); color: var(--blanco); }
.boton--naranja { --fondo: var(--naranja); --color: var(--tinta); }
.boton--naranja:hover { --fondo: var(--tinta); color: var(--blanco); }
/* Contorno inclinado: el recorte de los botones llenos se comería los bordes laterales,
   así que el contorno es una capa sesgada con el mismo ángulo. */
.boton--hueco { position: relative; isolation: isolate; border: 0; background: none; color: var(--fondo); clip-path: none; }
.boton--hueco::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 2px solid var(--fondo); transform: skewX(-11deg);
  transition: background-color 220ms var(--curva-suave), border-color 220ms var(--curva-suave);
}
.boton--hueco:hover { --fondo: var(--tinta); background: none; color: var(--blanco); }
.boton--hueco:hover::before { background: var(--tinta); }
.oscuro .boton--hueco { --fondo: var(--sobre-tinta); }
.oscuro .boton--hueco:hover { --fondo: var(--naranja); color: var(--tinta); }
.oscuro .boton--hueco:hover::before { background: var(--naranja); }
.boton__flecha { width: 1.1em; height: 1.1em; flex: none; transition: translate 240ms var(--curva); }
.boton:hover .boton__flecha { translate: 0.2rem 0; }
.boton--pequeno { min-height: 2.75rem; padding: 0.45rem 1.1rem; font-size: 1.125rem; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem;
  font-weight: 700; color: var(--tinta); text-decoration: none;
  background: linear-gradient(var(--naranja), var(--naranja)) no-repeat 0 100% / 0 3px;
  transition: background-size 300ms var(--curva);
}
.enlace-flecha:hover { color: var(--tinta); background-size: 100% 3px; }
.enlace-flecha svg { width: 1.1em; height: 1.1em; transition: translate 240ms var(--curva); }
.enlace-flecha:hover svg { translate: 0.2rem 0; }

/* ——— Aviso superior (próxima carrera destacada) ——— */

.anuncio { background: var(--tinta); color: var(--sobre-tinta); font-size: var(--fs-sm); }
.anuncio a {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem 0.9rem; flex-wrap: wrap;
  min-height: 2.75rem; padding: 0.4rem var(--margen);
  color: inherit; text-decoration: none; text-align: center;
}
.anuncio__marca { font-family: var(--titular); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--naranja); }
.anuncio__nombre { font-weight: 700; }
.anuncio a:hover .anuncio__ir { color: var(--naranja); }
.anuncio__ir { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: underline; text-underline-offset: 0.2em; }

/* ——— Cabecera ——— */

.cabecera {
  position: sticky; top: 0; z-index: var(--z-cabecera);
  background: color-mix(in srgb, var(--blanco) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linea);
}
.cabecera { transition: box-shadow 300ms var(--curva-suave); }
.cabecera__fila { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; transition: min-height 300ms var(--curva); }
.cabecera__logo { display: block; flex: none; padding: 0.35rem 0; }
.cabecera__logo img { width: 100px; height: auto; transition: width 300ms var(--curva); }
/* Al bajar (movimiento.js), la cabecera se compacta. */
.cabecera--compacta { box-shadow: 0 10px 30px -18px rgb(28 25 23 / 0.45); }
.cabecera--compacta .cabecera__fila { min-height: 3.75rem; }
.cabecera--compacta .cabecera__logo img { width: 80px; }

/* Lenis (desplazamiento suave, movimiento.js) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.menu { margin-left: auto; display: flex; align-items: center; }
.menu__lista { display: flex; align-items: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.menu__enlace {
  position: relative; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.75rem; padding: 0 0.55rem;
  font-family: var(--titular); font-weight: 700; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--tinta); text-decoration: none; white-space: nowrap;
}
.menu__enlace::after {
  content: ""; position: absolute; left: 0.55rem; right: 0.55rem; bottom: 0.35rem; height: 3px;
  background: var(--naranja); transform: scaleX(0); transform-origin: left;
  transition: transform 280ms var(--curva);
}
.menu__enlace:hover { color: var(--tinta); }
.menu__enlace:hover::after, .menu__enlace[aria-current="page"]::after { transform: scaleX(1); }
.menu__externo { width: 0.8em; height: 0.8em; opacity: 0.6; }
.menu__accion { margin-left: 0.4rem; }
.menu__accion .boton { white-space: nowrap; }
.menu__boton, .menu__cerrar { display: none; }

@media (max-width: 1279px) { /* con siete apartados, el menú de escritorio necesita unos 1270 px */
  /* backdrop-filter convertiría la cabecera en el contenedor del menú fijo y lo encerraría en ella */
  .cabecera { backdrop-filter: none; background: var(--blanco); }
  .cabecera__fila { min-height: 4rem; gap: 0.75rem; }
  .cabecera__logo img { width: 80px; }
  .cabecera__carreras { margin-left: auto; }
  .menu__boton {
    display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem;
    border: 0; background: var(--tinta); color: var(--blanco); cursor: pointer;
    clip-path: polygon(0.45rem 0, 100% 0, calc(100% - 0.45rem) 100%, 0 100%);
  }
  .menu__boton svg { width: 1.5rem; height: 1.5rem; }
  .menu {
    position: fixed; inset: 0; z-index: var(--z-menu);
    display: flex; flex-direction: column; justify-content: center; align-items: stretch;
    margin: 0; padding: 5rem var(--margen) 2.5rem; overflow-y: auto;
    background: var(--naranja); color: var(--tinta);
    visibility: hidden; opacity: 0;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 420ms var(--curva), opacity 200ms linear, visibility 0s linear 420ms;
  }
  .menu[data-abierto] {
    visibility: visible; opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: clip-path 480ms var(--curva), opacity 120ms linear, visibility 0s;
  }
  .menu__lista { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .menu__enlace { font-size: clamp(2rem, 8vw, 2.75rem); font-weight: 900; line-height: 1; padding: 0.15rem 0; min-height: 3.25rem; white-space: normal; }
  .menu__enlace::after { left: 0; right: 0; bottom: 0.1rem; height: 4px; background: var(--tinta); }
  .menu__accion { margin: 1.5rem 0 0; align-self: flex-start; }
  .menu__accion .boton { --fondo: var(--tinta); --color: var(--blanco); }
  .menu__cerrar {
    position: absolute; top: 0.6rem; right: var(--margen); display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border: 0; background: var(--tinta); color: var(--blanco); cursor: pointer;
  }
  .menu__cerrar svg { width: 1.4rem; height: 1.4rem; }
}
@media (min-width: 1280px) { .cabecera__carreras { display: none; } }

/* ——— Portada ——— */

.portada {
  position: relative; isolation: isolate;
  min-height: min(40rem, calc(100svh - 12rem)); /* deja asomar las próximas carreras */
  display: grid; align-items: center;
  background: var(--tinta);
  overflow: clip;
}
.portada__foto { position: absolute; inset: 0; z-index: -2; }
.portada__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 60%; }
.portada__panel {
  position: absolute; inset: 0 auto 0 0; z-index: -1; width: min(64%, 58rem);
  background: var(--naranja);
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
}
.portada__contenido {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; gap: 2rem;
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.portada__texto { max-width: 34rem; }
.portada__titulo { font-size: var(--fs-display); font-weight: 900; color: var(--tinta); }
/* La máscara de la animación deja sitio por arriba para las tildes (LÍMITES). */
.portada__linea { display: block; overflow: clip; padding-top: 0.16em; margin-top: -0.16em; padding-bottom: 0.04em; }
.portada__linea > span { display: block; }
.portada__linea--blanca { color: var(--blanco); }
.portada__lema { margin-top: 1.25rem; font-size: var(--fs-lead); font-weight: 700; line-height: 1.4; max-width: 24ch; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ——— Dorsal (próxima carrera) ——— */

.dorsal {
  --agujero: 0.55rem;
  position: relative; justify-self: end; width: min(100%, 25rem);
  padding: 0.45rem; /* margen de papel: la franja naranja no se funde con el fondo naranja */
  background: var(--blanco); color: var(--tinta);
  box-shadow: 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.45), 0 0.25rem 0.75rem rgb(0 0 0 / 0.18);
  rotate: -2deg;
  /* cuatro agujeros de imperdible en las esquinas */
  mask:
    radial-gradient(circle var(--agujero) at 1.1rem 1.1rem, transparent 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle var(--agujero) at calc(100% - 1.1rem) 1.1rem, transparent 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--agujero) at 1.1rem calc(100% - 1.1rem), transparent 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle var(--agujero) at calc(100% - 1.1rem) calc(100% - 1.1rem), transparent 98%, #000) bottom right / 51% 51% no-repeat;
}
.dorsal__cabeza {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.85rem 1.8rem 0.75rem; background: var(--naranja); color: var(--tinta);
  font-family: var(--titular); font-weight: 800; font-size: var(--fs-et-s); text-transform: uppercase; letter-spacing: 0.08em;
}
.dorsal__cuerpo { padding: 1rem 1.8rem 1.4rem; }
.dorsal__numero {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--titular); font-weight: 900; font-size: clamp(3.5rem, 2.25rem + 3.5vw, 4.75rem); line-height: 0.85; text-transform: uppercase;
}
.dorsal__numero small { font-size: 0.42em; font-weight: 800; color: var(--naranja-texto); }
.dorsal__nombre { margin-top: 0.75rem; font-size: var(--fs-h4); font-weight: 700; line-height: 1.2; }
.dorsal__enlace { color: inherit; text-decoration: none; }
.dorsal__enlace:hover { color: inherit; text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 3px; }
.dorsal__datos { margin-top: 0.35rem; color: var(--tinta-suave); font-size: var(--fs-sm); }
.dorsal__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 2px dashed var(--linea); }
.dorsal__cuenta { font-family: var(--titular); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; line-height: 1; }
.dorsal__cuenta b { color: var(--naranja-texto); font-weight: 900; }
.dorsal__vacio { margin-top: 0.5rem; color: var(--tinta-suave); }

@media (max-width: 860px) {
  .portada { min-height: 0; align-items: stretch; }
  .portada__panel { width: 100%; clip-path: polygon(0 0, 100% 0, 100% 58%, 0 74%); }
  .portada__foto img { object-position: 70% 100%; }
  .portada__contenido { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-top: 2.5rem; }
  .dorsal { justify-self: start; rotate: -1.5deg; }
}

/* ——— Secciones ——— */

.seccion { padding-block: var(--seccion-y); }
.seccion__cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.seccion__cabeza p { max-width: 40ch; color: var(--tinta-suave); }

.oscuro { background: var(--tinta); color: var(--sobre-tinta); }
.oscuro a:not(.boton) { color: var(--naranja); }
.gris { background: var(--gris); }
.naranja { background: var(--naranja); color: var(--tinta); }

.corte-arriba { clip-path: polygon(0 var(--corte), 100% 0, 100% 100%, 0 100%); margin-top: calc(-1 * var(--corte)); padding-top: calc(var(--seccion-y) + var(--corte)); }
.corte-abajo { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte)), 0 100%); padding-bottom: calc(var(--seccion-y) + var(--corte)); }
.corte-arriba.corte-abajo { clip-path: polygon(0 var(--corte), 100% 0, 100% calc(100% - var(--corte)), 0 100%); }

/* ——— Lista de carreras (portada) ——— */

.carreras { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--tinta); }
.carrera-fila { border-bottom: 1px solid var(--linea); }
.carrera-fila a {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto 2rem; align-items: center; gap: 1.5rem;
  padding: 1.25rem 0.75rem; color: inherit; text-decoration: none;
}
.carrera-fila a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--naranja-claro);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 420ms var(--curva);
}
.carrera-fila a:hover::before, .carrera-fila a:focus-visible::before { clip-path: polygon(0 0, 100% 0, calc(100% - 1.5rem) 100%, 0 100%); }
.fecha-grande { display: grid; justify-items: start; line-height: 0.85; font-family: var(--titular); text-transform: uppercase; }
.fecha-grande b { font-size: 3rem; font-weight: 900; color: var(--naranja-texto); }
.fecha-grande span { margin-top: 0.3rem; font-size: var(--fs-et-s); font-weight: 800; letter-spacing: 0.05em; }
.carrera-fila__centro { display: grid; min-width: 0; }
.carrera-fila__nombre { font-size: var(--fs-h4); font-weight: 700; line-height: 1.25; }
.carrera-fila__datos { margin-top: 0.2rem; color: var(--tinta-suave); font-size: var(--fs-sm); }
.carrera-fila__lado { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.carrera-fila__ir { width: 1.6rem; height: 1.6rem; color: var(--tinta); transition: translate 260ms var(--curva); }
.carrera-fila a:hover .carrera-fila__ir { translate: 0.3rem 0; }

.distancias { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.distancias li {
  padding: 0.2rem 0.55rem 0.15rem; border: 2px solid var(--tinta);
  font-family: var(--titular); font-weight: 800; font-size: var(--fs-et-s); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em;
}

.estado {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem;
  font-size: var(--fs-meta); font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.estado::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.estado--abierta { background: var(--verde-claro); color: var(--verde); }
.estado--ultimos { background: var(--naranja); color: var(--tinta); }
.estado--cerrada { background: var(--gris); color: var(--tinta-suave); }

.vacio {
  display: grid; justify-items: start; gap: 1rem; padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 2px dashed var(--linea); color: var(--tinta-suave);
}
.vacio strong { color: var(--tinta); font-size: var(--fs-h4); }

@media (max-width: 720px) {
  .carrera-fila a { grid-template-columns: 4.25rem minmax(0, 1fr); gap: 0.4rem 1rem; padding: 1.1rem 0.25rem; }
  .fecha-grande b { font-size: 2.5rem; }
  .fecha-grande span { font-size: var(--fs-sm); letter-spacing: 0.02em; white-space: nowrap; }
  .carrera-fila__lado { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
  .carrera-fila__ir { display: none; }
}

/* ——— Únete (captar socios) ——— */

.unete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.unete__titulo { color: var(--blanco); }
.unete__titulo em { font-style: normal; color: var(--naranja); }
.unete__texto { margin-top: 1.5rem; color: var(--sobre-tinta-suave); max-width: 46ch; line-height: 1.7; }
.unete__puntos { display: grid; gap: 0; margin: 2rem 0; padding: 0; list-style: none; border-top: 1px solid rgb(255 255 255 / 0.14); }
.unete__puntos li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: baseline; padding: 0.9rem 0; border-bottom: 1px solid rgb(255 255 255 / 0.14); color: var(--sobre-tinta); }
.unete__puntos b { font-family: var(--titular); font-weight: 900; font-size: 1.5rem; color: var(--naranja); line-height: 1; }
.unete__foto { position: relative; }
.unete__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 52% 70%; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
.unete__sello {
  position: absolute; left: 4%; bottom: 8%; padding: 0.9rem 1.1rem; background: var(--naranja); color: var(--tinta);
  font-family: var(--titular); font-weight: 900; font-size: clamp(1.375rem, 1rem + 1.2vw, 1.75rem); text-transform: uppercase; line-height: 0.95;
  rotate: -3deg;
}
@media (max-width: 860px) {
  .unete { grid-template-columns: minmax(0, 1fr); }
  .unete__foto { order: -1; max-width: 26rem; }
  .unete__foto img { aspect-ratio: 5 / 4; }
}

/* ——— Media Maratón ——— */

.media { position: relative; isolation: isolate; overflow: clip; }
.media__cifra {
  position: absolute; right: -0.04em; bottom: -0.16em; z-index: -1;
  font-family: var(--titular); font-weight: 900; font-size: clamp(7rem, 3rem + 14vw, 16rem); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 2px rgb(28 25 23 / 0.22);
  user-select: none; pointer-events: none;
}
.media__titulo { font-size: var(--fs-display); font-weight: 900; max-width: 13ch; }
.media__texto { margin-top: 1.5rem; max-width: 34ch; font-size: var(--fs-lead); font-weight: 700; line-height: 1.45; }
.media__dato { display: inline-block; margin-top: 1.5rem; padding: 0.35rem 0.75rem; background: var(--tinta); color: var(--blanco); font-weight: 700; font-size: var(--fs-sm); }
.media .boton { margin-top: 2rem; }

/* ——— Historia ——— */

.historia { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.historia__foto { position: relative; }
.historia__foto img { width: 100%; filter: grayscale(1) contrast(1.05); }
.historia__foto figcaption { margin-top: 0.6rem; color: var(--tinta-suave); font-size: var(--fs-sm); }
/* Eje de la cronología: una sola línea continua detrás de los hitos. */
.linea-tiempo { position: relative; display: grid; margin: 2rem 0; padding: 0 0 0 1.5rem; list-style: none; }
.linea-tiempo::before { content: ""; position: absolute; left: 0; top: 1.4rem; bottom: 1.4rem; width: 3px; background: var(--tinta); }
.linea-tiempo li { position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; }
.linea-tiempo li::before { content: ""; position: absolute; left: calc(-1.5rem - 0.45rem + 1.5px); top: 1.35rem; width: 0.9rem; height: 0.9rem; background: var(--naranja); border: 3px solid var(--tinta); rotate: 45deg; }
.linea-tiempo time, .linea-tiempo .linea-tiempo__fecha { font-family: var(--titular); font-weight: 900; font-size: 1.5rem; line-height: 1.05; text-transform: uppercase; }
@media (max-width: 860px) {
  .historia { grid-template-columns: minmax(0, 1fr); }
  .linea-tiempo li { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}

/* ——— Cierre a sangre ——— */

.cierre { position: relative; isolation: isolate; overflow: clip; color: var(--blanco); padding-block: clamp(6rem, 16vw, 11rem); }
.cierre__foto { position: absolute; inset: 0; z-index: -2; }
.cierre__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.cierre::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(28 25 23 / 0.78), rgb(28 25 23 / 0.15) 70%); }
.cierre__titulo { font-size: var(--fs-display); font-weight: 900; }
.cierre p { margin-top: 1rem; max-width: 32ch; font-size: var(--fs-lead); font-weight: 700; }
.cierre .boton { margin-top: 2rem; }

/* ——— Cabecera de página interior ——— */

.cabeza-pagina { position: relative; isolation: isolate; overflow: clip; background: var(--naranja); padding-block: clamp(2rem, 1.25rem + 2.5vw, 3.5rem) calc(clamp(1.75rem, 1.25rem + 2vw, 2.75rem) + var(--corte-cabeza)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--corte-cabeza)), 0 100%); }
.cabeza-pagina__foto { position: absolute; inset: 0 0 0 auto; z-index: -1; width: 46%; clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%); }
.cabeza-pagina__foto img { width: 100%; height: 100%; object-fit: cover; }
/* La foto antigua del club se queda en blanco y negro, como es. */
.cabeza-pagina__foto--bn img { filter: grayscale(1); }
.cabeza-pagina__titulo { font-size: var(--fs-h1); font-weight: 900; line-height: 1; max-width: 14ch; }
.cabeza-pagina__texto { margin-top: 0.9rem; max-width: 52ch; font-size: var(--fs-lead); font-weight: 700; line-height: 1.45; }
.miga { margin-bottom: 0.9rem; font-size: var(--fs-sm); font-weight: 700; }
.miga a { color: var(--tinta); }
.miga span { font-weight: 400; }
@media (max-width: 760px) {
  /* En el móvil, la foto de cabecera va debajo del título como una franja ancha con el corte diagonal. */
  .cabeza-pagina:has(.cabeza-pagina__foto) { display: flex; flex-direction: column; }
  .cabeza-pagina__foto { position: relative; inset: auto; order: 2; width: auto; margin: 1.5rem var(--margen) 0; aspect-ratio: 16 / 7; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }
  .cabeza-pagina__foto:not(.cabeza-pagina__foto--bn) img { position: absolute; inset: 0; }
  /* La foto del club, entera y sin recorte. */
  .cabeza-pagina:has(.cabeza-pagina__foto--bn) { display: flex; flex-direction: column; }
  .cabeza-pagina__foto--bn { display: block; position: static; order: 2; width: auto; margin: 1.75rem var(--margen) 0; clip-path: none; }
  .cabeza-pagina__foto--bn img { height: auto; }
}

/* ——— Calendario ——— */

.zonas { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 1.5rem; border-bottom: 2px solid var(--tinta); }
.zona {
  display: inline-flex; align-items: baseline; gap: 0.5rem; min-height: 3rem; padding: 0.65rem 1.25rem 0.5rem;
  font-family: var(--titular); font-weight: 800; font-size: 1.375rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--tinta); text-decoration: none; border: 2px solid transparent; border-bottom: 0; margin-bottom: -2px;
}
.zona span { font-family: var(--texto); font-size: var(--fs-sm); font-weight: 700; color: var(--tinta-suave); }
.zona:hover { color: var(--naranja-texto); }
.zona[aria-current="page"] { background: var(--tinta); color: var(--blanco); }
.zona[aria-current="page"] span { color: var(--sobre-tinta-suave); }
.carrera__fuente { font-size: var(--fs-meta); color: var(--tinta-suave); }

.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 2.5rem; }
.filtros__nombre { margin-right: 0.5rem; font-weight: 700; }
.filtro {
  min-height: 2.75rem; padding: 0.4rem 1rem; border: 2px solid var(--tinta); background: var(--blanco); color: var(--tinta);
  font-family: var(--titular); font-weight: 800; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer;
  transition: background-color 200ms var(--curva-suave), color 200ms var(--curva-suave);
}
.filtro:hover { background: var(--naranja-claro); }
.filtro[aria-pressed="true"] { background: var(--tinta); color: var(--blanco); }

.mes + .mes { margin-top: clamp(3rem, 6vw, 4.5rem); }
.mes__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--tinta); }
.mes__titulo span { font-family: var(--texto); font-size: var(--fs-sm); font-weight: 700; color: var(--tinta-suave); text-transform: none; }

/* ——— Noticias (titulares de otros medios, por días) ——— */

.noticias { max-width: 60rem; }
.noticias__lista { margin: 0; padding: 0; list-style: none; }
.noticia { border-bottom: 1px solid var(--linea); }
.noticia__enlace {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) 1.5rem; align-items: center; gap: 0.3rem 1.5rem;
  padding: 1.15rem 0.75rem; color: inherit; text-decoration: none;
}
.noticia__enlace::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--naranja-claro);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 420ms var(--curva);
}
.noticia__enlace:hover::before, .noticia__enlace:focus-visible::before { clip-path: polygon(0 0, 100% 0, calc(100% - 1.5rem) 100%, 0 100%); }
.noticia__medio { font-family: var(--titular); font-size: var(--fs-et-s); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--naranja-texto); }
.noticia__medio time { margin-left: 0.35rem; font-family: var(--texto); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0; color: var(--tinta-suave); }
.noticia__titulo { grid-column: 1; font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; text-wrap: pretty; }
.noticia__ir { grid-column: 2; grid-row: 1 / span 2; width: 1.5rem; height: 1.5rem; transition: translate 260ms var(--curva); }
.noticia__enlace:hover .noticia__ir { translate: 0.2rem -0.2rem; }
.noticia:has(.noticia__tambien) .noticia__enlace { padding-bottom: 0.55rem; }
.noticia__tambien { padding: 0 0.75rem 1.15rem; font-size: var(--fs-sm); color: var(--tinta-suave); }
.noticia__tambien a { color: var(--tinta); font-weight: 700; text-underline-offset: 0.2em; }
.noticia__tambien a:hover { color: var(--naranja-texto); }
.noticias__nota { margin-top: clamp(2rem, 5vw, 3rem); max-width: 62ch; font-size: var(--fs-sm); color: var(--tinta-suave); }

.carrera { display: grid; grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 12rem); gap: 1.5rem 2rem; padding: 2rem 0; border-bottom: 1px solid var(--linea); }
.carrera:not(:has(.carrera__cartel)) { grid-template-columns: 6rem minmax(0, 1fr); }
.carrera:target { animation: resaltar 2.4s var(--curva-suave); }
@keyframes resaltar { 0%, 30% { background: var(--naranja-claro); } 100% { background: transparent; } }
.carrera__fecha { position: sticky; top: 6rem; align-self: start; }
.carrera__fecha .fecha-grande b { font-size: 3.5rem; }
.carrera__cuerpo > * + * { margin-top: 0.75rem; }
.carrera__arriba { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.etiqueta-destacada { padding: 0.25rem 0.6rem; background: var(--tinta); color: var(--blanco); font-family: var(--titular); font-weight: 800; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; }
.carrera__nombre { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
.carrera__datos { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; color: var(--tinta-suave); }
.carrera__datos span { display: inline-flex; align-items: center; gap: 0.4rem; }
.carrera__datos svg { width: 1rem; height: 1rem; flex: none; color: var(--naranja-texto); }
.carrera__descripcion { max-width: 64ch; color: var(--tinta-media); }
.carrera__info { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; font-size: var(--fs-sm); }
.carrera__info > div { display: flex; gap: 0.3rem; }
.carrera__info dt { display: inline; font-weight: 700; }
.carrera__info dd { display: inline; margin: 0 0 0 0.3rem; color: var(--tinta-media); }
.carrera__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding-top: 0.5rem; }
.carrera__ics { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; font-weight: 700; color: var(--tinta); }
.carrera__ics svg { width: 1.1rem; height: 1.1rem; }
.carrera__cartel { display: block; align-self: start; border: 1px solid var(--linea); background: var(--gris); transition: rotate 300ms var(--curva), box-shadow 300ms var(--curva); }
.carrera__cartel:hover { rotate: -1.5deg; box-shadow: 0 1rem 2rem -1rem rgb(0 0 0 / 0.4); }
.carrera__cartel img { width: 100%; height: auto; }
.carrera--destacada .fecha-grande b { color: var(--tinta); }
.carrera--destacada { position: relative; }
.carrera--destacada .carrera__fecha::before {
  content: ""; position: absolute; inset: -0.6rem -0.6rem auto -0.6rem; height: calc(100% + 1.2rem); z-index: -1;
  background: var(--naranja); clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);
}
.carrera--destacada .carrera__fecha { isolation: isolate; }

@media (max-width: 760px) {
  .carrera, .carrera:not(:has(.carrera__cartel)) { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; }
  .carrera__fecha { position: static; }
  /* La destacada sigue siendo la referencia de su bloque naranja: si no, se pintaría sobre toda la tarjeta. */
  .carrera--destacada .carrera__fecha { position: relative; }
  .carrera__fecha .fecha-grande b { font-size: 2.75rem; }
  .carrera__fecha .fecha-grande span { font-size: var(--fs-sm); letter-spacing: 0.02em; white-space: nowrap; }
  .carrera__cartel { grid-column: 2; max-width: 15rem; }
}

/* ——— Guardar carreras y suscripción ——— */

.zona--mias { margin-left: auto; gap: 0.4rem; align-items: center; font-size: 1.25rem; }
.zona--mias .guardar__estrella { width: 1.1rem; height: 1.1rem; fill: var(--naranja); stroke: var(--naranja-texto); }
.guardar {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 0.6rem;
  border: 0; background: none; color: var(--tinta); font: inherit; font-weight: 700; cursor: pointer;
}
.guardar__estrella { width: 1.25rem; height: 1.25rem; fill: none; transition: fill 200ms var(--curva-suave), scale 300ms var(--curva); }
.guardar[aria-pressed="true"] .guardar__estrella { fill: var(--naranja); stroke: var(--naranja-texto); }
.guardar:hover .guardar__estrella { scale: 1.12; }
.guardar:hover { color: var(--naranja-texto); }
.cuenta-atras { font-family: var(--titular); font-weight: 900; font-size: var(--fs-h4); text-transform: uppercase; color: var(--naranja-texto); }
.mis-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--tinta); }
.mis-cabeza svg { width: 1.1rem; height: 1.1rem; }
.carrera__nombre a { color: inherit; text-decoration: none; }
.carrera__nombre a:hover { text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 3px; }

.suscripcion {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: center;
  margin-top: clamp(3rem, 6vw, 4.5rem); padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--tinta); color: var(--sobre-tinta);
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.5rem) 100%, 0 100%);
}
.suscripcion .titular-seccion { color: var(--blanco); }
.suscripcion p { margin-top: 0.75rem; color: var(--sobre-tinta-suave); max-width: 48ch; }
.suscripcion__botones { display: flex; flex-wrap: wrap; gap: 0.6rem; align-content: center; }
.suscripcion .boton:not(.boton--naranja):not(.boton--hueco) { --fondo: var(--blanco); --color: var(--tinta); }
.suscripcion .boton:not(.boton--naranja):not(.boton--hueco):hover { --fondo: var(--naranja); color: var(--tinta); }
.suscripcion .boton--hueco { --fondo: var(--sobre-tinta); }
.suscripcion .boton--hueco:hover { --fondo: var(--naranja); color: var(--tinta); }
.suscripcion .boton--hueco:hover::before { background: var(--naranja); }
.suscripcion__copiado { flex-basis: 100%; margin: 0.25rem 0 0; font-size: var(--fs-sm); color: var(--sobre-tinta); overflow-wrap: anywhere; }
@media (max-width: 760px) { .suscripcion { grid-template-columns: minmax(0, 1fr); } }

/* ——— Calculadora de ritmos ——— */

.calculadora { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: start; }
.calculadora__modos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; border: 0; border-bottom: 2px solid var(--tinta); }
.modo { position: relative; cursor: pointer; }
.modo input { position: absolute; opacity: 0; pointer-events: none; }
.modo span {
  display: inline-flex; align-items: center; min-height: 3rem; padding: 0.6rem 1.2rem 0.45rem;
  font-family: var(--titular); font-weight: 800; font-size: 1.25rem; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em;
}
.modo:hover span { color: var(--naranja-texto); }
.modo input:checked + span { background: var(--tinta); color: var(--blanco); }
.modo input:focus-visible + span { outline: 3px solid var(--naranja); outline-offset: 2px; }
.calculadora__datos { display: grid; gap: 1.75rem; }
.grupo { margin: 0; padding: 0; border: 0; min-width: 0; }
.grupo__titulo { margin-bottom: 0.6rem; padding: 0; font-weight: 700; }
.distancias-elegir { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.35rem 1rem;
  border: 2px solid var(--tinta); font-family: var(--titular); font-weight: 800; font-size: 1.125rem; text-transform: uppercase;
}
.chip:hover span { background: var(--naranja-claro); }
.chip input:checked + span { background: var(--naranja); border-color: var(--naranja); color: var(--tinta); }
.chip input:focus-visible + span { outline: 3px solid var(--tinta); outline-offset: 2px; }
.tiempo { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.campo-num { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; }
.tiempo .campo-num { margin-top: 0; }
.campo-num input {
  width: 5.25rem; min-height: 3.25rem; padding: 0.3rem 0.6rem; border: 2px solid var(--tinta); background: var(--blanco);
  font-family: var(--titular); font-weight: 800; font-size: 1.5rem; text-align: center; color: var(--tinta);
  -moz-appearance: textfield;
}
.campo-num--otra input { width: 7.5rem; }
.campo-num input::-webkit-outer-spin-button, .campo-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo-num input:focus { outline: 3px solid var(--naranja); outline-offset: 0; }
.campo-num span { font-weight: 700; color: var(--tinta-suave); }
.calculadora__resultado { min-height: 12rem; padding: clamp(1.5rem, 4vw, 2.25rem); background: var(--tinta); color: var(--sobre-tinta); }
.calculadora__vacio { color: var(--sobre-tinta-suave); }
.seccion .calculadora__vacio { color: var(--tinta-suave); }
.calculadora__resultado .calculadora__vacio { color: var(--sobre-tinta-suave); }
.resultado__principal { display: grid; gap: 0.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgb(255 255 255 / 0.18); }
.resultado__etiqueta { font-weight: 700; color: var(--sobre-tinta-suave); }
.resultado__cifra { font-family: var(--titular); font-weight: 900; font-size: clamp(3.25rem, 2.25rem + 3vw, 4.5rem); line-height: 0.9; color: var(--naranja); }
.resultado__cifra small { margin-left: 0.3rem; font-size: 0.4em; color: var(--sobre-tinta); }
.resultado__extra { font-weight: 700; }
.tabla-resultado { width: 100%; margin-top: 1.25rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabla-resultado caption { margin-bottom: 0.5rem; text-align: left; font-weight: 700; color: var(--sobre-tinta-suave); }
.tabla-resultado th, .tabla-resultado td { padding: 0.45rem 0.25rem; border-bottom: 1px solid rgb(255 255 255 / 0.12); text-align: left; }
.tabla-resultado thead th { font-size: var(--fs-meta); font-weight: 700; color: var(--sobre-tinta-suave); }
.tabla-resultado td { font-weight: 700; color: var(--blanco); text-align: right; }
.tabla-resultado thead th:not(:first-child) { text-align: right; }
.tabla-resultado tbody th { font-weight: 400; }
.tabla-resultado__tuya th, .tabla-resultado__tuya td { color: var(--naranja); }
.tabla-resultado small { color: var(--sobre-tinta-suave); }
.calculadora__nota { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (max-width: 860px) { .calculadora { grid-template-columns: minmax(0, 1fr); } }

/* ——— Entrena con nosotros ——— */

.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem 2.5rem; margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: none; }
.pasos li { display: grid; align-content: start; gap: 0.6rem; padding-top: 1rem; border-top: 3px solid var(--tinta); }
.pasos b { font-family: var(--titular); font-weight: 900; font-size: 2.75rem; line-height: 0.85; color: var(--naranja-texto); }
.pasos h3 { font-size: var(--fs-h4); line-height: 1.2; }
.pasos p { color: var(--tinta-media); }
.preguntas { margin-top: 1.5rem; border-top: 2px solid var(--tinta); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.25rem; padding: 0.6rem 0; font-weight: 700; cursor: pointer; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-family: var(--titular); font-weight: 900; font-size: 1.5rem; line-height: 1; color: var(--naranja-texto); transition: rotate 250ms var(--curva); }
.preguntas details[open] summary::after { rotate: 45deg; }
.preguntas details p { padding: 0 0 1rem; color: var(--tinta-media); max-width: 60ch; }
/* Cuota del club (Entrena con nosotros) */
.cuota {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 3.25rem);
  background: var(--tinta); color: var(--sobre-tinta);
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.5rem) 100%, 0 100%);
}
.cuota__precio { display: grid; font-family: var(--titular); text-transform: uppercase; line-height: 0.9; }
.cuota__precio b { font-size: clamp(3.5rem, 2.5rem + 3vw, 5rem); font-weight: 900; color: var(--naranja); }
.cuota__precio span { font-size: var(--fs-h4); font-weight: 800; letter-spacing: 0.06em; }
.cuota__incluye { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.cuota__incluye li { display: flex; align-items: baseline; gap: 0.65rem; font-weight: 700; line-height: 1.4; }
.cuota__incluye svg { flex: none; width: 1.05em; height: 1.05em; color: var(--naranja); translate: 0 0.15em; }
.cuota .boton { margin-right: 1rem; }
@media (max-width: 900px) { .cuota { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
.unete__puntos strong { color: var(--naranja); }

.solicitud { display: grid; gap: 1rem; padding: clamp(1.5rem, 4vw, 2.25rem); background: var(--blanco); border: 2px solid var(--tinta); }
.solicitud__titulo { font-family: var(--titular); font-weight: 900; font-size: var(--fs-h2s); line-height: 1; text-transform: uppercase; }
.campo-form { display: grid; gap: 0.35rem; font-weight: 700; }
.campo-form small { font-weight: 400; color: var(--tinta-suave); }
.campo-form input, .campo-form select, .campo-form textarea {
  width: 100%; min-height: 3rem; padding: 0.6rem 0.75rem; border: 2px solid #b8b3ae; border-radius: 0; background: var(--blanco);
  font: inherit; font-weight: 400; color: var(--tinta);
}
.campo-form textarea { resize: vertical; }
.campo-form input:focus, .campo-form select:focus, .campo-form textarea:focus { border-color: var(--tinta); outline: 3px solid var(--naranja); outline-offset: 0; }
.casilla-form { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: start; font-size: var(--fs-sm); color: var(--tinta-media); }
.casilla-form input { width: 1.35rem; height: 1.35rem; margin-top: 0.1rem; accent-color: var(--naranja-hondo); }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.solicitud .boton { justify-self: start; }
.solicitud__nota { font-size: var(--fs-sm); color: var(--tinta-suave); }
.aviso-formulario { padding: 0.75rem 1rem; font-weight: 700; }
.aviso-formulario--error { background: #fdecea; color: #b42318; }

/* ——— Consejos: índice, artículos y llamada a entrenar ——— */

.grupo-consejos + .grupo-consejos { padding-top: 0; }
.guias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 2.5rem 2.5rem; margin: 0; padding: 0; list-style: none; }
.guia__enlace { display: flex; flex-direction: column; gap: 0.55rem; height: 100%; padding-top: 1rem; border-top: 3px solid var(--tinta); color: inherit; text-decoration: none; }
.guia__titulo { font-family: var(--titular); font-size: var(--fs-h3); font-weight: 800; line-height: 1.12; text-transform: uppercase; text-wrap: balance; transition: color 200ms var(--curva-suave); }
.guia__texto { color: var(--tinta-media); }
.guia__pie { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 0.25rem; font-size: var(--fs-sm); font-weight: 700; }
.guia__pie svg { width: 1.1em; height: 1.1em; transition: translate 240ms var(--curva); }
.guia__enlace:hover .guia__titulo { color: var(--naranja-texto); }
.guia__enlace:has(.guia__foto) { border-top: 0; padding-top: 0; }
.guia__foto { display: block; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 0.4rem; background: var(--naranja-claro); }
.guia__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale 700ms var(--curva); }
.guia__enlace:hover .guia__foto img, .guia__enlace:focus-visible .guia__foto img { scale: 1.06; }
/* Esquema animado dentro del artículo (sobre naranja, como las ilustraciones). */
.esquema { max-width: 40rem; margin: 1.6em 0 0; padding: clamp(0.75rem, 2.5vw, 1.5rem); background: var(--naranja); clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 100%, 0 100%); }
.esquema.pausada .ilu [class^="a-"] { animation-play-state: paused; }
.guia__enlace:hover .guia__pie svg { translate: 0.25rem 0; }

.cabeza-pagina__meta { margin-top: 1rem; font-family: var(--titular); font-size: var(--fs-et-s); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.cabeza-pagina__titulo--largo { max-width: 22ch; font-size: var(--fs-h1-largo); line-height: 1.08; } /* con menos, las tildes de una línea tocan la de arriba */

.articulo ul, .articulo ol { padding-left: 1.4rem; }
.articulo li + li { margin-top: 0.55rem; }
.articulo li::marker { color: var(--naranja-texto); font-weight: 700; }
.articulo .tabla-desliza { overflow-x: auto; margin-top: 1.4em; }
.articulo table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: var(--fs-sm); }
.articulo th, .articulo td { padding: 0.65rem 0.75rem 0.65rem 0; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; color: var(--tinta-media); }
.articulo thead th { border-bottom: 2px solid var(--tinta); font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta); }
.articulo tbody th { font-weight: 700; color: var(--tinta); }
@media (max-width: 600px) {
  .articulo table { min-width: 0; font-size: var(--fs-sm); }
  .articulo th, .articulo td { padding-right: 0.6rem; }
}
.clave { padding: 1.1rem 2rem 1.1rem 1.4rem; background: var(--naranja-claro); clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 100%, 0 100%); color: var(--tinta); font-size: var(--fs-base); line-height: 1.55; }
.articulo > .clave:first-child { margin-bottom: 0.5rem; }
.articulo__aviso { margin-top: 2.5rem !important; padding-top: 1rem; border-top: 1px solid var(--linea); font-size: var(--fs-sm); color: var(--tinta-suave) !important; }

.llamada {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem;
  padding: clamp(1.75rem, 4vw, 2.75rem); background: var(--tinta); color: var(--sobre-tinta);
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.5rem) 100%, 0 100%);
}
.llamada > div { flex: 1 1 22rem; }
.llamada__titulo { font-size: var(--fs-h2s); line-height: 1.1; color: var(--blanco); }
.llamada p { margin-top: 0.6rem; max-width: 52ch; color: var(--sobre-tinta-suave); }
.mas-consejos { margin-top: clamp(3rem, 7vw, 5rem); }
.infografia { margin: 1.4em 0 0; }
.infografia a { display: block; max-width: 40rem; }
.infografia img { width: 100%; height: auto; border: 1px solid var(--linea); }
.infografia figcaption { margin-top: 0.6rem; max-width: 40rem; font-size: var(--fs-sm); color: var(--tinta-suave); }
.infografia__texto summary { cursor: pointer; font-weight: 700; color: var(--tinta); }
.infografia__texto ol { margin-top: 0.75rem; }

/* ——— Ilustraciones animadas de los consejos (fuente/ilustraciones.mjs) ———
   El primer fotograma de cada animación es el dibujo completo: en las tarjetas están paradas
   hasta pasar el ratón, y con «reducir movimiento» no se mueve nada. */

.ilu { display: block; width: 100%; height: auto; overflow: visible; }
.ilu__t { font-family: var(--titular); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.ilu [class^="a-"] { transform-box: fill-box; transform-origin: var(--origen, 50% 50%); animation-duration: var(--dur, 3s); animation-delay: var(--d, 0s); animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.a-flotar { animation-name: ilu-flotar; }
.a-latido { animation-name: ilu-latido; }
.a-girar { animation-name: ilu-girar; animation-timing-function: linear !important; }
.a-balanceo { transform: rotate(var(--desde, 0deg)); animation-name: ilu-balanceo; } /* parada, se queda en su primera postura */
.a-vaiven { animation-name: ilu-vaiven; }
.a-estirar { animation-name: ilu-estirar; }
.a-rebote { animation-name: ilu-rebote; }
.a-aplastar { animation-name: ilu-aplastar; transform-origin: 50% 100% !important; }
.a-dibujar { stroke-dasharray: 1; stroke-dashoffset: 0; animation-name: ilu-dibujar; }
.a-crecer { animation-name: ilu-crecer; }
.a-crecer-x { animation-name: ilu-crecer-x; }
.a-llenar { animation-name: ilu-llenar; }
.a-aparecer { animation-name: ilu-aparecer; }
.a-caer { animation-name: ilu-caer; }
.a-humo { animation-name: ilu-humo; }
.a-sombra { animation-name: ilu-sombra; }
.a-confeti { animation-name: ilu-confeti; animation-timing-function: linear !important; }
.a-brillo { stroke-dasharray: 0.14 1; stroke-dashoffset: 1.14; animation-name: ilu-brillo; animation-timing-function: linear !important; }
.a-recorrer { offset-rotate: 0deg; offset-distance: 0%; animation-name: ilu-recorrer; }
.a-segmento { stroke-dasharray: var(--parte, 20) 100; animation-name: ilu-segmento; }

@keyframes ilu-flotar { 50% { transform: translateY(var(--alto, -8px)); } }
@keyframes ilu-latido { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.16); } 28% { transform: scale(0.96); } }
@keyframes ilu-girar { to { transform: rotate(360deg); } }
@keyframes ilu-balanceo { 0%, 100% { transform: rotate(var(--desde, -6deg)); } 50% { transform: rotate(var(--hasta, 6deg)); } }
@keyframes ilu-vaiven { 0%, 100% { transform: translateX(var(--desde, -12px)); } 50% { transform: translateX(var(--hasta, 12px)); } }
@keyframes ilu-estirar { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.14); } }
@keyframes ilu-rebote { 0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0); } 50% { transform: translateY(var(--alto, -40px)); animation-timing-function: cubic-bezier(0.33, 1, 0.66, 1); } }
@keyframes ilu-aplastar { 0%, 100% { transform: scaleY(0.84); } 12%, 88% { transform: scaleY(1); } }
@keyframes ilu-dibujar { 0%, 55% { stroke-dashoffset: 0; opacity: 1; } 66% { stroke-dashoffset: 0; opacity: 0; } 67% { stroke-dashoffset: 1; opacity: 1; } 100% { stroke-dashoffset: 0; } }
@keyframes ilu-crecer { 0%, 55% { transform: scaleY(1); opacity: 1; } 64% { transform: scaleY(1); opacity: 0; } 65% { transform: scaleY(0); opacity: 1; } 100% { transform: scaleY(1); } }
@keyframes ilu-crecer-x { 0%, 30% { transform: scaleX(1); opacity: 1; } 40% { transform: scaleX(1); opacity: 0; } 41% { transform: scaleX(0.04); opacity: 1; } 100% { transform: scaleX(1); } }
@keyframes ilu-llenar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(var(--min, 0.2)); } }
@keyframes ilu-aparecer { 0%, 30% { opacity: 1; } 45%, 85% { opacity: 0.15; } 100% { opacity: 1; } }
@keyframes ilu-caer { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(80px); opacity: 1; } 56% { transform: translateY(80px); opacity: 0; } 57% { transform: translateY(0); opacity: 0; } 72%, 100% { transform: translateY(0); opacity: 1; } }
@keyframes ilu-humo { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(-14px); opacity: 0; } 71% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes ilu-sombra { 50% { transform: scaleX(0.7); opacity: 0.5; } }
@keyframes ilu-confeti { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(70px) rotate(300deg); opacity: 0; } }
@keyframes ilu-brillo { to { stroke-dashoffset: -0.14; } }
@keyframes ilu-recorrer { 0% { offset-distance: 0%; } 70%, 100% { offset-distance: 100%; } }
@keyframes ilu-segmento { 0%, 55% { stroke-dasharray: var(--parte, 20) 100; } 65% { stroke-dasharray: 0 100; } 100% { stroke-dasharray: var(--parte, 20) 100; } }

/* En las tarjetas, solo se mueven al pasar el ratón (o al llegar con el teclado). */
@media (hover: hover) {
  .guia .ilu [class^="a-"] { animation-play-state: paused; }
  .guia__enlace:hover .ilu [class^="a-"], .guia__enlace:focus-visible .ilu [class^="a-"] { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) { .ilu [class^="a-"] { animation: none !important; } }

/* ——— Texto largo (club, legales) ——— */

.prosa { max-width: 68ch; }
.prosa > * + * { margin-top: 1.1em; }
.prosa h2 { margin-top: 2.2em; font-family: var(--titular); font-weight: 800; font-size: var(--fs-h2s); line-height: 1; text-transform: uppercase; }
.prosa h3, .prosa h4 { margin-top: 1.8em; font-size: var(--fs-h4); line-height: 1.3; }
.prosa p, .prosa li { color: var(--tinta-media); }
.prosa strong { color: var(--tinta); }

.cita {
  margin: 2.5rem 0; padding: 1.75rem 1.75rem 1.75rem 2rem; background: var(--naranja); color: var(--tinta);
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.25rem) 100%, 0 100%);
}
.cita p { color: var(--tinta); font-size: var(--fs-lead); font-weight: 700; line-height: 1.4; }
.firma { font-family: var(--titular); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; }

.dos-columnas { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 860px) { .dos-columnas { grid-template-columns: minmax(0, 1fr); } }

.titular-seccion--pequeno { font-size: var(--fs-h2s); }
.seccion--pegada { padding-top: clamp(2rem, 5vw, 3.5rem); }
.lateral { display: grid; align-content: start; gap: 0.5rem; }
@media (min-width: 861px) { .lateral { position: sticky; top: 6.5rem; } }
.caja-unete { display: grid; gap: 0.75rem; justify-items: start; margin-top: 1rem; padding: 1.75rem; background: var(--naranja); clip-path: polygon(0 0, 100% 0, calc(100% - 1.25rem) 100%, 0 100%); }
.caja-unete__titulo { font-family: var(--titular); font-weight: 900; font-size: var(--fs-h2s); line-height: 0.95; text-transform: uppercase; }

/* ——— Contacto ——— */


/* ——— Pie ——— */

.pie { background: var(--tinta); color: var(--sobre-tinta-suave); padding-top: clamp(3.5rem, 7vw, 5rem); font-size: var(--fs-sm); }
.pie a { color: var(--sobre-tinta); text-decoration: none; }
.pie a:hover { color: var(--naranja); text-decoration: underline; }
.pie__rejilla { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.pie__logo { display: inline-block; padding: 0.6rem 0.8rem; background: var(--blanco); clip-path: polygon(0.5rem 0, 100% 0, calc(100% - 0.5rem) 100%, 0 100%); }
.pie__logo img { width: 92px; }
.pie__lema { margin-top: 1rem; max-width: 26ch; font-family: var(--titular); font-weight: 800; font-size: 1.375rem; line-height: 1.05; text-transform: uppercase; color: var(--sobre-tinta); }
.pie__secundario { font-size: var(--fs-sm); color: var(--sobre-tinta-suave); }
.pie__secundario a { color: inherit; }
.pie__titulo { margin-bottom: 0.75rem; font-family: var(--titular); font-weight: 800; font-size: 1.125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--naranja); }
.pie ul { margin: 0; padding: 0; list-style: none; }
.pie li a { display: inline-flex; align-items: center; min-height: 2.5rem; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: 3rem; padding-block: 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.14); font-size: var(--fs-sm); }
.pie__legal ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.pie__legal li a { min-height: 2.75rem; }
@media (max-width: 860px) { .pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pie__marca { grid-column: 1 / -1; } }
@media (max-width: 420px) { .pie__rejilla { grid-template-columns: minmax(0, 1fr); } }

/* Crédito de Feroba Soluciones Digitales: discreto, al final de cada página. */
.feroba-credito { padding: 0.25rem var(--margen) 1.5rem; background: var(--tinta); text-align: center; }
.feroba {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
  color: #a8a29e; font-size: var(--fs-xs); letter-spacing: 0.01em; text-decoration: none; text-align: left;
  transition: color 250ms var(--curva-suave);
}
.feroba img { flex: none; width: 24px; height: 24px; opacity: 0.9; transition: opacity 250ms var(--curva-suave); }
.feroba strong { color: #d6d3d1; font-weight: 600; white-space: nowrap; }
.feroba:hover { color: #d6d3d1; }
.feroba:hover strong { color: var(--blanco); }
.feroba:hover img { opacity: 1; }

/* ——— Aviso de cookies ——— */

.aviso-cookies {
  position: fixed; left: var(--margen); right: var(--margen); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: var(--z-aviso);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; max-width: 40rem; margin-inline: auto;
  padding: 1rem 1.25rem; background: var(--tinta); color: var(--sobre-tinta); box-shadow: 0 1rem 2.5rem -0.75rem rgb(0 0 0 / 0.5);
  font-size: var(--fs-sm);
}
.aviso-cookies p { flex: 1 1 18rem; }
.aviso-cookies a { color: var(--naranja); }

/* ——— Movimiento ——— */

@media (prefers-reduced-motion: no-preference) {
  .portada__foto img { animation: acercar 1800ms var(--curva-suave) both; }
  .portada__panel { animation: barrer 900ms var(--curva) both; }
  .portada__linea > span { animation: subir 900ms var(--curva) both; }
  .portada__linea:nth-child(2) > span { animation-delay: 90ms; }
  .portada__lema, .portada__acciones { animation: aparecer 700ms var(--curva-suave) 380ms both; }
  .dorsal { animation: colgar 900ms var(--curva) 520ms both; }

  @keyframes acercar { from { scale: 1.08; } }
  @keyframes barrer { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } }
  @keyframes subir { from { translate: 0 105%; } }
  @keyframes aparecer { from { opacity: 0; translate: 0 0.75rem; } }
  @keyframes colgar { from { opacity: 0; translate: 0 -1.5rem; rotate: -7deg; } }

  @supports (animation-timeline: view()) {
    .carrera-fila, .carrera, .linea-tiempo li {
      animation: entrar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    /* Solo desplazamiento, sin transparencia: si la animación no llega a correr, el contenido se ve igual. */
    @keyframes entrar { from { translate: 0 1.75rem; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  @keyframes barrer { from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); } }
}