/* ==========================================================================
   VERIGASTU · verigastu.es — la web de escaparate.
   Tema oscuro único, la misma paleta que el producto y que verigastu.com.
   Sin dependencias externas: ni fuentes, ni librerías, ni peticiones fuera.
   Paleta:  fondo #0b1210 · paneles #131c18 · texto #eaf0ec
            marca #54b6a2 · ámbar #e0a651
   ========================================================================== */

:root{
  --fondo:      #0b1210;
  --fondo-2:    #0e1614;
  --panel:      #131c18;
  --panel-alto: #182420;
  --borde:      #24332d;
  --borde-suave:#1b2723;
  --texto:      #eaf0ec;
  --texto-2:    #a8bcb3;
  --texto-3:    #7d928a;
  --marca:      #54b6a2;
  --marca-clara:#7fd3c1;
  --marca-osc:  #2f6d61;
  --marca-tenue:rgba(84,182,162,.12);
  --ambar:      #e0a651;
  --ambar-tenue:rgba(224,166,81,.12);

  --ancho: 1180px;
  --ancho-estrecho: 760px;
  --radio: 16px;
  --radio-s: 10px;

  --paso: clamp(1rem, .6rem + 1.2vw, 1.5rem);
  --seccion: clamp(3.5rem, 3rem + 1.2vw, 4.75rem);

  --t-hero:  clamp(2.3rem, 1.1rem + 5vw, 4.6rem);
  --t-h2:    clamp(1.7rem, 1.15rem + 2.4vw, 2.7rem);
  --t-h3:    clamp(1.12rem, 1rem + .6vw, 1.4rem);
  --t-cuerpo:clamp(1rem, .96rem + .22vw, 1.1rem);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sombra: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 46px -26px rgba(0,0,0,.95);
  --sombra-alta: 0 1px 0 rgba(255,255,255,.05) inset, 0 40px 90px -40px rgba(0,0,0,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--t-cuerpo);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{ max-width:100%; height:auto; display:block; }

a{ color:var(--marca); text-decoration-thickness:1px; text-underline-offset:.18em; }
a:hover{ color:var(--marca-clara); }

:focus-visible{ outline:2px solid var(--marca); outline-offset:3px; border-radius:4px; }

h1,h2,h3,h4{ line-height:1.14; margin:0 0 .6em; letter-spacing:-.021em; font-weight:660; }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); font-weight:620; letter-spacing:-.012em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:640; color:#f4f8f5; }
ul{ margin:0 0 1em; padding-left:1.15em; }
li{ margin-bottom:.45em; }
li::marker{ color:var(--marca-osc); }
em{ font-style:italic; }

