/* ---------- fuentes.css ---------- */
/* Tipografias alojadas en el propio servidor.
   Generado por tools/fuentes-locales.py — no editar a mano.
   Ficheros identicos a los de Google Fonts (licencia SIL OFL),
   limitados a los alfabetos latino y latino extendido. */

/* Archivo · latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-100_900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo · latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-100_900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope · latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Manrope · latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/manrope-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope · latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Manrope · latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope · latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Manrope · latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope · latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Manrope · latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope · latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/manrope-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Manrope · latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/manrope-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- base.css ---------- */
/* ============================================================
   CASP · Club Atletismo Santa Pola
   01 · BASE — tokens, reset, tipografía, utilidades
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Azules — extraídos de la identidad real del club */
  --ink-950:#02091a;
  --ink-900:#05122c;
  --ink-850:#071a3d;
  --ink-800:#0a2452;
  --ink-750:#0c2c63;
  --ink-700:#0f3170;
  --brand-700:#12408f;
  --brand-600:#1b4da8;
  --brand-500:#2d62c4;
  --brand-400:#2ea3f2;
  --brand-300:#5fc8ff;
  --brand-200:#a8e2ff;
  --foam-100:#e6f2ff;
  --foam-50:#f4f9ff;
  --white:#ffffff;

  /* Verde de marca — tercer color. Papel fijo en todo el sitio:
     estado activo / actual, confirmación y progreso. */
  --green-600:#5d9420;
  --green-500:#76b82b;
  --green-400:#8fd03f;
  --green-300:#a9e05e;

  /* Acentos cálidos — uso mínimo (sol de Santa Pola / wordmark) */
  --sun-500:#ffb01f;
  --sun-400:#ffc95c;
  --coral-500:#ff4d4d;

  /* Roles semánticos (tema oscuro por defecto en secciones dark) */
  --bg:var(--foam-50);
  --surface:var(--white);
  --text:var(--ink-900);
  --text-soft:#4a5d7e;
  --text-mute:#7b8bab;
  --line:rgba(10,36,82,.12);
  --accent:var(--brand-400);
  --active:var(--green-500);   /* página actual, filtro pulsado, pestaña activa */
  --ok:var(--green-600);       /* confirmaciones */

  /* Tipografía */
  --font-display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Escala fluida */
  --step--2:clamp(.69rem,.66rem + .16vw,.79rem);
  --step--1:clamp(.83rem,.78rem + .26vw,1rem);
  --step-0:clamp(1rem,.93rem + .38vw,1.25rem);
  --step-1:clamp(1.2rem,1.09rem + .55vw,1.56rem);
  --step-2:clamp(1.44rem,1.28rem + .8vw,1.95rem);
  --step-3:clamp(1.73rem,1.5rem + 1.14vw,2.44rem);
  --step-4:clamp(2.07rem,1.74rem + 1.62vw,3.05rem);
  --step-5:clamp(2.49rem,2.02rem + 2.3vw,3.82rem);
  --step-6:clamp(2.99rem,2.34rem + 3.23vw,4.77rem);
  --step-7:clamp(3.58rem,2.7rem + 4.5vw,5.96rem);
  --step-8:clamp(4.3rem,3.09rem + 6.24vw,7.45rem);

  /* Espaciado / layout */
  --gutter:clamp(1.25rem,4vw,3.5rem);
  --container:1440px;
  --measure:66ch;
  --section-y:clamp(5rem,9vw,9.5rem);
  --radius-s:8px;
  --radius-m:16px;
  --radius-l:28px;
  --radius-xl:44px;

  /* Movimiento */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.76,0,.24,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:.28s;
  --dur:.6s;
  --dur-slow:1.1s;

  /* Sombras azules (nunca negro puro) */
  --shadow-s:0 2px 8px rgba(5,18,44,.06),0 1px 2px rgba(5,18,44,.04);
  --shadow-m:0 12px 32px -8px rgba(5,18,44,.14),0 4px 12px -4px rgba(5,18,44,.08);
  --shadow-l:0 32px 80px -16px rgba(5,18,44,.24),0 12px 32px -12px rgba(5,18,44,.12);
  --shadow-glow:0 0 0 1px rgba(46,163,242,.24),0 16px 48px -12px rgba(46,163,242,.4);
}

/* Secciones oscuras: se invierten los roles, no los tokens de marca.
   Se incluyen aquí todas las zonas oscuras del sitio para que cualquier
   componente basado en tokens (chips, tarjetas, líneas) se adapte solo. */
.is-dark,.hero,.train,.cta,.phero,.footer{
  --bg:var(--ink-900);
  --surface:var(--ink-850);
  --text:var(--white);
  --text-soft:#a9c2e6;
  --text-mute:#6b85ad;
  --line:rgba(168,226,255,.16);
  --active:var(--green-400);
  --ok:var(--green-400);
  color:var(--text);
  background:var(--bg);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* scroll-padding-top: la cabecera es fija (70-102px). Sin esto, al llegar a
   un enlace con ancla DESDE OTRA PAGINA (p. ej. el formulario de contacto
   apunta a aviso-legal.html#privacidad) el navegador deja el titulo justo
   detras de la cabecera. Los 88px son los mismos que usa anchors() en
   app.js para las anclas de la propia pagina; se suben a 120 porque la
   cabecera mide 102px arriba del todo y el texto se reajusta unos 28px
   al aplicarse las fuentes. Valor comprobado midiendo, no estimado. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px;overflow-x:clip}
html.is-locked,body.is-locked{overflow:hidden}
body{
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--brand-400);outline-offset:3px;border-radius:4px}
::selection{background:var(--brand-400);color:var(--ink-950)}

/* ---------- 3. TIPOGRAFÍA ---------- */
.display,h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.03em;
  font-variation-settings:"wdth" 100;
  text-wrap:balance;
}
.d-hero{font-size:var(--step-8);font-weight:900;letter-spacing:-.045em}
.d-1{font-size:var(--step-7)}
.d-2{font-size:var(--step-6)}
.d-3{font-size:var(--step-5)}
.d-4{font-size:var(--step-4);line-height:1}
.d-5{font-size:var(--step-3);line-height:1.05}
.d-6{font-size:var(--step-2);line-height:1.12;letter-spacing:-.02em}

.lead{font-size:var(--step-1);line-height:1.5;color:var(--text-soft);font-weight:400;max-width:var(--measure);text-wrap:pretty}
.body-l{font-size:var(--step-0);color:var(--text-soft);max-width:var(--measure)}
.small{font-size:var(--step--1);color:var(--text-soft)}
.tiny{font-size:var(--step--2)}

/* Etiqueta técnica tipo dorsal / cronómetro */
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--step--2);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brand-400);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.eyebrow::before{
  content:"";
  width:1.9em;height:1px;
  background:currentColor;
  opacity:.55;
  flex:none;
}
.eyebrow--plain::before{display:none}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* Texto degradado, sólo para acentos puntuales */
.grad{
  background:linear-gradient(102deg,var(--brand-300) 0%,var(--brand-400) 38%,var(--brand-200) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.grad-green{
  background:linear-gradient(102deg,var(--green-300),var(--green-500) 60%,var(--brand-400));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.grad-sun{
  background:linear-gradient(102deg,var(--sun-400),var(--sun-500) 60%,var(--coral-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.outline-text{
  color:transparent;
  -webkit-text-stroke:1.5px var(--brand-400);
  paint-order:stroke fill;
}

/* ---------- 4. LAYOUT ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:960px}
.container--wide{max-width:1720px}
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:clamp(3rem,6vw,5.5rem)}
.grid{display:grid;gap:var(--gutter)}
.g-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.stack>*+*{margin-top:var(--flow,1rem)}
.flow-s{--flow:.6rem}.flow-m{--flow:1.25rem}.flow-l{--flow:2rem}
.cluster{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

/* ---------- 5. UTILIDADES ---------- */
.u-center{text-align:center}
.u-center .lead,.u-center .body-l{margin-inline:auto}
.u-right{text-align:right}
.u-hide{display:none !important}
/* Un display: en una clase gana al [hidden] de la hoja del navegador, así que
   lo reforzamos: sin esto la rejilla de meses se veía junto al timeline. */
[hidden]{display:none !important}
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.u-nowrap{white-space:nowrap}
.u-relative{position:relative}
.u-z1{position:relative;z-index:1}
.u-full{width:100%}

/* Grano sutil sobre fondos oscuros — le quita el look plantilla */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* Rejilla técnica de fondo */
.gridlines{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5}
.gridlines::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);
  background-size:calc(100%/6) 100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}

/* ---------- 6. ANIMACIONES DE ENTRADA ---------- */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,var(--rv-y,28px),0) scale(var(--rv-s,1));
  transition:
    opacity .9s var(--ease-out) var(--rv-d,0ms),
    transform 1s var(--ease-out) var(--rv-d,0ms),
    filter .9s var(--ease-out) var(--rv-d,0ms);
  filter:blur(var(--rv-b,0px));
  will-change:opacity,transform;
}
[data-reveal="fade"]{--rv-y:0px}
[data-reveal="up-lg"]{--rv-y:56px}
[data-reveal="scale"]{--rv-y:16px;--rv-s:.96}
[data-reveal="blur"]{--rv-b:14px;--rv-y:18px}
[data-reveal="left"]{transform:translate3d(-40px,0,0)}
[data-reveal="right"]{transform:translate3d(40px,0,0)}
.is-in[data-reveal]{opacity:1;transform:none;filter:blur(0)}

/* Máscara de línea: el texto sube desde detrás de un borde */
.mask-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.mask-line>span{
  display:block;
  transform:translate3d(0,110%,0) rotate(2deg);
  transition:transform 1.05s var(--ease-out) var(--ml-d,0ms);
  transform-origin:left bottom;
}
.is-in .mask-line>span,.mask-line.is-in>span{transform:none}

/* Barrido de cortina para imágenes.
   Deliberadamente NO usamos clip-path sobre el propio elemento: un elemento
   recortado al 100% tiene área visible cero y nunca alcanza el umbral del
   IntersectionObserver, así que jamás llegaría a revelarse. */
.clip-reveal{position:relative}
.clip-reveal::after{
  content:"";position:absolute;inset:-1px;z-index:6;pointer-events:none;
  background:var(--ink-900);
  transform:scaleY(1);transform-origin:bottom;
  transition:transform 1.15s var(--ease-in-out) var(--rv-d,0ms);
}
.is-in.clip-reveal::after{transform:scaleY(0)}

@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(4%,-6%,0) scale(1.08)}
  66%{transform:translate3d(-5%,4%,0) scale(.95)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes dash{to{stroke-dashoffset:0}}
@keyframes pulse-ring{
  0%{transform:scale(.85);opacity:.7}
  70%{transform:scale(1.7);opacity:0}
  100%{transform:scale(1.7);opacity:0}
}
@keyframes marquee-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes shimmer{to{background-position:200% center}}

/* ---------- 7. ACCESIBILIDAD ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important;filter:none !important}
  .mask-line>span{transform:none !important}
  .clip-reveal::after{display:none !important}
}

/* ---------- 8. SPLIT TEXT (generado por JS) ---------- */
.sw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.09em;margin-bottom:-.09em}
.sw>i{
  display:inline-block;font-style:inherit;
  transform:translate3d(0,110%,0);
  transition:transform .95s var(--ease-out) var(--d,0ms);
}
.is-in .sw>i{transform:none}
@media (prefers-reduced-motion:reduce){.sw>i{transform:none !important}}

/* ---------- ui.css ---------- */
/* ============================================================
   CASP · 02 · UI — chrome, navegación, botones, tarjetas, footer
   ============================================================ */

/* ---------- PRELOADER ---------- */
.loader{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:var(--ink-950);
  transition:opacity .7s var(--ease-out),visibility .7s;
}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loader__inner{display:grid;gap:1.6rem;justify-items:center;width:min(360px,72vw)}
.loader__mark{width:74px;height:74px;position:relative}
.loader__mark svg{width:100%;height:100%;overflow:visible}
.loader__mark circle{fill:none;stroke-width:2}
.loader__ring{stroke:rgba(168,226,255,.18)}
.loader__arc{
  stroke:var(--brand-400);stroke-linecap:round;
  stroke-dasharray:100 200;transform-origin:center;
  animation:spin-slow 1.1s linear infinite;
}
.loader__bar{width:100%;height:2px;background:rgba(168,226,255,.16);overflow:hidden;border-radius:2px}
.loader__fill{height:100%;width:0%;background:linear-gradient(90deg,var(--brand-500),var(--brand-300));transition:width .35s var(--ease-out)}
.loader__label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brand-200);display:flex;
  justify-content:space-between;width:100%;
}

