/* =====================================================================================================================
   Web pública de Tenerife Trail — hoja de estilos única (spec 002, maqueta D con foto).
   Letra Barlow alojada en la propia web (constitución 1.1.0). Colores: los azules del club y de la bandera de Canarias
   y el amarillo del logo; el rojo, solo para avisos. Todos los valores salen de los tokens de :root y de su versión
   oscura; web/tests/test_estilo.py comprueba sus contrastes WCAG. Sin estilos en línea (los bloquea la CSP).
   ===================================================================================================================== */

/* --- Letras (servidas por la web; si tardan, se ve primero la del sistema) ------------------------------------- */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("letras/barlow-400.81419bf5abb5.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("letras/barlow-600.a1e2a2d7d4c0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("letras/barlow-condensed-600.ba4513495282.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("letras/barlow-condensed-700.e1180918b873.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("letras/barlow-condensed-800.b1b7dd5dbcea.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- Tokens ---------------------------------------------------------------------------------------------------- */
:root {
  /* Azules del club y de Canarias; los de las bandas oscuras son iguales en los dos temas. */
  --noche: #0a2540; --marino: #0d3b66; --club: #0085ca; --cielo: #8fd3f4; --amarillo: #ffd700; --blanco: #ffffff;
  /* Zonas claras (cambian en el tema oscuro). */
  --fondo: #f5f9fc; --tarjeta: #ffffff; --texto: #10233a; --tenue: #4f6275; --borde: #dbe6ef; --control: #7d93a8;
  --canarias: #0768a9; --resalte: #e3f1fa;
  --error: #8c2f23; --error-suave: #f8ebe9; --ok: #0768a9; --ok-suave: #e3f1fa;
  /* Marcas del calendario (spec 003, R4): amarillo del logo para Canarias, celeste para fuera; el borde da el contraste. */
  --marca-canarias: #ffd700; --marca-fuera: #8fd3f4; --marca-borde: #0d3b66;
  /* Velo sobre la imagen de cabecera: 75 % garantiza el contraste del texto sobre cualquier zona (research R2). */
  --velo: rgb(10 37 64 / .75);

  --titulo: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --letra: "Barlow", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --ancho: 1200px; --ancho-texto: 740px; --radio: 8px; --radio-grande: 24px;
  --sombra: 0 12px 32px rgb(13 59 102 / .1);
  color-scheme: light;
}
/* Modo oscuro (spec 010, R3): el del sistema, salvo que el visitante elija claro con el botón, y el elegido con el
   botón. Los dos bloques son idénticos (lo comprueba test_estilo.py) y solo valen en pantalla: al imprimir, claro. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fondo: #0d1b2a; --tarjeta: #132a40; --texto: #e8eef4; --tenue: #a9bccd; --borde: #24405a; --control: #6f8aa3;
    --canarias: #6cb6e0; --resalte: #17324c;
    --error: #ff9a8a; --error-suave: #3a2220; --ok: #6cb6e0; --ok-suave: #17324c;
    --marca-borde: #e8eef4;
    --sombra: none;
  }
}
@media screen {
  :root[data-tema="oscuro"] {
    color-scheme: dark;
    --fondo: #0d1b2a; --tarjeta: #132a40; --texto: #e8eef4; --tenue: #a9bccd; --borde: #24405a; --control: #6f8aa3;
    --canarias: #6cb6e0; --resalte: #17324c;
    --error: #ff9a8a; --error-suave: #3a2220; --ok: #6cb6e0; --ok-suave: #17324c;
    --marca-borde: #e8eef4;
    --sombra: none;
  }
}

/* --- Base ------------------------------------------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--letra); font-size: 1.0625rem; line-height: 1.6; color: var(--texto); background: var(--fondo);
  display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
a { color: var(--canarias); }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--canarias); outline-offset: 2px; }
.ancho { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { font-family: var(--titulo); text-transform: uppercase; line-height: .98; overflow-wrap: anywhere; }
h2 { font-size: clamp(2.125rem, 5vw, 3.375rem); font-weight: 800; margin: 0 0 24px; }
h2::before { content: ""; display: block; width: 56px; height: 6px; background: var(--amarillo); margin-bottom: 16px; }
h3 { font-weight: 700; }
p, li, dd, blockquote, figcaption { overflow-wrap: anywhere; }
time { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 8px; top: 0; transform: translateY(-120%); z-index: 20; background: var(--amarillo); color: var(--noche); padding: 8px 16px;
  border-radius: var(--radio); font-weight: 600; text-decoration: none; }
.saltar:focus { top: 8px; transform: none; }
.tenue { color: var(--tenue); }
/* --- Bandas oscuras: el foco azul no llega a 3:1 sobre el azul noche; allí va en amarillo (WCAG 1.4.11, spec 010) */
.barra :focus-visible, .portada :focus-visible, .cabecera-seccion :focus-visible, .calendario :focus-visible,
.socio .caja :focus-visible, .pie :focus-visible { outline-color: var(--amarillo); }
.vacio { color: var(--tenue); }

/* --- Menú: va sobre la cabecera (la imagen de la portada o la banda azul de cada sección) ---------------------- */
.barra { position: absolute; top: 0; left: 0; right: 0; z-index: 10; color: var(--blanco); }
.barra-fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; }
.barra a { color: var(--blanco); text-decoration: none; }
.marca img { height: 52px; width: auto; }
.menu-principal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px;
  font: 600 1.0625rem var(--titulo); text-transform: uppercase; letter-spacing: .06em; }
.menu-principal a { display: block; padding: 6px 0; border-bottom: 2px solid transparent; }
.menu-principal a:hover, .menu-principal a[aria-current] { border-bottom-color: var(--amarillo); }
.menu-principal a.socios { color: var(--amarillo); }
.boton-menu { display: none; }
/* Botón de modo claro u oscuro (spec 010): a todos los anchos, junto al logo. */
.boton-tema { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin-left: auto; padding: 0; background: rgb(10 37 64 / .5); color: var(--blanco);
  border: 1px solid rgb(255 255 255 / .6); border-radius: 6px; cursor: pointer; }
.boton-tema[hidden] { display: none; }
.boton-tema svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.boton-tema .sol, .boton-tema[aria-pressed="true"] .luna { display: none; }
.boton-tema[aria-pressed="true"] .sol { display: block; }
@media (max-width: 56.1875em) {
  .barra-fila { flex-wrap: wrap; min-height: 76px; gap: 12px; }
  .marca img { height: 42px; }
  .menu-principal { flex-basis: 100%; }
  .menu-principal ul { flex-direction: column; gap: 0; padding-bottom: 12px; }
  .menu-principal a { min-height: 46px; padding: 10px 0 10px 12px; border-bottom: 0; border-left: 3px solid transparent; }
  .menu-principal a[aria-current] { border-left-color: var(--amarillo); }
  .plegable .boton-menu { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: rgb(10 37 64 / .5);
    color: var(--blanco); border: 1px solid rgb(255 255 255 / .6); border-radius: 6px; font: 700 0.9375rem var(--titulo);
    text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
  .plegable .menu-principal { display: none; }
  .plegable.abierto { background: var(--noche); box-shadow: 0 12px 24px rgb(0 0 0 / .3); }
  .plegable.abierto .menu-principal { display: block; }
}

/* --- Botones --------------------------------------------------------------------------------------------------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px;
  border: 0; border-radius: 4px; font: 700 1.125rem var(--titulo); text-transform: uppercase; letter-spacing: .08em;
  text-decoration: none; cursor: pointer; background: var(--amarillo); color: var(--noche); }
.boton.borde { background: rgb(10 37 64 / .35); color: var(--blanco); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .85); }
.boton.azul { background: var(--marino); color: var(--blanco); }
.boton.texto { background: transparent; color: var(--canarias); text-decoration: underline; padding: 0 8px; min-height: 40px; }
.botones { display: flex; flex-wrap: wrap; gap: 14px; }
.ver-todo { font: 700 1rem var(--titulo); text-transform: uppercase; letter-spacing: .1em; color: var(--canarias); text-decoration: none; }
.ver-todo:hover { text-decoration: underline; }

/* --- Portada: imagen a todo lo ancho con velo ------------------------------------------------------------------ */
.portada { position: relative; overflow: hidden; color: var(--blanco); background: var(--noche); min-height: min(92vh, 800px);
  display: flex; align-items: center; }
.portada .fondo, .portada .fondo img, .portada .fondo svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.portada .fondo img { object-fit: cover; object-position: 60% 40%; }
.portada::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(10 37 64 / .6) 0%, transparent 24%),
              linear-gradient(90deg, rgb(10 37 64 / .85) 0%, var(--velo) 45%, transparent 75%); }
