/* ==========================================================================
   CB Dominicos Zaragoza — hoja de estilos
   Paleta tomada del escudo del club: rojo dominico sobre blanco.
   ========================================================================== */

:root{
  --red:#e01f26;
  --red-2:#ff4b52;
  --bg:#0b0c0f;
  --bg-2:#111318;
  --bg-3:#171a21;
  --txt:#f4f5f7;
  --txt-2:#a2a8b5;
  --line:rgba(255,255,255,.10);
  --card:rgba(255,255,255,.035);
  --shadow:0 24px 60px rgba(0,0,0,.45);
  --r:18px;
  --wrap:1200px;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --disp:"Archivo Black","Archivo",system-ui,sans-serif;
}
[data-theme="light"]{
  --bg:#ffffff;
  --bg-2:#f5f6f8;
  --bg-3:#eceef2;
  --txt:#0b0c0f;
  --txt-2:#5c6371;
  --line:rgba(11,12,15,.12);
  --card:rgba(11,12,15,.03);
  --shadow:0 24px 60px rgba(11,12,15,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  overflow-x:hidden;
  transition:background .35s ease,color .35s ease;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.section{padding:clamp(48px,5.5vw,84px) 0;position:relative}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}

/* Retícula de 12 columnas. La usan las noticias: titular y entradilla a 12,
   texto y foto principal a 6 y 6, y la galería otra vez a 12. En móvil todo
   pasa a ancho completo, que es lo único que cabe. */
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(32px,4vw,56px) clamp(24px,3vw,44px);align-items:start}
.col-12{grid-column:span 12}
.col-6{grid-column:span 6}
@media (max-width:900px){
  .col-6{grid-column:span 12}
}

.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:12px 18px;z-index:100}
.skip:focus{left:12px;top:12px}

/* --- barra de progreso de scroll ---------------------------------------- */
.progress{
  position:fixed;inset:0 auto auto 0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--red),var(--red-2));
}

/* --- navegación ---------------------------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  padding:18px 0;transition:padding .3s ease,background .3s ease,backdrop-filter .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding:10px 0;background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:var(--line);
}
.nav__in{width:min(100% - 40px,var(--wrap));margin-inline:auto;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand img{border-radius:50%;background:#fff}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
/* En versales. Archivo Black tiene la «i» tan gruesa que el punto se pega
   al asta y «Dominicos» acaba leyéndose «Domlnlcos»; en mayúsculas no hay
   punto que confundir. La medida baja porque las versales ocupan más. */
.brand__txt b{font-family:var(--disp);font-size:17px;letter-spacing:.015em;text-transform:uppercase}
.brand__txt small{font-size:11px;color:var(--txt-2);letter-spacing:.12em;text-transform:uppercase}

.menu{display:flex;align-items:center;gap:26px}
.menu a{font-size:14.5px;color:var(--txt-2);position:relative;transition:color .2s}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--red);transition:right .28s ease}
.menu a:hover,.menu a.is-active{color:var(--txt)}
.menu a:hover::after,.menu a.is-active::after{right:0}
.menu__cta{
  background:var(--red);color:#fff!important;padding:9px 18px;border-radius:99px;font-weight:600;
}
.menu__cta::after{display:none}
.menu__cta:hover{background:var(--red-2)}

.nav__tools{display:flex;align-items:center;gap:10px}
.icon-btn{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;cursor:pointer;font-size:18px;transition:border-color .2s,transform .2s;
}
.icon-btn:hover{border-color:var(--red);transform:rotate(-12deg)}
.i-moon{display:none}
[data-theme="light"] .i-sun{display:none}
[data-theme="light"] .i-moon{display:inline}

.burger{display:none;width:42px;height:42px;border:1px solid var(--line);background:var(--card);border-radius:12px;cursor:pointer;padding:0}
.burger span{display:block;width:18px;height:2px;margin:3.5px auto;background:var(--txt);transition:transform .3s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:saturate(.9)}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(90% 70% at 15% 90%,rgba(224,31,38,.34),transparent 60%),
    linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 35%,rgba(0,0,0,.88) 100%);
}
[data-theme="light"] .hero__media::after{
  background:
    radial-gradient(90% 70% at 15% 90%,rgba(224,31,38,.30),transparent 60%),
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.2) 35%,rgba(0,0,0,.8) 100%);
}
.hero__in{position:relative;width:min(100% - 40px,var(--wrap));margin:0 auto;padding:0 0 clamp(90px,14vh,150px);color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:.85;margin:0 0 18px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red-2);box-shadow:0 0 0 0 rgba(255,75,82,.6);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(255,75,82,0)}100%{box-shadow:0 0 0 0 rgba(255,75,82,0)}}

/* Las tres lineas son un mismo bloque: se miran juntas, asi que sus tamanos
   guardan proporcion (1 : 1,8 : 0,45) y crecen a la vez con la ventana. El
   tope de la segunda linea esta puesto para que la palabra mas larga ocupe
   como mucho dos tercios del ancho del contenido, y no toda la pantalla. */
.hero__h1{font-family:var(--disp);margin:0;line-height:.9;letter-spacing:-.025em;text-transform:uppercase}
.hero__h1 span{display:block}
.hero__h1 .l1{font-size:clamp(34px,5.6vw,72px)}
.hero__h1 .l2{font-size:clamp(48px,9.6vw,128px);color:var(--red-2);text-shadow:0 3px 24px rgba(224,31,38,.3)}
.hero__h1 .l3{font-size:clamp(19px,2.6vw,32px);letter-spacing:.22em;opacity:.8}
.hero__p{max-width:52ch;margin:26px 0 32px;color:rgba(255,255,255,.86);font-size:clamp(16px,1.6vw,19px)}
/* Sin texto intermedio los botones quedarian pegados al titular. */
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3.5vh,38px)}
.hero__p + .hero__cta{margin-top:0}