/* ---------- TRANSICIÓN DE PÁGINA ---------- */
.curtain{
  position:fixed;inset:0;z-index:9500;pointer-events:none;
  display:grid;grid-template-columns:repeat(5,1fr);
}
.curtain span{background:var(--ink-900);transform:scaleY(0);transform-origin:bottom;}
.curtain.is-out span{animation:curtain-up .62s var(--ease-in-out) forwards}
.curtain.is-out span:nth-child(1){animation-delay:0ms}
.curtain.is-out span:nth-child(2){animation-delay:60ms}
.curtain.is-out span:nth-child(3){animation-delay:120ms}
.curtain.is-out span:nth-child(4){animation-delay:180ms}
.curtain.is-out span:nth-child(5){animation-delay:240ms}
@keyframes curtain-up{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- CURSOR PERSONALIZADO ---------- */
.cursor{
  position:fixed;top:0;left:0;z-index:9400;pointer-events:none;
  width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--brand-400);
  translate:-50% -50%;
  transition:width .32s var(--ease-spring),height .32s var(--ease-spring),
             background-color .3s,border-color .3s,opacity .3s;
  mix-blend-mode:difference;opacity:0;
  display:grid;place-items:center;
}
.cursor__label{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-950);opacity:0;transition:opacity .2s;
  white-space:nowrap;font-weight:700;
}
.cursor.is-active{opacity:1}
.cursor.is-hover{width:76px;height:76px;background:var(--brand-400);border-color:transparent;mix-blend-mode:normal}
.cursor.is-hover .cursor__label{opacity:1}
.cursor.is-down{scale:.82}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- BARRA DE PROGRESO ---------- */
.progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:9200;
  background:transparent;pointer-events:none;
}
.progress__bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--brand-600),var(--brand-400) 52%,var(--green-400));
  box-shadow:0 0 16px rgba(46,163,242,.7);
}

/* ---------- HEADER ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  padding-block:clamp(.85rem,1.6vw,1.35rem);
  transition:transform .5s var(--ease-out),background-color .45s,backdrop-filter .45s,box-shadow .45s,padding .45s;
}
.header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(2,9,26,.72),rgba(2,9,26,0));
  opacity:1;transition:opacity .4s;
}
.header.is-stuck{
  background:rgba(5,18,44,.78);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 1px 0 rgba(168,226,255,.14),0 18px 40px -24px rgba(2,9,26,.9);
  padding-block:.7rem;
}
.header.is-stuck::before{opacity:0}
.header.is-hidden{transform:translateY(-104%)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:clamp(.75rem,1.6vw,1.5rem)}

/* El logotipo es un lockup horizontal (275 × 130) con fondo transparente:
   se coloca directamente sobre el fondo, sin placa, y a su proporción natural
   (encajarlo en un cuadrado lo deformaba y lo dejaba ilegible). */
.brand{display:flex;align-items:center;flex:none}
.brand__logo{
  display:block;flex:none;
  height:clamp(60px,6.8vw,78px);width:auto;max-width:none;
  filter:drop-shadow(0 3px 14px rgba(2,9,26,.5));
  transition:height .45s var(--ease-out),transform .45s var(--ease-spring),filter .45s;
}
/* Al hacer scroll la barra se compacta y el logo la acompaña */
.header.is-stuck .brand__logo{height:clamp(42px,4.6vw,54px)}
.brand:hover .brand__logo{
  transform:translateY(-2px) scale(1.03);
  filter:drop-shadow(0 7px 20px rgba(2,9,26,.65));
}


/* Navegación de escritorio */
.nav{display:flex;align-items:center;gap:.1rem;flex:none}
.nav__item{position:relative}
.nav__link{
  display:flex;align-items:center;gap:.4rem;
  padding:.6rem clamp(.6rem,1vw,.9rem);border-radius:100px;
  font-size:clamp(.82rem,.95vw,.9rem);font-weight:600;color:rgba(255,255,255,.82);
  transition:color .3s,background-color .3s;
  white-space:nowrap;
}
.nav__link:hover,.nav__link:focus-visible{color:var(--white);background:rgba(168,226,255,.1)}
.nav__link[aria-current="page"]{color:var(--white);background:rgba(118,184,43,.13)}
.nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:50%;bottom:.2rem;translate:-50% 0;
  width:16px;height:2.5px;border-radius:2px;background:var(--green-400);
  box-shadow:0 0 12px rgba(143,208,63,.85);
}
.nav__caret{width:9px;height:9px;transition:transform .3s var(--ease-out);opacity:.6}
.nav__item:hover .nav__caret{transform:rotate(180deg)}

.nav__panel{
  position:absolute;top:calc(100% + .55rem);left:50%;translate:-50% 0;
  min-width:250px;padding:.55rem;
  background:rgba(7,26,61,.92);
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  backdrop-filter:blur(24px) saturate(170%);
  border:1px solid rgba(168,226,255,.16);
  border-radius:20px;
  box-shadow:0 28px 60px -20px rgba(2,9,26,.85);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.97);
  transition:opacity .32s var(--ease-out),transform .32s var(--ease-out),visibility .32s;
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.nav__sub{
  display:flex;align-items:center;gap:.7rem;
  padding:.62rem .8rem;border-radius:13px;
  font-size:.88rem;font-weight:600;color:rgba(255,255,255,.8);
  transition:background-color .25s,color .25s,padding-left .25s;
}
.nav__sub:hover{background:rgba(46,163,242,.16);color:var(--white);padding-left:1.05rem}
.nav__sub[aria-current="page"]{background:rgba(118,184,43,.16);color:var(--white)}
.nav__sub[aria-current="page"] .nav__sub-ico{background:rgba(118,184,43,.22);color:var(--green-300)}
.nav__sub small{display:block;font-weight:400;font-size:.74rem;color:var(--text-mute);letter-spacing:0}
.nav__sub-ico{
  width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:rgba(46,163,242,.14);color:var(--brand-300);
}
.nav__sub-ico svg{width:15px;height:15px}

@media (max-width:1100px){.nav,.header .btn--nav{display:none}}

/* Botón hamburguesa */
.burger{
  display:none;width:48px;height:48px;border-radius:14px;
  border:1px solid rgba(168,226,255,.22);
  background:rgba(168,226,255,.07);
  flex-direction:column;align-items:center;justify-content:center;
  gap:5px;flex:none;
  transition:background-color .3s,border-color .3s;
}
.burger:hover{background:rgba(46,163,242,.2)}
/* Flex + gap (no márgenes): así las tres barras convergen exactamente
   en el centro al formar la X. */
.burger span{display:block;width:19px;height:1.8px;background:var(--white);border-radius:2px;transition:transform .4s var(--ease-out),opacity .3s}
.burger.is-open span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0;transform:scaleX(.4)}
.burger.is-open span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}
@media (max-width:1100px){.burger{display:flex}}

/* Menú móvil a pantalla completa */
.mobilenav{
  position:fixed;inset:0;z-index:8900;
  background:var(--ink-950);
  display:flex;flex-direction:column;
  padding:6.5rem var(--gutter) 2rem;
  overflow-y:auto;overscroll-behavior:contain;
  clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .7s var(--ease-in-out);
  visibility:hidden;
}
.mobilenav.is-open{clip-path:circle(150% at calc(100% - 46px) 46px);visibility:visible}
.mobilenav__list{display:grid;gap:.15rem;flex:1}
.mobilenav__link{
  display:flex;align-items:baseline;gap:1rem;
  padding:.62rem 0;border-bottom:1px solid rgba(168,226,255,.1);
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.6rem,7vw,2.35rem);line-height:1.05;
  letter-spacing:-.03em;color:var(--white);text-transform:uppercase;
  opacity:0;transform:translateY(26px);
}
.mobilenav.is-open .mobilenav__link{
  opacity:1;transform:none;
  transition:opacity .55s var(--ease-out) var(--d,0ms),transform .65s var(--ease-out) var(--d,0ms);
}
.mobilenav__link i{
  font-family:var(--font-mono);font-style:normal;font-size:.66rem;
  color:var(--brand-400);letter-spacing:.1em;flex:none;
}
.mobilenav__link:active{color:var(--brand-300)}
.mobilenav__link[aria-current="page"]{color:var(--green-400)}
.mobilenav__link[aria-current="page"] i{color:var(--green-400)}
.mobilenav__foot{
  padding-top:1.8rem;display:grid;gap:1rem;
  opacity:0;transition:opacity .5s var(--ease-out) .5s;
}
.mobilenav.is-open .mobilenav__foot{opacity:1}