/* ---------- utilidades ---------- */
.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--paso); }
.estrecho{ max-width:var(--ancho-estrecho); }
.centrado{ text-align:center; }
.visualmente-oculto{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.saltar{
  position:absolute; left:.6rem; top:-4rem; z-index:100;
  background:var(--marca); color:#08110e; padding:.6rem 1rem;
  border-radius:var(--radio-s); font-weight:640; text-decoration:none; transition:top .15s;
}
.saltar:focus{ top:.6rem; color:#08110e; }

.eyebrow{
  font-family:var(--mono);
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--marca); margin:0 0 1.1rem; font-weight:600;
}
.apunte{ font-size:.92rem; color:var(--texto-3); line-height:1.6; }
.entradilla{ font-size:clamp(1.05rem,.98rem + .5vw,1.3rem); color:var(--texto-2); line-height:1.62; }

/* ---------- botones ---------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.5rem; border-radius:var(--radio-s);
  font-weight:640; font-size:1rem; text-decoration:none; border:1px solid transparent;
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
  cursor:pointer; line-height:1.2; text-align:center;
}
.boton--principal{ background:var(--marca); color:#08110e; }
.boton--principal:hover{ background:var(--marca-clara); color:#08110e; transform:translateY(-2px); }
.boton--secundario{ border-color:var(--borde); color:var(--texto); background:rgba(255,255,255,.02); }
.boton--secundario:hover{ border-color:var(--marca-osc); color:var(--texto); background:var(--marca-tenue); transform:translateY(-2px); }
.boton--pequeno{ padding:.55rem 1rem; font-size:.9rem; }
.boton svg{ flex:none; }

.acciones{ display:flex; flex-wrap:wrap; gap:.75rem; margin:1.8rem 0 0; }

/* ---------- cabecera ---------- */
.cabecera{
  position:sticky; top:0; z-index:60;
  background:rgba(11,18,16,.82);
  border-bottom:1px solid var(--borde-suave);
}
@supports (backdrop-filter:blur(10px)){
  .cabecera{ backdrop-filter:blur(14px) saturate(140%); }
}
.cabecera__fila{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4.1rem; }
.marca{ display:inline-flex; align-items:center; gap:.55rem; color:var(--texto); text-decoration:none; font-weight:700; letter-spacing:.045em; }
.marca__icono{ width:1.7rem; height:1.7rem; color:var(--marca); flex:none; }
.marca__icono svg{ width:100%; height:100%; }
.marca__texto{ font-size:1rem; }
.marca__punto{ font-family:var(--mono); font-size:.7rem; color:var(--texto-3); letter-spacing:.08em; font-weight:600; }

.nav{ display:flex; align-items:center; gap:1.4rem; }
.nav__enlaces{ display:flex; gap:1.35rem; }
.nav__enlaces a{ color:var(--texto-2); text-decoration:none; font-size:.93rem; font-weight:520; }
.nav__enlaces a:hover{ color:var(--texto); }
@media (max-width:900px){ .nav__enlaces{ display:none; } }
@media (max-width:420px){ .nav__cta span{ display:none; } }

/* ---------- portada ---------- */
.portada{ position:relative; padding:clamp(1.75rem,1rem + 3.5vh,5rem) 0 var(--seccion); overflow:hidden; }
.portada__brillo{
  position:absolute; inset:-25% -10% auto -10%; height:90%; z-index:0; pointer-events:none;
  background:
    radial-gradient(closest-side circle at var(--mx,72%) var(--my,32%), rgba(84,182,162,.20), transparent 70%),
    radial-gradient(closest-side circle at 18% 8%, rgba(84,182,162,.09), transparent 70%);
  transition:background-position .4s ease;
}
.portada .contenedor{ position:relative; z-index:1; }
.portada__rejilla{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center;
}
@media (max-width:940px){ .portada__rejilla{ grid-template-columns:1fr; gap:2.6rem; } }
.portada h1{ font-size:var(--t-hero); margin-bottom:.5em; }
.portada h1 em{ color:var(--marca); font-style:normal; }
.portada__apunte{ margin-top:1.4rem; }

/* marco de móvil */
.movil{
  position:relative; width:min(310px,78vw); margin-inline:auto;
  border-radius:30px; padding:9px;
  background:linear-gradient(160deg,#243430,#101917 55%,#1c2a26);
  box-shadow:var(--sombra-alta);
}
.movil::after{
  content:""; position:absolute; left:50%; top:15px; transform:translateX(-50%);
  width:74px; height:5px; border-radius:99px; background:rgba(0,0,0,.55); z-index:2;
}
.movil__pantalla{
  border-radius:22px; overflow:hidden; background:#0b1210;
  border:1px solid rgba(255,255,255,.06); position:relative;
  aspect-ratio:760 / 1446;
}
.movil__pantalla img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.movil--grande{ width:min(340px,80vw); }

/* ---------- secciones ---------- */
.seccion{ padding:var(--seccion) 0; }
.seccion--panel{ background:var(--fondo-2); border-block:1px solid var(--borde-suave); }
.seccion__cabecera{ max-width:640px; margin-bottom:clamp(2.2rem,1.4rem + 2vw,3.4rem); }
.seccion__cabecera--centrada{ margin-inline:auto; text-align:center; }

/* aclaración temprana */
.aclaracion{
  display:flex; gap:.9rem; align-items:flex-start;
  background:var(--ambar-tenue); border:1px solid rgba(224,166,81,.28);
  border-radius:var(--radio); padding:1.1rem 1.25rem; margin-top:clamp(1.1rem,.8rem + 1.6vh,2.4rem);
  max-width:760px;
}
.aclaracion svg{ color:var(--ambar); flex:none; margin-top:.2rem; }
.aclaracion p{ font-size:.96rem; color:var(--texto-2); }

/* cita editorial */
.cita{ max-width:900px; }
.cita p{
  font-size:clamp(1.35rem,1rem + 2vw,2.15rem); line-height:1.3;
  letter-spacing:-.02em; font-weight:600; color:var(--texto);
}
.cita em{ color:var(--marca); font-style:normal; }
.cita__pie{ font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--texto-3); margin-top:1.4rem; }

/* ---------- el recorrido ---------- */
.recorrido__rejilla{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
.pasos{ display:grid; gap:clamp(2.5rem,1.5rem + 3vw,4.5rem); }

.paso{ scroll-margin-top:6rem; }
.paso__num{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.16em;
  color:var(--marca); font-weight:600; display:block; margin-bottom:.7rem;
}
.paso__num b{ color:var(--texto-3); font-weight:600; }
.paso h3{ margin-bottom:.5em; }
.paso p{ color:var(--texto-2); }
.paso__figura{ margin:1.6rem 0 0; }
.paso__figura figcaption{ font-size:.86rem; color:var(--texto-3); margin-top:.8rem; text-align:center; }

/* dato dentro de un paso */
.paso__dato{
  margin-top:1.2rem; padding:.85rem 1.05rem;
  border-left:2px solid var(--marca-osc); background:var(--marca-tenue);
  border-radius:0 var(--radio-s) var(--radio-s) 0;
  font-size:.94rem; color:var(--texto-2);
}
.paso__dato strong{ color:var(--marca-clara); }

/* versión con móvil fijo (solo si el JS del recorrido arrancó bien) */
.recorrido__visual{ display:none; }

@media (min-width:1000px){
  .tour-listo .recorrido__rejilla{ grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:clamp(3rem,2rem + 4vw,6rem); align-items:start; }
  .tour-listo .recorrido__visual{
    /* El `top` centraba el movil a ojo, pero en ventanas bajas (1366x768 deja
       unos 650 px utiles; un portatil FHD al 125 %, unos 730) daba un valor
       negativo o casi, y la parte alta de cada captura se metia debajo de la
       cabecera fija, que ocupa 67 px. El max() pone un suelo: nunca sube por
       encima de la cabecera. Y el width del movil se limita a la mitad del alto
       disponible, para que en esas ventanas quepa entero en vez de asomar por
       abajo. A partir de unos 815 px de alto no cambia nada respecto a antes. */
    display:block; position:sticky; top:max(5.2rem, calc(50vh - 340px));
  }
  .tour-listo .recorrido__visual .movil{ width:min(310px, calc((100vh - 9.6rem) * .5)); }
  /* En escritorio el movil fijo sustituye a las figuras de cada paso, pero ese
     movil lleva aria-hidden y alt vacio: con display:none aqui, un lector de
     pantalla se quedaba sin NINGUNA descripcion de las capturas. Se ocultan solo
     a la vista y siguen en el arbol de accesibilidad, con su alt. No hay
     descarga extra: son exactamente las mismas URL que las del movil fijo. */
  .tour-listo .paso__figura{
    position:absolute; width:1px; height:1px; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  }
  .tour-listo .paso{ position:relative; min-height:74vh; display:flex; flex-direction:column; justify-content:center; }
  .tour-listo .pasos{ gap:0; }
}

.recorrido__visual .movil__pantalla img{
  position:absolute; inset:0; opacity:0;
  transition:opacity .5s ease, transform .6s ease;
  transform:scale(1.015);
}
.recorrido__visual .movil__pantalla img.activa{ opacity:1; transform:none; }

.recorrido__pie{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto-3); text-align:center; margin-top:1.1rem; min-height:1.2em;
}

/* ---------- figuras de detalle ---------- */
.detalle{ margin:0; }
.detalle__marco{
  border:1px solid var(--borde); border-radius:var(--radio); overflow:hidden;
  background:var(--panel); box-shadow:var(--sombra);
}
.detalle figcaption{ font-size:.9rem; color:var(--texto-3); margin-top:.9rem; }
.detalle figcaption strong{ color:var(--texto-2); font-weight:600; }

/* ---------- rejilla de tarjetas ---------- */
.tarjetas{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); }
/* Seis tarjetas: con el minimo de 255px caben 4 por fila y la segunda fila
   se queda coja (4+2). Con 300px la rejilla se parte en 3+3, que es como se
   leen los seis apartados del libro. Sigue siendo auto-fit: en movil es 1
   columna y en tableta 2, igual que las demas. */