/* --- botones ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:99px;
  font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.btn svg{width:18px;height:18px;transition:transform .25s ease}
.btn:hover svg{transform:translateX(4px)}
.btn--primary{background:var(--red);color:#fff;box-shadow:0 10px 30px rgba(224,31,38,.35)}
.btn--primary:hover{background:var(--red-2);transform:translateY(-2px)}
.btn--ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.section .btn--ghost{border-color:var(--line);color:var(--txt)}
.section .btn--ghost:hover{border-color:var(--red);background:var(--card)}

/* --- ticker -------------------------------------------------------------- */
.ticker{border-block:1px solid var(--line);background:var(--bg-2);overflow:hidden;padding:16px 0}
.ticker__track{display:flex;gap:28px;width:max-content;animation:slide 38s linear infinite;align-items:center}
.ticker span{font-family:var(--disp);font-size:clamp(18px,2.4vw,30px);text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap}
.ticker i{color:var(--red);font-style:normal;font-size:16px}
@keyframes slide{to{transform:translateX(-50%)}}

/* --- tipografía de sección ---------------------------------------------- */
.kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0 0 14px;font-weight:600}
.kicker--on{color:#fff;opacity:.8}
.h2{font-family:var(--disp);font-size:clamp(30px,4.6vw,58px);line-height:1;letter-spacing:-.03em;margin:0 0 18px;text-transform:uppercase}
.h2 em{font-style:normal;color:var(--red)}
.h2--sm{font-size:clamp(26px,3.2vw,38px)}
.h2--xl{font-size:clamp(36px,6vw,76px)}
.lead{color:var(--txt-2);max-width:56ch;margin:0 0 18px}
.sec-head{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;margin-bottom:34px}

.ticks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.ticks li{padding-left:32px;position:relative;color:var(--txt-2)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.45em;width:18px;height:10px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg);
}