/* ---------- BOTONES ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.6rem;padding:1.02rem 1.85rem;border-radius:100px;
  font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  transition:transform .4s var(--ease-spring),box-shadow .4s,color .3s,background-color .3s,border-color .3s;
  isolation:isolate;overflow:hidden;white-space:nowrap;
  will-change:transform;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .4s var(--ease-out)}
.btn:hover svg{transform:translateX(4px)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,var(--brand-500),var(--brand-400) 52%,var(--brand-300));
  transform:translateY(101%);transition:transform .52s var(--ease-in-out);
}
.btn:hover::before{transform:translateY(0)}

.btn--primary{
  background:linear-gradient(120deg,var(--brand-600),var(--brand-400));
  color:var(--white);
  box-shadow:0 12px 30px -10px rgba(46,163,242,.62);
}
.btn--primary:hover{box-shadow:0 18px 42px -10px rgba(46,163,242,.78);transform:translateY(-2px)}
.btn--primary::before{background:linear-gradient(120deg,var(--brand-400),var(--brand-200))}
.btn--primary:hover{color:var(--ink-900)}

.btn--light{background:var(--white);color:var(--ink-900);box-shadow:var(--shadow-m)}
.btn--light::before{background:linear-gradient(120deg,var(--brand-400),var(--brand-300))}
.btn--light:hover{color:var(--ink-950);transform:translateY(-2px)}

.btn--ghost{border:1.5px solid rgba(168,226,255,.34);color:var(--white)}
.btn--ghost::before{background:var(--white)}
.btn--ghost:hover{color:var(--ink-900);border-color:transparent}
.is-light .btn--ghost,.btn--ghost-dark{border-color:rgba(10,36,82,.2);color:var(--ink-900)}
.btn--ghost-dark::before{background:var(--ink-900)}
.btn--ghost-dark:hover{color:var(--white);border-color:transparent}

.btn--sun{background:linear-gradient(118deg,var(--sun-500),var(--sun-400));color:var(--ink-950);box-shadow:0 12px 30px -12px rgba(255,176,31,.7)}
.btn--sun::before{background:var(--white)}
.btn--s{padding:.72rem 1.25rem;font-size:.84rem}
.btn--lg{padding:1.18rem 2.3rem;font-size:1.02rem}
.btn--block{display:flex;width:100%}
.btn--nav{padding:.68rem clamp(.9rem,1.5vw,1.3rem);font-size:clamp(.8rem,.95vw,.86rem);flex:none}
/* Entre 1100 y 1280 px el botón viaja sin flecha para que la barra respire */
@media (max-width:1280px){.header .btn--nav svg{display:none}}

/* Enlace con subrayado animado */
.link-u{
  position:relative;display:inline-flex;align-items:center;gap:.45rem;
  font-weight:700;color:var(--brand-400);padding-bottom:2px;
}
.link-u::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease-in-out);
}
.link-u:hover::after{transform:scaleX(1);transform-origin:left}
.link-u svg{width:14px;height:14px;transition:transform .4s var(--ease-out)}
.link-u:hover svg{transform:translate(3px,-3px)}

/* Píldora / chip */
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.42rem .85rem;border-radius:100px;
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--text-soft);
  background:color-mix(in srgb,var(--surface) 70%,transparent);
  transition:background-color .3s,color .3s,border-color .3s;
  white-space:nowrap;
}
.chip--accent{border-color:rgba(46,163,242,.4);color:var(--brand-400);background:rgba(46,163,242,.1)}
.chip--ok{border-color:rgba(118,184,43,.5);color:var(--green-600);background:rgba(118,184,43,.13)}
.is-dark .chip--ok{color:var(--green-400)}
.chip--sun{border-color:rgba(255,176,31,.45);color:var(--sun-500);background:rgba(255,176,31,.12)}
.chip--live{border-color:rgba(255,77,77,.42);color:var(--coral-500);background:rgba(255,77,77,.1)}
.chip__dot{width:6px;height:6px;border-radius:50%;background:currentColor;position:relative;flex:none}
.chip--live .chip__dot::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;
  border:1.5px solid currentColor;animation:pulse-ring 1.9s var(--ease-out) infinite;
}

/* ---------- MEDIA / PLACEHOLDERS ---------- */
.media{
  position:relative;overflow:hidden;border-radius:var(--radius-l);
  background:linear-gradient(150deg,var(--ink-800),var(--ink-900));
  aspect-ratio:var(--ratio,16/10);isolation:isolate;
}
.media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out),filter .8s}
.media--zoom:hover img{transform:scale(1.07)}
.media__tag{
  position:absolute;left:1rem;bottom:1rem;z-index:3;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--white);
  background:rgba(2,9,26,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:.4rem .7rem;border-radius:8px;border:1px solid rgba(168,226,255,.2);
}

/* Placeholder “de agencia”: no es un rectángulo gris */
.media--ph{
  display:grid;place-items:center;text-align:center;padding:1.6rem;
  border:1px dashed rgba(168,226,255,.3);
  background:
    radial-gradient(120% 90% at 20% 0%,rgba(46,163,242,.26),transparent 62%),
    radial-gradient(100% 100% at 100% 100%,rgba(95,200,255,.18),transparent 58%),
    linear-gradient(150deg,var(--ink-800),var(--ink-950));
}
.media--ph::before{
  content:"";position:absolute;inset:0;opacity:.4;
  background-image:
    linear-gradient(rgba(168,226,255,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(168,226,255,.09) 1px,transparent 1px);
  background-size:34px 34px;
}
.media__ph{position:relative;z-index:2;display:grid;gap:.55rem;justify-items:center;max-width:280px}
.media__ph-ico{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:rgba(168,226,255,.12);border:1px solid rgba(168,226,255,.24);color:var(--brand-300);
}
.media__ph-ico svg{width:20px;height:20px}
.media__ph-t{font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--white);line-height:1.2}
.media__ph-d{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brand-300)}

/* ---------- TARJETAS ---------- */
.card{
  position:relative;border-radius:var(--radius-l);
  background:var(--surface);border:1px solid var(--line);
  overflow:hidden;
  transition:transform .55s var(--ease-out),box-shadow .55s,border-color .45s;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-l);border-color:rgba(46,163,242,.4)}
.card__body{padding:clamp(1.35rem,2.4vw,2rem);display:grid;gap:.85rem}
.card__title{font-family:var(--font-display);font-weight:800;font-size:var(--step-1);line-height:1.1;letter-spacing:-.02em}
.card--glass{
  background:rgba(255,255,255,.05);
  border-color:rgba(168,226,255,.16);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
/* Halo que sigue al ratón */
.card--spot::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .45s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(46,163,242,.18),transparent 62%);
  pointer-events:none;
}
.card--spot:hover::before{opacity:1}
.card>*{position:relative;z-index:1}

/* ---------- MARQUESINA ---------- */
.marquee{
  display:flex;overflow:hidden;user-select:none;gap:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{
  display:flex;flex:none;align-items:center;gap:2.6rem;padding-right:2.6rem;
  animation:marquee-x var(--speed,34s) linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee--rev .marquee__track{animation-direction:reverse}
.marquee__item{
  display:inline-flex;align-items:center;gap:2.6rem;flex:none;
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.7rem,5vw,3.6rem);line-height:1;letter-spacing:-.035em;
  text-transform:uppercase;white-space:nowrap;
}
.marquee__sep{width:12px;height:12px;flex:none;color:var(--brand-400)}

/* ---------- FOOTER ---------- */
.footer{position:relative;background:var(--ink-950);color:var(--white);overflow:hidden}
.footer__glow{
  position:absolute;left:50%;top:-30%;translate:-50% 0;
  width:min(1100px,120vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(46,163,242,.22),transparent 62%);
  pointer-events:none;filter:blur(20px);
}
.footer__top{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.5rem);
  padding-block:clamp(3.5rem,7vw,6rem) clamp(2.5rem,4vw,4rem);
}
@media (max-width:900px){.footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__top{grid-template-columns:1fr}}
.footer .brand__logo{height:clamp(66px,7.4vw,86px)}
.footer__col h3{
  font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.2em;
  line-height:1.6;text-wrap:initial;
  text-transform:uppercase;color:var(--brand-300);margin-bottom:1.1rem;
}
.footer__links{display:grid;gap:.62rem}
.footer__links a{font-size:.92rem;color:rgba(255,255,255,.7);transition:color .3s,transform .3s;display:inline-block}
.footer__links a:hover{color:var(--brand-300);transform:translateX(4px)}
.footer__contact{display:grid;gap:.9rem;font-size:.9rem;color:rgba(255,255,255,.74);overflow-wrap:anywhere}
.footer__contact a{display:flex;gap:.7rem;align-items:flex-start;transition:color .3s}
.footer__contact a:hover{color:var(--brand-300)}
.footer__contact svg{width:17px;height:17px;flex:none;margin-top:.2rem;color:var(--brand-400)}
.socials{display:flex;gap:.55rem;margin-top:1.35rem}
.social{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(168,226,255,.18);background:rgba(168,226,255,.05);
  transition:background-color .35s,transform .35s var(--ease-spring),border-color .35s,color .35s;
  color:rgba(255,255,255,.8);
}
.social:hover{background:var(--brand-400);color:var(--ink-950);transform:translateY(-3px);border-color:transparent}
.social svg{width:18px;height:18px}
/* Marca de agua del pie, a dos líneas. Cada línea lleva su propio tamaño,
   calculado para que ambas ocupen prácticamente el mismo ancho: el bloque
   queda justificado y se lee como una decisión, no como un desajuste. */
.footer__word{
  position:relative;z-index:2;
  display:grid;justify-items:center;
  font-family:var(--font-display);font-weight:900;
  line-height:.82;text-transform:uppercase;text-align:center;
  color:transparent;-webkit-text-stroke:1px rgba(168,226,255,.22);
  padding-block:clamp(1rem,2vw,2rem);pointer-events:none;
}
.footer__word span{display:block;white-space:nowrap}
.footer__word-top{
  font-size:clamp(1.56rem,9.38vw,9.24rem);
  letter-spacing:-.04em;
  -webkit-text-stroke-width:.8px;
}
.footer__word-main{
  font-size:clamp(2.2rem,13.2vw,13rem);
  letter-spacing:-.05em;
}
.footer__bar{
  position:relative;z-index:2;
  border-top:1px solid rgba(168,226,255,.12);
  padding-block:1.5rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;
  align-items:center;justify-content:space-between;
  font-size:.8rem;color:rgba(255,255,255,.5);
}
.footer__bar nav{display:flex;flex-wrap:wrap;gap:1.2rem}
.footer__bar a:hover{color:var(--brand-300)}
.footer__legal{display:inline}
.footer__sep{margin-inline:.45rem;opacity:.45}
.footer__credit{
  color:rgba(255,255,255,.62);
  transition:color .3s;
  white-space:nowrap;
}
.footer__credit:hover{color:var(--brand-300)}
@media (max-width:620px){
  /* En pantalla estrecha el crédito baja a su propia línea */
  .footer__sep{display:none}
  .footer__credit{display:block;margin-top:.45rem}
}

