/* ==========================================================================
   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}

.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}
.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:26px;height:42px;border:2px solid rgba(255,255,255,.4);border-radius:14px}
.hero__scroll span{display:block;width:3px;height:8px;border-radius:2px;background:#fff;margin:7px auto;animation:drop 1.8s infinite}
@keyframes drop{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* --- 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}

/* --- 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)}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s ease}
.shot:hover img{transform:scale(1.05)}
.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}

/* --- noticias ------------------------------------------------------------ */
.news{display:grid;gap:0;border-top:1px solid var(--line)}
.news__it{
  display:grid;grid-template-columns:150px 1fr auto;gap:28px;align-items:center;
  padding:30px 8px;border-bottom:1px solid var(--line);transition:padding-left .3s ease,background .3s ease;
}
.news__it:hover{padding-left:24px;background:var(--card)}
.news__d{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.news__it h3{margin:0;font-size:clamp(19px,2.2vw,25px);letter-spacing:-.02em;line-height:1.25}
.news__it p{grid-column:2;margin:6px 0 0;color:var(--txt-2);font-size:14.5px}
.news__go{font-size:13px;color:var(--txt-2);white-space:nowrap;display:flex;align-items:center;gap:6px}
.news__go::after{content:"→";transition:transform .25s ease;display:inline-block}
.news__it:hover .news__go::after{transform:translateX(6px)}

/* --- 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}
.cta__head{max-width:62ch}
.cta__head .h2{margin-bottom:14px}
.cta__head .lead{margin:0;max-width:54ch}
/* Los pasos a un lado, el formulario al otro. */
.cta__cols{display:grid;grid-template-columns:1fr .95fr;gap:clamp(30px,5vw,60px);align-items:start}
.cta__cols--una{grid-template-columns:1fr}
.cta__l{display:grid;gap:clamp(22px,3vw,30px);align-content:start}
/* 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, en una sola línea por debajo de las dos columnas. */
.cta__datos{
  margin:0;padding-top:clamp(18px,2.4vw,24px);
  border-top:1px solid rgba(255,255,255,.3);
}
.cta__datos span{color:rgba(255,255,255,.7)}
.cta__datos a{color:#fff}
.cta__datos a:hover{color:#fff;opacity:.7}
.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 -------------------------------------------------------------- */
.foot{border-top:1px solid var(--line);background:var(--bg-2);padding:56px 0 40px}
.foot__in{display:grid;gap:26px;justify-items:center;text-align:center}
.foot__brand{display:flex;align-items:center;gap:14px}
.foot__brand img{border-radius:50%;background:#fff}
.foot__brand p{margin:0;text-align:left;font-size:14px;line-height:1.4;color:var(--txt-2)}
.foot__brand b{color:var(--txt);font-family:var(--disp);letter-spacing:.015em;text-transform:uppercase}
.foot__nav{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.foot__nav a{font-size:14px;color:var(--txt-2);transition:color .2s}
.foot__nav a:hover{color:var(--red)}
.foot__legal{margin:0;font-size:12.5px;color:var(--txt-2)}
/* La firma de quien hizo la web: presente, pero por debajo de lo del club. */
.foot__autor{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)}

/* --- 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}
  .news__it{grid-template-columns:1fr;gap:6px}
  .news__it p{grid-column:1}
  .news__go{display:none}
}
@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)}

/* --- tarjetas de noticia -------------------------------------------------- */
.ncards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.ncard{
  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;
}
.ncard:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--red)}
.ncard__link{display:flex;flex-direction:column;height:100%}
.ncard__media{position:relative;display:block;overflow:hidden;aspect-ratio:3/2;background:var(--bg-3)}
.ncard__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.ncard:hover .ncard__media img{transform:scale(1.06)}
.ncard__tag{position:absolute;left:16px;top:16px;z-index:1}
.ncard__body{display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;flex:1}
.ncard__h{
  font-family:var(--disp);font-size:20px;line-height:1.2;letter-spacing:-.02em;margin:0;
  text-transform:none;
}
.ncard__p{color:var(--txt-2);font-size:14.5px;flex:1}
.ncard .news__go{margin-top:6px}

/* 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 ----------------------------------------------------- */
.single__meta{margin:0 0 26px}
.single__meta .news__d{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center}
.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)}
  .ncards{grid-template-columns:1fr}
}

/* ==========================================================================
   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}