/* --- stats --------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 24px;transition:transform .3s ease,border-color .3s ease;
}
.stat:hover{transform:translateY(-6px);border-color:var(--red)}
.stat b{display:block;font-family:var(--disp);font-size:clamp(32px,4vw,48px);line-height:1;color:var(--red);letter-spacing:-.03em}
.stat span{display:block;margin-top:10px;font-size:13.5px;color:var(--txt-2)}

/* --- equipos ------------------------------------------------------------- */
.equipos{background:var(--bg-2)}
.filters{display:flex;gap:9px;flex-wrap:wrap}
.chip{
  padding:9px 18px;border-radius:99px;border:1px solid var(--line);background:transparent;
  font-size:13.5px;cursor:pointer;color:var(--txt-2);transition:all .22s ease;
}
.chip:hover{color:var(--txt);border-color:var(--txt-2)}
.chip.is-on{background:var(--red);border-color:var(--red);color:#fff}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.card{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg-3);
  aspect-ratio:4/5;cursor:zoom-in;border:1px solid var(--line);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease,opacity .35s ease;
}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .4s}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.88))}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.card:hover img{transform:scale(1.07)}
.card__body{position:absolute;inset:auto 0 0 0;padding:22px;z-index:1;color:#fff}
.card__body h3{font-family:var(--disp);font-size:24px;margin:8px 0 4px;text-transform:uppercase;letter-spacing:-.02em}
.card__body p{margin:0;font-size:13.5px;color:rgba(255,255,255,.72)}
.tag{display:inline-block;padding:4px 11px;border-radius:99px;background:var(--red);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.card.is-hidden{display:none}
/* En el móvil siguen siendo dos por fila. Con `auto-fill` y un mínimo de
   270 px caía una sola, a todo lo ancho: cada equipo ocupaba media pantalla y
   ver los ocho era un viaje. A dos, se abarcan de un vistazo. Como la tarjeta
   mide la mitad, el texto de dentro también se achica, o no cabría. */
@media (max-width:620px){
  .cards{grid-template-columns:1fr 1fr;gap:12px}
  .card__body{padding:14px}
  .card__body h3{font-size:17px;margin:6px 0 3px}
  .card__body p{font-size:12px;line-height:1.4}
  .card .tag{padding:3px 8px;font-size:9.5px;letter-spacing:.08em}
}

/* --- pista --------------------------------------------------------------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(28px,4vw,46px)}
.note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--txt-2);font-size:14.5px;margin:22px 0}
.pill{background:var(--red);color:#fff;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:99px;font-weight:600}
.shot{margin:0;border-radius:var(--r);overflow:hidden;position:relative;border:1px solid var(--line);cursor:zoom-in}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s ease}
.shot:hover img{transform:scale(1.05)}

/* Fotos que se van turnando. La caja manda el tamaño (4/3, igual que una
   foto suelta) y todas van dentro superpuestas, así que al cambiar no se
   mueve nada de sitio ni se ve una debajo de otra. Sin JavaScript se queda
   la primera puesta, que es la única visible de salida. */
.shot__fotos{position:relative}
.shot--turno .shot__fotos{aspect-ratio:4/3}
.shot--turno .shot__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease,transform .8s ease;
}
.shot--turno .shot__img.is-on{opacity:1}

/* Las barritas de abajo: una por foto, la puesta más ancha y en blanco. Se
   pueden tocar para saltar a esa foto, y entonces el turno vuelve a contar
   desde cero. Sin JavaScript no se enseñan, que no llevarían a ninguna parte. */
.shot__barras{position:absolute;inset:auto 0 18px 0;z-index:2;display:flex;justify-content:center;gap:8px}
.shot__barra{
  width:34px;height:3px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.42);box-shadow:0 1px 3px rgba(0,0,0,.45);
  transition:background .3s ease,width .3s ease;
}
.shot__barra:hover{background:rgba(255,255,255,.72)}
.shot__barra.is-on{width:44px;background:#fff}
.shot__barra:focus-visible{outline:2px solid #fff;outline-offset:4px}
html:not(.js) .shot__barras{display:none}
/* Hueco para que el texto del pie no quede pegado a las barras. */
.shot--turno figcaption{padding-bottom:44px}
@media (prefers-reduced-motion:reduce){
  .shot--turno .shot__img{transition:none}
}
.shot figcaption{
  position:absolute;inset:auto 0 0 0;padding:22px;color:#fff;font-size:14px;
  background:linear-gradient(transparent,rgba(0,0,0,.9));
}
.shot figcaption b{display:block;font-family:var(--disp);text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px}

/* --- patrocinadores ------------------------------------------------------ */
/* Los logos llegan como vengan: uno en PNG con fondo blanco, otro alargado,
   otro casi cuadrado. Por eso cada uno va en la misma cajita blanca y se
   encaja dentro sin deformarse. Lo que se iguala es el alto y no el ancho:
   al revés, un logo apaisado se comería a los demás. El blanco es fijo en
   los dos temas, que es el fondo para el que están hechos casi todos. */
.section.patros{
  background:var(--bg-2);border-block:1px solid var(--line);
  padding-block:clamp(36px,4vw,58px);
}
.patros__cab{text-align:center}
.patros__cab .h2{margin-bottom:0}
.patros__cab + .patros__lista{margin-top:clamp(22px,3vw,34px)}
.patros__lista{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(12px,1.6vw,20px);
}
.patro{
  background:#fff;border:1px solid rgba(11,12,15,.12);border-radius:14px;
  padding:14px 22px;display:grid;place-items:center;
  transition:transform .25s ease,box-shadow .25s ease;
}
.patro a{display:grid;place-items:center}
.patro img{height:clamp(34px,4vw,52px);width:auto;max-width:180px;object-fit:contain}
.patro:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
@media (prefers-reduced-motion:reduce){
  .patro{transition:none}
  .patro:hover{transform:none}
}

/* --- noticias ------------------------------------------------------------ */
/* La fecha en rojo: sale en las cajas, en la ficha y en anterior/siguiente. */
.news__d{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}

/* --- inscripciones ------------------------------------------------------- */
.cta{
  border-radius:calc(var(--r) + 10px);padding:clamp(30px,4vw,56px);
  background:linear-gradient(135deg,#c2161c 0%,var(--red) 45%,#8e0f14 100%);
  color:#fff;display:grid;gap:clamp(26px,3.2vw,40px);
  box-shadow:0 30px 80px rgba(224,31,38,.28);position:relative;overflow:hidden;
}
.cta::before{
  content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  border:60px solid rgba(255,255,255,.08);
}
.cta .lead{color:rgba(255,255,255,.85)}
.cta .btn--primary{background:#fff;color:var(--red);box-shadow:none}
.cta .btn--primary:hover{background:#111;color:#fff}
/* El titular no lleva tope de ancho: se mide contra la columna en la que
   está. El que había —62ch— se calculaba con la letra del párrafo, no con la
   del titular, y dejaba el bloque en 530 px: «Ven a jugar con nosotros» se
   partía en tres renglones, con un «CON» suelto en medio. */
.cta__head .h2{margin-bottom:14px}
.cta__head .lead{margin:0;max-width:52ch}
/* El texto y los pasos a un lado, el formulario al otro. */
.cta__cols{display:grid;grid-template-columns:1fr .92fr;gap:clamp(30px,5vw,60px);align-items:start}
.cta__cols--una{grid-template-columns:1fr}
.cta__l{display:grid;gap:clamp(24px,3vw,34px);align-content:start}
/* Con el formulario al lado, el titular ocupa media rejilla: se mide contra
   ella y no contra el ancho entero, o se comería la columna. Solo desde que
   las dos columnas existen de verdad; apiladas en el móvil manda el tamaño
   normal, que ahí vuelve a tener todo el ancho. */
@media (min-width:901px){
  .cta__cols:not(.cta__cols--una) .cta__head .h2{font-size:clamp(32px,3.9vw,54px)}
  /* El texto es más corto que el formulario, siempre: centrado, lo que sobra
     queda repartido arriba y abajo en vez de amontonarse debajo del último
     paso, que era lo que dejaba aquel pozo de rojo vacío. */
  .cta__cols:not(.cta__cols--una){align-items:center}
}
/* Un <ol>: el orden es el contenido. Los números los pone el contador del
   CSS, así que el HTML no repite lo que ya dice la lista. */
.pasos{list-style:none;counter-reset:paso;margin:0;padding:0;display:grid;gap:clamp(16px,2vw,22px)}
.pasos li{counter-increment:paso;display:grid;grid-template-columns:38px 1fr;gap:4px 16px;align-items:start}
.pasos li::before{
  content:counter(paso);grid-row:1/3;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.32);
  font-family:var(--disp);font-size:15px;
}
.pasos b{font-size:17px;line-height:1.45}
.pasos p{margin:0;color:rgba(255,255,255,.82);font-size:15.5px;line-height:1.55}
/* Dentro del panel rojo, el formulario es una tarjeta blanca opaca. El
   translúcido de antes se mezclaba con el degradado y lo enturbiaba todo;
   en blanco se lee como lo que es, algo que hay que rellenar. */
.cta .form{background:#fff;border-color:rgba(11,12,15,.08);box-shadow:0 18px 44px rgba(0,0,0,.22)}
.cta .form label{color:#5c6371;font-size:11.5px;letter-spacing:.1em;gap:6px}
.cta .form input,.cta .form textarea{
  background:#f4f5f7;border-color:rgba(11,12,15,.1);color:#0b0c0f;
}
.cta .form ::placeholder{color:#9aa0ad}
.cta .form input:focus,.cta .form textarea:focus{
  border-color:var(--red);box-shadow:0 0 0 4px rgba(224,31,38,.15);
}
/* El boton vuelve a ser rojo: sobre blanco, el blanco de .cta no se veía. */
.cta .form .btn--primary{background:var(--red);color:#fff}
.cta .form .btn--primary:hover{background:#0b0c0f;color:#fff}
.cta .form__msg{color:var(--red)}
.cta .form__msg.ok{color:#15915e}
/* Los datos de contacto, por debajo de las dos columnas: una tarjeta por vía,
   todas iguales y todas pulsables enteras. Se reparten solas —cuatro en
   pantalla ancha, dos en tablet, una en móvil— sin tener que contarlas. */
.cta__datos{
  list-style:none;margin:0;padding:clamp(18px,2.4vw,24px) 0 0;
  border-top:1px solid rgba(255,255,255,.28);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,14px);
}
/* Las columnas van a mano y no con `auto-fit`: el correo del club es largo y
   con reparto automático había una franja en la que entraban cuatro tarjetas
   estrechas y el correo se partía por la mitad de la palabra. Dos por fila
   siempre, y cuatro solo cuando hay sitio de sobra. */
@media (min-width:1280px){
  .cta__datos{grid-template-columns:repeat(4,1fr)}
}
.cta__datos a{
  display:grid;gap:4px;padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.cta__datos a:hover{background:#fff;color:var(--red);transform:translateY(-3px)}
.cta__datos span{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.cta__datos a:hover span{color:var(--red);opacity:.75}
/* El correo del club mide 29 caracteres y es el que manda la medida: a 14 px
   entra de un renglón en la tarjeta. El corte es la red de seguridad por si
   algún día se pone uno más largo. */
.cta__datos b{font-size:14px;font-weight:600;overflow-wrap:anywhere}
/* Con dos tarjetas por fila en un móvil, cada una mide unos 150 px y el
   correo del club —29 caracteres— tiene que caber ahí. Se gana sitio por
   todos lados: el panel rojo se estrecha, la tarjeta se aprieta y el texto se
   mide contra el ancho de la pantalla, para que «baloncestodominicos» entre
   siempre de un renglón y el arroba caiga en el segundo. */
@media (max-width:560px){
  .section.inscrip .cta{padding:22px 16px}
  .cta__datos a{padding:11px 11px}
  .cta__datos span{font-size:9.5px;letter-spacing:.09em}
  .cta__datos b{font-size:clamp(11px,3.2vw,14px)}
}
/* En los móviles más estrechos hay que apurar un poco más para que el correo
   siga cayendo en dos renglones y no se parta a media palabra. */
@media (max-width:400px){
  .cta__datos{gap:8px}
  .cta__datos a{padding:10px 9px}
  .cta__datos b{font-size:clamp(10px,2.9vw,13px)}
}
.docs{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:relative}
.docs a{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 20px;border-radius:14px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);font-size:14.5px;transition:all .25s ease;
}
.docs a:hover{background:#fff;color:var(--red);transform:translateX(6px)}
.docs em{font-style:normal;font-size:11px;letter-spacing:.1em;opacity:.7}

/* --- contacto ------------------------------------------------------------ */
.contact{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:2px}
.contact li{display:flex;gap:20px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.contact span{width:110px;flex:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2)}
.contact a{font-size:clamp(16px,1.9vw,19px);transition:color .2s}
.contact a:hover{color:var(--red)}
/* Misma lista, en horizontal: sin líneas divisorias y con el rótulo encima. */
.contact--fila{display:flex;flex-wrap:wrap;gap:14px clamp(28px,5vw,64px)}
.contact--fila li{display:grid;gap:3px;padding:0;border-bottom:0}
.contact--fila span{width:auto}

.form{display:grid;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3.5vw,38px)}
.form label{display:grid;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2)}
.form input,.form select,.form textarea{
  background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  font-size:15.5px;letter-spacing:normal;text-transform:none;color:var(--txt);
  transition:border-color .2s,box-shadow .2s;resize:vertical;
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(224,31,38,.14);
}
.form .btn{justify-content:center}
.form__msg{margin:0;font-size:14px;color:var(--red);min-height:1.2em;letter-spacing:normal;text-transform:none}
.form__msg.ok{color:#21c07a}

/* --- footer -------------------------------------------------------------- */
/* Dos columnas —las secciones y el contacto— y debajo una línea fina con el
   año, la firma y lo legal. El filo rojo de arriba es el mismo del escudo:
   cierra la página con el color con el que empieza. */
.foot{
  position:relative;border-top:1px solid var(--line);background:var(--bg-2);
  padding:clamp(44px,5vw,64px) 0 clamp(26px,3vw,34px);
}
.foot::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--red) 0%,var(--red) 22%,rgba(224,31,38,0) 78%);
}
.foot__cols{
  display:grid;grid-template-columns:1fr 1.2fr;
  gap:clamp(30px,4vw,56px);align-items:start;
}
/* Cada columna es un rótulo y una pila de enlaces, uno por renglón: en fila
   no se distinguía cuáles eran del menú y cuáles la letra pequeña. */
.foot__col{display:grid;gap:11px;align-content:start}
.foot__h{
  margin:0 0 3px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);font-weight:600;
}
.foot__col a{font-size:14.5px;color:var(--txt-2);transition:color .2s ease,transform .2s ease}
.foot__col a:hover{color:var(--txt)}
.foot__col--con a{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;overflow-wrap:anywhere}
/* El nombre de la red, detrás del usuario y en pequeño: lo que se copia es
   el usuario, el resto es para saber de dónde es. */
.foot__col--con em{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
/* La raya de abajo: el año pegado a la izquierda, lo legal pegado a la
   derecha y la firma justo en medio. Las columnas van dichas a mano —y no
   con un space-between— para que la del centro caiga en el centro de la
   página aunque los dos lados midan distinto, y para que nada se descoloque
   si algún día falta el aviso legal o la firma. */
.foot__bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:10px clamp(20px,3vw,40px);
  margin-top:clamp(34px,4vw,50px);padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--line);
}
.foot__legal{grid-column:1;justify-self:start;margin:0;font-size:12.5px;color:var(--txt-2)}
/* Aviso legal y privacidad: son enlaces, no adorno, así que se subrayan al
   pasar por encima como cualquier otro. */
.foot__legales{grid-column:3;justify-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 18px}
.foot__legales a{
  font-size:12.5px;color:var(--txt-2);
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.foot__legales a:hover{color:var(--red);border-bottom-color:var(--red)}
/* La firma de quien hizo la web: en el centro, presente pero por debajo de
   lo del club. */
.foot__autor{
  grid-column:2;justify-self:center;text-align:center;
  margin:0;font-size:12.5px;color:var(--txt-2);opacity:.75;
}
.foot__autor a{color:inherit;border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.foot__autor a:hover{color:var(--red);border-color:var(--red)}
@media (max-width:820px){
  .foot__cols{grid-template-columns:1fr 1fr;gap:34px clamp(24px,4vw,40px)}
}
/* En el móvil no se apila todo: las secciones a la izquierda y el contacto a
   la derecha, que son dos listas cortas y se abarcan de un vistazo. Abajo, en
   cambio, los tres renglones sí se ponen uno debajo de otro y centrados en
   cuanto la pantalla se estrecha: a los lados no caben sin partirse por donde
   no toca. */
@media (max-width:720px){
  .foot__bar{
    grid-template-columns:1fr;justify-items:center;text-align:center;
    gap:12px;margin-top:clamp(26px,5vw,34px);
  }
  .foot__legal,.foot__autor,.foot__legales{grid-column:1;justify-self:center}
  .foot__legales{justify-content:center}
}
@media (max-width:480px){
  .foot__cols{grid-template-columns:1fr 1fr;gap:28px 16px}
  .foot__col a{font-size:13.5px}
  .foot__col--con a{gap:2px 8px}
  /* El nombre de la red debajo del usuario: al lado no cabe en media columna. */
  .foot__col--con em{flex-basis:100%}
}

/* --- lightbox ------------------------------------------------------------ */
.lb{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:24px;animation:fade .25s ease}
.lb[hidden]{display:none}   /* si no, display:grid anula el atributo hidden y la capa tapa la web */
.lb img{max-width:min(1100px,94vw);max-height:88vh;border-radius:12px;object-fit:contain}
.lb__x{position:absolute;top:20px;right:22px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:18px;cursor:pointer}
.lb__x:hover{background:rgba(255,255,255,.14)}
@keyframes fade{from{opacity:0}}

/* --- animación de entrada ------------------------------------------------
   Va bajo `.js`, que pone un script del <head> antes de pintar. Sin esa
   clase —JavaScript desactivado, bloqueado o que falla al cargar— los bloques
   no se esconden y la web se lee entera. Antes se quedaban en opacity:0 para
   siempre y no se veía absolutamente nada. */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.js .reveal.is-in{opacity:1;transform:none}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .cta__cols{grid-template-columns:1fr}
}
@media (max-width:780px){
  .burger{display:block}
  .menu{
    position:fixed;inset:0 0 auto 0;top:0;padding:96px 28px 36px;
    flex-direction:column;align-items:flex-start;gap:4px;
    background:var(--bg);border-bottom:1px solid var(--line);
    transform:translateY(-102%);transition:transform .4s cubic-bezier(.2,.7,.3,1);
    box-shadow:var(--shadow);
  }
  .menu.is-open{transform:none}
  .menu a{font-family:var(--disp);font-size:26px;text-transform:uppercase;padding:10px 0;color:var(--txt)}
  .menu__cta{margin-top:16px;font-size:16px!important;padding:12px 26px}
  .stats{grid-template-columns:1fr}
  .contact li{flex-direction:column;gap:4px}
  .contact span{width:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  /* Con la misma especificidad que `.js .reveal`, o no ganaría y el contenido
     se quedaría escondido justo para quien pide menos movimiento. */
  .js .reveal{opacity:1;transform:none}
}

/* --- corrección: el header se rompía entre 781 y 1000 px -----------------
   Siete enlaces más el botón «Ven a jugar» no caben en esa franja junto al
   escudo. Como nada llevaba white-space:nowrap, en vez de desbordar el texto
   se partía: el botón llegaba a ocupar tres líneas a 800 px y estiraba la
   barra. Se arregla en dos pasos.

   1) Que ningún texto de la cabecera se parta nunca. */
.menu a,
.brand__txt b,
.brand__txt small{white-space:nowrap}

/* 2) Que el menú de hamburguesa aparezca en cuanto deja de caber, no a los
      780 px. Estas reglas repiten el panel del bloque de abajo solo para la
      franja de tablet; por debajo de 781 px sigue mandando aquel. */
@media (min-width:781px) and (max-width:1000px){
  .burger{display:block}
  .menu{
    position:fixed;inset:0 0 auto 0;top:0;padding:96px 28px 36px;
    flex-direction:column;align-items:flex-start;gap:4px;
    background:var(--bg);border-bottom:1px solid var(--line);
    transform:translateY(-102%);transition:transform .4s cubic-bezier(.2,.7,.3,1);
    box-shadow:var(--shadow);
  }
  .menu.is-open{transform:none}
  .menu a{font-family:var(--disp);font-size:26px;text-transform:uppercase;padding:10px 0;color:var(--txt)}
  .menu__cta{margin-top:16px;font-size:16px!important;padding:12px 26px}
}

/* ==========================================================================
   PANTALLAS NUEVAS: LISTADO DE NOTICIAS Y FICHA DE NOTICIA
   Todo lo de arriba es la hoja original, sin tocar. Aquí abajo solo está lo
   que necesitan las páginas que la web no tenía, escrito con los mismos
   tokens (--red, --line, --card, --r, --disp) para que no desentone.
   ========================================================================== */

/* --- cabecera de páginas interiores -------------------------------------- */
.phero{
  position:relative;overflow:hidden;background:var(--bg-2);
  border-bottom:1px solid var(--line);
  padding:calc(96px + clamp(36px,7vw,84px)) 0 clamp(36px,6vw,72px);
}
.phero__media{position:absolute;inset:0}
.phero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.phero__media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(80% 80% at 10% 100%,rgba(224,31,38,.34),transparent 62%),
    linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.88) 100%);
}
.phero__in{position:relative}
.phero--img .phero__in{color:#fff}
.phero--img .phero__in .lead{color:rgba(255,255,255,.82)}
.phero--img .kicker{color:var(--red-2)}
.phero .h2{margin-bottom:14px}
.phero .lead{margin-bottom:0}
.phero__back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-2);
  transition:color .2s,transform .2s;
}
.phero--img .phero__back{color:rgba(255,255,255,.78)}
.phero__back:hover{color:var(--red-2);transform:translateX(-3px)}

/* Lo que va justo debajo de una cabecera no necesita tanto aire arriba. */
.section--top{padding-top:clamp(44px,6vw,80px)}

/* --- cajas de noticia ----------------------------------------------------- */
/* La misma pieza en la portada y en el listado. `auto-fit` con un mínimo de
   280 px pone las tres de la portada en una sola fila en pantalla de sobremesa
   —que es lo que se pide— y las va apilando sola al estrecharse. */
.nboxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(18px,2.2vw,26px)}
.nbox{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease,border-color .3s ease;
}
.nbox:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--red)}
.nbox__link{display:flex;flex-direction:column;height:100%}
.nbox__media{position:relative;display:block;overflow:hidden;aspect-ratio:3/2;background:var(--bg-3)}
.nbox__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.nbox:hover .nbox__media img{transform:scale(1.06)}
.nbox__tag{position:absolute;left:16px;top:16px;z-index:1}
.nbox__body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:22px 22px 24px;flex:1}
.nbox__h{
  font-family:var(--disp);font-size:clamp(18px,1.5vw,21px);line-height:1.2;letter-spacing:-.02em;
  margin:0;text-transform:none;color:var(--txt);
}
.nbox__p{color:var(--txt-2);font-size:14.5px;margin:0}
/* `margin-top:auto` deja los botones de las tres cajas a la misma altura
   aunque un titular ocupe dos líneas y otro una. */
.nbox__btn{margin-top:auto;padding:11px 20px;font-size:14px}
.nbox:hover .nbox__btn{border-color:var(--red);background:var(--card)}
.nbox:hover .nbox__btn svg{transform:translateX(4px)}

/* --- carrusel de noticias (solo en el móvil) ------------------------------ */
/* En pantalla ancha esto no existe: `.ncar` es una caja sin estilo alrededor
   de la fila de tarjetas y el mando está escondido. La regla vive entera en
   el @media de abajo. */
.ncar__mando{display:none}
html:not(.js) .ncar__mando{display:none !important}   /* sin JS no llevaría a ninguna parte */

/* Piezas sueltas de la línea de datos de una noticia. */
.news__cat{color:var(--red)}
.news__sep{opacity:.45}
.news__by{color:var(--txt-2);letter-spacing:.06em}

/* Enlace suelto bajo una rejilla de tarjetas. */
.sec-more{margin:34px 0 0;text-align:center}

/* --- cuerpo de la noticia ------------------------------------------------- */
.prose{max-width:75ch;color:var(--txt-2);font-size:17px}
.prose > *:first-child{margin-top:0}
.prose > *:last-child{margin-bottom:0}
.prose p,.prose ul,.prose ol,.prose figure{margin:0 0 22px}
.prose h2,.prose h3{
  font-family:var(--disp);color:var(--txt);letter-spacing:-.025em;line-height:1.1;
  margin:40px 0 14px;
}
.prose h2{font-size:clamp(24px,3vw,34px);text-transform:uppercase}
.prose h3{font-size:clamp(20px,2.3vw,25px)}
.prose a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--red-2)}
.prose strong{color:var(--txt)}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:8px}
.prose img{border-radius:var(--r)}
.prose figure img{width:100%}
.prose figcaption{margin-top:10px;font-size:13.5px;color:var(--txt-2);text-align:center}
.prose blockquote{
  margin:0 0 22px;padding:4px 0 4px 24px;border-left:3px solid var(--red);
  font-size:19px;color:var(--txt);
}
.prose hr{border:0;border-top:1px solid var(--line);margin:34px 0}