/* Volver arriba */
.totop{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:8000;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-400);color:var(--ink-950);
  box-shadow:0 12px 30px -8px rgba(46,163,242,.6);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.85);
  transition:opacity .4s,visibility .4s,transform .45s var(--ease-spring),background-color .3s;
}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--white)}
.totop svg{width:19px;height:19px}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed;inset:0;z-index:9600;display:grid;place-items:center;
  background:rgba(2,9,26,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;padding:var(--gutter);
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__fig{max-width:min(1200px,92vw);max-height:84vh;position:relative;transform:scale(.94);transition:transform .5s var(--ease-out)}
.lightbox.is-open .lightbox__fig{transform:scale(1)}
.lightbox__fig img{max-height:78vh;width:auto;border-radius:var(--radius-m);box-shadow:var(--shadow-l)}
.lightbox__cap{margin-top:.9rem;text-align:center;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-200)}
.lightbox__close,.lightbox__nav{
  position:absolute;z-index:2;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;color:var(--white);
  border:1px solid rgba(168,226,255,.24);background:rgba(168,226,255,.08);
  transition:background-color .3s,transform .3s;
}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--brand-400);color:var(--ink-950);transform:scale(1.08)}
.lightbox__close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lightbox__nav{top:50%;translate:0 -50%}
.lightbox__nav--prev{left:clamp(.5rem,2vw,2rem)}
.lightbox__nav--next{right:clamp(.5rem,2vw,2rem)}
.lightbox svg{width:20px;height:20px}

/* ---------- CABECERA DE PÁGINA INTERNA ---------- */
.phero{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(165deg,var(--ink-900) 0%,var(--ink-800) 48%,var(--brand-700) 130%);
  padding-block:clamp(9rem,17vw,13.5rem) clamp(3.5rem,7vw,6rem);
  color:var(--white);
}
/* Capa de fotografía, mismo tratamiento que el hero de la portada:
   blanco y negro + duotono de marca, zoom lento y parallax. */
.phero__photo{position:absolute;inset:-8% 0;z-index:-4;margin:0;overflow:hidden}
.phero__photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  filter:grayscale(1) contrast(1.12) brightness(.8);
  animation:kenburns 34s ease-in-out infinite alternate;
  will-change:transform;
}
.phero__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(146deg,var(--brand-500) 0%,var(--brand-700) 44%,var(--ink-850) 100%);
  mix-blend-mode:color;opacity:.9;
}
/* Velo de legibilidad (el ::after de .phero lo ocupa el grano) */
.phero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(to top,var(--ink-950) 0%,rgba(2,9,26,.3) 46%,rgba(2,9,26,.5) 100%),
    linear-gradient(100deg,rgba(2,9,26,.8) 2%,rgba(2,9,26,.54) 32%,rgba(2,9,26,.2) 64%,rgba(2,9,26,0) 88%);
}
@media (max-width:900px){
  .phero::before{
    background:linear-gradient(to top,var(--ink-950) 0%,rgba(2,9,26,.58) 40%,rgba(2,9,26,.66) 100%);
  }
  .phero__photo img{filter:grayscale(1) contrast(1.1) brightness(.68)}
}
.phero__aura{
  position:absolute;z-index:-3;border-radius:50%;filter:blur(70px);opacity:.42;
  pointer-events:none;animation:drift 20s ease-in-out infinite;mix-blend-mode:screen;
}
.phero__aura--a{width:46vw;aspect-ratio:1;left:-10%;top:-30%;background:radial-gradient(circle,rgba(46,163,242,.6),transparent 66%)}
.phero__aura--b{width:38vw;aspect-ratio:1;right:-8%;bottom:-46%;background:radial-gradient(circle,rgba(95,200,255,.42),transparent 66%);animation-delay:-7s}
.phero__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-300);margin-bottom:1.5rem}
.phero__crumbs a{color:rgba(255,255,255,.6);transition:color .3s}
.phero__crumbs a:hover{color:var(--white)}
.phero__crumbs span{opacity:.4}
.phero__crumbs span:last-child{opacity:1;color:var(--green-400)}
/* Escala también por alto y admite partición: palabras largas como
   «Entrenamientos» se salían del ancho en móvil. */
.phero__title{
  font-size:clamp(2.4rem,min(8.6vw,11vh),5.96rem);
  max-width:16ch;
  overflow-wrap:break-word;
  hyphens:auto;
}
.phero__lead{margin-top:1.5rem;color:#b9d3f2;font-size:var(--step-1);max-width:56ch;line-height:1.5}
.phero__ghost{
  position:absolute;right:var(--gutter);bottom:-.18em;z-index:-1;
  font-family:var(--font-display);font-weight:900;font-size:clamp(6rem,20vw,17rem);
  line-height:.75;letter-spacing:-.05em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(168,226,255,.14);
  pointer-events:none;user-select:none;
}

/* ---------- home.css ---------- */
/* ============================================================
   CASP · 03 · HOME — hero y secciones de la landing
   ============================================================ */

/* =========== HERO =========== */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(8rem,15vh,11rem);
  background:var(--ink-950);color:var(--white);
}
/* El fondo del hero se compone de cuatro capas apiladas:
   1 foto en duotono · 2 estelas en canvas · 3 auroras · 4 curvas de la costa,
   y encima de todas un velo que garantiza la legibilidad del titular. */
.hero__bg{position:absolute;inset:0;z-index:-3;overflow:hidden;background:var(--ink-950)}

/* ---- Capa 1 · fotografía ---- */
.hero__photo{
  position:absolute;inset:-9% 0;z-index:0;margin:0;overflow:hidden;
}
.hero__photo img,.hero__photo video{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:grayscale(1) contrast(1.14) brightness(.82);
  animation:kenburns 34s ease-in-out infinite alternate;
  will-change:transform;
}
/* Duotono: la foto en gris se tiñe con la paleta del club */
.hero__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(146deg,var(--brand-500) 0%,var(--brand-700) 44%,var(--ink-850) 100%);
  mix-blend-mode:color;opacity:.9;
}
@keyframes kenburns{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.16) translate3d(-1.5%,-1%,0)}
}

/* ---- Capa 2 · estelas de luz ---- */
.hero__canvas{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  mix-blend-mode:screen;opacity:.85;pointer-events:none;
}

/* ---- Capa 3 · auroras mediterráneas ---- */
.aura{position:absolute;z-index:2;border-radius:50%;filter:blur(64px);will-change:transform;mix-blend-mode:screen}
.aura--1{width:52vw;aspect-ratio:1;left:-14%;top:-18%;background:radial-gradient(circle,rgba(27,77,168,.52),transparent 64%);animation:drift 26s ease-in-out infinite}
.aura--2{width:44vw;aspect-ratio:1;right:-10%;top:6%;background:radial-gradient(circle,rgba(46,163,242,.36),transparent 64%);animation:drift 22s ease-in-out infinite reverse;animation-delay:-6s}
.aura--3{width:60vw;aspect-ratio:1;left:26%;bottom:-42%;background:radial-gradient(circle,rgba(95,200,255,.2),transparent 66%);animation:drift 30s ease-in-out infinite;animation-delay:-13s}
.aura--sun{width:20vw;aspect-ratio:1;right:14%;top:12%;background:radial-gradient(circle,rgba(255,176,31,.24),transparent 62%);animation:float-y 12s ease-in-out infinite}
.aura--green{width:26vw;aspect-ratio:1;left:8%;bottom:-6%;background:radial-gradient(circle,rgba(118,184,43,.26),transparent 64%);animation:drift 28s ease-in-out infinite;animation-delay:-9s}

/* ---- Velo de legibilidad ---- */
.hero__bg::after{
  content:"";position:absolute;inset:0;z-index:4;
  background:
    /* foco oscuro justo detrás del bloque de texto, sin apagar la foto entera */
    radial-gradient(78% 66% at 6% 52%,rgba(2,9,26,.7),transparent 72%),
    linear-gradient(to top,var(--ink-950) 1%,rgba(2,9,26,.24) 30%,rgba(2,9,26,.42) 100%),
    linear-gradient(100deg,rgba(2,9,26,.7) 4%,rgba(2,9,26,.46) 28%,rgba(2,9,26,.16) 58%,rgba(2,9,26,0) 80%);
}

/* En vertical el texto ocupa todo el ancho: el velo pasa a ser vertical
   para que la foto siga viéndose arriba sin restar legibilidad. */
@media (max-width:900px){
  .hero__bg::after{
    background:
      linear-gradient(to top,var(--ink-950) 1%,rgba(2,9,26,.6) 30%,rgba(2,9,26,.72) 72%,rgba(2,9,26,.42) 100%),
      radial-gradient(130% 46% at 50% 24%,rgba(2,9,26,.34),transparent 78%);
  }
  .hero__photo img,.hero__photo video{filter:grayscale(1) contrast(1.1) brightness(.7)}
}

/* ---- Capa 4 · curvas de nivel ---- */
.contours{position:absolute;inset:0;width:100%;height:100%;z-index:3;opacity:.3}
.contours path{
  fill:none;stroke:rgba(168,226,255,.5);stroke-width:1;
  stroke-dasharray:2400;stroke-dashoffset:2400;
  animation:dash 3.4s var(--ease-out) forwards;
}
.contours path:nth-child(2){animation-delay:.18s;stroke:rgba(46,163,242,.55)}
.contours path:nth-child(3){animation-delay:.36s}
.contours path:nth-child(4){animation-delay:.54s;stroke:rgba(255,176,31,.34)}
.contours path:nth-child(5){animation-delay:.72s}
.contours path:nth-child(6){animation-delay:.9s}

.hero__inner{
  position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,4vw,4.5rem);align-items:end;
  padding-bottom:clamp(.9rem,1.9vw,1.9rem);
}
@media (max-width:1024px){.hero__inner{grid-template-columns:1fr;align-items:start}}

.hero__kicker{
  display:inline-flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  margin-bottom:clamp(1rem,2vw,1.7rem);
}
/* El titular se escala por ancho Y por alto: así la franja de datos
   sigue entrando en pantalla en portátiles de 800-900 px de alto. */
.hero__title{
  font-size:clamp(2.85rem,min(7.6vw,12vh),6.6rem);
  font-weight:900;letter-spacing:-.05em;line-height:.86;
  text-transform:uppercase;white-space:nowrap;
}
.hero__title em{font-style:normal;display:inline-block}
.hero__title .l2{
  color:transparent;-webkit-text-stroke:1.6px var(--brand-300);
  transition:color .6s var(--ease-out);
}
.hero:hover .hero__title .l2{color:rgba(95,200,255,.14)}
.hero__title .l3{
  background:linear-gradient(96deg,var(--brand-300),var(--white) 42%,var(--brand-400));
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 7s linear infinite;
}
.hero__lead{
  margin-top:clamp(1.1rem,2vw,1.6rem);
  font-size:var(--step-1);line-height:1.5;color:#bcd7f5;max-width:46ch;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(1.3rem,2.4vw,2rem)}
@media (max-width:560px){
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}
}