.portada .ancho { position: relative; z-index: 2; padding-top: 130px; padding-bottom: 90px; }
.antetitulo { font: 700 1rem var(--titulo); text-transform: uppercase; letter-spacing: .2em; color: var(--amarillo); margin: 0 0 10px; }
.portada h1 { font-size: clamp(3.75rem, 10vw, 8.25rem); font-weight: 800; line-height: .88; margin: 0; letter-spacing: -.01em; }
.portada h1 span { color: var(--amarillo); }
.portada .presentacion { font-size: 1.3125rem; max-width: 540px; margin: 22px 0 32px; color: rgb(255 255 255 / .94); }
.portada .presentacion p { margin: 0; }
.portada .presentacion a { color: var(--blanco); }
@media (max-width: 56.1875em) {
  .portada { min-height: 640px; align-items: flex-end; }
  .portada .fondo img { object-position: 30% 50%; }
  .portada::after { background: linear-gradient(180deg, rgb(10 37 64 / .7) 0%, var(--velo) 30%, rgb(10 37 64 / .92) 100%); }
  .portada .ancho { padding-top: 120px; padding-bottom: 48px; }
  .portada .presentacion { font-size: 1.125rem; }
}

/* --- Cabecera de las secciones: banda azul con curvas de nivel ------------------------------------------------- */
.cabecera-seccion { position: relative; overflow: hidden; background: var(--noche); color: var(--blanco); }
.cabecera-seccion .topo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .14; }
.cabecera-seccion .ancho { position: relative; padding-top: 140px; padding-bottom: 56px; }
.cabecera-seccion h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); font-weight: 800; margin: 0; }
.cabecera-seccion .migas { font: 700 0.9375rem var(--titulo); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 10px; }
.cabecera-seccion .migas a { color: var(--cielo); text-decoration: none; }
.cabecera-seccion .entradilla { color: #c7dcec; font-size: 1.25rem; max-width: var(--ancho-texto); margin: 18px 0 0; }
@media (max-width: 56.1875em) { .cabecera-seccion .ancho { padding-top: 110px; padding-bottom: 40px; } }

/* --- Secciones ------------------------------------------------------------------------------------------------- */
.bloque { padding: 80px 0; }
.bloque + .bloque { padding-top: 0; }
.titulo-seccion { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 32px; }
.titulo-seccion h2 { margin: 0; }
@media (max-width: 56.1875em) { .bloque { padding: 56px 0; } }

/* Próximamente: tarjetas grandes con la fecha destacada */
.proximas { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.proxima { display: grid; grid-template-columns: 7rem 1fr; height: 100%; background: var(--tarjeta); border-radius: var(--radio);
  overflow: hidden; box-shadow: var(--sombra); border: 1px solid var(--borde); }
.proxima .fecha { background: var(--marino); color: var(--blanco); display: grid; place-content: center; text-align: center; padding: 20px 8px; }
.proxima .fecha b { font: 800 3.5rem/1 var(--titulo); color: var(--amarillo); }
.proxima .fecha span { font: 700 1rem var(--titulo); text-transform: uppercase; letter-spacing: .15em; }
.proxima .texto { padding: 22px 24px; }
.proxima h3 { font-size: 1.75rem; margin: 0 0 8px; line-height: 1.05; }
.proxima h3 a { color: var(--texto); text-decoration: none; }
.proxima h3 a:hover { text-decoration: underline; }
.proxima p { margin: 8px 0 0; }
@media (max-width: 56.1875em) { .proxima { grid-template-columns: 5.25rem 1fr; } .proxima .fecha b { font-size: 2.5rem; } .proxima h3 { font-size: 1.5rem; } }

/* Datos con iconos (lugar, distancia, desnivel, fecha) */
.datos { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; padding: 0; margin: 0; color: var(--tenue); font-size: 0.9375rem; }
.datos li { display: inline-flex; align-items: center; gap: 6px; }
.icono { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: var(--canarias); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Tarjetas de noticias y actividades */
.rejilla { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.rejilla.destacada { grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 56.1875em) { .rejilla.destacada { grid-template-columns: 1fr; } }
.ficha { display: flex; flex-direction: column; height: 100%; background: var(--tarjeta); border-radius: var(--radio); overflow: hidden;
  box-shadow: var(--sombra); border: 1px solid var(--borde); }
.ficha .imagen { aspect-ratio: 4 / 3; overflow: hidden; background: var(--marino); }
.rejilla.destacada > li:first-child .ficha .imagen { aspect-ratio: 16 / 11; }
.ficha .imagen img, .ficha .imagen svg { width: 100%; height: 100%; object-fit: cover; }
.ficha .texto { padding: 20px 22px 24px; display: grid; gap: 8px; }
.ficha time, .ficha .etiqueta-tipo { font: 700 0.875rem var(--titulo); text-transform: uppercase; letter-spacing: .12em; color: var(--canarias); }
.ficha h3 { font-size: 1.625rem; margin: 0; line-height: 1.05; }
.rejilla.destacada > li:first-child .ficha h3 { font-size: 2.125rem; }
.ficha h3 a { color: var(--texto); text-decoration: none; }
.ficha h3 a:hover { text-decoration: underline; }
.ficha p { margin: 0; color: var(--tenue); }
.etiqueta { display: inline-block; justify-self: start; padding: 2px 10px; border-radius: 4px; font: 700 0.8125rem var(--titulo);
  text-transform: uppercase; letter-spacing: .08em; background: var(--resalte); color: var(--texto); }
.paginacion { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin: 40px 0 0; }
.paginacion .boton { background: var(--marino); color: var(--blanco); }

/* Banner «Corre con nosotros» con las cifras del club */
.socio { padding: 0 0 80px; }
.socio .caja { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center;
  padding: 56px; border-radius: 28px; background: linear-gradient(135deg, var(--marino), var(--noche)); color: var(--blanco); }
.socio .caja > * { min-width: 0; position: relative; }
.socio .olas { position: absolute; right: -60px; bottom: -50px; width: 560px; opacity: .2; }
.socio h2 { font-size: clamp(2.5rem, 5.5vw, 4rem); margin: 0; }
.socio p.invitacion { color: #c7dcec; font-size: 1.1875rem; margin: 14px 0 28px; }
.cifras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cifras li { min-width: 0; overflow-wrap: anywhere; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .16);
  border-radius: 18px; padding: 20px 22px; }
.cifras b { display: block; font: 800 2.875rem/1 var(--titulo); color: var(--amarillo); }
.cifras span { font-size: 0.9375rem; color: #c7dcec; }
.cifras .broma { border-style: dashed; }
.cifras .broma b { color: var(--cielo); }
.nota-cifras { grid-column: 1 / -1; margin: 4px 0 0; font-size: 0.875rem; color: #a9c4da; }
@media (max-width: 56.1875em) {
  .socio .caja { grid-template-columns: 1fr; padding: 32px 22px; border-radius: 20px; }
  .cifras b { font-size: 2rem; } .cifras li { padding: 14px; } .cifras span { font-size: 0.875rem; }
}

/* --- Páginas de contenido -------------------------------------------------------------------------------------- */
.articulo { max-width: var(--ancho-texto); }
.articulo > .principal img, .articulo > img { border-radius: var(--radio); width: 100%; margin: 0 0 28px; }
.entradilla { font-size: 1.3125rem; color: var(--tenue); margin: 0 0 28px; }
.ficha-datos { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 24px; margin: 0 0 32px; display: grid; gap: 18px; }
.ficha-datos dl { display: grid; grid-template-columns: fit-content(45%) 1fr; gap: 10px 20px; margin: 0; align-items: center; }
.ficha-datos dt { display: inline-flex; align-items: center; gap: 8px; color: var(--tenue); }
.ficha-datos dd { margin: 0; font-weight: 600; }
.cuerpo > * + * { margin-top: 18px; }
.cuerpo h2 { font-size: clamp(1.875rem, 4vw, 2.5rem); margin-top: 36px; }
.cuerpo h3 { font-size: 1.625rem; margin-top: 28px; }
.cuerpo figure { margin: 28px 0; }
.cuerpo figure img { border-radius: var(--radio); width: 100%; }
.cuerpo figcaption { font-size: 0.9375rem; color: var(--tenue); margin-top: 8px; }
.galeria { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.cita { margin: 28px 0; padding: 16px 24px; border-left: 6px solid var(--amarillo); background: var(--tarjeta); border-radius: 0 var(--radio) var(--radio) 0; }
.cita p { margin: 0; font: 600 1.5rem/1.25 var(--titulo); }
.cita footer { margin-top: 8px; color: var(--tenue); }
.enlace-destacado { margin: 28px 0; }

/* Mensajes */
.aviso, .hecho { color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 16px; margin: 0 0 20px; }
.aviso { background: var(--error-suave); border-left: 6px solid var(--error); }
.hecho { background: var(--ok-suave); border-left: 6px solid var(--ok); }
.mensajes { list-style: none; padding: 0; margin: 0 0 20px; }
.mensajes li { background: var(--ok-suave); border-left: 6px solid var(--ok); padding: 12px 16px; border-radius: var(--radio); }
.mensajes li.warning, .mensajes li.error { background: var(--error-suave); border-left-color: var(--error); }

/* Formularios */
.formulario { display: grid; gap: 18px; max-width: var(--ancho-texto); }
.campo { display: grid; gap: 6px; margin: 0; }
.campo label { font-weight: 600; }
.campo .ayuda-campo { font-size: 0.9375rem; color: var(--tenue); }
input[type=text], input[type=email], input[type=password], textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; color: var(--texto); background: var(--tarjeta);
  border: 1px solid var(--control); border-radius: 6px; }
textarea { min-height: 11rem; resize: vertical; }
.casilla { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.casilla input { width: 1.3rem; height: 1.3rem; margin-top: .2rem; flex: none; }
.errorlist { list-style: none; margin: 0; padding: 0; color: var(--error); font-size: 0.9375rem; font-weight: 600; }
.campo.con-error input, .campo.con-error textarea { border: 2px solid var(--error); }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --- Convocatorias (spec 004): etiquetas, ficha y franja de Noticias --------------------------------------------- */
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.etiqueta.convocatoria { background: var(--amarillo); color: var(--noche); }
.etiqueta.suspendida { background: var(--error-suave); color: var(--texto); box-shadow: inset 3px 0 0 var(--error); }
.ficha-convocatoria .botones { margin: 0; }
.nota-socios { margin: 0; color: var(--tenue); }
.franja-convocatorias { background: var(--resalte); padding: 56px 0; }
.franja-convocatorias h2 { margin-bottom: 24px; }
.franja-convocatorias + .bloque { padding-top: 56px; }
.club-va { margin: 0; font-weight: 600; }
.club-va .etiqueta { margin-right: 6px; }

/* --- Calendario de carreras (spec 003): cuadrícula con ficha en escritorio, lista en el móvil y al tacto ------- */
.cabecera-mes { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 24px; }
.cabecera-mes h2 { margin: 0; }
.meses { display: flex; flex-wrap: wrap; gap: 10px; }
.meses a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--borde);
  border-radius: 4px; background: var(--tarjeta); color: var(--canarias); font: 700 1rem var(--titulo); text-transform: uppercase;
  letter-spacing: .06em; text-decoration: none; }
.meses a:hover { background: var(--resalte); }
.cuadricula { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--tarjeta); border: 1px solid var(--borde); }
.cuadricula th { padding: 10px 8px; background: var(--marino); color: var(--blanco); font: 700 0.9375rem var(--titulo); text-transform: uppercase;
  letter-spacing: .1em; text-align: left; }
.cuadricula td { vertical-align: top; height: 112px; padding: 6px; border: 1px solid var(--borde); }
.cuadricula td.otro-mes { background: var(--fondo); }
.cuadricula td.otro-mes .numero { color: var(--tenue); }
.cuadricula .numero { display: block; font: 700 1.125rem var(--titulo); color: var(--texto); margin-bottom: 4px; }
.cuadricula td.hoy .numero { display: inline-block; min-width: 28px; padding: 0 6px; border-radius: 4px; background: var(--amarillo); color: var(--noche); }
.cuadricula ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.carrera-dia { position: relative; }
.carrera-dia .carrera { display: block; padding: 3px 6px; border-radius: 4px; background: var(--resalte); color: var(--texto);
  font: 600 0.875rem/1.25 var(--letra); text-decoration: none; overflow-wrap: anywhere; }
.carrera-dia .carrera:hover { text-decoration: underline; }
.carrera-dia.pasada .carrera { background: transparent; color: var(--tenue); }
.ficha-carrera { display: none; position: absolute; z-index: 5; top: 100%; left: 0; width: 300px; padding: 16px 18px; background: var(--tarjeta);
  color: var(--texto); border: 1px solid var(--borde); border-top: 4px solid var(--amarillo); border-radius: 0 0 var(--radio) var(--radio);
  box-shadow: 0 16px 36px rgb(10 37 64 / .25); }
.carrera-dia:hover .ficha-carrera, .carrera-dia:focus-within .ficha-carrera { display: block; }
.carrera-dia.cerrada .ficha-carrera { display: none; }
.cuadricula td:nth-child(n+5) .ficha-carrera { left: auto; right: 0; }
.ficha-carrera .nombre { margin: 0 0 8px; font: 700 1.3125rem/1.1 var(--titulo); text-transform: uppercase; }
.ficha-carrera .datos { display: grid; gap: 4px; }
.ficha-carrera .enlaces { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; font-weight: 600; }
.web-oficial { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.lista-mes { display: none; list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--marino); }
.fila-carrera { display: grid; grid-template-columns: 3.75rem 1fr; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--borde); }
.fila-carrera .dia { font: 600 0.8125rem var(--titulo); text-transform: uppercase; letter-spacing: .12em; color: var(--tenue); text-align: center; }
.fila-carrera .dia b { display: block; font: 800 2.125rem/1 var(--titulo); color: var(--texto); letter-spacing: 0; }
.fila-carrera h3 { font-size: 1.375rem; margin: 0 0 6px; line-height: 1.1; }
.fila-carrera h3 a { color: var(--texto); text-decoration: none; }
.fila-carrera h3 a:hover { text-decoration: underline; }
.fila-carrera .datos { margin-bottom: 6px; }
.fila-carrera.pasada .dia b, .fila-carrera.pasada h3 a { color: var(--tenue); }
.nota-externa { font-size: 0.9375rem; color: var(--tenue); margin: 14px 0 0; }
/* Marcas de ámbito: forma además de color (círculo, Canarias; rombo, fuera) */
.marca-ambito { display: inline-block; flex: none; width: 0.6875rem; height: 0.6875rem; margin-right: 6px; vertical-align: 0; border: 2px solid var(--marca-borde); }
.marca-canarias { border-radius: 50%; background: var(--marca-canarias); }
.marca-fuera { width: 0.625rem; height: 0.625rem; transform: rotate(45deg); background: var(--marca-fuera); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 18px; font-size: 0.9375rem; color: var(--tenue); }
.leyenda span, .ambito { display: inline-flex; align-items: center; white-space: nowrap; }
/* Estados: siempre con texto; el tachado de la cancelada es un refuerzo */
.estado { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--texto); border-radius: 3px;
  font: 700 0.75rem/1.5 var(--titulo); text-transform: uppercase; letter-spacing: .08em; color: var(--texto); background: var(--tarjeta);
  text-decoration: none; vertical-align: 1px; white-space: nowrap; }
.carrera.cancelada .nombre { text-decoration: line-through; }
.carrera-dia .estado { display: table; margin: 3px 0 0; }
.fecha-anterior { font-weight: 600; color: var(--texto); }
.estado-pagina { margin: 0; }
.estado-pagina .estado { margin-left: 0; font-size: 0.9375rem; }
/* En pantallas estrechas o táctiles, la lista: ahí no hay «pasar el ratón por encima» (research R3). */
@media (max-width: 47.4375em), (hover: none) {
  .cuadricula { display: none; }
  .lista-mes { display: block; }
}

/* Bloque «Calendario de carreras» de la portada (spec 003; maqueta D): banda azul noche con curvas de nivel */
.calendario { position: relative; overflow: hidden; background: var(--noche); color: var(--blanco); padding: 80px 0; margin-bottom: 80px; }
.calendario .topo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .14; }
.calendario .ancho { position: relative; display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
.calendario .ancho > * { min-width: 0; }
.calendario h2 { color: var(--blanco); }
.calendario h2 span { color: var(--amarillo); }
.calendario p { color: #c7dcec; font-size: 1.1875rem; }
.calendario .leyenda { color: #c7dcec; }
.calendario .estado { color: var(--blanco); border-color: var(--blanco); background: transparent; }
.proximas-carreras { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--blanco); }
.fila-portada { display: grid; grid-template-columns: 4rem 1fr auto; gap: 18px; align-items: center; padding: 16px 8px;
  border-bottom: 1px solid rgb(255 255 255 / .18); color: var(--blanco); text-decoration: none; }
.fila-portada:hover { background: rgb(255 255 255 / .06); }
.fila-portada:hover b { text-decoration: underline; }
.fila-portada .f { font: 800 2.125rem/1 var(--titulo); text-align: center; }
.fila-portada .f small { display: block; font: 600 0.8125rem var(--titulo); letter-spacing: .15em; text-transform: uppercase; color: var(--cielo); }
.fila-portada b { font: 700 1.375rem/1.1 var(--titulo); text-transform: uppercase; letter-spacing: .02em; }
.fila-portada .lugar { display: block; color: #b9cde0; font-size: 0.9375rem; margin-top: 2px; }
.fila-portada .km { font: 700 1rem var(--titulo); letter-spacing: .06em; padding: 6px 12px; border-radius: 4px; white-space: nowrap;
  background: var(--amarillo); color: var(--noche); }
.fila-portada .km.fuera { background: var(--cielo); }
@media (max-width: 56.1875em) {
  .calendario { padding: 56px 0; margin-bottom: 56px; }
  .calendario .ancho { grid-template-columns: 1fr; gap: 32px; }
  .fila-portada { grid-template-columns: 52px 1fr; }
  .fila-portada .km { grid-column: 2; justify-self: start; }
}

/* --- Pie: azul noche con curvas de nivel ----------------------------------------------------------------------- */
.pie { position: relative; overflow: hidden; background: var(--noche); color: #a9c4da; font-size: 0.9375rem; }
.pie .topo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .1; }
.pie .ancho { position: relative; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 30px; padding-top: 56px; padding-bottom: 28px; }
.pie img { height: 56px; width: auto; margin-bottom: 14px; }
.pie h2 { font-size: 1.125rem; letter-spacing: .1em; color: var(--blanco); margin: 0 0 10px; }
.pie h2::before { display: none; }
.pie p { margin: 0; }
.pie ul { list-style: none; margin: 0; padding: 0; line-height: 2.1; }
.pie a { color: #d7e6f2; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie .legal { grid-column: 1 / -1; border-top: 1px solid rgb(255 255 255 / .14); padding-top: 18px; font-size: 0.875rem; display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (max-width: 56.1875em) { .pie .ancho { grid-template-columns: 1fr; } }

/* --- Acceso al gestor (cuentas) -------------------------------------------------------------------------------- */
.pagina-acceso { background: var(--noche); }
.pagina-acceso .topo { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .07; }
.acceso-contenedor { position: relative; padding: 48px 16px; }
.acceso { position: relative; max-width: 420px; margin: 0 auto 16px; display: grid; gap: 16px; background: var(--tarjeta);
  border-radius: var(--radio-grande); padding: 32px 28px; box-shadow: 0 30px 60px rgb(0 0 0 / .35); }
.acceso.alta, .acceso.codigos { max-width: 540px; }
.acceso h1 { font-size: 2.25rem; font-weight: 800; text-align: center; margin: 0; }
.acceso .boton { width: 100%; }
.acceso .ayuda { margin: 0; color: var(--tenue); }
.logo-acceso { width: 200px; height: auto; margin: 0 auto; padding: 12px 16px; background: var(--noche); border-radius: 12px; box-sizing: content-box; }
.qr { background: #fff; padding: 12px; border-radius: 8px; width: fit-content; max-width: 100%; margin: 12px auto 0; }
.qr svg { width: 240px; max-width: 100%; height: auto; }
.clave-alta { display: block; font-size: 1.25rem; letter-spacing: .05em; overflow-wrap: anywhere; }
.pasos-alta { display: grid; gap: 16px; padding-left: 1.25rem; margin: 0; }
.codigos-respaldo { columns: 2; font-size: 1.25rem; }
.acceso-cancelar { position: relative; text-align: center; }
.acceso-cancelar .boton.texto { color: var(--cielo); }

/* --- Errores --------------------------------------------------------------------------------------------------- */
.error-pagina { padding: 40px 0 80px; }
.error-pagina .codigo-error { font: 800 7.5rem/1 var(--titulo); color: var(--cielo); margin: 0; }

/* --- Movimiento: solo si el visitante no ha pedido menos ------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .boton { transition: transform .15s; }
  .boton:hover { transform: translateY(-2px); }
  .ficha, .proxima { transition: transform .2s, box-shadow .2s; }
  .ficha:hover, .proxima:hover { transform: translateY(-3px); }
  .ficha .imagen img, .ficha .imagen svg { transition: transform .4s; }
  .ficha:hover .imagen img, .ficha:hover .imagen svg { transform: scale(1.05); }
}

@media print {
  .barra, .pie, .acceso-cancelar, .portada .fondo, .boton { display: none; }
  .portada, .cabecera-seccion { background: none; color: #000; }
}

/* Iconos: un único SVG oculto con los símbolos, que cada icono usa con <use>. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }