@charset "UTF-8";
/* ==========================================================================
   CD Cisne SOS — Sistema de diseño
   Concepto: verde pino y papel hueso, con el naranja de rescate como único
   color de acción. Antes era azul marino sobre blanco: correcto, pero es la
   pareja por defecto de medio internet y la web parecía de plantilla. El
   verde profundo y el papel cálido dan la misma seriedad sin ese aire.
   Sin peticiones externas: tipografías y todo lo demás se sirven del propio
   dominio, así la web no necesita banner de cookies por terceros.
   ========================================================================== */

/* --- Tipografías autoalojadas (variables, un fichero por familia) -------- */
@font-face{
  font-family:'Fraunces';
  src:url('../fuentes/fraunces-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fuentes/fraunces-latin-ext.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Figtree';
  src:url('../fuentes/figtree-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Figtree';
  src:url('../fuentes/figtree-latin-ext.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Tokens: tema claro (base) ------------------------------------------ */
:root{
  --profundo:#122740;
  --profundo-2:#1A3552;
  --profundo-3:#24486B;
  --azul:#2F6379;
  --azul-vivo:#4C88A2;
  --azul-tinte:#E6EDF2;
  --azul-tinte-2:#D2E0E9;

  /* El naranja tiene DOS papeles y no se pueden mezclar:
     · --rescate       fondo sólido de botones e insignias, SIEMPRE con texto
                       blanco encima (5,18:1). No cambia entre temas: si se
                       aclara en modo oscuro, el texto blanco desaparece.
     · --rescate-texto color de enlaces y detalles sobre el fondo de página.
                       Ése sí se aclara en modo oscuro.
     · --rescate-claro texto sobre el azul profundo (--profundo), en ambos temas. */
  --rescate:#B84722;
  --rescate-hover:#943417;
  --rescate-texto:#A83E1B;
  --rescate-texto-hover:#8A3013;
  --rescate-claro:#F2946B;
  /* Un punto más claro que #FDEAE0: con el anterior, el naranja de marca
     encima se quedaba en 4,44:1 en la fila destacada de la tabla. */
  --rescate-tinte:#FBF0E9;

  /* Color de los enlaces de texto. Va por variable, y no directo al naranja,
     para que cada superficie oscura lo reapunte a un tono claro heredándolo a
     todo lo que tenga dentro. Sin esto, un enlace dentro del azul profundo se
     iba al naranja oscuro al pasar el ratón y se quedaba en 2,08:1. */
  --enlace:var(--rescate-texto);
  --enlace-hover:var(--rescate-texto-hover);

  --papel:#F5F1E8;
  --papel-2:#EFEADE;
  --papel-3:#EAE3D5;
  --superficie:#FFFDF7;

  --tinta:#121B26;
  --tinta-2:#354552;
  /* #5B7383 se quedaba en 4,09:1 sobre los fondos tintados (--papel-3).
     Este tono pasa 4,5:1 en blanco, papel, papel-2, papel-3 y agua-tinte. */
  --tenue:#53636F;
  --linea:#DED7C6;
  --linea-suave:#EAE4D7;

  --exito:#1D6642;
  --exito-tinte:#E4EEE7;
  --aviso:#75500A;
  --aviso-tinte:#F7EEDA;
  --error:#A31B38;
  --error-tinte:#F9E7E9;

  --sombra-s:0 1px 2px rgba(18,39,64,.06),0 2px 6px rgba(18,39,64,.05);
  --sombra-m:0 2px 4px rgba(18,39,64,.05),0 10px 26px -8px rgba(18,39,64,.16);
  --sombra-g:0 4px 8px rgba(18,39,64,.06),0 24px 48px -16px rgba(18,39,64,.24);

  --r-s:6px; --r-m:10px; --r-g:16px;
  /* Alto de la barra fija. Lo usan la primera banda de cada página para no
     quedarse debajo, y el scroll-margin de los anclajes. */
  --h-cab:4.6rem;
  --paso:clamp(3.5rem,2.4rem + 4vw,6rem);
  --ancho:76rem;
  --ancho-texto:38rem;

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  /* Interfaz —botones, navegación, etiquetas—: el mismo palo seco del texto.
     Un serif en un botón se lee raro; en un titular, no. */
  --ui:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --texto:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papel:#0C1620;
    --papel-2:#111E2B;
    --papel-3:#182838;
    --superficie:#132131;
    --tinta:#EAEBEE;
    --tinta-2:#C6CCD4;
    --tenue:#98A3AF;
    --linea:#28394C;
    --linea-suave:#1E2E3E;
    --azul-tinte:#12283A;
    --azul-tinte-2:#1B3A4E;
    --azul:#6FAFC6;
    --azul-vivo:#8CC9DD;
    --rescate:#B84722;
    --rescate-hover:#9A3A1C;
    --rescate-texto:#F2946B;
    --rescate-texto-hover:#F8AE8D;
    --rescate-tinte:#331A0E;
    --exito:#6FD79B;
    --exito-tinte:#0F2B1E;
    --aviso:#E4BC6B;
    --aviso-tinte:#2E2409;
    --error:#FF8098;
    --error-tinte:#37131E;
    --sombra-s:0 1px 2px rgba(0,0,0,.4);
    --sombra-m:0 2px 4px rgba(0,0,0,.4),0 10px 26px -8px rgba(0,0,0,.6);
    --sombra-g:0 4px 8px rgba(0,0,0,.4),0 24px 48px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --papel:#0C1620; --papel-2:#111E2B; --papel-3:#182838; --superficie:#132131;
  --tinta:#EAEBEE; --tinta-2:#C6CCD4; --tenue:#98A3AF;
  --linea:#28394C; --linea-suave:#1E2E3E;
  --azul-tinte:#12283A; --azul-tinte-2:#1B3A4E; --azul:#6FAFC6; --azul-vivo:#8CC9DD;
  --rescate:#B84722;
  --rescate-hover:#9A3A1C;
  --rescate-texto:#F2946B;
  --rescate-texto-hover:#F8AE8D;
  --rescate-tinte:#331A0E;
  --exito:#6FD79B; --exito-tinte:#0F2B1E; --aviso:#E4BC6B; --aviso-tinte:#2E2409;
  --error:#FF8098; --error-tinte:#37131E;
  --sombra-s:0 1px 2px rgba(0,0,0,.4);
  --sombra-m:0 2px 4px rgba(0,0,0,.4),0 10px 26px -8px rgba(0,0,0,.6);
  --sombra-g:0 4px 8px rgba(0,0,0,.4),0 24px 48px -16px rgba(0,0,0,.7);
}

/* --- Base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* El navegador aplica [hidden]{display:none}, pero cualquier clase nuestra
   con display:flex/grid le gana por especificidad y el elemento se ve igual.
   Con esto, `hidden` significa oculto siempre. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (min-width:1000px){:root{--h-cab:5.1rem}}
/* La barra va fija: sin esto, al saltar a un anclaje el título queda tapado. */
[id]{scroll-margin-top:calc(var(--h-cab) + 1rem)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,picture,svg,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,h5{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.025em;line-height:1.1;font-weight:700}
p,ul,ol{margin:0}
/* OJO: estas dos reglas tienen que excluir a `.btn`. Un `<a class="btn">` es un
   botón, no un enlace de texto, y se pinta él solo. Sin el `:not(.btn)`,
   `a:hover` (0-1-1) le gana a `.btn{color:var(--btn-fg)}` (0-1-0) y al pasar el
   ratón el texto se vuelve naranja oscuro sobre el fondo naranja oscuro de
   `.btn:hover`: 1:1 de contraste, las letras desaparecen. Pasó de verdad. */
a:not(.btn){color:var(--enlace);text-underline-offset:.16em}
a:not(.btn):hover{color:var(--enlace-hover)}

/* Superficies de azul profundo: el naranja de enlace no se lee encima, así que
   estas reapuntan los tokens y todo lo que llevan dentro los hereda. */
.seccion--oscura,.menu-movil,.heroe,.cab-pagina,.franja-cta,.pie{
  --enlace:var(--rescate-claro);
  --enlace-hover:#fff;
}
:focus-visible{outline:3px solid var(--rescate-texto);outline-offset:2px;border-radius:3px}
::selection{background:var(--rescate);color:#fff}

.saltar{
  position:absolute;left:.5rem;top:-4rem;z-index:200;
  background:var(--rescate);color:#fff;padding:.75rem 1.25rem;border-radius:var(--r-s);
  font-family:var(--ui);font-weight:600;text-decoration:none;transition:top .18s;
  /* Es un enlace, pero se pinta como una pastilla naranja: sin esto el naranja
     de enlace lo dejaría escrito sobre su propio fondo al pasar el ratón. */
  --enlace:#fff;--enlace-hover:#fff;
}
.saltar:focus{top:.5rem;color:#fff}

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

/* --- Estructura --------------------------------------------------------- */
.contenedor{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}
.contenedor-estrecho{width:min(100% - 2.5rem,54rem);margin-inline:auto}
.seccion{padding-block:var(--paso)}
.seccion--tinte{background:var(--azul-tinte)}
.seccion--oscura{background:var(--profundo);color:#EDF2F6}
.seccion--oscura h2,.seccion--oscura h3{color:#fff}
.seccion--oscura .sec-desc{color:#C0CFDB}
.seccion--oscura .antetitulo{color:var(--rescate-claro)}
.seccion--oscura .antetitulo::before{background:var(--rescate-claro)}

.pila{display:flex;flex-direction:column}
.pila-s{gap:.75rem} .pila-m{gap:1.25rem} .pila-g{gap:2rem}

/* --- Cabecera de sección ------------------------------------------------ */
.sec-cab{display:flex;flex-direction:column;gap:.85rem;margin-bottom:2.5rem;max-width:44rem}
.sec-cab--centro{margin-inline:auto;text-align:center;align-items:center}

/* --- Romper el ritmo -----------------------------------------------------
   Antes cada sección tenía el mismo alto, un fondo alterno del mismo tono y
   el mismo encabezado centrado. Leídas seguidas parecían la misma franja
   repetida ocho veces, que es justo lo que delata una página hecha en serie.
   Lo que sigue son las piezas para variar eso a mano, sección por sección.
   No se usan todas en todas partes: la gracia está precisamente en que no.
   ----------------------------------------------------------------------- */

/* Alto: no todas las secciones pesan lo mismo, así que no todas miden igual. */
.seccion--ajustada{padding-block:calc(var(--paso) * .55)}
.seccion--amplia{padding-block:calc(var(--paso) * 1.3)}
/* Separar con un filete en vez de con otra banda de color. Dos secciones
   seguidas del mismo fondo se distinguen por cómo están montadas, no por el
   tono; el filete sólo marca dónde acaba una. */
.seccion--linea{border-top:1px solid var(--linea)}

/* Tercer patrón de encabezado: titular y acción en la misma línea, la acción
   pegada al margen derecho. Con éste ya son tres formas distintas de abrir
   una sección, y ninguna se repite dos veces seguidas. */
.sec-cab--fila{max-width:none;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:1.25rem 2rem;flex-wrap:wrap}
.sec-cab--fila > div{display:flex;flex-direction:column;gap:.85rem;max-width:44rem}
.sec-cab--fila > .btn{flex:none}

/* Encabezado partido: el titular a la izquierda y la entradilla a la derecha,
   separados por una línea. Alterna con el centrado de siempre. */
.sec-cab--partido{max-width:none;margin-bottom:3rem}
@media (min-width:920px){
  .sec-cab--partido{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:1rem 4rem;align-items:end;
  }
  .sec-cab--partido .antetitulo,.sec-cab--partido h2{grid-column:1}
  .sec-cab--partido .sec-desc{
    grid-column:2;grid-row:1/3;align-self:end;max-width:none;
    padding-left:2.75rem;border-left:1px solid var(--linea);margin-bottom:.35rem;
  }
}

/* Bloque partido: una columna de texto y otra de contenido, con anchos
   distintos a propósito. Sirve para no pintar otra fila de cuatro tarjetas
   iguales cada vez que hay cuatro ideas que contar. */
.bloque-partido{display:grid;gap:2.5rem}
@media (min-width:920px){
  .bloque-partido{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:4.5rem;align-items:start}
  .bloque-partido--pegado{position:sticky;top:calc(var(--h-cab) + 2rem)}
}

/* Texto a un lado y foto saliéndose por el borde derecho de la ventana.
   Romper la caja una vez por página basta para que la retícula deje de
   cantar; hacerlo en todas sería el mismo truco repetido.

   El margen negativo no puede ser el `calc(50% - 50vw)` de siempre, porque
   dentro de una rejilla ese 50% es del propio elemento y no del contenedor.
   Se calcula desde el ancho máximo: cuando la ventana es más ancha que el
   contenedor, hay que salvar la mitad de la diferencia; cuando no, basta con
   el margen lateral. `min()` escoge el que toca en cada caso. */
.bloque-foto-sangre{display:grid;gap:2.5rem;align-items:center}
@media (min-width:920px){
  .bloque-foto-sangre{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:4.5rem}
  .bloque-foto-sangre .marco-foto{
    margin-right:min(-1.25rem,calc((var(--ancho) - 100vw) / 2));
    border-right:0;border-radius:var(--r-g) 0 0 var(--r-g);
    aspect-ratio:16/10;
  }
}
.antetitulo{
  font-family:var(--ui);font-size:.75rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--azul);
  display:flex;align-items:center;gap:.6rem;
}
.antetitulo::before{content:"";width:1.75rem;height:3px;background:var(--rescate);border-radius:2px;flex:none}
.sec-cab--centro .antetitulo{justify-content:center}
h2,.h2{font-size:clamp(1.75rem,1.35rem + 1.7vw,2.65rem)}
h3,.h3{font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem)}
.sec-desc{color:var(--tinta-2);font-size:1.075rem;max-width:var(--ancho-texto)}
.sec-cab--centro .sec-desc{margin-inline:auto}

/* --- Botones ------------------------------------------------------------ */
.btn{
  --btn-bg:var(--rescate); --btn-fg:#fff; --btn-bd:var(--rescate);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--ui);font-weight:600;font-size:1rem;letter-spacing:-.01em;
  padding:.85rem 1.5rem;min-height:3rem;
  background:var(--btn-bg);color:var(--btn-fg);border:2px solid var(--btn-bd);
  border-radius:var(--r-s);text-decoration:none;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,transform .16s,box-shadow .16s;
  text-align:center;
}
/* OJO: aquí no se puede poner `color` directamente. Al ser una declaración
   normal, ganaría a `color:var(--btn-fg)` de .btn y dejaría los botones
   secundarios con texto blanco sobre fondo claro al pasar el ratón. Todo el
   color se cambia a través de las variables. */
.btn:hover{--btn-bg:var(--rescate-hover);--btn-bd:var(--rescate-hover);--btn-fg:#fff;transform:translateY(-1px);box-shadow:var(--sombra-m)}
.btn:active{transform:translateY(0)}
.btn svg{flex:none}
.btn--sec{--btn-bg:var(--superficie);--btn-fg:var(--tinta);--btn-bd:var(--linea)}
.btn--sec:hover{--btn-bg:var(--azul-tinte);--btn-fg:var(--tinta);--btn-bd:var(--azul)}
.btn--claro{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.55)}
.btn--claro:hover{--btn-bg:rgba(255,255,255,.16);--btn-fg:#fff;--btn-bd:#fff}
.btn--fantasma{--btn-bg:transparent;--btn-fg:var(--rescate-texto);--btn-bd:transparent;padding-inline:.4rem;min-height:2.5rem}
.btn--fantasma:hover{--btn-bg:transparent;--btn-fg:var(--rescate-texto-hover);transform:none;box-shadow:none;text-decoration:underline}
.btn--g{font-size:1.075rem;padding:1rem 1.85rem;min-height:3.4rem}
.btn--bloque{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
.botonera{display:flex;flex-wrap:wrap;gap:.85rem}

/* --- Cabecera ------------------------------------------------------------
   Va fija y transparente encima de la banda azul con la que abren todas las
   páginas —el héroe en la portada, .cab-pagina en las demás— y sólo se vuelve
   opaca al bajar. Todo su color pasa por variables porque el contenido tiene
   que ser claro sobre el azul y oscuro sobre el blanco: son dos temas dentro
   de la misma barra, y escribir los colores a pelo obliga a duplicar cada
   regla. El estado lo pone principal.js con data-desplazada.
   ----------------------------------------------------------------------- */
.cabecera{
  --cab-fg:#fff;
  --cab-fg-2:rgba(255,255,255,.88);
  --cab-acento:var(--rescate-claro);
  --cab-linea:rgba(255,255,255,.28);
  /* .06 y no .10: el velo del hover aclara el fondo, y con el más claro el
     naranja del enlace activo se quedaba en 4,31:1 sobre el verde. */
  --cab-fondo-btn:rgba(255,255,255,.06);
  /* La marca reducida: el ave toma el color del texto y el flotador el naranja
     que se lee sobre cada fondo. Son dibujo, no texto, así que no les aplica
     el umbral de contraste, pero tienen que cambiar igual con la barra. */
  --disco-fondo:radial-gradient(ellipse closest-side,#F7F3EB 62%,rgba(247,243,235,.3) 80%,rgba(247,243,235,0) 100%);
  --enlace:var(--rescate-claro);
  --enlace-hover:#fff;

  position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.cabecera[data-desplazada="true"]{
  --cab-fg:var(--tinta);
  --cab-fg-2:var(--tinta-2);
  --cab-acento:var(--rescate-texto);
  --cab-linea:var(--linea);
  --cab-fondo-btn:var(--superficie);
  --disco-fondo:none;
  --enlace:var(--rescate-texto);
  --enlace-hover:var(--rescate-texto-hover);

  /* 96% y no 92%: por debajo de la barra puede pasar cualquier cosa, y con la
     barra más transparente el naranja del «CD» caía a 4,33:1 sobre un fondo
     oscuro. A 96% pasa 4,74:1 contra el peor fondo posible y se sigue viendo
     el esmerilado. No es texto grande: 17,3px en negrita se queda justo por
     debajo de los 18,66px que rebajarían la exigencia a 3:1. */
  background:color-mix(in srgb,var(--superficie) 96%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom-color:var(--linea-suave);
  box-shadow:var(--sombra-s);
}
.cabecera .contenedor{display:flex;align-items:center;gap:.75rem;min-height:var(--h-cab)}
/* min-width:0 permite que el bloque de texto se encoja en lugar de empujar
   los botones fuera del contenedor en pantallas estrechas. */
/* `a.logo` y no `.logo`: la marca es un enlace, y con un solo punto de
   especificidad `a:not(.btn){color:var(--enlace)}` le gana y pinta el nombre
   del club del naranja de los enlaces. Es la misma trampa que dejaba los
   botones sin letras; aquí no las borraba, sólo cambiaba el color por uno que
   nadie había elegido. */
/* El relleno vertical es lo que le da los 24px de zona pulsable: sin el
   escudo al lado, el enlace medía exactamente lo que la línea de texto. */
a.logo{
  display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--cab-fg);
  min-width:0;flex:0 1 auto;padding-block:.45rem;margin-block:-.45rem;
}
a.logo:hover{color:var(--cab-fg)}

/* El escudo va dentro de un disco claro, y ésta es la tercera vez que se
   intenta otra cosa: desnudo sobre el azul los contornos negros se funden con
   el fondo, y un halo alrededor sólo añade una nube gris —el cisne seguía sin
   distinguirse—. Es un dibujo de trazo fino pensado para ir sobre blanco, así
   que la única solución honesta es devolverle ese fondo.
   Pero un círculo opaco de borde duro corta demasiado: el salto del azul al
   blanco es brusco y el disco pesa más que el escudo. Por eso el fondo es un
   degradado radial que se disuelve en el azul —centro macizo donde apoya el
   dibujo, borde que se desvanece— y el tono es hueso, no blanco puro, para
   rebajar el salto de brillo. En la barra clara el disco desaparece del todo:
   ahí el escudo ya está sobre su fondo. */
.logo-disco{
  /* La caja es más ancha que alta y bastante mayor que el escudo, porque el
     halo necesita sitio para apagarse. Con una caja ajustada el degradado
     todavía no había llegado a transparente cuando el borde lo cortaba, y ese
     corte se veía como un recuadro. Los márgenes negativos evitan que tanto
     aire separe la marca del nombre o engorde la barra: el halo es fondo, no
     ocupa sitio. */
  width:6rem;height:4.2rem;flex:none;
  margin-block:-.3rem;margin-inline:-.8rem -.55rem;
  background:var(--disco-fondo);
  display:grid;place-items:center;
}
.logo-disco img{width:auto;height:2.5rem;display:block}
@media (max-width:400px){
  .logo-disco{width:5rem;height:3.6rem}
  .logo-disco img{height:2.05rem}
}
@media (min-width:1000px){
  .logo-disco{width:6.6rem;height:4.7rem}
  .logo-disco img{height:2.7rem}
}

/* En la cabecera no va el escudo completo, sino una marca reducida.
   El escudo del club es una ilustración de línea —cisne perfilado en negro,
   alas abiertas, flotador y el nombre rodeándolo— con demasiado detalle para
   sobrevivir a 48px. Suelto sobre el fondo oscuro se convertía en una mancha;
   metido en una bandeja blanca se leía, pero cargaba la barra de un bloque
   que no pintaba nada. Un logotipo bien compuesto identifica igual y respira.
   El escudo sigue en el sitio, en el pie, donde tiene sitio para verse. */
.logo-txt{display:block;min-width:0}
.logo b{
  font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.015em;
  font-variation-settings:'opsz' 72;
  line-height:1;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* «CD» dice el tipo de entidad, no el nombre. Va pequeño, en palo seco y en
   versalitas espaciadas: el contraste con el serif es lo que lo hace parecer
   una marca y no un titular. */
.logo-cd{
  font-family:var(--ui);color:var(--cab-acento);
  font-size:.5em;font-weight:700;letter-spacing:.16em;
  margin-right:.55em;vertical-align:.16em;
}
@media (max-width:400px){.logo b{font-size:1.2rem}}
@media (min-width:1000px){.logo b{font-size:1.72rem}}

.nav-principal{margin-left:auto;display:none}
.nav-principal ul{display:flex;gap:.15rem;list-style:none;margin:0;padding:0}
.nav-principal a{
  font-family:var(--ui);font-weight:500;font-size:.95rem;
  color:var(--cab-fg-2);text-decoration:none;padding:.6rem .7rem;border-radius:var(--r-s);
  display:block;transition:color .15s,background .15s;position:relative;
}
.nav-principal a:hover{color:var(--cab-fg);background:var(--cab-fondo-btn)}
.nav-principal a[aria-current="page"]{color:var(--cab-acento);font-weight:600}
.nav-principal a[aria-current="page"]::after{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:.25rem;height:2px;
  background:var(--cab-acento);border-radius:2px;
}
.cab-acciones{margin-left:auto;display:flex;align-items:center;gap:.6rem}
@media (min-width:1000px){
  .nav-principal{display:block}
  .cab-acciones{margin-left:0}
}

.menu-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:2.85rem;height:2.85rem;border-radius:var(--r-s);
  border:1px solid var(--cab-linea);background:var(--cab-fondo-btn);color:var(--cab-fg);cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.menu-btn:hover{border-color:var(--cab-fg);background:var(--cab-fondo-btn)}
@media (min-width:1000px){.menu-btn{display:none}}
.cta-cabecera{display:none}
@media (min-width:700px){.cta-cabecera{display:inline-flex}}

/* --- Menú móvil --------------------------------------------------------- */
.menu-movil{
  position:fixed;inset:0;z-index:150;background:var(--profundo);
  display:flex;flex-direction:column;padding:1.25rem;
  transform:translateX(100%);transition:transform .28s ease;visibility:hidden;
}
.menu-movil[data-abierto="true"]{transform:translateX(0);visibility:visible}
.menu-movil-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}
.menu-movil-cab .cerrar{
  width:2.85rem;height:2.85rem;border-radius:var(--r-s);border:1px solid rgba(255,255,255,.25);
  background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.menu-movil nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.menu-movil nav a{
  font-family:var(--ui);font-size:1.5rem;font-weight:600;color:#fff;
  text-decoration:none;padding:.7rem 0;display:block;border-bottom:1px solid rgba(255,255,255,.12);
}
.menu-movil nav a[aria-current="page"]{color:var(--rescate-claro)}
.menu-movil .pie-menu{margin-top:auto;padding-top:2rem;display:flex;flex-direction:column;gap:1rem}
.menu-movil .pie-menu a.tel{color:#EDF2F6;font-size:1.05rem;text-decoration:none;display:flex;align-items:center;gap:.5rem}

/* --- Héroe: composición partida ----------------------------------------
   Texto sobre azul profundo, fotografía a sangre por la derecha con un
   fundido hacia el azul. En móvil se apilan: primero el mensaje, luego la
   foto (así el texto es lo primero que se pinta).
   ----------------------------------------------------------------------- */
.heroe{position:relative;background:var(--profundo);color:#fff;overflow:hidden}
/* Velo oscuro en la franja de arriba. La barra va fija y transparente, y en
   pantalla ancha la foto llega hasta el borde superior derecho: sin este velo
   los enlaces de la navegación caen sobre la parte clara de la imagen. */
.heroe::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:calc(var(--h-cab) + 4rem);
  background:linear-gradient(180deg,rgba(18,39,64,.88) 0%,rgba(18,39,64,.5) 55%,rgba(18,39,64,0) 100%);
  z-index:2;pointer-events:none;
}
/* El relleno de arriba lleva sumado el alto de la barra fija, que va
   transparente por encima de esta banda. */
.heroe .contenedor{
  position:relative;z-index:3;
  padding-top:calc(var(--h-cab) + clamp(2.75rem,2rem + 4vw,5rem));
  padding-bottom:clamp(2.75rem,2rem + 4vw,5rem);
}
.heroe-txt{max-width:34rem;display:flex;flex-direction:column;gap:1.4rem}

.heroe-foto{position:relative;height:clamp(14rem,45vw,20rem);margin-top:.5rem}
/* El encuadre no va centrado: la nadadora está a la izquierda del original y
   el degradado le comía la cabeza. Desplazarlo la trae a la zona limpia. */
.heroe-foto img{width:100%;height:100%;object-fit:cover;object-position:38% 46%}
.heroe-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,39,64,.55) 0%,rgba(18,39,64,0) 35%);
}
@media (min-width:900px){
  .heroe-foto{
    position:absolute;right:0;top:0;bottom:0;width:47%;height:auto;margin:0;z-index:1;
  }
  .heroe-foto::after{
    background:
      linear-gradient(90deg,var(--profundo) 0%,rgba(18,39,64,.72) 22%,rgba(18,39,64,0) 62%),
      linear-gradient(180deg,rgba(18,39,64,.35) 0%,rgba(18,39,64,.15) 100%);
  }
  .heroe .contenedor{
    padding-top:calc(var(--h-cab) + clamp(3rem,2rem + 3.5vw,4.75rem));
    padding-bottom:clamp(3rem,2rem + 3.5vw,4.75rem);
    min-height:33rem;display:flex;align-items:center;
  }
}
.heroe-etiqueta{
  display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  background:var(--rescate);color:#fff;border-radius:99px;padding:.4rem .9rem;
  font-family:var(--ui);font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.heroe-etiqueta .punto{width:.5rem;height:.5rem;border-radius:99px;background:#fff;flex:none;animation:latido 2.4s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.35}}
.heroe h1{
  font-size:clamp(2.05rem,1.5rem + 2.3vw,3.15rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.04;color:#fff;
}
.heroe h1 em{
  font-style:normal;color:var(--rescate-claro);display:block;
  font-size:.36em;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  line-height:1.25;margin-top:.75rem;
}
.heroe-entrada{font-size:clamp(1.02rem,.98rem + .3vw,1.15rem);color:#D9E3EB;max-width:32rem}
.heroe .botonera{margin-top:.35rem}
.heroe-nota{font-size:.9rem;color:#A7BAC8;display:flex;align-items:center;gap:.45rem}

/* Cifras del héroe. Ya no son otra franja azul pegada debajo: van en una
   tarjeta blanca montada a caballo sobre el borde del héroe, con un margen
   negativo que la sube. Es el gesto que rompe la sensación de bandas
   apiladas justo donde más se nota, nada más empezar a bajar.
   Las separaciones se hacen con `gap:1px` sobre un fondo de línea, y no con
   bordes: así salen igual de limpias con dos columnas que con cuatro. */
.heroe-cifras{
  position:relative;z-index:4;
  margin-top:calc(var(--paso) * -.5);
  margin-bottom:calc(var(--paso) * .2);
}
.heroe-cifras .contenedor{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;padding:0;
  background:var(--linea);
  border:1px solid var(--linea);
  border-radius:var(--r-g);
  box-shadow:var(--sombra-g);
  overflow:hidden;
}
@media (min-width:760px){.heroe-cifras .contenedor{grid-template-columns:repeat(4,1fr)}}
.cifra{background:var(--superficie);padding:1.55rem 1.4rem}
.cifra .n{font-family:var(--display);font-size:1.9rem;font-weight:800;color:var(--tinta);letter-spacing:-.03em;line-height:1;display:block}
.cifra .n small{font-size:.9rem;font-weight:600;color:var(--rescate-texto)}
.cifra .e{font-size:.85rem;color:var(--tenue);margin-top:.45rem;display:block;line-height:1.45}

/* --- Cabecera de página interior ---------------------------------------- */
.cab-pagina{
  background:var(--profundo);color:#fff;
  padding-top:calc(var(--h-cab) + clamp(2.25rem,1.6rem + 2.6vw,3.75rem));
  padding-bottom:clamp(2.25rem,1.6rem + 2.6vw,3.75rem);
}
.cab-pagina h1{
  font-size:clamp(1.9rem,1.45rem + 2vw,2.9rem);font-weight:800;color:#fff;
  letter-spacing:-.035em;line-height:1.06;max-width:22ch;
}
.cab-entrada{color:#CBD9E3;font-size:1.075rem;max-width:52ch;margin-top:1rem}
.migas{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  font-size:.85rem;color:#A7BAC8;margin-bottom:1.1rem;
}
/* padding-block para llegar a los 24 px de alto pulsable sin separar la fila:
   el margen negativo devuelve el espacio que el relleno añadiría. */
.migas a{color:#CBD9E3;text-decoration:none;display:inline-block;padding-block:.2rem;margin-block:-.2rem}
.migas a:hover{color:#fff;text-decoration:underline}
.migas svg{width:14px;height:14px;opacity:.55}
.migas [aria-current]{color:#fff;font-weight:600}

/* --- Rejillas ----------------------------------------------------------- */
.rejilla{display:grid;gap:1.25rem}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}

/* --- Tarjeta de valor --------------------------------------------------- */
.valor{
  background:var(--superficie);border:1px solid var(--linea-suave);border-radius:var(--r-m);
  padding:1.6rem;display:flex;flex-direction:column;gap:.75rem;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.valor:hover{border-color:var(--azul);box-shadow:var(--sombra-m);transform:translateY(-2px)}
.valor-icono{
  width:2.9rem;height:2.9rem;border-radius:var(--r-s);flex:none;
  background:var(--azul-tinte);color:var(--azul);
  display:flex;align-items:center;justify-content:center;
}
.valor h3{font-size:1.1rem}
.valor p{color:var(--tinta-2);font-size:.96rem}

/* Los mismos cuatro contenidos, pero en filas separadas por una línea en vez
   de en cuatro tarjetas idénticas. Los precios y la tienda ya usan rejilla de
   tarjetas; repetirla aquí era la tercera vez en la misma página. */
.lista-valores{display:flex;flex-direction:column}
.lista-valores .valor{
  background:none;border:0;border-top:1px solid var(--linea);border-radius:0;
  padding:1.5rem 0;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.35rem 1.25rem;
}
.lista-valores .valor:first-child{border-top:0;padding-top:0}
.lista-valores .valor:hover{box-shadow:none;transform:none;border-color:var(--linea)}
.lista-valores .valor:first-child:hover{border-top-width:0}
.lista-valores .valor-icono{grid-row:1/3;align-self:start}
.lista-valores .valor h3{align-self:center;margin:0}

/* --- Tarjeta de grupo (precios) ----------------------------------------- */
/* 20rem de mínimo hace que en escritorio salgan 3 columnas: con 9 grupos
   la rejilla cuadra en 3×3 y no queda una fila coja. */
.grupos{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.grupo{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-m);
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.grupo:hover{border-color:var(--azul);box-shadow:var(--sombra-m);transform:translateY(-2px)}
.grupo-cinta{
  background:var(--rescate);color:#fff;font-family:var(--ui);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:.4rem 1.25rem;text-align:center;
}
.grupo-cab{display:flex;flex-direction:column;gap:.3rem}
.grupo h3{font-size:1.25rem}
.grupo-edad{font-size:.86rem;color:var(--azul);font-weight:600;font-family:var(--ui);letter-spacing:.01em}
.grupo-precio{display:flex;align-items:baseline;gap:.4rem;padding-block:.3rem}
.grupo-precio .imp{font-family:var(--display);font-size:2.3rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--tinta)}
.grupo-precio .per{font-size:.86rem;color:var(--tenue)}
.grupo-datos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;font-size:.92rem;color:var(--tinta-2)}
.grupo-datos li{display:flex;gap:.6rem;align-items:flex-start}
.grupo-datos svg{flex:none;color:var(--azul);margin-top:.18rem}
.grupo-desc{font-size:.92rem;color:var(--tenue);line-height:1.55}
.grupo-pie{padding:0 1.4rem 1.4rem;margin-top:auto}

/* Aviso de descuento */
.aviso-descuento{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--aviso-tinte);border:1px solid color-mix(in srgb,var(--aviso) 40%,transparent);
  border-radius:var(--r-m);padding:1.15rem 1.35rem;margin-top:1.5rem;
}
.aviso-descuento svg{flex:none;color:var(--aviso);margin-top:.15rem}
.aviso-descuento p{font-size:.96rem;color:var(--tinta)}
.aviso-descuento b{font-weight:700}

/* --- Pasos -------------------------------------------------------------- */
.pasos{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));counter-reset:paso}
.paso{position:relative;padding-top:3.6rem;display:flex;flex-direction:column;gap:.55rem}
.paso::before{
  counter-increment:paso;content:counter(paso);
  position:absolute;top:0;left:0;
  width:2.75rem;height:2.75rem;border-radius:var(--r-s);
  background:var(--profundo);color:#fff;
  font-family:var(--display);font-size:1.3rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.paso h3{font-size:1.1rem}
.paso p{color:var(--tinta-2);font-size:.96rem}
.seccion--oscura .paso::before{background:var(--rescate)}
.seccion--oscura .paso p{color:#C0CFDB}

/* --- Producto (tienda) -------------------------------------------------- */
.producto{
  background:var(--superficie);border:1px solid var(--linea-suave);border-radius:var(--r-m);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.producto:hover{border-color:var(--azul);box-shadow:var(--sombra-m);transform:translateY(-2px)}
/* Bandeja blanca, no gris azulada: tres de las cuatro fotos vienen recortadas
   sobre blanco y con un fondo de color se les veía el rectángulo. */
.producto-img{
  aspect-ratio:1;background:var(--superficie);overflow:hidden;position:relative;display:block;
  border-bottom:1px solid var(--linea-suave);
}
.producto-img img{width:100%;height:100%;object-fit:contain;padding:1rem;transition:transform .3s}
.producto:hover .producto-img img{transform:scale(1.035)}
.producto-cuerpo{padding:1.1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.producto h3{font-size:1.02rem;line-height:1.25}
.producto h3 a{color:var(--tinta);text-decoration:none;display:inline-block;padding-block:.15rem}
/* --enlace-hover y no --rescate: éste es el naranja de FONDO y no cambia entre
   temas, así que como color de texto se quedaba en 2,82:1 en modo oscuro. */
.producto h3 a:hover{color:var(--enlace-hover)}
.producto-desc{font-size:.88rem;color:var(--tenue);line-height:1.5}
.producto-pie{margin-top:auto;padding:0 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.7rem}
.producto-precio{font-family:var(--display);font-size:1.35rem;font-weight:800;color:var(--tinta);letter-spacing:-.03em}
.producto-precio .desde{font-size:.8rem;font-weight:600;color:var(--tenue);letter-spacing:0}
.etiqueta-estado{
  position:absolute;top:.7rem;left:.7rem;z-index:2;
  font-family:var(--ui);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:var(--r-s);
}
.etiqueta-estado--agotado{background:var(--papel-3);color:var(--tinta-2)}

/* --- Franja de aviso / CTA ---------------------------------------------- */
.franja-cta{background:var(--profundo);color:#fff;border-radius:var(--r-g);padding:clamp(2rem,1.4rem + 2.4vw,3.25rem);position:relative;overflow:hidden}
.franja-cta::before{
  content:"";position:absolute;right:-6rem;top:-6rem;width:22rem;height:22rem;border-radius:50%;
  background:radial-gradient(circle,rgba(47,99,121,.6),transparent 68%);pointer-events:none;
}
.franja-cta .interior{position:relative;display:flex;flex-direction:column;gap:1.25rem;max-width:40rem}
.franja-cta h2{color:#fff}
.franja-cta p{color:#CBD9E3}

/* --- Contacto / ubicación ----------------------------------------------- */
.contacto-rejilla{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:860px){.contacto-rejilla{grid-template-columns:1fr 1fr;gap:3rem;align-items:start}}
.datos-contacto{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.25rem}
.datos-contacto li{display:flex;gap:.9rem;align-items:flex-start}
.datos-contacto .ic{
  width:2.5rem;height:2.5rem;border-radius:var(--r-s);flex:none;
  background:var(--azul-tinte);color:var(--azul);display:flex;align-items:center;justify-content:center;
}
.datos-contacto dt,.datos-contacto .t{
  font-family:var(--ui);font-weight:600;font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tenue);margin-bottom:.15rem;
}
.datos-contacto a{color:var(--tinta);text-decoration:none;font-size:1.05rem;font-weight:500;display:inline-block;padding-block:.2rem;margin-block:-.2rem}
.datos-contacto a:hover{color:var(--enlace-hover);text-decoration:underline}

/* --- Pie ---------------------------------------------------------------- */
.pie{background:var(--profundo);color:#C0CFDB;padding-block:3.5rem 0;margin-top:var(--paso)}
.pie a{color:#E1E9F0;text-decoration:none;display:inline-block;padding-block:.22rem}
.pie a:hover{color:#fff;text-decoration:underline}
.pie-rejilla{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media (min-width:700px){.pie-rejilla{grid-template-columns:1.4fr 1fr 1fr}}
@media (min-width:1000px){.pie-rejilla{grid-template-columns:1.6fr 1fr 1fr 1.1fr}}
.pie h3{
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#8DA6B6;margin-bottom:1rem;
}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem;font-size:.95rem}
/* padding vertical para que cada enlace llegue al mínimo táctil de 24 px */
.pie ul a{display:inline-block;padding-block:.3rem}
.pie-marca{display:flex;flex-direction:column;gap:1rem;max-width:22rem}
/* El escudo vive aquí, y no en la cabecera. Es un dibujo de trazo negro: sobre
   el verde profundo pierde el contorno, así que necesita un fondo claro sí o
   sí. La diferencia con la cabecera es el sitio —a 132px se le ven el cisne,
   las alas y el flotador, y la bandeja se lee como el marco de un emblema; a
   48px era un cromo apretado en mitad de la barra—. */
.pie-escudo{
  width:132px;height:auto;
  background:#FFFDF8;border-radius:var(--r-m);
  padding:.55rem .7rem;
}
.pie-nombre{
  font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;
  color:#fff;line-height:1.1;
}
.pie-nombre span{
  display:block;font-family:var(--texto);font-weight:500;font-size:.82rem;
  letter-spacing:.04em;color:var(--rescate-claro);margin-top:.3rem;
}
.pie-marca p{font-size:.93rem;line-height:1.6}
.pie-social{display:flex;gap:.6rem}
.pie-social a{
  width:2.5rem;height:2.5rem;border-radius:var(--r-s);border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;color:#E1E9F0;transition:background .15s,border-color .15s;
}
.pie-social a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}
.pie-legal{
  margin-top:3rem;border-top:1px solid rgba(255,255,255,.14);
  padding-block:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;
  font-size:.87rem;color:#98AEBD;
}
.pie-legal nav{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;margin-left:auto}

/* --- Contenido de texto (páginas legales, artículos) -------------------- */
.prosa{max-width:var(--ancho-texto);display:flex;flex-direction:column;gap:1.15rem;font-size:1.0625rem}
.prosa h2{font-size:clamp(1.35rem,1.2rem + .7vw,1.75rem);margin-top:1.5rem}
.prosa h3{font-size:1.15rem;margin-top:1rem}
.prosa ul,.prosa ol{padding-left:1.35rem;display:flex;flex-direction:column;gap:.5rem}
.prosa li::marker{color:var(--rescate-texto)}
.prosa strong{font-weight:700}
.prosa a{text-decoration:underline}

/* --- Tabla -------------------------------------------------------------- */
.tabla-env{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--r-m);background:var(--superficie)}
/* El correo y el teléfono de la ficha legal van solos en su celda, así que
   cuentan como zona pulsable propia y necesitan los 24 px de alto. */
.tabla-env td > a:only-child{display:inline-block;padding-block:.2rem}
table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:32rem}
th,td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--linea-suave)}
/* Sólo las cabeceras de columna llevan versalitas. Las cabeceras de fila
   (`th scope="row"`) son nombres propios y van como texto normal. */
thead th{
  font-family:var(--ui);font-size:.74rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tenue);background:var(--papel-2);
  border-bottom:1px solid var(--linea);white-space:nowrap;
}
tbody th[scope="row"]{
  font-family:var(--display);font-weight:650;font-size:.98rem;color:var(--tinta);
  letter-spacing:-.01em;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--papel-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.precio-tabla{font-family:var(--display);font-weight:700;color:var(--tinta)}

/* --- Utilidades --------------------------------------------------------- */
.centro{text-align:center}
.marco-foto{border-radius:var(--r-m);overflow:hidden;border:1px solid var(--linea-suave);background:var(--papel-2)}
.marco-foto img{width:100%;height:100%;object-fit:cover}
.badge{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--ui);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:var(--r-s);background:var(--azul-tinte);color:var(--azul);
}

/* --- Fila destacada en tablas de precios -------------------------------- */
.fila-destacada{background:var(--rescate-tinte)}
.fila-destacada th[scope="row"]{color:var(--rescate-texto)}
tbody tr.fila-destacada:hover{background:var(--rescate-tinte)}
table caption{text-align:left}

/* --- Páginas legales ---------------------------------------------------- */
.aviso-borrador{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--aviso-tinte);border:1px solid color-mix(in srgb,var(--aviso) 45%,transparent);
  border-radius:var(--r-m);padding:1.15rem 1.35rem;margin-bottom:2rem;font-size:.95rem;
}
.aviso-borrador svg{flex:none;color:var(--aviso);margin-top:.15rem}
.aviso-borrador code{
  font-family:var(--mono);font-size:.88em;background:var(--papel-3);
  padding:.1rem .3rem;border-radius:3px;
}
.aviso-ok{
  background:var(--exito-tinte);border:1px solid color-mix(in srgb,var(--exito) 40%,transparent);
  border-radius:var(--r-m);padding:1.15rem 1.35rem;
}
.pendiente{
  background:var(--aviso-tinte);color:var(--aviso);font-weight:600;
  padding:.1rem .4rem;border-radius:3px;font-size:.92em;
}
.nota-fecha{
  margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--linea);
  font-size:.88rem;color:var(--tenue);
}
.prosa .tabla-env{margin-block:.5rem}
.prosa code{
  font-family:var(--mono);font-size:.88em;background:var(--papel-2);
  padding:.1rem .35rem;border-radius:3px;
}

/* ==========================================================================
   Formularios
   La web antigua pedía subir el DNI y la tarjeta sanitaria en un formulario
   público. Aquí sólo se piden los datos mínimos y la documentación se
   entrega en mano, que es lo que corresponde con datos de menores.
   ========================================================================== */
.formulario{display:flex;flex-direction:column;gap:2rem}
fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem}
legend{
  font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;
  color:var(--tinta);padding:0;margin-bottom:.35rem;
}
.leyenda-ayuda{font-size:.92rem;color:var(--tenue);margin-top:-.65rem}

.campos{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.campo{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.campo--ancho{grid-column:1/-1}
.campo label{
  font-family:var(--ui);font-weight:600;font-size:.9rem;color:var(--tinta);
  display:flex;align-items:center;gap:.35rem;
}
.campo .req{color:var(--rescate-texto);font-weight:700}
.campo .ayuda{font-size:.83rem;color:var(--tenue);line-height:1.45}

input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=number],input[type=search],select,textarea{
  font-family:var(--texto);font-size:1rem;color:var(--tinta);
  background:var(--superficie);border:1.5px solid var(--linea);border-radius:var(--r-s);
  padding:.7rem .85rem;min-height:3rem;width:100%;
  transition:border-color .15s,box-shadow .15s;
}
textarea{min-height:7rem;resize:vertical;line-height:1.55}
select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B7383' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;background-size:1.15rem;
  padding-right:2.6rem;cursor:pointer;
}
input:hover,select:hover,textarea:hover{border-color:var(--tenue)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 3px color-mix(in srgb,var(--azul) 22%,transparent);
}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
input::placeholder,textarea::placeholder{color:var(--tenue);opacity:.75}

/* Estado de error, anunciado también por texto (no sólo por color) */
.campo[data-error="true"] input,
.campo[data-error="true"] select,
.campo[data-error="true"] textarea{border-color:var(--error);background:var(--error-tinte)}
.campo-error{
  display:none;font-size:.85rem;color:var(--error);font-weight:600;
  align-items:center;gap:.35rem;
}
.campo[data-error="true"] .campo-error{display:flex}

/* Casillas y opciones */
.consentimiento{
  display:flex;gap:.85rem;align-items:flex-start;
  background:var(--papel-2);border:1px solid var(--linea-suave);
  border-radius:var(--r-m);padding:1rem 1.1rem;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.consentimiento:hover{border-color:var(--azul);background:var(--azul-tinte)}
/* Los checkbox se pintan a mano, y la regla va suelta y no dentro de
   .consentimiento a propósito: el de «2º miembro de la familia» está fuera de
   esa caja y se había quedado con el del navegador —13×13 px, gris y
   descuadrado respecto a los otros cuatro—. A 1,5rem cumplen además los 24 px
   mínimos de zona pulsable (WCAG 2.5.8). */
input[type=checkbox]{
  appearance:none;flex:none;width:1.5rem;height:1.5rem;margin:.1rem 0 0;
  border:2px solid var(--tenue);border-radius:4px;background:var(--superficie);
  cursor:pointer;transition:background .15s,border-color .15s;position:relative;
}
input[type=checkbox]:checked{background:var(--rescate);border-color:var(--rescate)}
input[type=checkbox]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
input[type=checkbox]:focus-visible{outline:3px solid var(--rescate-texto);outline-offset:2px}
/* Casilla que va suelta, fuera de una caja .consentimiento. */
.casilla-suelta{display:flex;gap:.7rem;align-items:center;cursor:pointer;font-weight:500}
.casilla-suelta input[type=checkbox]{margin:0}

.consentimiento .txt{font-size:.94rem;line-height:1.5;color:var(--tinta-2)}
.consentimiento .txt b{color:var(--tinta);font-weight:650;display:block;margin-bottom:.15rem}
.consentimiento[data-error="true"]{border-color:var(--error);background:var(--error-tinte)}
.consentimiento .opcional{
  font-family:var(--ui);font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tenue);background:var(--papel-3);
  padding:.15rem .4rem;border-radius:3px;margin-left:.4rem;vertical-align:middle;
}

/* Resumen lateral pegajoso */
.form-rejilla{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media (min-width:940px){
  .form-rejilla{grid-template-columns:minmax(0,1fr) 20rem;align-items:start;gap:3rem}
  .resumen{position:sticky;top:6.5rem}
}
.resumen{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-m);
  padding:1.4rem;display:flex;flex-direction:column;gap:1rem;box-shadow:var(--sombra-s);
}
.resumen h2{font-size:1.1rem}
.resumen-linea{display:flex;justify-content:space-between;gap:1rem;font-size:.95rem;padding-block:.35rem}
.resumen-linea dt{color:var(--tenue)}
.resumen-linea dd{margin:0;font-weight:600;text-align:right;color:var(--tinta)}
.resumen-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-top:2px solid var(--linea);padding-top:.9rem;margin-top:.3rem;
}
.resumen-total .et{font-family:var(--display);font-weight:700;font-size:.95rem}
.resumen-total .imp{font-family:var(--display);font-weight:800;font-size:1.9rem;letter-spacing:-.03em;color:var(--tinta)}
.resumen .nota{font-size:.85rem;color:var(--tenue);line-height:1.5}

/* Mensaje de resultado del envío */
.form-resultado{
  display:none;gap:1rem;align-items:flex-start;border-radius:var(--r-m);
  padding:1.2rem 1.35rem;font-size:.96rem;
}
.form-resultado[data-tipo="ok"]{display:flex;background:var(--exito-tinte);border:1px solid var(--exito);color:var(--tinta)}
.form-resultado[data-tipo="error"]{display:flex;background:var(--error-tinte);border:1px solid var(--error);color:var(--tinta)}
.form-resultado svg{flex:none;margin-top:.1rem}
.form-resultado[data-tipo="ok"] svg{color:var(--exito)}
.form-resultado[data-tipo="error"] svg{color:var(--error)}

/* --- Tienda: barra de filtros ------------------------------------------- */
.tienda-barra{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  justify-content:space-between;margin-bottom:2rem;
}
.filtros{display:flex;flex-wrap:wrap;gap:.5rem}
.filtro{
  font-family:var(--ui);font-weight:600;font-size:.92rem;
  padding:.55rem 1rem;min-height:2.75rem;
  background:var(--superficie);color:var(--tinta-2);
  border:1.5px solid var(--linea);border-radius:99px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.filtro:hover{border-color:var(--azul);color:var(--tinta)}
.filtro[aria-pressed="true"]{
  background:var(--profundo);border-color:var(--profundo);color:#fff;
}
.tienda-cuenta{font-size:.9rem;color:var(--tenue)}
.sin-resultados{
  text-align:center;padding:3rem 1rem;color:var(--tenue);
  border:1px dashed var(--linea);border-radius:var(--r-m);
}

/* Aquí vivía la cesta de la compra: el aviso flotante al añadir, la lista de
   líneas, el selector de cantidad y el botón «añadido». La web pasó a ser sólo
   informativa —el material se encarga y se paga en la instalación— y todo eso
   se quedó sin marcado que lo usara. Sobrevive el botón de quitar, que la
   página de inscripciones reaprovecha para su tabla; se le han quitado las
   áreas de rejilla, que ya no tienen rejilla donde encajar. */
.cesta-item-quitar{
  background:transparent;border:0;color:var(--tenue);cursor:pointer;
  width:2.5rem;height:2.5rem;border-radius:var(--r-s);
  display:flex;align-items:center;justify-content:center;
}
.cesta-item-quitar:hover{background:var(--error-tinte);color:var(--error)}

/* --- Documentos de competición ------------------------------------------ */
.documento{
  margin:0;background:var(--superficie);border:1px solid var(--linea);
  border-radius:var(--r-m);overflow:hidden;display:flex;flex-direction:column;
}
.documento figcaption{
  padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;
}
.documento figcaption strong{font-family:var(--display);font-size:1.05rem;letter-spacing:-.015em}

/* --- Noticias ------------------------------------------------------------ */
.noticia-destacada{
  display:grid;gap:0;background:var(--superficie);
  border:1px solid var(--linea);border-radius:var(--r-g);overflow:hidden;
}
@media (min-width:880px){
  .noticia-destacada{grid-template-columns:26rem 1fr;align-items:stretch}
}
.noticia-img{display:block;background:var(--papel-2);overflow:hidden;max-height:26rem}
.noticia-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.noticia-txt{
  padding:clamp(1.5rem,1.2rem + 1.4vw,2.5rem);
  display:flex;flex-direction:column;gap:.9rem;justify-content:center;
}
.noticia-txt h2{font-size:clamp(1.35rem,1.15rem + 1vw,1.9rem)}
.noticia-txt p{color:var(--tinta-2)}
.noticia-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;font-size:.87rem;color:var(--tenue)}

.noticia{
  background:var(--superficie);border:1px solid var(--linea-suave);border-radius:var(--r-m);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.noticia:hover{border-color:var(--azul);box-shadow:var(--sombra-m);transform:translateY(-2px)}
.noticia-card-img{aspect-ratio:3/2;background:var(--papel-2);overflow:hidden}
.noticia-card-img img{width:100%;height:100%;object-fit:cover}
.noticia-card-txt{padding:1.15rem;display:flex;flex-direction:column;gap:.6rem}
.noticia-card-txt h3{font-size:1.05rem;line-height:1.3}
.noticia-card-txt p{font-size:.92rem;color:var(--tenue);line-height:1.55}

/* --- Modalidades (tarjeta con grupos dentro) ---------------------------- */
.modalidades{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.modalidad{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-m);
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.modalidad:hover{border-color:var(--azul);box-shadow:var(--sombra-m);transform:translateY(-2px)}
.modalidad--destacada{border-color:var(--rescate-texto);border-width:2px}
.modalidad-cuerpo{padding:1.4rem;display:flex;flex-direction:column;gap:.9rem;flex:1}

.grupos-dentro{
  margin-top:.35rem;padding-top:1rem;border-top:1px solid var(--linea-suave);
}
.grupos-dentro h4{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tenue);margin-bottom:.7rem;
}
.grupos-dentro ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.grupos-dentro li{
  display:grid;gap:.15rem .6rem;grid-template-columns:1fr auto;align-items:baseline;
  background:var(--papel-2);border-radius:var(--r-s);padding:.55rem .7rem;
}
.gd-nombre{font-family:var(--display);font-weight:650;font-size:.94rem;color:var(--tinta)}
.gd-dias{grid-column:1/-1;font-size:.8rem;color:var(--tenue)}

/* --- Selector de modalidad en el formulario ----------------------------- */
.opciones-modalidad{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.opcion-modalidad{
  position:relative;display:block;cursor:pointer;
  border:1.5px solid var(--linea);border-radius:var(--r-m);background:var(--superficie);
  padding:1rem 1.1rem;transition:border-color .15s,background .15s,box-shadow .15s;
}
.opcion-modalidad:hover{border-color:var(--azul);background:var(--azul-tinte)}
.opcion-modalidad input{position:absolute;opacity:0;width:0;height:0}
.opcion-modalidad:has(input:checked){
  border-color:var(--rescate-texto);border-width:2px;background:var(--rescate-tinte);
  padding:calc(1rem - .5px) calc(1.1rem - .5px);
}
.opcion-modalidad:has(input:focus-visible){outline:3px solid var(--rescate-texto);outline-offset:2px}
.om-cuerpo{display:flex;flex-direction:column;gap:.2rem}
.om-nombre{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--tinta)}
.om-frec{font-size:.85rem;color:var(--tenue)}
.om-precio{
  font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;
  color:var(--tinta);margin-top:.3rem;
}
.om-precio small{font-size:.72rem;font-weight:600;color:var(--tenue);letter-spacing:0;margin-left:.2rem}
.opciones-modalidad[data-error="true"] .opcion-modalidad{border-color:var(--error)}

/* --- Competición: cifras y enlaces oficiales ---------------------------- */
.cifras-temporada{
  display:grid;gap:1px;background:var(--linea-suave);border:1px solid var(--linea);
  border-radius:var(--r-m);overflow:hidden;margin-bottom:2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));
}
.cifras-temporada > div{background:var(--superficie);padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.2rem}
.cifras-temporada .n{
  font-family:var(--display);font-size:1.8rem;font-weight:800;letter-spacing:-.03em;
  line-height:1;color:var(--tinta);
}
.cifras-temporada .e{font-size:.85rem;color:var(--tenue);line-height:1.4}

.enlace-oficial{
  display:flex;flex-direction:column;gap:.55rem;align-items:flex-start;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-m);padding:1.25rem;text-decoration:none;color:#EDF2F6;
  transition:background .15s,border-color .15s,transform .15s;
}
.enlace-oficial:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);transform:translateY(-2px);color:#fff}
.enlace-oficial strong{font-family:var(--display);font-size:1.05rem;line-height:1.3;color:#fff}
.eo-desc{font-size:.9rem;color:#C0CFDB;line-height:1.5}
.eo-ir{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:.4rem;
  font-family:var(--ui);font-weight:600;font-size:.88rem;color:var(--rescate-claro);
}
.enlace-oficial .badge{background:rgba(255,255,255,.16);color:#fff}

/* --- Mapa de situación --------------------------------------------------- */
/* El plano va montado como una lámina enmarcada: paspartú de .6rem, filete
   interior y sombra con tinte azul. Con un borde de 1px a ras parecía una
   captura pegada en medio de la página. El radio interior es el exterior menos
   el paspartú (16px − 9,6px ≈ 6px = --r-s), que es lo que hace que las dos
   esquinas se vean concéntricas y no una dentro de otra a destiempo. */
.mapa{
  margin:0;padding:.6rem;
  background:var(--superficie);
  border:1px solid var(--linea);
  border-radius:var(--r-g);
  box-shadow:var(--sombra-m);
}
.mapa img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-s);
  border:1px solid var(--linea-suave);
}
.mapa figcaption{
  display:flex;flex-wrap:wrap;gap:.85rem 1rem;align-items:center;justify-content:space-between;
  padding:.9rem .4rem .15rem;
}
.mapa figcaption span{font-size:.82rem;color:var(--tenue);line-height:1.45;flex:1 1 13rem;min-width:0}
.mapa figcaption .btn{min-height:2.75rem;padding-inline:1.1rem;font-size:.94rem;flex:none}

/* --- Panel de acciones (inscripciones recibidas) ------------------------ */
.panel-acciones{
  display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-m);
  padding:1.1rem 1.35rem;margin-bottom:1.5rem;
}
.pa-info{display:flex;align-items:baseline;gap:.5rem}
.pa-n{font-family:var(--display);font-size:2rem;font-weight:800;letter-spacing:-.03em;color:var(--tinta);font-variant-numeric:tabular-nums}
.pa-t{font-size:.95rem;color:var(--tenue)}
.pa-botones{display:flex;flex-wrap:wrap;gap:.6rem}
.pa-botones .btn{min-height:2.85rem;font-size:.94rem}
/* El input de fichero va dentro de un <label> con pinta de botón */
.pa-botones label.btn{cursor:pointer}

/* --- Escalera de niveles dentro de cada modalidad ----------------------- */
.grupos-dentro li{grid-template-columns:auto 1fr;align-items:baseline}
.gd-nivel{
  grid-row:1/3;align-self:center;
  width:1.6rem;height:1.6rem;border-radius:50%;flex:none;
  background:var(--profundo);color:#fff;
  font-family:var(--ui);font-size:.78rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.gd-nivel--suelto{background:var(--papel-3);color:var(--tenue)}
.gd-dias{grid-column:2}
.gd-pista{font-size:.78rem;color:var(--tenue);margin:-.35rem 0 .6rem}