/* Tarjeta flotante “próxima carrera” con cuenta atrás */
.nextrace{
  position:relative;border-radius:var(--radius-l);overflow:hidden;
  border:1px solid rgba(168,226,255,.2);
  background:rgba(7,26,61,.55);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 34px 70px -26px rgba(2,9,26,.9);
  animation:float-y 9s ease-in-out infinite;
}
.nextrace::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(140deg,rgba(46,163,242,.24),transparent 52%);
}
.nextrace__head{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.6rem 1rem;padding:1rem 1.35rem;
  border-bottom:1px solid rgba(168,226,255,.14);
}
.nextrace__body{position:relative;padding:1.35rem}
.nextrace__name{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);line-height:1.02;letter-spacing:-.025em;text-transform:uppercase}
.nextrace__meta{
  display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:.75rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand-200);
}
.nextrace__meta span{display:inline-flex;align-items:center;gap:.4rem}
.nextrace__meta svg{width:13px;height:13px;color:var(--brand-400)}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:1.2rem}
.countdown__cell{
  text-align:center;padding:.7rem .35rem;border-radius:14px;
  background:rgba(2,9,26,.42);border:1px solid rgba(168,226,255,.13);
}
.countdown__n{
  display:block;font-family:var(--font-mono);font-weight:700;
  font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1;color:var(--white);
  font-variant-numeric:tabular-nums;
}
.countdown__l{
  display:block;margin-top:.35rem;font-family:var(--font-mono);
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-300);
}
.nextrace__foot{position:relative;padding:0 1.35rem 1.35rem}

/* Franja de datos al pie del hero */
.hero__stats{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(168,226,255,.14);
}
@media (max-width:760px){.hero__stats{grid-template-columns:repeat(2,1fr)}}
.hero__stat{
  padding:clamp(.75rem,1.4vw,1.1rem) clamp(.6rem,1.6vw,1.4rem);
  border-right:1px solid rgba(168,226,255,.12);
  transition:background-color .45s;
}
.hero__stat:last-child{border-right:0}
.hero__stat:hover{background:rgba(46,163,242,.1)}
@media (max-width:760px){
  .hero__stat:nth-child(2n){border-right:0}
  .hero__stat:nth-child(-n+2){border-bottom:1px solid rgba(168,226,255,.12)}
}
.hero__stat b{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.6rem,3.1vw,2.45rem);line-height:1;letter-spacing:-.035em;
  color:var(--white);font-variant-numeric:tabular-nums;
}
.hero__stat b i{font-style:normal;color:var(--brand-400);font-size:.62em;vertical-align:.12em;margin-left:.06em}
/* Cuando el signo va delante (+225 en vez de 35ª) el aire cambia de lado */
.hero__stat b i:first-child{margin-left:0;margin-right:.04em}
.hero__stat>span{
  display:block;margin-top:.4rem;font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:#7fa3ce;
}

/* Indicador de scroll */
/* Indicador de scroll: pegado al borde izquierdo y en vertical, fuera de la
   columna de contenido, para que no choque ni con los botones ni con la tarjeta. */
.scrollcue{
  position:absolute;left:calc(var(--gutter) * .32);top:50%;translate:0 -50%;z-index:3;
  display:grid;justify-items:center;gap:.9rem;pointer-events:none;
}
@media (max-width:1199px),(max-height:700px){.scrollcue{display:none}}
.scrollcue__line{width:1px;height:74px;background:linear-gradient(to bottom,transparent,var(--brand-400));position:relative;overflow:hidden}
.scrollcue__line::after{
  content:"";position:absolute;top:-74px;left:0;width:100%;height:74px;
  background:linear-gradient(to bottom,transparent,var(--white));
  animation:cue 2.2s var(--ease-in-out) infinite;
}
@keyframes cue{to{top:74px}}
.scrollcue span{
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.32em;
  text-transform:uppercase;color:#7fa3ce;
  writing-mode:vertical-rl;
}

/* =========== BANDA CINÉTICA =========== */
.band{
  position:relative;overflow:hidden;
  padding-block:clamp(1.4rem,2.6vw,2.2rem);
  background:var(--brand-400);color:var(--ink-950);
  border-block:1px solid rgba(2,9,26,.14);
}
.band--dark{background:var(--ink-900);color:var(--white)}
.band--outline .marquee__item{color:transparent;-webkit-text-stroke:1.2px currentColor}
.band__skew{transform:rotate(-1.6deg) scale(1.04)}

/* =========== INTRO / EL CLUB =========== */
.intro{position:relative;overflow:hidden}
.intro__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
@media (max-width:960px){.intro__grid{grid-template-columns:1fr}}
.intro__big{font-size:var(--step-4);line-height:1.14;letter-spacing:-.025em;font-family:var(--font-display);font-weight:700;text-wrap:balance}
.intro__big b{font-weight:900;color:var(--brand-500)}
.intro__collage{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.7rem,1.4vw,1.1rem)}
/* Cada hueco lleva la proporción nativa de su foto, para que el recorte sea
   mínimo o nulo: 3:2 el arco, 3:4 la vertical de 2010, 1:1 la multitud
   (ya recortada en cuadrado) y 16:10 la foto de socios. */
.intro__collage .media:nth-child(1){grid-column:1/5;--ratio:3/2}
.intro__collage .media:nth-child(2){grid-column:5/7;--ratio:3/4;align-self:end}
.intro__collage .media:nth-child(3){grid-column:1/3;--ratio:1/1}
.intro__collage .media:nth-child(4){grid-column:3/7;--ratio:16/10}
/* El arco y los corredores quedan en el tercio superior: encuadre un poco alto */
.intro__collage .media:nth-child(1) img{object-position:50% 44%}
.intro__collage .media:nth-child(4) img{object-position:50% 38%}
.intro__badge{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:5;
  width:clamp(96px,11vw,136px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;text-align:center;
  background:var(--ink-900);color:var(--white);
  box-shadow:0 22px 50px -14px rgba(5,18,44,.6);
  border:1px solid rgba(168,226,255,.2);
}
.intro__badge b{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1;color:var(--brand-300)}
.intro__badge span{display:block;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;margin-top:.25rem;color:#8fb2da}
.intro__badge::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1px dashed rgba(46,163,242,.4);animation:spin-slow 26s linear infinite;
}

/* Estadísticas con contador */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(2.5rem,5vw,4rem)}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{
  position:relative;padding:clamp(1.3rem,2.4vw,1.9rem);
  border-radius:var(--radius-m);border:1px solid var(--line);
  background:var(--surface);overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s,border-color .4s;
}
.stat:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:rgba(46,163,242,.4)}
.stat::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--brand-500),var(--brand-300) 55%,var(--green-400));
  transition:width .8s var(--ease-out);
}
.stat:hover::after{width:100%}
.stat b{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(2rem,4.4vw,3.2rem);line-height:.95;letter-spacing:-.04em;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.stat b i{font-style:normal;color:var(--brand-400);font-size:.62em;vertical-align:.12em;margin-left:.06em}
.stat b i:first-child{margin-left:0;margin-right:.04em}
.stat>span{display:block;margin-top:.55rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}

/* =========== CABECERA DE SECCIÓN =========== */
.shead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(2.2rem,4.5vw,3.8rem)}
.shead__t{flex:1 1 460px}
.shead__t h2{margin-top:1rem}
.shead__a{flex:none}

/* =========== CARRERAS =========== */
.races{position:relative;overflow:hidden}
.races__list{display:grid;gap:clamp(1rem,2vw,1.6rem)}
.race{
  position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(1.2rem,3vw,2.6rem);align-items:center;
  padding:clamp(1.4rem,2.8vw,2.2rem);
  border-radius:var(--radius-l);
  border:1px solid var(--line);
  background:var(--surface);
  overflow:hidden;isolation:isolate;
  transition:transform .55s var(--ease-out),box-shadow .55s,border-color .45s,color .45s;
}
.race::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,var(--ink-900),var(--brand-700));
  clip-path:inset(0 0 100% 0);
  transition:clip-path .62s var(--ease-in-out);
}
.race:hover{color:var(--white);border-color:transparent;box-shadow:var(--shadow-l);transform:translateY(-4px)}
.race:hover::before{clip-path:inset(0 0 0 0)}
.race:hover .race__num{color:rgba(168,226,255,.32)}
.race:hover .race__desc{color:#bcd7f5}
.race:hover .race__ed{border-color:rgba(168,226,255,.3);color:var(--brand-200)}
.race:hover .race__thumb{opacity:1;transform:translateY(-50%) scale(1) rotate(-3deg)}
.race:hover .race__go{background:var(--brand-400);color:var(--ink-950);border-color:transparent}

.race__num{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1;letter-spacing:-.04em;
  color:var(--foam-100);transition:color .45s;flex:none;
  font-variant-numeric:tabular-nums;
}
.race__main{display:block;min-width:0}
.race__top{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.6rem}
.race__ed{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:7px;border:1px solid var(--line);color:var(--text-mute);
  transition:color .4s,border-color .4s;
}
.race__name{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--step-3);line-height:1;letter-spacing:-.03em;text-transform:uppercase}
.race__desc{display:block;margin-top:.7rem;font-size:.95rem;color:var(--text-soft);max-width:56ch;transition:color .45s}
.race__go{
  width:60px;height:60px;flex:none;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line);color:currentColor;
  transition:background-color .4s,color .4s,transform .45s var(--ease-spring),border-color .4s;
}
.race__go svg{width:20px;height:20px;transition:transform .4s var(--ease-out)}
.race:hover .race__go svg{transform:translate(3px,-3px)}
.race__thumb{
  position:absolute;right:9rem;top:50%;z-index:-1;
  width:clamp(140px,15vw,210px);aspect-ratio:16/10;border-radius:16px;overflow:hidden;
  opacity:0;transform:translateY(-50%) scale(.86) rotate(-9deg);
  transition:opacity .5s var(--ease-out),transform .6s var(--ease-spring);
  box-shadow:0 26px 50px -18px rgba(2,9,26,.7);pointer-events:none;
  background:var(--white);
}
.race__thumb img{width:100%;height:100%;object-fit:contain;padding:10px;background:var(--white)}
/* Para logotipos en negativo: su texto es blanco y sobre la placa blanca
   por defecto desaparecería, dejando solo el icono suelto. */
.race__thumb--dark,
.race__thumb--dark img{background:var(--ink-800)}
.race__thumb--dark img{padding:14px}
@media (max-width:900px){
  .race{grid-template-columns:auto minmax(0,1fr);row-gap:1rem}
  .race__go{grid-column:2;justify-self:start}
  .race__thumb{display:none}
}

/* Aviso hacia el archivo de pruebas retiradas */
.archive-note{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;
  margin-top:clamp(1.6rem,3vw,2.4rem);
  padding:clamp(1.2rem,2.4vw,1.7rem);
  border-radius:var(--radius-l);
  border:1px dashed var(--line);
  background:transparent;
  transition:background-color .4s,border-color .4s;
}
.archive-note:hover{border-style:solid;border-color:rgba(46,163,242,.4);background:var(--surface)}
.archive-note__ico{
  width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:rgba(46,163,242,.12);color:var(--brand-500);
}
.archive-note__ico svg{width:20px;height:20px}
.archive-note>div{flex:1 1 320px}
.archive-note b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:.25rem}

/* =========== ENTRENAMIENTOS (CTA partido) =========== */
.train{position:relative;overflow:hidden;background:var(--ink-900);color:var(--white);isolation:isolate}
.train__bg{position:absolute;inset:0;z-index:-2}
.train__bg img{width:100%;height:100%;object-fit:cover;opacity:.24;filter:saturate(.5) contrast(1.05)}
.train__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--ink-950) 8%,rgba(5,18,44,.82) 46%,rgba(10,36,82,.5))}
.train__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(2rem,5vw,5rem);align-items:center}
@media (max-width:960px){.train__grid{grid-template-columns:1fr}}
.train__title{font-size:var(--step-6)}
.train__sched{display:grid;gap:.6rem;margin-top:2rem}
.trow{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.25rem;border-radius:16px;
  border:1px solid rgba(168,226,255,.16);background:rgba(168,226,255,.05);
  transition:background-color .4s,transform .45s var(--ease-out),border-color .4s;
}
.trow:hover{background:rgba(46,163,242,.16);transform:translateX(6px);border-color:rgba(46,163,242,.4)}
.trow--ok .trow__time{color:var(--green-400)}
.trow--ok:hover{background:rgba(118,184,43,.14);border-color:rgba(118,184,43,.45)}
.trow__day{
  font-family:var(--font-display);font-weight:900;font-size:1.02rem;
  text-transform:uppercase;letter-spacing:-.01em;min-width:74px;flex:none;
}
.trow__time{font-family:var(--font-mono);font-size:.86rem;color:var(--brand-300);flex:none}
.trow__where{font-size:.88rem;color:#a9c2e6;margin-left:auto;text-align:right}

/* =========== HAZTE SOCIO =========== */
.join{position:relative;overflow:hidden}
.join__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:960px){.join__grid{grid-template-columns:1fr}}
.perks{display:grid;gap:.7rem;margin-top:2rem}
.perk{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.1rem 1.25rem;border-radius:var(--radius-m);
  background:var(--surface);border:1px solid var(--line);
  transition:transform .45s var(--ease-out),box-shadow .45s,border-color .4s;
}
.perk:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:rgba(46,163,242,.4)}
.perk__ico{
  width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand-600),var(--brand-400));color:var(--white);
  box-shadow:0 8px 20px -8px rgba(46,163,242,.7);
}
.perk__ico svg{width:19px;height:19px}
.perk__ico--ok{background:linear-gradient(140deg,var(--green-600),var(--green-400));box-shadow:0 8px 20px -8px rgba(118,184,43,.75)}
.perk b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:.2rem}
.perk p{font-size:.88rem;color:var(--text-soft);line-height:1.5}

/* Tarjeta de socio 3D */
.memcard{
  position:relative;aspect-ratio:1.6/1;border-radius:26px;overflow:hidden;
  background:linear-gradient(135deg,var(--ink-900),var(--brand-700) 58%,var(--brand-500));
  color:var(--white);padding:clamp(1.4rem,3vw,2.2rem);
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 40px 80px -28px rgba(5,18,44,.6);
  transform-style:preserve-3d;
  transition:transform .5s var(--ease-out);
  will-change:transform;
}
.memcard::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 60% at 88% 10%,rgba(255,176,31,.24),transparent 60%),
    radial-gradient(60% 60% at 6% 96%,rgba(95,200,255,.34),transparent 60%);
}
.memcard::after{
  content:"";position:absolute;top:-60%;left:-30%;width:60%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:rotate(22deg);transition:left .9s var(--ease-in-out);
}
.memcard:hover::after{left:120%}
.memcard>*{position:relative;z-index:2}
.memcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.memcard__logo{flex:none;display:inline-flex;align-items:center}
/* Altura explícita: dentro de un contenedor centrado, height:100% no tiene
   base contra la que resolverse y la imagen saldría a tamaño natural. */
.memcard__logo img{
  display:block;height:52px;width:auto;max-width:none;
  filter:drop-shadow(0 2px 8px rgba(2,9,26,.4));
}
.memcard__name{font-family:var(--font-display);font-weight:900;font-size:var(--step-2);line-height:1;letter-spacing:-.03em;text-transform:uppercase}
.memcard__row{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brand-200)}
.memcard__num{font-family:var(--font-mono);font-size:clamp(.9rem,2vw,1.15rem);letter-spacing:.24em;color:var(--white)}

/* =========== NOTICIAS =========== */
.news__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2rem)}
@media (max-width:900px){.news__grid{grid-template-columns:1fr}}
.post{display:flex;flex-direction:column;height:100%}
.post .media{--ratio:16/10;border-radius:0}
.post__body{padding:clamp(1.3rem,2.2vw,1.7rem);display:grid;gap:.75rem;align-content:start;flex:1}
.post__meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}
.post__meta b{color:var(--brand-400);font-weight:500}
.post__title{font-family:var(--font-display);font-weight:800;font-size:var(--step-1);line-height:1.12;letter-spacing:-.025em;transition:color .35s}
.post:hover .post__title{color:var(--brand-500)}
.post__x{font-size:.9rem;color:var(--text-soft);line-height:1.55}
.post__foot{margin-top:auto;padding-top:.4rem}

/* =========== GALERÍA =========== */
.gallery{position:relative;overflow:hidden}
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.6rem,1.2vw,1rem)}
.gal__i{position:relative;overflow:hidden;border-radius:var(--radius-m);cursor:pointer;background:var(--ink-800)}
.gal__i img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out),filter .6s}
.gal__i:hover img{transform:scale(1.08)}
.gal__i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(2,9,26,.72),transparent 52%);
  opacity:0;transition:opacity .45s;
}
.gal__i:hover::after{opacity:1}
.gal__cap{
  position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:2;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--white);
  opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--ease-out),transform .45s var(--ease-out);
}
.gal__i:hover .gal__cap{opacity:1;transform:none}
.gal__i--a{grid-column:span 7;aspect-ratio:16/11}
.gal__i--b{grid-column:span 5;aspect-ratio:4/3}
.gal__i--c{grid-column:span 4;aspect-ratio:1/1}
.gal__i--d{grid-column:span 4;aspect-ratio:1/1}
.gal__i--e{grid-column:span 4;aspect-ratio:1/1}
/* Tercera fila: dos mitades iguales. Ambas fotos son 3:2, así que entran
   sin recorte y con la misma altura. */
.gal__i--f,.gal__i--g{grid-column:span 6;aspect-ratio:3/2}
@media (max-width:760px){
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal__i--a,.gal__i--b,.gal__i--f,.gal__i--g{grid-column:span 2;aspect-ratio:16/10}
  .gal__i--c,.gal__i--d,.gal__i--e{grid-column:span 1;aspect-ratio:1/1}
}

/* =========== PATROCINADORES =========== */
.sponsors{background:var(--white);border-block:1px solid var(--line);--logo-h:clamp(52px,6.4vw,74px)}
/* Caja de tamaño fijo con object-fit: contain. Los logos de las carreras son
   muy apaisados (4,3:1) y los institucionales casi cuadrados; sin una caja
   común los primeros salían el triple de anchos que los segundos. */
/* La altura va FIJA a propósito. Sin ella la banda mide 0, no entra nunca en
   el viewport, las imágenes `loading="lazy"` no se cargan y la banda se queda
   en 0 para siempre. Además evita el salto de maquetación al cargar. */
.sponsor{
  flex:none;
  width:clamp(140px,17vw,210px);
  height:var(--logo-h);
  display:grid;place-items:center;
  transition:transform .45s var(--ease-out);
}
/* El tope de altura va en unidades absolutas, no en porcentaje: dentro de un
   contenedor con place-items:center el porcentaje no tiene base contra la que
   resolverse y los logos altos se desbordaban de la caja. */
/* En color y a plena opacidad: no son marcas ajenas que haya que atenuar,
   son las propias carreras del club. */
.sponsor img{
  max-width:100%;max-height:var(--logo-h);
  width:auto;height:auto;
  transition:transform .45s var(--ease-out);
}
.sponsor:hover{transform:scale(1.06)}

/* Para logos en negativo: su texto es blanco y sobre la banda blanca
   solo se vería el icono suelto. */
.sponsor--dark{
  background:var(--ink-800);border-radius:12px;padding:9px 16px;
}
.sponsor--dark img{max-height:calc(var(--logo-h) - 20px);filter:grayscale(1) opacity(.72)}
.sponsor--dark:hover img{filter:none}

/* =========== CTA FINAL =========== */
.cta{position:relative;overflow:hidden;background:var(--ink-950);color:var(--white);isolation:isolate;text-align:center}
.cta__aura{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(900px,110vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(46,163,242,.3),transparent 62%);filter:blur(30px);z-index:-1;animation:float-y 11s ease-in-out infinite}
.cta__title{font-size:var(--step-7);text-transform:uppercase}
.cta__actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:clamp(2rem,4vw,3rem)}

/* ---------- pages.css ---------- */
/* ============================================================
   CASP · 04 · PAGES — calendario y páginas internas
   ============================================================ */

/* =========== CALENDARIO · controles =========== */
.calbar{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  margin-bottom:clamp(1.6rem,3vw,2.6rem);
}
.calfilters{display:flex;flex-wrap:wrap;gap:.5rem}
.filt{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.05rem;border-radius:100px;
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--text-soft);background:transparent;
  transition:background-color .35s,color .35s,border-color .35s,transform .35s var(--ease-spring);
}
.filt:hover{border-color:var(--brand-400);color:var(--brand-400);transform:translateY(-2px)}
.filt[aria-pressed="true"]{
  background:var(--ink-900);color:var(--white);
  border-color:var(--green-500);
  box-shadow:0 0 0 3px rgba(118,184,43,.2);
}
.filt__dot{width:7px;height:7px;border-radius:50%;background:var(--k,var(--brand-400));flex:none}

.calswitch{display:inline-flex;padding:4px;border-radius:100px;border:1px solid var(--line);background:var(--surface);gap:2px}
.calswitch button{
  padding:.55rem 1.05rem;border-radius:100px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-mute);transition:background-color .35s,color .35s;
}
.calswitch button[aria-selected="true"]{
  background:var(--ink-900);color:var(--white);
  box-shadow:inset 0 -2.5px 0 var(--green-400);
}