.tarjetas--seis{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.tarjeta{
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  padding:1.5rem 1.4rem; box-shadow:var(--sombra);
  transition:border-color .2s ease, transform .2s ease;
}
.tarjeta:hover{ border-color:var(--marca-osc); transform:translateY(-3px); }
.tarjeta h3{ display:flex; align-items:center; gap:.55rem; }
.tarjeta h3 svg{ color:var(--marca); flex:none; }
.tarjeta p{ color:var(--texto-2); font-size:.97rem; margin-bottom:0; }
.tarjeta__mini{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-3); margin-bottom:.6rem; }

/* ---------- cifras ---------- */
.cifras{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--borde-suave); border:1px solid var(--borde-suave); border-radius:var(--radio); overflow:hidden; }
.cifra{ background:var(--fondo); padding:1.7rem 1.3rem; text-align:center; }
.cifra__valor{ font-size:clamp(2rem,1.4rem + 2.4vw,3rem); font-weight:680; letter-spacing:-.035em; color:var(--marca); line-height:1; font-variant-numeric:tabular-nums; }
.cifra__texto{ font-size:.9rem; color:var(--texto-2); margin-top:.6rem; line-height:1.45; }

/* ---------- privacidad ---------- */
.privacidad__rejilla{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(2rem,1rem + 4vw,4rem); align-items:center; }
@media (max-width:900px){ .privacidad__rejilla{ grid-template-columns:1fr; } }
.lista-marcada{ list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:.9rem; }
.lista-marcada li{ display:flex; gap:.7rem; align-items:flex-start; margin:0; color:var(--texto-2); }
.lista-marcada svg{ color:var(--marca); flex:none; margin-top:.32rem; }

/* ---------- verifactu ---------- */
.verifactu__rejilla{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.1rem; margin-top:2rem; }
.bloque{ background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio); padding:1.5rem 1.4rem; }
.bloque--si{ border-color:var(--marca-osc); }
.bloque--no{ border-color:rgba(224,166,81,.3); }
.bloque h3 { font-size:1.05rem; }
.bloque p{ font-size:.95rem; color:var(--texto-2); margin-bottom:0; }
.bloque ul{ font-size:.95rem; color:var(--texto-2); margin-bottom:0; }

/* ---------- preguntas ---------- */
.preguntas{ max-width:840px; border-top:1px solid var(--borde-suave); }
.pregunta{ border-bottom:1px solid var(--borde-suave); }
.pregunta summary{
  cursor:pointer; list-style:none; padding:1.25rem 2.4rem 1.25rem 0; position:relative;
  font-weight:620; font-size:1.05rem; color:var(--texto);
}
.pregunta summary::-webkit-details-marker{ display:none; }
.pregunta summary::after{
  content:""; position:absolute; right:.4rem; top:1.6rem;
  width:.62rem; height:.62rem; border-right:2px solid var(--marca); border-bottom:2px solid var(--marca);
  transform:rotate(45deg); transition:transform .2s ease;
}
.pregunta[open] summary::after{ transform:rotate(-135deg); top:1.85rem; }
.pregunta summary:hover{ color:var(--marca-clara); }
.pregunta__cuerpo{ padding:0 0 1.4rem; color:var(--texto-2); font-size:.98rem; }

/* ---------- cierre ---------- */
.final{ padding:var(--seccion) 0; background:var(--fondo-2); border-top:1px solid var(--borde-suave); text-align:center; }
.final h2{ max-width:16ch; margin-inline:auto; }
.final .acciones{ justify-content:center; }
.final__enlace{ font-family:var(--mono); font-size:.82rem; letter-spacing:.1em; color:var(--texto-3); margin-top:1.4rem; }

/* ---------- pie ---------- */
.pie{ background:var(--fondo); border-top:1px solid var(--borde-suave); padding:3rem 0 2.4rem; font-size:.9rem; color:var(--texto-3); }
.pie__fila{ display:flex; flex-wrap:wrap; gap:1.4rem 2.4rem; justify-content:space-between; align-items:flex-start; }
.pie__enlaces{ display:flex; flex-wrap:wrap; gap:1rem 1.4rem; }
.pie__enlaces a{ color:var(--texto-2); text-decoration:none; }
.pie__enlaces a:hover{ color:var(--marca); }
.pie__deslinde{
  margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--borde-suave);
  color:var(--texto-3); font-size:.86rem; line-height:1.6; max-width:74ch;
}
.pie__deslinde strong{ color:var(--texto-2); font-weight:600; }

/* ---------- asistente de IA ---------- */
.ia-burbuja{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:70;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.75rem 1.15rem; border-radius:99px; border:1px solid var(--marca-osc);
  background:var(--marca); color:#08110e; font-weight:640; font-size:.94rem;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.9); cursor:pointer;
  transition:transform .18s ease, background-color .18s ease;
}
.ia-burbuja:hover{ transform:translateY(-2px); background:var(--marca-clara); }
.ia-burbuja svg{ flex:none; }
.ia-burbuja[hidden]{ display:none; }

.ia-panel{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:71;
  width:min(390px,calc(100vw - 2.2rem)); max-height:min(620px,calc(100vh - 2.2rem));
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  box-shadow:var(--sombra-alta); overflow:hidden;
}
.ia-panel[hidden]{ display:none; }
.ia-panel__cabecera{
  display:flex; align-items:center; gap:.6rem; padding:.9rem 1rem;
  border-bottom:1px solid var(--borde-suave); background:var(--panel-alto);
}
.ia-panel__cabecera svg{ color:var(--marca); flex:none; }
.ia-panel__titulo{ font-weight:640; font-size:.97rem; }
.ia-panel__sub{ font-size:.76rem; color:var(--texto-3); }
.ia-cerrar{
  margin-left:auto; background:none; border:0; color:var(--texto-3); cursor:pointer;
  padding:.3rem; border-radius:6px; line-height:0;
}
.ia-cerrar:hover{ color:var(--texto); background:rgba(255,255,255,.05); }

.ia-hilo{ padding:1rem; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:.8rem; min-height:180px; }
.ia-msg{ max-width:88%; padding:.7rem .9rem; border-radius:12px; font-size:.94rem; line-height:1.55; white-space:pre-wrap; }
.ia-msg--ia{ background:var(--panel-alto); border:1px solid var(--borde-suave); color:var(--texto-2); align-self:flex-start; border-bottom-left-radius:4px; }
.ia-msg--yo{ background:var(--marca-tenue); border:1px solid var(--marca-osc); color:var(--texto); align-self:flex-end; border-bottom-right-radius:4px; }
.ia-msg--aviso{ background:var(--ambar-tenue); border:1px solid rgba(224,166,81,.3); color:var(--texto-2); align-self:stretch; max-width:100%; font-size:.9rem; }

.ia-sugerencias{ display:flex; flex-wrap:wrap; gap:.45rem; padding:0 1rem .8rem; }
.ia-sugerencias button{
  background:rgba(255,255,255,.03); border:1px solid var(--borde); color:var(--texto-2);
  border-radius:99px; padding:.4rem .8rem; font-size:.83rem; cursor:pointer; font-family:inherit;
  transition:border-color .16s ease, color .16s ease;
}
.ia-sugerencias button:hover{ border-color:var(--marca-osc); color:var(--texto); }

.ia-form{ display:flex; gap:.5rem; padding:.8rem 1rem 1rem; border-top:1px solid var(--borde-suave); }
/* El borde con --borde (#24332d) sobre el panel del asistente da 1,31:1 y no se
   distingue con baja vision; la WCAG 1.4.11 pide 3:1 para el borde de un
   control. #56756a da 3,44:1 sobre el panel. Solo aqui: --borde no se toca. */
.ia-form input{
  flex:1; min-width:0; background:var(--fondo); border:1px solid #56756a; color:var(--texto);
  border-radius:var(--radio-s); padding:.65rem .8rem; font-family:inherit; font-size:.94rem;
}
.ia-form input::placeholder{ color:var(--texto-3); }
.ia-form button{
  background:var(--marca); color:#08110e; border:0; border-radius:var(--radio-s);
  padding:.65rem .95rem; font-weight:640; cursor:pointer; font-family:inherit; font-size:.94rem;
}
.ia-form button:disabled{ opacity:.55; cursor:default; }
.ia-pie{ padding:0 1rem .9rem; font-size:.74rem; color:var(--texto-3); line-height:1.5; }

