/* ==========================================================================
   van4ever — hoja de estilos única
   Sistema de diseño "Navy ink on cool marble"
   Tokens: https://styles.refero.design/style/9946887b-ffa9-4276-af81-ae6352795afb

   Reglas duras del sistema:
   · Nunca negro puro en texto — todo parte de --ink.
   · Sombras SIEMPRE con base azul rgba(71,103,136,…), nunca neutras.
   · --blue solo en acciones primarias rellenas.
   · Las manchas de color son decorativas; jamás rellenos funcionales.
   · Sin degradados: superficie plana + sombra.

   Escrito MOBILE FIRST: lo de fuera son los estilos de móvil y las
   media queries solo AÑADEN a partir de cada ancho (min-width).
   ========================================================================== */

/* --------------------------------------------------------------- Fuentes */
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:400 800;      /* variable: cubre todo el rango con un archivo */
  font-display:swap;
  src:url("../fonts/manrope-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;
}
@font-face{
  font-family:"Manrope";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/manrope-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --------------------------------------------------------------- Tokens */
:root{
  --ink:#0b3558;
  --blue:#006bff;
  --blue-dark:#0059d6;
  --slate:#476788;
  --mist:#a6bbd1;
  --cloud:#f8f9fb;
  --paper:#ffffff;
  --pebble:#f0f3f8;
  --hairline:#d4e0ed;
  --cobalt:#004eba;
  --coral:#e55cff;
  --cyan:#0099ff;
  --badge-bg:#e6f0ff;

  /* Semáforos de los chips de las maquetas (fuera del sistema base) */
  --ok-bg:#e7f7ee;   --ok-fg:#0a6b3d;
  --warn-bg:#fdf0e3; --warn-fg:#8a5300;

  --sh-sm:rgba(71,103,136,.04) 0 4px 5px, rgba(71,103,136,.03) 0 4px 10px, rgba(71,103,136,.05) 0 10px 20px;
  --sh-md:rgba(71,103,136,.04) 0 4px 5px, rgba(71,103,136,.03) 0 8px 15px, rgba(71,103,136,.06) 0 15px 30px;
  --sh-lg:rgba(71,103,136,.04) 0 4px 5px, rgba(71,103,136,.03) 0 8px 15px, rgba(71,103,136,.08) 0 30px 50px;

  --r-xs:4px; --r-btn:8px; --r-card:16px; --r-feature:24px; --r-pill:9999px;

  --pad-x:20px;        /* respiración lateral en móvil */
  --section:64px;      /* alto de sección en móvil */
  --pad-card:20px;
  --max:1200px;
  --nav-h:60px;

  --font:"Manrope","Gilroy",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

@media (min-width:40em){
  :root{ --pad-x:24px; --section:80px; --pad-card:24px; --nav-h:64px }
}
@media (min-width:64em){
  :root{ --section:112px }
}

/* --------------------------------------------------------------- Base */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* Que un ancla no quede tapada por la barra fija */
  scroll-padding-top:calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust:100%;   /* iOS no reescala al girar */
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

body{
  margin:0;
  background:var(--cloud);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;          /* nunca por debajo: iOS hace zoom al enfocar inputs <16px */
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:var(--r-xs)}
::selection{background:var(--badge-bg);color:var(--cobalt)}

/* --------------------------------------------------- Escala tipográfica */
.display{font-size:clamp(2.15rem,7.4vw,4.25rem);font-weight:800;line-height:1.06;letter-spacing:-.035em}
.h2{font-size:clamp(1.75rem,4.6vw,3.125rem);letter-spacing:-.03em}
.h3{font-size:clamp(1.45rem,3.4vw,2.375rem);line-height:1.21;letter-spacing:-.025em}
.h4{font-size:1.25rem;font-weight:600;line-height:1.35;letter-spacing:-.015em}
.lead{font-size:1.0625rem;font-weight:500;line-height:1.55;color:var(--slate)}
.small{font-size:.875rem;line-height:1.5;color:var(--slate)}
.tiny{font-size:.75rem;line-height:1.5;color:var(--slate)}

@media (min-width:40em){
  .lead{font-size:1.1875rem}
}
@media (min-width:64em){
  .lead{font-size:1.25rem}
}

/* --------------------------------------------------------------- Layout */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad-x)}
.section{padding-block:var(--section)}
.section--tight{padding-block:calc(var(--section) * .55)}
.section--paper{background:var(--paper);border-block:1px solid var(--hairline)}
.center{text-align:center}
.measure{max-width:62ch}
.measure.center{margin-inline:auto}
.stack-sm>*+*{margin-top:12px}
.stack>*+*{margin-top:24px}
.mt-s{margin-top:16px}
.mt-m{margin-top:24px}
.mt-l{margin-top:40px}
/* Separación de sección entre bloques hermanos (un .split y la rejilla que
   viene detrás): la misma que .split + .split, para que el ritmo no se rompa. */
.mt-xl{margin-top:var(--section)}

.skip{position:absolute;left:-9999px}
.skip:focus{
  left:16px;top:16px;z-index:100;background:var(--paper);color:var(--ink);
  padding:12px 18px;border-radius:var(--r-btn);box-shadow:var(--sh-md);
}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------- Badges */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--badge-bg);color:var(--cobalt);
  font-size:.75rem;font-weight:500;letter-spacing:.02em;line-height:1.4;
  padding:6px 12px;border-radius:var(--r-pill);
}
.badge--mist{background:var(--pebble);color:var(--slate)}

/* ---------------------------------------------------------------- Notas */
/* Aviso discreto al pie de un bloque (privacidad, salvedades, fuentes).
   El icono no se encoge y se alinea con la PRIMERA línea, no con el centro
   del párrafo, que es donde queda mal en cuanto el texto ocupa dos líneas. */
.note{
  display:flex;align-items:flex-start;gap:8px;
  color:var(--slate);font-size:.875rem;line-height:1.5;
}
.note svg{flex:none;margin-top:3px}
/* Centrada bajo un bloque: se centra la CAJA, no el texto — un párrafo de dos
   líneas centrado al lado de un icono se lee fatal. */
.note--center{max-width:66ch;margin-inline:auto;justify-content:center}

/* -------------------------------------------------------------- Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:1rem;font-weight:600;line-height:1.5;
  padding:12px 20px;                 /* ≥44px de alto: objetivo táctil */
  min-height:44px;
  border-radius:var(--r-btn);border:1px solid transparent;
  cursor:pointer;text-align:center;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-dark)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#082944}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--hairline)}
.btn--ghost:hover{background:var(--pebble);border-color:var(--mist)}
.btn--lg{font-size:1.0625rem;padding:14px 24px;min-height:50px}
.btn--block{width:100%}

@media (min-width:40em){
  .btn--lg{font-size:1.125rem;padding:15px 28px;min-height:52px}
  .btn--block{width:auto}
}

/* ---------------------------------------------------------- Navegación */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(248,249,251,.92);
  border-bottom:1px solid var(--hairline);
}
@supports (backdrop-filter:blur(10px)){
  .nav{backdrop-filter:saturate(160%) blur(10px)}
}
.nav__in{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--pad-x);
  height:var(--nav-h);display:flex;align-items:center;gap:12px;
}
.logo{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;   /* objetivo táctil */
  font-weight:800;font-size:1.25rem;letter-spacing:-.04em;
}
.logo__mark{
  width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;
  display:grid;place-items:center;flex:none;
}
.nav__burger{
  margin-left:auto;display:inline-grid;place-items:center;
  width:44px;height:44px;background:none;border:0;border-radius:var(--r-btn);
  cursor:pointer;color:var(--ink);
}
.nav__burger:hover{background:var(--pebble)}
.nav__burger .ico-close{display:none}
.nav__burger[aria-expanded="true"] .ico-open{display:none}
.nav__burger[aria-expanded="true"] .ico-close{display:block}

/* Panel desplegable en móvil */
.nav__panel{
  display:none;                       /* cerrado en móvil hasta pulsar el botón */
  position:absolute;left:0;right:0;top:100%;
  background:var(--paper);border-bottom:1px solid var(--hairline);
  box-shadow:var(--sh-md);
  padding:8px var(--pad-x) 20px;
  max-height:calc(100dvh - var(--nav-h));overflow-y:auto;
}
.nav__panel.is-open{display:block}
.nav__menu{display:flex;flex-direction:column}
.nav__menu a{
  display:block;padding:13px 0;font-size:1.0625rem;font-weight:500;color:var(--ink);
  border-bottom:1px solid var(--hairline);
}
.nav__cta{display:flex;flex-direction:column;gap:10px;margin-top:18px}

@media (min-width:60em){
  .nav__burger{display:none}
  /* En escritorio el panel desaparece como caja: sus hijos son los de la barra */
  .nav__panel,.nav__panel.is-open{
    position:static;display:contents;background:none;border:0;box-shadow:none;
    padding:0;max-height:none;overflow:visible;
  }
  .nav__menu{
    flex-direction:row;gap:28px;margin-inline:auto;
    font-size:.9375rem;font-weight:500;
  }
  .nav__menu a{padding:0;border:0;font-size:.9375rem;color:var(--slate)}
  .nav__menu a:hover{color:var(--ink)}
  .nav__cta{flex-direction:row;gap:12px;margin-top:0}
  .nav__cta .btn{min-height:40px;padding:8px 18px;font-size:.9375rem}
}

/* ------------------------------------------- Manchas decorativas + cards */
.blob{position:absolute;border-radius:var(--r-feature);z-index:0;pointer-events:none}

.card{
  background:var(--paper);border-radius:var(--r-card);
  box-shadow:var(--sh-lg);position:relative;z-index:1;
  overflow:hidden;              /* para que una captura respete las esquinas */
}
.card--sm{box-shadow:var(--sh-sm)}
.card__head{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:14px var(--pad-card);border-bottom:1px solid var(--hairline);
}
.card__body{padding:var(--pad-card)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--hairline);flex:none}

/* ------------------------------------------------------------ Maquetas */
.mock__row{display:flex;align-items:center;gap:12px;padding:13px 0}
.mock__row:first-child{padding-top:0}
.mock__row+.mock__row{border-top:1px solid var(--hairline)}
.mock__ico{
  width:36px;height:36px;border-radius:10px;background:var(--pebble);
  display:grid;place-items:center;color:var(--cobalt);flex:none;
}
.mock__meta{flex:1;min-width:0}
.mock__meta strong{display:block;font-size:.9375rem;font-weight:600;line-height:1.35}
.mock__meta .small{display:block}
/* display:block obligatorio: son <span> y en línea la altura no se aplicaría */
.mock__bar{display:block;height:8px;border-radius:var(--r-xs);background:var(--pebble)}
.mock__tag{
  font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);
  white-space:nowrap;flex:none;
}
.tag--good{background:var(--ok-bg);color:var(--ok-fg)}
.tag--warn{background:var(--warn-bg);color:var(--warn-fg)}
.tag--info{background:var(--badge-bg);color:var(--cobalt)}

/* -------------------------------------------------- Capturas de la app */
/* Hueco preparado para las capturas REALES. Cada maqueta dibujada en CSS
   vive dentro de una .card con su .card__head; para poner la captura de
   verdad se sustituye el .card__body entero por:

     <img class="shot" src="/assets/img/app-loquesea.webp"
          width="…" height="…" loading="lazy" decoding="async" alt="…">

   El width/height del HTML NO es decorativo: sin ellos el navegador no
   sabe cuánto sitio reservar y todo lo de debajo salta cuando la imagen
   carga. El fondo --pebble es lo que se ve mientras tanto. */
.shot{width:100%;background:var(--pebble)}

/* ------------------------------------------------- Maqueta de teléfono */
/* Para el bloque de avisos: marco oscuro, pantalla clara. Estrecha y
   centrada a propósito — un teléfono a tamaño real en móvil no dice nada. */
.phone{
  max-width:288px;margin-inline:auto;position:relative;z-index:1;
  background:var(--ink);border-radius:34px;padding:10px;box-shadow:var(--sh-lg);
}
.phone__screen{background:var(--cloud);border-radius:25px;overflow:hidden;padding:16px 12px}
.push{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--paper);border-radius:14px;padding:12px;box-shadow:var(--sh-sm);
}
.push+.push{margin-top:10px}
.push__ico{
  width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;
  display:grid;place-items:center;flex:none;
}
.push__txt{min-width:0}
.push strong{display:block;font-size:.8125rem;font-weight:700;line-height:1.3}
.push span{display:block;font-size:.75rem;color:var(--slate);line-height:1.4;margin-top:3px}

/* ----------------------------------------------------------------- Hero */
.hero{padding-block:40px var(--section)}
.hero__grid{display:grid;gap:44px;align-items:center}
.hero__actions{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.hero__art{position:relative}
/* En móvil las manchas se quedan DENTRO del padding: cero scroll horizontal */
.hero__art .blob--coral{inset:22px -12px -12px 22px;background:var(--coral);opacity:.9}
.hero__art .blob--cyan{left:-10px;top:-10px;width:96px;height:96px;background:var(--cyan);opacity:.9}

@media (min-width:40em){
  .hero{padding-block:56px var(--section)}
  .hero__actions{flex-direction:row;flex-wrap:wrap;align-items:center}
}
@media (min-width:60em){
  .hero__grid{grid-template-columns:1.05fr 1fr;gap:64px}
  .hero__art .blob--coral{inset:36px -30px -30px 36px}
  .hero__art .blob--cyan{left:-26px;top:-26px;width:150px;height:150px}
}

/* -------------------------------------------------- Tira de indicadores */
.trust{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 16px;text-align:center}
/* Con un número impar de cifras, la última ocupa toda la fila en vez de
   quedarse descolgada a la izquierda. Así la tira admite 3 o 4 sin tocar CSS. */
.trust li:last-child:nth-child(odd){grid-column:1 / -1}
.trust__n{font-size:1.875rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.trust__l{font-size:.8125rem;color:var(--slate);line-height:1.4;margin-top:6px}
@media (min-width:56em){
  .trust{grid-template-columns:repeat(3,1fr);gap:24px}
  .trust li:last-child:nth-child(odd){grid-column:auto}
  .trust__n{font-size:2.125rem}
}

/* -------------------------------------------------------------- Rejillas */
.grid-3,.grid-2{display:grid;gap:20px}
@media (min-width:44em){
  .grid-2{grid-template-columns:repeat(2,1fr);gap:24px}
  .grid-3{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media (min-width:64em){
  .grid-3{grid-template-columns:repeat(3,1fr)}
}

.feature{
  background:var(--paper);border-radius:var(--r-feature);
  padding:24px;box-shadow:var(--sh-sm);height:100%;
}
.feature__ico{
  width:44px;height:44px;border-radius:12px;background:var(--badge-bg);color:var(--cobalt);
  display:grid;place-items:center;margin-bottom:16px;
}
.feature h3{font-size:1.1875rem;font-weight:600;line-height:1.3;margin-bottom:8px}
.feature p{color:var(--slate);font-size:.9375rem}
@media (min-width:64em){ .feature{padding:28px} }

/* --------------------------------------------------- Bloques alternados */
.split{display:grid;gap:36px;align-items:center}
.split+.split{margin-top:var(--section)}
.split__art{position:relative}
.split__art .blob{inset:20px -12px -12px 20px;background:var(--cyan);opacity:.9}
.split--rev .split__art .blob{inset:20px 20px -12px -12px;background:var(--coral)}

@media (min-width:60em){
  .split{grid-template-columns:1fr 1fr;gap:64px}
  .split--rev .split__txt{order:2}
  .split__art .blob{inset:30px -26px -26px 30px}
  .split--rev .split__art .blob{inset:30px 30px -26px -26px}
}
@media (min-width:72em){ .split{gap:72px} }

.checks li{display:flex;gap:10px;align-items:flex-start;color:var(--slate);font-size:1rem;line-height:1.5}
.checks li+li{margin-top:10px}
.checks svg{flex:none;margin-top:5px;color:var(--blue)}

/* ---------------------------------------------------------------- Pasos */
.steps{display:grid;gap:20px}
@media (min-width:56em){ .steps{grid-template-columns:repeat(3,1fr);gap:24px} }
.step{background:var(--paper);border-radius:var(--r-feature);padding:24px;box-shadow:var(--sh-sm)}
.step__n{
  width:36px;height:36px;border-radius:var(--r-pill);background:var(--ink);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.9375rem;margin-bottom:14px;
}
.step h3{font-size:1.1875rem;font-weight:600}

/* --------------------------------------------------------------- Clubes */
.club{
  display:flex;align-items:center;gap:14px;
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:16px;box-shadow:var(--sh-sm);
}
.club--soon{background:transparent;border-style:dashed;box-shadow:none}
.club__flag{
  width:44px;height:44px;border-radius:12px;background:var(--pebble);
  display:grid;place-items:center;font-weight:800;font-size:.8125rem;
  color:var(--cobalt);flex:none;letter-spacing:-.02em;
}
.club--soon .club__flag{color:var(--slate)}
.club__txt{min-width:0;flex:1}
.club strong{display:block;font-size:1rem;font-weight:600;line-height:1.3}
.club span{font-size:.875rem;color:var(--slate)}

/* ------------------------------------------------------------ Acordeón */
.acc{border-top:1px solid var(--hairline);max-width:860px}
.acc__item{border-bottom:1px solid var(--hairline)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:0;padding:20px 0;cursor:pointer;text-align:left;
  font-size:1rem;font-weight:500;color:var(--slate);
  transition:color .18s ease,font-weight .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.acc__btn:hover{color:var(--ink)}
.acc__item.is-open .acc__btn{font-size:1.0625rem;font-weight:700;color:var(--ink)}
.acc__item.is-open .acc__chev{transform:rotate(180deg);color:var(--blue)}
.acc__chev{flex:none;transition:transform .2s ease;color:var(--mist)}
.acc__panel{max-height:0;overflow:hidden;transition:max-height .28s ease}
.acc__panel p{padding-bottom:20px;color:var(--slate);max-width:70ch}
@media (min-width:56em){
  .acc__item.is-open .acc__btn{font-size:1.1875rem}
}

/* ------------------------------------------------------------ CTA final */
.cta{
  background:var(--ink);border-radius:var(--r-feature);
  padding:44px 24px;text-align:center;color:#fff;
}
.cta h2{color:#fff}
.cta p{color:#c4d6e8;max-width:56ch;margin:16px auto 0;font-size:1.0625rem}
.cta__actions{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.34)}
.cta .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
@media (min-width:40em){
  .cta{padding:64px 40px}
  .cta__actions{flex-direction:row;justify-content:center;flex-wrap:wrap;margin-top:32px}
}

/* ------------------------------------------------------------------ Pie */
.foot{background:var(--cloud);border-top:1px solid var(--hairline);padding:48px 0 32px}
.foot__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.foot__brand{grid-column:1 / -1}
.foot h2{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-bottom:10px}
/* min-height 44px: son enlaces que se pulsan con el dedo, no solo con ratón.
   Acotado a los <nav> del pie para no tocar el logotipo de la marca. */
.foot nav a{display:flex;align-items:center;min-height:44px;font-size:.9375rem;color:var(--slate)}
.foot nav a:hover{color:var(--ink)}
.foot__bar{
  margin-top:36px;padding-top:24px;border-top:1px solid var(--hairline);
  display:flex;flex-direction:column;gap:10px;
}
.foot__btn{
  display:flex;align-items:center;min-height:44px;
  background:none;border:0;padding:0;font-size:.9375rem;color:var(--slate);
  cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:3px;
}
.foot__btn:hover{color:var(--ink)}
@media (min-width:56em){
  .foot{padding:64px 0 40px}
  .foot__grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
  .foot__brand{grid-column:auto}
  .foot__bar{flex-direction:row;justify-content:space-between;gap:16px;flex-wrap:wrap}
}

/* ------------------------------------------------- Aparición al scroll */
/* Solo se esconde si HAY JavaScript (la clase .js la pone el propio <head>).
   Sin JS —o si el script falla— el contenido se ve entero: nunca una página en
   blanco, ni para una persona ni para un rastreador. */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1;transform:none} }

/* ==========================================================================
   Páginas legales — layout sobrio, mismo sistema
   ========================================================================== */
.legal-header{border-bottom:1px solid var(--hairline);background:var(--paper)}
.legal-header .nav__in{gap:12px}
.legal-wrap{max-width:760px;margin-inline:auto;padding:40px var(--pad-x) 72px}
.legal-wrap h1{font-size:clamp(1.875rem,5.5vw,2.75rem);letter-spacing:-.03em}
.legal-wrap h2{font-size:clamp(1.1875rem,2.6vw,1.5rem);margin:40px 0 12px;letter-spacing:-.02em}
.legal-wrap h3{font-size:1.0625rem;font-weight:600;margin:28px 0 8px}
.legal-wrap p,.legal-wrap li{margin-bottom:12px;color:var(--slate)}
.legal-wrap strong{color:var(--ink)}
.legal-wrap ul{list-style:disc;padding-left:22px;margin-bottom:16px}
.legal-wrap ul ul{margin-top:10px;margin-bottom:6px;list-style:circle}
.legal-wrap a{color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
.legal-wrap a:hover{color:var(--blue)}
.legal-meta{
  color:var(--slate);font-size:.875rem;
  padding-bottom:16px;border-bottom:1px solid var(--hairline);margin:12px 0 8px;
}
.legal-note{
  background:var(--pebble);border-radius:var(--r-card);
  padding:16px 18px;margin:24px 0;font-size:.9375rem;
}
.legal-note p{margin-bottom:0}
.legal-nav{margin-top:48px;padding-top:20px;border-top:1px solid var(--hairline);font-size:.9375rem}

/* Tablas de cookies: en móvil se desplazan solas, nunca rompen la página */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0 24px}
.legal-wrap table{width:100%;min-width:560px;border-collapse:collapse;font-size:.875rem}
.legal-wrap th,.legal-wrap td{
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--hairline);
  vertical-align:top;color:var(--slate);
}
.legal-wrap th{color:var(--ink);font-weight:600;background:var(--pebble);white-space:nowrap}
.legal-wrap td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}

/* ==========================================================================
   Banner de cookies (AEPD nov 2023)
   Tres acciones de IGUAL jerarquía visual. Nada preseleccionado.
   ========================================================================== */
.cookie-banner{
  position:fixed;inset:auto 0 0 0;z-index:90;
  background:var(--paper);border-top:1px solid var(--hairline);
  box-shadow:rgba(71,103,136,.1) 0 -8px 30px;
  padding:16px var(--pad-x) calc(16px + env(safe-area-inset-bottom));
}
.cookie-banner[hidden]{display:none}
.cookie-banner__inner{max-width:var(--max);margin-inline:auto;display:grid;gap:14px}
.cookie-banner__title{font-size:1rem;font-weight:700;margin-bottom:4px}
.cookie-banner p{font-size:.8125rem;color:var(--slate);line-height:1.5}
/* En móvil el aviso no debe comerse la pantalla: botones justos de 44px */
.cookie-actions .btn{min-height:44px;padding:10px 16px;font-size:.9375rem}
.cookie-banner a{color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
.cookie-actions{display:grid;gap:8px}
/* Las tres, mismo tamaño y mismo peso visual: ni patrón oscuro ni jerarquía */
.cookie-actions .btn{width:100%;background:var(--paper);color:var(--ink);border-color:var(--hairline)}
.cookie-actions .btn:hover{background:var(--pebble);border-color:var(--mist)}

@media (min-width:48em){
  .cookie-banner__inner{grid-template-columns:1fr auto;align-items:center;gap:32px}
  .cookie-actions{grid-template-columns:repeat(3,minmax(140px,1fr))}
}

/* Modal de configuración granular */
.cookie-modal{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:end center;
  background:rgba(11,53,88,.45);
  padding:0;
}
.cookie-modal[hidden]{display:none}
.cookie-modal__inner{
  background:var(--paper);width:100%;max-width:620px;
  border-radius:var(--r-feature) var(--r-feature) 0 0;
  padding:24px var(--pad-x) calc(24px + env(safe-area-inset-bottom));
  max-height:90dvh;overflow-y:auto;box-shadow:var(--sh-lg);
}
.cookie-modal h2{font-size:1.25rem}
.cookie-modal>.cookie-modal__inner>p{font-size:.9375rem;color:var(--slate);margin-top:8px}
.cookie-cat{border:1px solid var(--hairline);border-radius:var(--r-card);padding:14px 16px;margin-top:14px}
.cookie-cat__top{display:flex;align-items:center;gap:12px;justify-content:space-between}
.cookie-cat strong{font-size:.9375rem}
.cookie-cat p{font-size:.8125rem;color:var(--slate);margin-top:6px}
.cookie-cat input[type="checkbox"]{width:20px;height:20px;accent-color:var(--blue);flex:none;cursor:pointer}
.cookie-cat input:disabled{cursor:not-allowed;opacity:.6}
.cookie-modal .cookie-actions{margin-top:20px}
@media (min-width:48em){
  .cookie-modal{place-items:center}
  .cookie-modal__inner{border-radius:var(--r-feature);padding:28px}
  .cookie-modal .cookie-actions{grid-template-columns:repeat(3,1fr)}
}

/* -------------------------------------------------------------- Imprimir */
@media print{
  .nav,.cookie-banner,.cookie-modal,.foot__btn,.reveal{display:none!important}
  body{background:#fff;color:#000}
  .legal-wrap{max-width:none;padding:0}
  .legal-wrap a{text-decoration:none;color:#000}
}