/* --- ficha de noticia ----------------------------------------------------- */
/* --- ficha de noticia: la retícula de 12 ----------------------------------- */
/* La cabecera lleva titular, entradilla y línea de datos, cada uno a 12
   columnas. Aquí el hueco entre filas se aprieta: son tres piezas del mismo
   bloque, no tres secciones. */
.phero--art .phero__in{gap:0 clamp(24px,3vw,44px)}
.phero--art .h2{margin-bottom:0}
.single__cab{margin-bottom:16px}
.phero--art .single__sub{
  max-width:70ch;margin:0 0 14px;font-size:clamp(17px,1.7vw,20px);color:var(--txt-2);
}
.single__meta{margin:0}
.single__meta .news__d{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center}

/* El texto a 6. El tope de 75 ch de `.prose` ya no hace falta: la columna es
   el tope, y dejarlo estrecharía la lectura dos veces. */
.single__texto .prose{max-width:none}

/* La foto principal a las otras 6. Sin recorte: se respeta la proporción de
   la foto, que aquí es la protagonista y no una miniatura de una rejilla. */
.single__foto{align-self:start}
/* Se respeta la proporción de la foto, con un tope: un retrato hecho con el
   móvil (9:16) ocuparía pantalla y media, y ahí sí se recorta. */