/* =========== CALENDARIO · timeline de temporada =========== */
.timeline{position:relative}
.timeline__scroll{
  display:flex;gap:clamp(.9rem,1.8vw,1.4rem);
  overflow-x:auto;overflow-y:hidden;
  padding:clamp(2.6rem,4vw,3.4rem) 2px clamp(1.6rem,3vw,2.2rem);
  scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--brand-400) transparent;
  cursor:grab;
}
.timeline__scroll.is-drag{cursor:grabbing;scroll-snap-type:none}
.timeline__scroll::-webkit-scrollbar{height:5px}
.timeline__scroll::-webkit-scrollbar-track{background:var(--line);border-radius:9px}
.timeline__scroll::-webkit-scrollbar-thumb{background:var(--brand-400);border-radius:9px}
/* Raíl horizontal de la temporada */
.timeline::before{
  content:"";position:absolute;left:0;right:0;top:clamp(2.6rem,4vw,3.4rem);height:2px;
  background:linear-gradient(90deg,transparent,var(--line) 4%,var(--line) 96%,transparent);
  pointer-events:none;
}

.tcard{
  position:relative;flex:none;width:clamp(255px,25vw,320px);
  scroll-snap-align:start;
  padding-top:2.4rem;
  transition:opacity .45s var(--ease-out),transform .5s var(--ease-out),filter .45s;
}
.tcard[hidden]{display:none}
.tcard.is-off{opacity:.24;filter:grayscale(1);pointer-events:none}
/* Nodo sobre el raíl */
.tcard__node{
  position:absolute;top:calc(clamp(2.6rem,4vw,3.4rem) * 0 + 0px);left:1.6rem;
  width:15px;height:15px;border-radius:50%;
  background:var(--surface);border:3px solid var(--k,var(--brand-400));
  z-index:2;transition:transform .45s var(--ease-spring),box-shadow .4s;
  translate:-50% -50%;
  top:0;
}
.tcard:hover .tcard__node{transform:scale(1.5);box-shadow:0 0 0 7px color-mix(in srgb,var(--k,var(--brand-400)) 22%,transparent)}
.tcard__node::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid var(--k,var(--brand-400));opacity:0;
}
.tcard.is-next .tcard__node::after{opacity:1;animation:pulse-ring 2.1s var(--ease-out) infinite}
.tcard__stem{position:absolute;top:0;left:1.6rem;width:2px;height:2.4rem;background:linear-gradient(to bottom,var(--k,var(--brand-400)),transparent)}

.tcard__inner{
  position:relative;height:100%;border-radius:var(--radius-l);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);
  padding:clamp(1.2rem,2.2vw,1.6rem);
  display:grid;gap:.9rem;align-content:start;
  transition:transform .5s var(--ease-out),box-shadow .5s,border-color .4s;
}
.tcard:hover .tcard__inner{transform:translateY(-6px);box-shadow:var(--shadow-l);border-color:color-mix(in srgb,var(--k,var(--brand-400)) 55%,transparent)}
.tcard__inner::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--k,var(--brand-400)),transparent);
}
.tcard__date{
  display:flex;align-items:baseline;gap:.55rem;
  font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;line-height:1;
}
.tcard__d{font-size:clamp(2.1rem,4vw,2.9rem);color:var(--text);font-variant-numeric:tabular-nums}
.tcard__m{font-size:.9rem;text-transform:uppercase;color:var(--k,var(--brand-400));letter-spacing:.06em}
.tcard__y{margin-left:auto;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;color:var(--text-mute)}
.tcard__name{font-family:var(--font-display);font-weight:800;font-size:1.12rem;line-height:1.14;letter-spacing:-.02em;text-transform:uppercase}
.tcard__tags{display:flex;flex-wrap:wrap;gap:.35rem}
.tcard__x{font-size:.85rem;color:var(--text-soft);line-height:1.5}
.tcard__foot{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.35rem .8rem;
  padding-top:.5rem;border-top:1px solid var(--line);margin-top:.2rem;
}
/* La web de la carrera se muestra por su dominio, en mono: más informativo
   que un «Ver más» y encaja con el resto de datos técnicos de la tarjeta. */
/* Siempre en su propia línea y alineada a la izquierda: así todas las
   tarjetas se leen igual y un dominio largo como el de la Carrera al
   Amanecer no se parte a media palabra. */
.tcard__site{
  flex:1 0 100%;justify-content:flex-start;
  font-family:var(--font-mono);font-size:.57rem;letter-spacing:.01em;
  line-height:1.4;overflow-wrap:anywhere;
}
.tcard__site svg{flex:none;width:11px;height:11px}

/* Separador de mes dentro del timeline */
.tmonth{
  flex:none;align-self:stretch;display:grid;align-content:center;justify-items:center;
  padding-top:2.4rem;padding-inline:.4rem;
}
.tmonth span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--text-mute);
}

/* =========== CALENDARIO · rejilla de meses =========== */
.months{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem)}
@media (max-width:1080px){.months{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.months{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.months{grid-template-columns:1fr}}
.month{
  position:relative;border-radius:var(--radius-m);
  border:1px solid var(--line);background:var(--surface);
  padding:1.15rem;min-height:168px;overflow:hidden;
  display:grid;gap:.7rem;align-content:start;
  transition:transform .45s var(--ease-out),box-shadow .45s,border-color .4s;
}
.month.has-ev:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:rgba(46,163,242,.45)}
.month.is-empty{background:transparent;border-style:dashed;opacity:.6}
.month__h{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.month__n{font-family:var(--font-display);font-weight:800;font-size:1.05rem;text-transform:uppercase;letter-spacing:-.02em}
.month__y{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;color:var(--text-mute)}
.month__ghost{
  position:absolute;right:.5rem;bottom:-.3rem;
  font-family:var(--font-display);font-weight:900;font-size:3.6rem;line-height:1;
  color:var(--foam-100);z-index:0;pointer-events:none;font-variant-numeric:tabular-nums;
}
.month>*{position:relative;z-index:1}
.mev{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.65rem;align-items:start;
  padding:.55rem;border-radius:11px;
  border-left:3px solid var(--k,var(--brand-400));
  background:color-mix(in srgb,var(--k,var(--brand-400)) 8%,transparent);
  transition:background-color .35s,transform .35s var(--ease-out);
}
.mev:hover{background:color-mix(in srgb,var(--k,var(--brand-400)) 18%,transparent);transform:translateX(3px)}
.mev__d{font-family:var(--font-mono);font-weight:700;font-size:.86rem;color:var(--k,var(--brand-400));line-height:1.2;font-variant-numeric:tabular-nums}
.mev__n{font-size:.78rem;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.mev__t{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);margin-top:.15rem;font-weight:400}
.month__empty{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-mute)}

.calnote{
  margin-top:clamp(1.6rem,3vw,2.4rem);padding:1.15rem 1.35rem;
  border-radius:var(--radius-m);border:1px solid rgba(255,176,31,.34);
  background:rgba(255,176,31,.09);
  display:flex;gap:.9rem;align-items:flex-start;font-size:.88rem;color:var(--text-soft);
}
.calnote svg{width:19px;height:19px;flex:none;color:var(--sun-500);margin-top:.15rem}
.calnote b{color:var(--text)}

/* =========== HISTORIA · línea de tiempo vertical =========== */
.vt{position:relative;display:grid;gap:clamp(1.6rem,3vw,2.6rem);padding-left:clamp(1.6rem,4vw,3rem)}
.vt::before{
  content:"";position:absolute;left:clamp(.35rem,1vw,.7rem);top:.6rem;bottom:.6rem;width:2px;
  background:linear-gradient(to bottom,var(--brand-400),var(--brand-200) 55%,transparent);
}
.vtitem{position:relative}
.vtitem::before{
  content:"";position:absolute;left:calc(-1 * clamp(1.6rem,4vw,3rem) + clamp(.35rem,1vw,.7rem) - 5px);
  top:.55rem;width:12px;height:12px;border-radius:50%;
  background:var(--surface);border:3px solid var(--brand-400);
}
.vtitem__y{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-400);margin-bottom:.4rem}
.vtitem:last-child .vtitem__y{color:var(--green-400)}
.vtitem:last-child::before{border-color:var(--green-500)}
.vtitem__t{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);line-height:1.08;letter-spacing:-.025em;margin-bottom:.6rem}

/* =========== JUNTA DIRECTIVA ===========
   Sin retratos: cada miembro se identifica con un monograma de iniciales.
   Azul para los cargos de la mesa, verde para los vocales. */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:clamp(.8rem,1.6vw,1.2rem)}
.bmember{
  position:relative;display:flex;align-items:center;gap:1.1rem;
  padding:1.15rem 1.25rem;border-radius:var(--radius-m);
  border:1px solid var(--line);background:var(--surface);overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s,border-color .4s;
}
.bmember:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:rgba(46,163,242,.45)}
.bmember__mono{
  width:56px;height:56px;flex:none;border-radius:16px;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:900;font-size:1.12rem;
  letter-spacing:-.02em;color:var(--white);
  background:linear-gradient(140deg,var(--brand-600),var(--brand-400));
  box-shadow:0 8px 20px -9px rgba(46,163,242,.7);
  transition:transform .45s var(--ease-spring);
}
.bmember:hover .bmember__mono{transform:rotate(-6deg) scale(1.06)}
.bmember__mono--ok{
  background:linear-gradient(140deg,var(--green-600),var(--green-400));
  box-shadow:0 8px 20px -9px rgba(118,184,43,.75);
}
.bmember__b{display:grid;gap:.3rem;min-width:0}
.bmember__r{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:var(--brand-400)}
.bmember__mono--ok+.bmember__b .bmember__r{color:var(--green-600)}
.bmember__n{font-family:var(--font-display);font-weight:800;font-size:1rem;line-height:1.15;letter-spacing:-.02em;text-transform:uppercase}

/* Ficha destacada del presidente, a ancho completo sobre la rejilla */
.bmember--lead{
  grid-column:1/-1;gap:clamp(1.2rem,2.4vw,1.8rem);
  padding:clamp(1.4rem,2.6vw,2rem);
  border-radius:var(--radius-l);
  background:linear-gradient(120deg,var(--foam-50),var(--surface) 60%);
}
.bmember--lead .bmember__mono{width:76px;height:76px;border-radius:20px;font-size:1.5rem}
.bmember--lead .bmember__n{font-size:var(--step-2)}
.bmember--lead .bmember__b{gap:.45rem}
@media (max-width:520px){
  .bmember{flex-direction:column;align-items:flex-start;text-align:left}
}