/* ---------- páginas legales ---------- */
.legal{ padding:clamp(3rem,2rem + 3vw,5rem) 0 var(--seccion); }
.legal h1{ font-size:clamp(1.9rem,1.4rem + 2vw,2.7rem); }
.legal h2{ font-size:clamp(1.2rem,1.05rem + .8vw,1.55rem); margin-top:2.4rem; }
.legal p, .legal li{ color:var(--texto-2); }
.legal .pendiente{
  background:var(--ambar-tenue); border:1px solid rgba(224,166,81,.3);
  color:var(--ambar); border-radius:6px; padding:.1rem .45rem;
  font-family:var(--mono); font-size:.84rem; font-weight:600;
}
.legal__meta{ font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); margin-bottom:2rem; }

/* ---------- revelado al hacer scroll ----------
   Doble red de seguridad, por orden:
   1. Sin JavaScript no se añade la clase `animar`, así que NADA se oculta:
      la web se lee entera aunque el navegador tenga el JS desactivado.
   2. Con `animar` pero si el script fallara al cargar, la animación de abajo
      lo revela todo a los 6 segundos sola, sin depender de ningún JS.

   La red va atada a `:not(.js-listo)` desde el 2026-09-22, igual que en la
   .com. main.js marca `js-listo` en el <html> en cuanto tiene el observador
   montado —y solo si llega antes de que esta red salte, porque apagarla a
   destiempo devolvería de golpe a opacidad 0 los bloques ya revelados: el
   porqué, con las medidas, está al lado de la guarda, en main.js—. Antes se
   disparaba siempre: a los 6,5 s de cargar revelaba de golpe los 20 bloques
   aunque el JS funcionara perfectamente, o sea que el revelado al hacer
   scroll que da nombre a este apartado no llegaba a verse nunca en una
   portada larga. La red sigue cubriendo el único caso para el que se puso:
   que main.js no llegue.

   OJO: si se cambia el `6s` de aquí abajo (o el `3s` de movimiento reducido)
   hay que cambiar `RETRASO_RED_MS` en main.js, que son los mismos números. */
@keyframes red-de-seguridad{ to{ opacity:1; transform:none; } }

.animar .revelar{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.animar:not(.js-listo) .revelar{ animation:red-de-seguridad .5s ease 6s forwards; }
.animar .revelar.visible{ opacity:1; transform:none; animation:none; }

/* ---------- movimiento reducido ----------
   Solo se apaga lo intrusivo. Los revelados y los hover siguen ocurriendo,
   más rápidos: apagarlo todo deja la web muerta en Windows, donde este ajuste
   viene activado de fábrica en muchos equipos. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .animar .revelar{ transition-duration:.25s; }
  .animar:not(.js-listo) .revelar{ animation-delay:3s; }
  .recorrido__visual .movil__pantalla img{ transition-duration:.2s; transform:none; }
  .portada__brillo{ transition:none; }
  .boton:hover, .tarjeta:hover{ transform:none; }
}

/* PANTALLAS BAJAS (portatiles de 1366x768, y cualquier ventana con barra de
   tareas + barra de direcciones + pestanas comiendose el alto).
   El hero cabe entero de 740px de alto para arriba; por debajo se salia el
   aviso ambar, que es justo la pieza que aclara lo que Verigastu NO es y la
   que menos conviene que se pierda. Aqui se comprimen SOLO los margenes del
   hero, y solo por debajo de 730px de alto: el resto de la pagina y las demas
   secciones no se enteran.
   Los selectores llevan .portada delante a proposito, para igualar o superar
   la especificidad de las reglas de arriba (.portada h1, .portada .entradilla)
   y ganar por orden. Con :where() la especificidad cae a cero y la mitad de
   estas reglas no llegaban a aplicarse: comprobado midiendo, no suponiendo. */
@media (max-height: 730px){
  .portada{ padding-block-start:1.5rem; }
  .portada h1{ margin-bottom:.32em; }
  .portada .entradilla{ margin-bottom:.55rem; }
  .portada .acciones{ margin-top:1rem; }
  .portada .portada__apunte{ margin-top:.85rem; }
  .portada .aclaracion{ margin-top:.9rem; }
}