.single__foto img{width:100%;height:auto;aspect-ratio:auto;max-height:78vh;object-fit:cover}
.single__foto figcaption{font-size:13.5px}
@media (min-width:901px){
  /* Con un texto largo la foto se queda a la vista mientras se lee. */
  .single__foto{position:sticky;top:104px}
}

/* --- galería de fotos: las 12, debajo de todo el texto --------------------- */
.galeria{border-top:1px solid var(--line);padding-top:clamp(28px,3.5vw,44px)}
.galeria__h{
  font-family:var(--disp);font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em;
  text-transform:uppercase;margin:0 0 22px;
}
.galeria__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px}
.galeria__it figcaption{font-size:13px;padding:16px}

.single__cta{margin:34px 0 0}
.single__note{
  margin:26px 0 0;padding:18px 22px;border:1px solid var(--line);border-radius:14px;
  background:var(--card);color:var(--txt-2);font-size:14.5px;
}
.single__note b{color:var(--txt)}

.adjacent{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:46px}
.adjacent__it{
  display:grid;gap:8px;padding:24px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);transition:transform .3s ease,border-color .3s ease;
}
.adjacent__it:hover{transform:translateY(-4px);border-color:var(--red)}
.adjacent__it b{font-family:var(--disp);font-size:18px;line-height:1.25;letter-spacing:-.02em;color:var(--txt)}
.adjacent__it--next{text-align:right}