/* =========== EQUIPACIONES =========== */
.kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:clamp(1rem,2vw,1.4rem)}
.kititem{
  position:relative;border-radius:var(--radius-l);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease-out),box-shadow .5s,border-color .4s;
}
.kititem:hover{transform:translateY(-6px);box-shadow:var(--shadow-l);border-color:rgba(46,163,242,.45)}
.kititem .media{--ratio:1/1;border-radius:0}
/* Sin foto de producto: en su lugar el logo del club.
   Fondo CLARO a propósito: el PNG del logo lleva un halo blanco horneado y
   sobre fondo oscuro se vería como un recorte sucio. */
.media--logo{
  display:grid;place-items:center;padding:13%;
  background:var(--foam-50);
}
.media--logo img{
  width:100%;height:auto;max-width:200px;object-fit:contain;
  transition:transform .55s var(--ease-out);
}
.kititem:hover .media--logo img{transform:scale(1.05)}
/* En la cabecera de un articulo la caja es muy grande (unos 880 px): con el
   tope de 200px el logo se queda diminuto y perdido. Aqui sube a casi la
   mitad del ancho. */
.article__hero.media--logo img{max-width:min(380px,46%)}
/* El fondo claro sólo para fotos reales: si lo aplicásemos también al
   placeholder taparía su degradado oscuro y el texto quedaría ilegible. */
.kititem .media:not(.media--ph):not(.media--logo){background:var(--foam-50)}
.kititem__b{padding:1.15rem;display:grid;gap:.5rem;flex:1;align-content:start}
.kititem__n{font-family:var(--font-display);font-weight:800;font-size:.95rem;line-height:1.2;letter-spacing:-.015em;text-transform:uppercase}
.kititem__p{
  font-family:var(--font-mono);font-weight:700;font-size:1.28rem;color:var(--brand-500);
  display:flex;align-items:baseline;gap:.35rem;margin-top:auto;
}
.kititem__p small{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);font-weight:400}
.kititem__tag{position:absolute;top:.8rem;left:.8rem;z-index:2}

/* =========== NOTICIAS (listado) =========== */
.plist{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.pitem{
  display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.4rem);align-items:center;
  padding:clamp(1rem,2vw,1.4rem);border-radius:var(--radius-l);
  border:1px solid var(--line);background:var(--surface);
  transition:transform .5s var(--ease-out),box-shadow .5s,border-color .4s;
}
.pitem:hover{transform:translateY(-4px);box-shadow:var(--shadow-l);border-color:rgba(46,163,242,.45)}
.pitem .media{--ratio:16/11}
.pitem__b{display:grid;gap:.7rem;align-content:center;padding-right:1rem}
@media (max-width:760px){.pitem{grid-template-columns:1fr}.pitem__b{padding-right:0}}

/* =========== CONTACTO =========== */
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,4vw,4rem);align-items:start}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr}}
.infolist{display:grid;gap:.7rem}
.info{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.15rem 1.3rem;border-radius:var(--radius-m);
  border:1px solid var(--line);background:var(--surface);
  transition:transform .45s var(--ease-out),box-shadow .45s,border-color .4s;
}
.info:hover{transform:translateX(5px);box-shadow:var(--shadow-m);border-color:rgba(46,163,242,.45)}
.info__ico{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;background:linear-gradient(140deg,var(--brand-600),var(--brand-400));color:var(--white)}
.info__ico svg{width:18px;height:18px}
.info b{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:var(--text-mute);margin-bottom:.25rem}
.info p,.info a{font-size:.98rem;font-weight:600;line-height:1.4}

.form{display:grid;gap:1rem;padding:clamp(1.4rem,3vw,2.2rem);border-radius:var(--radius-l);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-m)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:620px){.form__row{grid-template-columns:1fr}}
.field{display:grid;gap:.45rem}
.field label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute)}
.field input,.field textarea,.field select{
  width:100%;padding:.9rem 1.05rem;border-radius:13px;
  border:1px solid var(--line);background:var(--foam-50);
  font-size:.95rem;transition:border-color .3s,box-shadow .3s,background-color .3s;
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--brand-400);background:var(--white);
  box-shadow:0 0 0 4px rgba(46,163,242,.16);
}
.field--check{display:flex;gap:.7rem;align-items:flex-start}
.field--check input{width:18px;height:18px;flex:none;margin-top:.15rem;accent-color:var(--brand-500);padding:0}
.field--check label{font-family:var(--font-body);font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--text-soft);line-height:1.5}
.form__note{font-size:.78rem;color:var(--text-mute)}
.form__ok{
  display:none;padding:1rem 1.2rem;border-radius:13px;
  background:rgba(118,184,43,.12);border:1px solid rgba(118,184,43,.45);
  color:var(--green-600);font-size:.88rem;font-weight:600;
}
.form__ok.is-on{display:block}
.form__ok--error{
  background:rgba(255,77,77,.1);border-color:rgba(255,77,77,.45);color:var(--coral-500);
}

.mapwrap{position:relative;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--ink-800)}
.mapwrap iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05)}
/* Estado de espera, antes de que el visitante pida el mapa */
.mapwrap--espera{
  display:grid;place-items:center;text-align:center;
  background:
    radial-gradient(120% 90% at 20% 0%,rgba(46,163,242,.2),transparent 62%),
    linear-gradient(150deg,var(--ink-800),var(--ink-950));
}
.mapwrap--espera::before{
  content:"";position:absolute;inset:0;opacity:.35;
  background-image:
    linear-gradient(rgba(168,226,255,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(168,226,255,.09) 1px,transparent 1px);
  background-size:38px 38px;
}
.mapa-aviso{position:relative;z-index:1;display:grid;gap:.7rem;justify-items:center;padding:1.5rem;max-width:380px}
.mapa-aviso__ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgba(168,226,255,.12);border:1px solid rgba(168,226,255,.24);color:var(--brand-300);
}
.mapa-aviso__ico svg{width:21px;height:21px}
.mapa-aviso b{font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--white);letter-spacing:-.015em}
.mapa-aviso p{color:#a9c2e6;line-height:1.5}
.mapa-aviso .link-u{color:var(--brand-300)}

/* =========== BLOQUE DE DESCARGA =========== */
.dl{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;
  padding:clamp(1.3rem,2.6vw,2rem);border-radius:var(--radius-l);
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-m);
}
.dl__ico{width:56px;height:56px;flex:none;border-radius:16px;display:grid;place-items:center;background:linear-gradient(140deg,var(--brand-600),var(--brand-400));color:var(--white)}
.dl__ico svg{width:24px;height:24px}
.dl__t{flex:1 1 240px}
.dl__t b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.1rem;letter-spacing:-.02em}
.dl__t span{font-size:.85rem;color:var(--text-soft)}

/* =========== BLOQUE PROSA =========== */
.prose{max-width:74ch}
.prose p{margin-bottom:1.15rem;color:var(--text-soft);line-height:1.72}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--text);font-weight:700}
.prose h2,.prose h3{font-size:var(--step-2);margin:2.2rem 0 .9rem;letter-spacing:-.025em}
.prose ul{display:grid;gap:.55rem;margin-bottom:1.15rem}
.prose li{position:relative;padding-left:1.5rem;color:var(--text-soft)}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--brand-400)}
.pullquote{
  position:relative;margin:2.4rem 0;padding:clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3vw,2.4rem);
  border-radius:var(--radius-l);background:var(--ink-900);color:var(--white);
  font-family:var(--font-display);font-weight:700;font-size:var(--step-2);
  line-height:1.22;letter-spacing:-.025em;overflow:hidden;
}
.pullquote::before{
  content:"";position:absolute;right:-10%;top:-40%;width:52%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(46,163,242,.42),transparent 64%);
}
.pullquote cite{
  display:block;margin-top:1rem;font-family:var(--font-mono);font-style:normal;
  font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--brand-300);font-weight:400;
}

/* =========== ENLACES ÚTILES =========== */
.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:.8rem}
.linkcard{
  display:flex;align-items:center;gap:1rem;
  padding:1.15rem 1.3rem;border-radius:var(--radius-m);
  border:1px solid var(--line);background:var(--surface);
  transition:transform .45s var(--ease-out),box-shadow .45s,border-color .4s;
}
.linkcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:rgba(46,163,242,.45)}
.linkcard b{display:block;font-family:var(--font-display);font-weight:800;font-size:.98rem;letter-spacing:-.015em}
.linkcard span{font-size:.78rem;color:var(--text-mute)}
.linkcard svg{width:17px;height:17px;margin-left:auto;flex:none;color:var(--brand-400);transition:transform .4s var(--ease-out)}
.linkcard:hover svg{transform:translate(3px,-3px)}

/* =========== ARCHIVO · pruebas retiradas ===========
   Deliberadamente más apagadas y más pequeñas que las activas: mismo sitio en
   la página, mucho menos peso visual. */
.past{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:clamp(.9rem,1.8vw,1.4rem)}
.past__item{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;align-items:start;
  padding:1.15rem;border-radius:var(--radius-m);
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  opacity:.72;
  transition:opacity .45s,transform .45s var(--ease-out),border-color .4s,background-color .4s;
}
.past__item:hover{opacity:1;transform:translateY(-4px);border-color:rgba(168,226,255,.3);background:rgba(255,255,255,.06)}
.past__thumb{
  width:112px;height:64px;flex:none;border-radius:12px;overflow:hidden;
  background:var(--white);display:grid;place-items:center;padding:6px;
  filter:grayscale(1);transition:filter .45s;
}
.past__item:hover .past__thumb{filter:none}
.past__thumb img{width:100%;height:auto;object-fit:contain}
.past__thumb--ph{
  background:rgba(168,226,255,.08);border:1px dashed rgba(168,226,255,.26);
  color:var(--brand-300);filter:none;padding:0;
}
.past__thumb--ph svg{width:22px;height:22px}
.past__tag{
  display:inline-block;margin-bottom:.5rem;
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-mute);
  border:1px solid var(--line);border-radius:6px;padding:.22rem .5rem;
}
.past__n{font-family:var(--font-display);font-weight:800;font-size:1.05rem;line-height:1.15;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:.45rem}
.past__x{font-size:.85rem;line-height:1.55;color:var(--text-soft)}

/* Punto verde delante del rótulo cuando marca «lo vigente» */
.eyebrow-dot{
  width:7px;height:7px;border-radius:50%;background:var(--green-400);
  box-shadow:0 0 10px rgba(143,208,63,.9);flex:none;
}
.eyebrow-dot+*{margin-left:.1em}

/* =========== PÁGINA DE NOTICIA =========== */
.article__hero{--ratio:16/9;margin-bottom:0}
.article__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;margin-top:clamp(2.2rem,4vw,3.2rem);padding-top:1.4rem;
  border-top:1px solid var(--line);
}
.article__foot .link-u svg{transform:none}
.article__foot .link-u:hover svg{transform:translateX(-3px)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}