/* --- estados vacíos, carga y 404 ------------------------------------------ */
.empty{max-width:56ch}
.e404__links{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.nstate{color:var(--txt-2);margin:0}

/* --- formulario: trampa para bots ----------------------------------------- */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Documento de inscripción que aún no tiene archivo: mismo sitio en la lista,
   pero sin enlace, porque no hay ningún PDF al que llevar. */
.docs__soon{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 20px;border-radius:14px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);font-size:14.5px;opacity:.72;cursor:default;
}
.docs__soon em{font-style:normal;font-size:11px;letter-spacing:.1em;opacity:.8}

/* --- responsive de lo añadido -------------------------------------------- */
@media (max-width:900px){
  .adjacent{grid-template-columns:1fr}
  .adjacent__it--next{text-align:left}
}
@media (max-width:560px){
  .phero{padding-top:calc(88px + 28px)}
  .nboxes{grid-template-columns:1fr}

  /* En la portada, las noticias no se apilan: pasan de una en una. La fila se
     vuelve un carril que se arrastra con el dedo y que se para en seco en
     cada tarjeta (scroll-snap), así que nunca se queda media noticia a la
     vista. El carril se sale del `wrap` por los dos lados —de ahí los margen
     y relleno negativos— para que la tarjeta de al lado se asome por el borde
     y se vea que hay más. */
  .noticias .nboxes{
    grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;
    gap:14px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:20px;
    margin-inline:-20px;                 /* los 20 px de aire de .wrap */
    padding:4px 20px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .noticias .nboxes::-webkit-scrollbar{display:none}
  .noticias .nbox{scroll-snap-align:start}
  /* La entrada de abajo arriba está pensada para lo que se descubre al bajar.
     Aquí las tarjetas llegan de lado, y las que esperan fuera del carril se
     quedarían invisibles hasta que se las arrastra: se ven desde el principio. */
  .js .noticias .nbox.reveal{opacity:1;transform:none}

  /* El mando: una flecha a cada lado y las barritas en medio, igual que las
     fotos de la pista. */
  .ncar__mando{
    display:flex;align-items:center;justify-content:center;
    gap:14px;margin-top:18px;
  }
  .ncar__flecha{
    width:40px;height:40px;flex:none;display:grid;place-items:center;
    border:1px solid var(--line);border-radius:50%;background:var(--card);
    color:var(--txt);cursor:pointer;
    transition:border-color .2s ease,color .2s ease,opacity .2s ease;
  }
  .ncar__flecha svg{width:18px;height:18px}
  .ncar__flecha:hover{border-color:var(--red);color:var(--red)}
  /* En el primer y el último renglón la flecha no desaparece: se apaga. Si se
     quitara, las barritas darían un salto de sitio a cada tarjeta. */
  .ncar__flecha[disabled]{opacity:.32;cursor:default}
  .ncar__flecha[disabled]:hover{border-color:var(--line);color:var(--txt)}
  .ncar__barras{display:flex;align-items:center;gap:8px}
  .ncar__barra{
    width:24px;height:3px;padding:0;border:0;border-radius:99px;cursor:pointer;
    background:var(--line);transition:background .3s ease,width .3s ease;
  }
  .ncar__barra.is-on{width:34px;background:var(--red)}
  .ncar__barra:focus-visible,.ncar__flecha:focus-visible{outline:2px solid var(--red);outline-offset:3px}
}

/* ==========================================================================
   CORRECCIÓN: la cabecera no se veía en tema claro sobre la foto
   --------------------------------------------------------------------------
   La barra arranca transparente y solo se le pone fondo al bajar 40 px
   (.is-stuck). En la portada y en las noticias con foto de cabecera, debajo
   hay una imagen oscurecida; pero sus textos usan --txt y --txt-2, que en el
   tema claro son casi negros. Resultado: arriba del todo no se leía nada, y
   al bajar un poco aparecía de golpe sobre el fondo blanco.

   Mientras la barra está sobre la imagen —y solo entonces— usa los colores
   claros que el tema oscuro ya tenía. En cuanto se pega (.is-stuck) o se abre
   el menú (.menu-abierto, que pone script.js) vuelve a mandar el tema, porque
   ahí el fondo ya es sólido.

   Se aplica solo en las páginas marcadas con <body class="nav-sobre-media">:
   la portada y las noticias que llevan foto. En el resto la barra nace sobre
   un fondo normal y no hay nada que corregir.
   ========================================================================== */
.nav-sobre-media .nav:not(.is-stuck):not(.menu-abierto) .brand__txt b{color:#fff}
.nav-sobre-media .nav:not(.is-stuck):not(.menu-abierto) .brand__txt small{color:rgba(255,255,255,.78)}
.nav-sobre-media .nav:not(.is-stuck):not(.menu-abierto) .menu a{color:rgba(255,255,255,.84)}
.nav-sobre-media .nav:not(.is-stuck):not(.menu-abierto) .menu a:hover,
.nav-sobre-media .nav:not(.is-stuck):not(.menu-abierto) .menu a.is-active{color:#fff}
.nav-sobre-media .nav:not(.is-stuck):not(.menu-abierto) .icon-btn{
  border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.12);color:#fff;
}
.nav-sobre-media .nav:not(.is-stuck):not(.menu-abierto) .icon-btn:hover{border-color:#fff}
.nav-sobre-media .nav:not(.is-stuck):not(.menu-abierto) .burger{
  border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.12);
}
.nav-sobre-media .nav:not(.is-stuck):not(.menu-abierto) .burger span{background:#fff}

/* El escudo es un JPG con fondo blanco recortado en círculo: sobre la foto
   necesita un borde que lo separe, o parece una mancha. */
.nav-sobre-media .nav:not(.is-stuck):not(.menu-abierto) .brand img{
  box-shadow:0 0 0 1px rgba(255,255,255,.25);
}

/* --------------------------------------------------------------------------
   CORRECCIÓN: «Noticia anterior / siguiente» cuando solo hay una
   La rejilla es de dos columnas. En la primera y en la última noticia solo
   hay un vecino, y la tarjeta se quedaba ocupando media fila, con el texto
   pegado a un lado y el otro medio vacío. Si va sola, ocupa el ancho entero.
   -------------------------------------------------------------------------- */
.adjacent__it:only-child{grid-column:1 / -1}

/* --------------------------------------------------------------------------
   CORRECCIÓN: «Ven a jugar» se quedaba sin relleno en el menú de hamburguesa
   En las dos franjas con menú desplegable hay un `.menu a{padding:10px 0}`
   que, por especificidad (0,1,1), gana al `.menu__cta{padding:12px 26px}`
   (0,1,0) que va justo debajo. La píldora roja acababa pegada al texto, sin
   aire a los lados. Se devuelve el relleno con la especificidad necesaria.
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
  .menu a.menu__cta{padding:12px 26px}
}

/* --------------------------------------------------------------------------
   CORRECCIÓN: con el menú móvil abierto, el botón de tema quedaba tapado
   El panel desplegable es `position:fixed` y las herramientas de la derecha
   eran estáticas, así que el panel se pintaba por encima: el botón de cambiar
   tema desaparecía y de la hamburguesa solo se veían las tres barras (que sí
   suben, porque llevan `transform`), sin su recuadro. Basta con ponerlas en
   la capa de arriba.
   -------------------------------------------------------------------------- */
.nav__tools{position:relative;z-index:1}

/* ==========================================================================
   EL CARTEL DE MANTENIMIENTO
   Ocupa la pantalla entera y se pinta solo: no lleva barra ni pie, porque
   todos sus enlaces volverían a este mismo cartel. Los colores no los pone
   el tema —es blanco sobre foto oscura en los dos—, así que van escritos.
   ========================================================================== */
/* `body` ya trae `overflow-x:hidden` de la hoja de arriba; aquí no se toca
   el vertical, o en una pantalla baja no se podría llegar a los botones. */
/* Ocupa la pantalla de alto como mínimo. Si el contenido no cabe —una
   pantalla baja, el texto largo—, la página crece y se puede bajar, en vez
   de recortarse. */
.mant{
  position:relative;min-height:100svh;display:grid;
  overflow:hidden;background:#0b0c0f;color:#fff;
}

/* La foto del club, al fondo del todo. */
.mant__foto{position:absolute;inset:0;z-index:0}
.mant__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}

/* La capa de color: los dos focos rojos del club y el oscurecido que deja
   leer el titular encima. Va aquí y no colgando de la foto para que el cartel
   siga teniendo color cuando no hay ninguna. */
.mant::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(90% 75% at 12% 8%,rgba(224,31,38,.42),transparent 60%),
    radial-gradient(70% 60% at 92% 96%,rgba(224,31,38,.26),transparent 62%),
    linear-gradient(180deg,rgba(11,12,15,.88) 0%,rgba(11,12,15,.76) 42%,rgba(11,12,15,.95) 100%);
}

/* La pista dibujada. Se apoya en el borde de abajo y se sale por los lados
   en pantallas estrechas: es un fondo, no un diagrama que haya que ver
   entero. */
/* Encima de la capa de color, o el oscurecido la borraría. */
.mant__pista{
  position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);z-index:2;
  width:min(150%,1100px);height:auto;
  fill:none;stroke:rgba(255,255,255,.14);stroke-width:2;
  pointer-events:none;
}

.mant__in{
  position:relative;z-index:3;text-align:center;display:grid;justify-items:center;align-content:center;
  padding:clamp(28px,5vh,64px) 0;
}

/* El escudo, con el aro rojo girando muy despacio alrededor. */
.mant__escudo{position:relative;display:grid;place-items:center;width:clamp(106px,11vh,132px);height:clamp(106px,11vh,132px);margin-bottom:clamp(16px,2.4vh,26px)}
.mant__escudo::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px dashed rgba(224,31,38,.75);
  animation:mant-aro 26s linear infinite;
}
.mant__escudo img{
  width:74%;height:74%;border-radius:50%;object-fit:cover;
  box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.22);
}
@keyframes mant-aro{to{transform:rotate(360deg)}}

/* «Volvemos enseguida», con el punto rojo latiendo al lado. */
.mant__kicker{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;
  padding:8px 18px 8px 14px;border-radius:99px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.mant__kicker i{
  width:8px;height:8px;border-radius:50%;background:var(--red-2);flex:none;
  box-shadow:0 0 0 0 rgba(255,75,82,.65);animation:mant-late 2.2s ease-out infinite;
}
@keyframes mant-late{
  70%{box-shadow:0 0 0 12px rgba(255,75,82,0)}
  100%{box-shadow:0 0 0 0 rgba(255,75,82,0)}
}

.mant__h1{
  font-family:var(--disp);text-transform:uppercase;letter-spacing:-.035em;line-height:.92;
  font-size:clamp(38px,min(7.6vw,11.5vh),98px);margin:0;
}
.mant__l{display:block}
.mant__l--on{color:var(--red-2);text-shadow:0 3px 30px rgba(224,31,38,.45)}

.mant__lead{
  max-width:54ch;margin:clamp(16px,2.4vh,24px) 0 0;color:rgba(255,255,255,.84);
  font-size:clamp(16px,1.7vw,19px);
}

.mant__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(22px,3.4vh,34px)}
/* Sobre la foto el botón fantasma vuelve a su versión clara: la regla
   `.section .btn--ghost` no llega aquí, pero sí lo haría el tema claro. */
.mant__btns .btn--ghost{
  border-color:rgba(255,255,255,.4);color:#fff;
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.mant__btns .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.16)}
/* El icono del teléfono y el del sobre no son flechas: no se mueven. */
.mant__btns .btn:hover svg{transform:none}

.mant__redes{
  list-style:none;padding:0;margin:clamp(20px,3.2vh,34px) 0 0;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}
.mant__redes a{
  display:grid;gap:2px;padding:12px 22px;border-radius:14px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.mant__redes a:hover{border-color:var(--red-2);background:rgba(255,255,255,.1);transform:translateY(-2px)}
.mant__redes span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.mant__redes b{font-size:15px;font-weight:600}

@media (max-width:560px){
  .mant__btns .btn{width:100%;justify-content:center}
}

/* Quien prefiere no ver movimiento no ve ninguno: ni el aro, ni el latido,
   ni la franja de abajo. */
@media (prefers-reduced-motion:reduce){
  .mant__escudo::before,.mant__kicker i{animation:none}
}