/* ============================================================
   Fundación Contra el Acoso — sistema de diseño
   ------------------------------------------------------------
   Tema CLARO. La paleta sale del logo real de la Fundación:
   magenta #C02762 (la mano) + azul marino #072B5B (la tipografía)
   sobre blanco. Todos los contrastes verificados sobre 4,5:1.
   ============================================================ */

/* ══════════════ TIPOGRAFÍA ══════════════
   Inter variable, subconjunto latino, alojada en el propio dominio.

   · font-display: swap → el texto se lee desde el primer instante con
     la fuente de reserva y cambia a Inter al llegar. Sin swap habría
     un parpadeo de texto invisible que penaliza en Core Web Vitals.
   · font-weight: 100 900 → un solo archivo cubre de fino a negra. Con
     fuentes estáticas harían falta seis descargas.
   · El eje de tamaño óptico lo aplica el navegador solo: no hace falta
     font-variation-settings.
   · unicode-range latino: si una página no usara estos caracteres, el
     navegador ni se descargaría el archivo.                            */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

:root {
  /* ── MARCA (extraída del logo) ── */
  --accent:       #C02762;   /* 5,67:1 sobre blanco */
  --accent-dark:  #8E1748;   /* 8,87:1 — enlaces en hover */
  --accent-soft:  rgba(192, 39, 98, 0.075);
  --accent-line:  rgba(192, 39, 98, 0.22);
  /* Extremos del degradado y sombra del botón principal: cambian con cada tema */
  --accent-luz:   #D13A73;   /* filo superior del botón */
  --accent-fondo: #A81E53;   /* base del botón */
  --accent-rgb:   192, 39, 98;
  --accent-dark-rgb: 142, 23, 72;
  --oro:          #F5CE02;   /* SOLO como relleno, nunca como texto sobre blanco */

  /* ── TINTA ── */
  --tinta:    #072B5B;   /* 13,9:1 — titulares y texto principal */
  --tinta-2:  #55677F;   /*  5,8:1 — texto secundario */
  --tinta-3:  #7C8CA3;   /*  4,0:1 — SOLO decorativo o texto grande */

  /* ── SUPERFICIES ── */
  --blanco:   #FFFFFF;
  --nieve:    #F7F9FC;
  --niebla:   #EEF2F8;
  --borde:    #E1E8F2;
  --borde-2:  #CDD8E8;

  /* ── SUBMARCAS (provisionales, pendientes de identidad propia) ── */
  --faro:    #8A6A00;   /* 5,07:1 */
  --cimbra:  #0E7C74;   /* 5,06:1 */
  --nexus:   #1E4FBF;   /* 7,18:1 */

  /* ── SOMBRAS ── */
  --sombra-1: 0 1px 2px rgba(7, 43, 91, .05), 0 2px 8px rgba(7, 43, 91, .04);
  --sombra-2: 0 2px 4px rgba(7, 43, 91, .05), 0 12px 28px rgba(7, 43, 91, .08);
  --sombra-3: 0 4px 10px rgba(7, 43, 91, .07), 0 24px 48px rgba(7, 43, 91, .11);

  /* ── TIPOGRAFÍA: Inter alojada aquí mismo (0 peticiones a terceros) ── */
  --font-display: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-btn:     'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* ── GEOMETRÍA ── */
  --radius:     16px;
  --radius-sm:  10px;
  --radius-lg:  24px;
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 0.34s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ancho:      1180px;
  --ancho-txt:  70ch;
  --nav-h:      78px;
}

/* Cada iniciativa cambia solo el acento. El resto del sistema no se toca. */
[data-tema="faro"]   { --accent: var(--faro);   --accent-dark: #6B5200; --accent-soft: rgba(138,106,0,.08);  --accent-line: rgba(138,106,0,.24); --accent-luz: #A38010; --accent-fondo: #6E5400; --accent-rgb: 138,106,0;  --accent-dark-rgb: 107,82,0; }
[data-tema="cimbra"] { --accent: var(--cimbra); --accent-dark: #0A5C56; --accent-soft: rgba(14,124,116,.08); --accent-line: rgba(14,124,116,.24); --accent-luz: #1D948B; --accent-fondo: #0A625B; --accent-rgb: 14,124,116; --accent-dark-rgb: 10,92,86; }
[data-tema="nexus"]  { --accent: var(--nexus);  --accent-dark: #163C92; --accent-soft: rgba(30,79,191,.07);  --accent-line: rgba(30,79,191,.22); --accent-luz: #3366D9; --accent-fondo: #173F9E; --accent-rgb: 30,79,191; --accent-dark-rgb: 22,60,146; }

/* ══════════════ RESET ══════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--tinta-2);
  background: var(--blanco);
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* ── DEGRADADOS BLANCOS DE FONDO ──
   Base blanca con dos velos de color muy tenues que se disuelven en
   blanco. Es lo que evita que una web clara se vea plana y apagada. */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(64rem 44rem at 8% -6%,   rgba(192, 39, 98, .085), rgba(255,255,255,0) 62%),
    radial-gradient(56rem 40rem at 98% 4%,   rgba(7, 43, 91, .065),   rgba(255,255,255,0) 58%),
    radial-gradient(70rem 50rem at 50% 108%, rgba(245, 206, 2, .075), rgba(255,255,255,0) 60%);
}
/* Grano finísimo: rompe las bandas de los degradados */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 0; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}
.cabecera, main, .pie, .barra-movil, .salida-rapida, .cookies-banner { position: relative; z-index: 1; }

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

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }

::selection { background: var(--accent); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--nieve); }
::-webkit-scrollbar-thumb { background: var(--borde-2); border-radius: 9px; border: 3px solid var(--nieve); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

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

.saltar {
  position: absolute; left: 12px; top: -60px;
  background: var(--accent); color: #fff;
  padding: 10px 18px; border-radius: var(--radius-sm);
  z-index: 200; text-decoration: none; transition: top .2s;
}
.saltar:focus { top: 12px; color: #fff; }

/* ══════════════ JERARQUÍA TIPOGRÁFICA ══════════════
   Cuatro niveles y se acabó. Cada uno se distingue del anterior por
   tamaño Y por color, no solo por tamaño: es lo que hace que la
   estructura se lea de un vistazo sin tener que leer el texto. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--tinta);
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 4.6vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; }
/* Los saltos del titular solo valen con sitio de sobra: en móvil dejan
   líneas huérfanas de dos palabras. Ahí manda el ajuste natural. */
h1 br { display: none; }
@media (min-width: 860px) { h1 br { display: inline; } }
h2 { font-size: clamp(1.6rem, 2.9vw, 2.3rem);  font-weight: 800; }
h3 { font-size: clamp(1.08rem, 1.5vw, 1.24rem); font-weight: 700; letter-spacing: -0.012em; }
h4 { font-size: 1rem; font-weight: 700; }

p { margin: 0 0 1.1em; }
h1 strong, h2 strong { color: var(--accent); font-weight: 800; }

/* Separador de titular: «Prevenir · Detectar · Intervenir · Sostener».
   Va en <i aria-hidden> para que el lector de pantalla no lea "punto medio"
   cuatro veces; el margen negativo compensa el espacio del propio glifo. */
h1 .sep {
  font-style: normal; color: var(--accent);
  opacity: .6; font-weight: 400;
}

.lede {
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  line-height: 1.62;
  color: var(--tinta-2);
  max-width: 60ch;
}

/* Etiqueta de sección: el primer nivel de la jerarquía */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-btn);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .9rem;
}
.eyebrow::before {
  content: ''; width: 22px; height: 2px;
  background: var(--accent); border-radius: 2px; flex: none;
}

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.seccion { padding: clamp(3.4rem, 7vw, 6rem) 0; }
.seccion-tenue { background: var(--nieve); border-block: 1px solid var(--borde); }

/* ══════════════ FONDOS CON IMAGEN ══════════════
   Siete fondos casi blancos que el generador reparte por secciones,
   una sí y otra no, en lugar del tinte plano. Quién los lleva lo decide
   asignarFondos() en lib.js con una regla fija: solo secciones cuyo
   texto va dentro de tarjetas. Nunca una sección de lectura, un
   formulario, un artículo del blog ni una página legal.

   Las siete imágenes están compuestas igual: limpias a la izquierda y
   con el detalle (cristal, arco, hojas, onda) a la derecha o abajo.
   El velo de ::before aprovecha eso: blanquea la mitad izquierda, que
   es donde caen título y entradilla, y deja ver el detalle a la
   derecha. El punto más oscuro de los siete es luma 160 (fondo 1);
   con el velo al 55 % sube a ~212, y el texto secundario (#55677F)
   queda por encima de 5:1 incluso ahí. */
.seccion-fondo {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  border-block: 1px solid var(--borde);
}
.seccion-fondo::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.28) 48%,
    rgba(255,255,255,0)   78%);
}
.seccion-fondo > .contenedor { position: relative; }

/* La posición sigue a dónde tiene cada imagen su detalle, para que
   una sección baja no lo recorte. */
.fondo-1 { background-image: url(/img/fondos/fondo-1.webp); background-position: right bottom; }
.fondo-2 { background-image: url(/img/fondos/fondo-2.webp); background-position: right center; }
.fondo-3 { background-image: url(/img/fondos/fondo-3.webp); background-position: center; }
.fondo-4 { background-image: url(/img/fondos/fondo-4.webp); background-position: right center; }
.fondo-5 { background-image: url(/img/fondos/fondo-5.webp); background-position: right top; }
.fondo-6 { background-image: url(/img/fondos/fondo-6.webp); background-position: center bottom; }
.fondo-7 { background-image: url(/img/fondos/fondo-7.webp); background-position: right center; }

/* En móvil todo va a una columna y el texto puede caer sobre el
   detalle: velo uniforme en vez de degradado lateral. */
@media (max-width: 767px) {
  .seccion-fondo::before { background: rgba(255,255,255,.5); }

  /* La etiqueta sobre cada h2 se quedaba en 11,5 px: por debajo del
     umbral cómodo de lectura en pantalla pequeña. En mayúsculas y con
     tanto espaciado entre letras, se notaba. */
  .eyebrow { font-size: .8rem; letter-spacing: .12em; }

  /* Las listas de enlaces relacionados eran enlaces de 24 px de alto
     pegados unos a otros: en el móvil se falla el dedo y se abre el de
     al lado. Con esto cada uno pasa de 24 a 44 px de alto sin que la
     lista crezca apenas, porque se come el hueco que ya había. */
  .enlaces-relacionados ul { gap: 0; }
  .enlaces-relacionados li + li { border-top: 1px solid var(--borde); }
  .enlaces-relacionados a { padding: .62rem 0; width: 100%; }
}
.prosa { max-width: var(--ancho-txt); }
.prosa p { color: var(--tinta-2); }

/* ══════════════ CAJA DE RESPUESTA (AEO) ══════════════ */
.answer-box {
  position: relative;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-left: 4px solid var(--accent);
  padding: 1.2rem 1.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 2rem;
  max-width: var(--ancho-txt);
}
.answer-box p { margin: 0; color: var(--tinta); font-size: 1.05rem; line-height: 1.62; }
.answer-box strong { color: var(--accent-dark); }

/* ══════════════ TARJETAS ══════════════ */
.glass-card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  box-shadow: var(--sombra-1);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
a.glass-card:hover, .glass-card.hoverable:hover {
  border-color: var(--accent-line);
  box-shadow: var(--sombra-2);
  transform: translateY(-3px);
}

/* ══════════════ BOTONES ══════════════ */
.btn {
  --brillo-espera: 0s;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-btn); font-size: .96rem; font-weight: 650;
  padding: .84rem 1.7rem; min-height: 50px;
  border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: var(--transition);
  position: relative; overflow: hidden;
  isolation: isolate;
}
.btn > * { position: relative; z-index: 2; }
.btn-sm { padding: .55rem 1.2rem; min-height: 42px; font-size: .89rem; }
.btn .flecha { width: 1.05em; height: 1.05em; transition: transform .3s var(--ease); position: relative; z-index: 2; }
.btn:hover .flecha { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(.985); }

/* ── BRILLO ──
   Un destello diagonal barre el botón cada 3,4 s. `--brillo-espera` lo
   escalona desde el JS para que no barran todos a la vez, que es lo que
   lo convierte en parpadeo de feria. */
.btn-primario::after,
.btn-tinta::after,
.btn-oro::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, .38) 48%,
    rgba(255, 255, 255, .05) 56%,
    transparent 70%);
  transform: translateX(-130%);
  animation: brillo 3.4s var(--brillo-espera) infinite;
  pointer-events: none;
}
.btn-oro::after { background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 48%, transparent 70%); }
@keyframes brillo {
  0%, 58% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}

/* ── RELIEVE ──
   Un filo claro arriba y sombra abajo: es lo que hace que el botón
   parezca una pieza física y no un rectángulo de color. */
.btn-primario {
  background: linear-gradient(180deg, var(--accent-luz) 0%, var(--accent) 52%, var(--accent-fondo) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 2px 4px rgba(var(--accent-dark-rgb), .22),
    0 8px 20px rgba(var(--accent-rgb), .34);
}
.btn-primario:hover {
  color: #fff; transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(0, 0, 0, .14),
    0 4px 8px rgba(var(--accent-dark-rgb), .24),
    0 14px 34px rgba(var(--accent-rgb), .42);
}

.btn-fantasma {
  background: var(--blanco); border-color: var(--borde-2); color: var(--tinta);
  box-shadow: 0 1px 2px rgba(7, 43, 91, .06), 0 4px 12px rgba(7, 43, 91, .05);
}
.btn-fantasma:hover {
  border-color: var(--accent); color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(7, 43, 91, .07), 0 10px 24px rgba(7, 43, 91, .10);
}

.btn-tinta {
  background: linear-gradient(180deg, #0D3E77 0%, var(--tinta) 55%, #041D3E 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 4px rgba(4,29,62,.22), 0 8px 20px rgba(7,43,91,.30);
}
.btn-tinta:hover { color: #fff; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 14px 32px rgba(7,43,91,.38); }

/* Amarillo institucional: solo como relleno, con tinta encima (9,1:1) */
.btn-oro {
  background: linear-gradient(180deg, #FFDE3C 0%, var(--oro) 55%, #D9B600 100%);
  color: var(--tinta); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 4px rgba(154,130,0,.24), 0 8px 20px rgba(245,206,2,.36);
}
.btn-oro:hover { color: var(--tinta); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 32px rgba(245,206,2,.44); }

/* ── ESTADO DE CARGA ──
   Al enviar un formulario. El ancho no cambia porque el texto se
   sustituye por un giro del mismo tamaño: si el botón encogiera, el
   cursor se quedaría fuera y parecería que ha fallado. */
.btn[disabled], .btn.cargando { cursor: progress; opacity: .9; }
.btn.cargando { pointer-events: none; }
.btn.cargando::after { animation: none; }
.btn.cargando .flecha { display: none; }
.btn .girador {
  width: 1.05em; height: 1.05em; flex: none;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar .7s linear infinite;
  position: relative; z-index: 2;
}
.btn-fantasma .girador, .btn-oro .girador {
  border-color: rgba(7, 43, 91, .25); border-top-color: var(--tinta);
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ══════════════ CABECERA ══════════════ */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  min-height: var(--nav-h);
  display: flex; align-items: center;
  /* Sin backdrop-filter a propósito. Metía los 33 enlaces y textos de la
     cabecera en una capa de composición, y ahí se pierde el suavizado
     subpíxel: la tipografía más pequeña del sitio se veía blanda. Un fondo
     casi opaco da el mismo resultado visual y el texto queda nítido. */
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--borde);
}
.cabecera-inner { display: flex; align-items: center; gap: 1.2rem; }

/* El logo YA contiene el nombre de la Fundación: no se repite en texto. */
.logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.logo img { width: auto; height: 44px; }
.pie .logo img { height: 96px; }

.nav { margin-left: auto; position: relative; }
.nav > ul { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .8rem; border-radius: 999px;
  font-size: .93rem; font-weight: 550; color: var(--tinta-2);
  text-decoration: none; white-space: nowrap; transition: color .22s;
}
.nav a:hover { color: var(--tinta); }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 650; }
.nav-pill {
  position: absolute; top: 50%; left: 0; height: 38px; width: 0;
  transform: translateY(-50%);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px; opacity: 0;
  transition: all .42s var(--ease); pointer-events: none;
}
.caret { width: 6px; height: 6px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: .55; }

.tiene-hijos { position: relative; }
.submenu {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 276px; list-style: none; margin: 0; padding: .5rem;
  background: var(--blanco);
  border: 1px solid var(--borde); border-radius: var(--radius);
  box-shadow: var(--sombra-3);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
  transform-origin: top left;
  /* Al cerrar, 180 ms de margen: da tiempo a volver si te has salido
     por un píxel. Al abrir es instantáneo (regla .abierto de abajo). */
  transition: opacity .2s var(--ease), transform .24s var(--ease), visibility 0s .18s;
}
/* PUENTE INVISIBLE sobre el hueco entre el enlace y el desplegable.
   Sin esto, al bajar el ratón hacia las opciones se atraviesa un hueco
   de 10 px que no pertenece a ningún elemento, se pierde el :hover y el
   menú se cierra en la cara. Es EL fallo clásico de los desplegables. */
.submenu::before {
  content: '';
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
.tiene-hijos:hover .submenu,
.tiene-hijos:focus-within .submenu {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  transition: opacity .22s var(--ease), transform .26s var(--ease), visibility 0s;
}
.submenu a { display: block; padding: .58rem .8rem; border-radius: 8px; font-size: .9rem; }
.submenu a:hover { background: var(--nieve); color: var(--accent); }

.cabecera-acciones { display: flex; align-items: center; gap: .6rem; flex: none; }
.hamburguesa {
  display: none; width: 46px; height: 46px;
  background: var(--blanco); border: 1px solid var(--borde-2);
  border-radius: var(--radius-sm); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hamburguesa span { display: block; width: 19px; height: 2px; background: var(--tinta); border-radius: 2px; transition: var(--transition); }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════ HERO ══════════════ */
/* Poco aire arriba a propósito: la cabecera ya separa visualmente, y el
   objetivo es que titular, entradilla Y BOTONES entren en la primera
   pantalla sin tener que bajar. */
.hero { padding: clamp(1.4rem, 2.8vw, 2.6rem) 0 clamp(2rem, 4vw, 3rem); }
.hero-interior { padding: clamp(1.4rem, 3vw, 2.6rem) 0 clamp(1.2rem, 2.2vw, 1.8rem); }
.hero-inner { max-width: 60rem; }
.hero h1 { max-width: 25ch; }   /* 25 y no 21: la línea esquemática ocupa ~22ch */
.hero-interior h1 { max-width: 24ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

.hero-destacado {
  background: linear-gradient(96deg, var(--accent) 25%, #E0568F 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Hero con imagen a la derecha */
/* `align-items: start` y no `center`: centrada, la imagen bajaba hasta
   salirse del pliegue. Arriba queda a la altura del titular. */
.hero-con-imagen .hero-inner {
  max-width: none; display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}
.hero-con-imagen .hero-inner > div:first-child { padding-top: .35rem; }
.hero-figura { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sombra-3); border: 1px solid var(--borde); }
/* 16/9 = la proporción nativa de las fotos. Con 4/3 se recortaban los lados. */
.hero-figura img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ══════════════ FOCO DE CINE ══════════════
   Al segundo de cargar, la pantalla se oscurece y un foco se cierra sobre
   el titular. Dura unos tres segundos y se va solo.

   `@property` es lo que permite que `--fr` (el radio) se pueda animar: sin
   registrarlo, una variable CSS salta de un valor a otro sin transición.
   Si el navegador no lo soporta, el foco aparece ya cerrado en vez de
   cerrarse poco a poco — se pierde el gesto, no la página.

   `pointer-events: none` es obligatorio: es un velo que cubre la pantalla
   entera y sin eso se comería todos los clics durante esos tres segundos. */
/* Las tres variables van registradas con @property porque es lo ÚNICO
   que permite animarlas: un custom property sin registrar salta de un
   valor a otro sin transición, y el foco daría tirones en vez de viajar. */
@property --fr { syntax: '<length>'; inherits: false; initial-value: 1400px; }

.foco {
  position: fixed; inset: 0; z-index: 120;
  pointer-events: none;
  background: rgba(3, 16, 38, .76);
  opacity: 0;
  --fx: 50vw; --fy: 40vh; --fr: 1400px;
  /* Hasta dónde llega el círculo totalmente limpio, en % del radio. Lo fija
     el JS midiendo el titular; este valor solo es el de emergencia. */
  --fnucleo: 42%;

  /* El desenfoque es RADIAL sin necesidad de varias capas: la máscara no
     es un recorte de sí/no, sino una rampa de opacidad del 42% al 100%
     del radio. El navegador mezcla el fondo desenfocado con el original
     según esa rampa, así que el desenfoque nace en cero junto al titular
     y sube poco a poco hacia los bordes. Un solo elemento, un solo filtro. */
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);

  -webkit-mask-image: radial-gradient(circle var(--fr) at var(--fx) var(--fy),
                      transparent 0%, transparent var(--fnucleo), #000 100%);
          mask-image: radial-gradient(circle var(--fr) at var(--fx) var(--fy),
                      transparent 0%, transparent var(--fnucleo), #000 100%);
  /* Solo se anima el radio: el foco no se mueve del titular. */
  transition: opacity .8s ease, --fr 1.3s cubic-bezier(.3,.85,.3,1);
}
.foco.encendido { opacity: 1; }

/* Quien pide reducir el movimiento no quiere que la pantalla se le apague
   sola: aquí el foco no llega ni a montarse (lo corta el JS), pero se deja
   la regla por si alguien reactiva el efecto a mano. */
html.mov-reducido .foco { display: none; }

/* El titular NO se toca: el foco se limita a medir su caja con
   getBoundingClientRect y a colocar el agujero encima. Se probó trocearlo
   en palabras para recorrerlo tipo subtítulo y atenuando lo aún no leído;
   las dos cosas se descartaron — un texto que cambia de opacidad mientras
   lo lees molesta más de lo que aporta, y el recorrido nunca llegó a
   parecer natural. Si alguien lo vuelve a proponer: ya se probó. */

/* Titular esquemático.
   La línea de los tres términos va en su propio renglón y más pequeña:
   al tamaño del h1 no cabe en el ancho de la columna y partía dejando un
   «Prevención ·» huérfano. Reducida, entra entera y además crea un
   escalón de jerarquía entre las tres líneas del titular. */
.h1-linea { display: block; }
.h1-esquema {
  display: block;
  font-size: .6em;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin: .22em 0 .12em;
}
.h1-esquema .sep { margin: 0 .12em; }

/* ══════════════ LIBRO DE FOTOS ══════════════
   Las hojas giran sobre el lomo izquierdo, como las de un libro.
   Truco del carrusel circular: la hoja que pasa se gira 172°, y cuando
   ya está de canto —invisible por `backface-visibility`— se devuelve a 0°
   SIN transición y se manda al fondo de la pila. Como para entonces está
   tapada por las demás, el salto no se ve y el ciclo es infinito. */
.libro { position: relative; }
.libro-hojas {
  position: relative;
  aspect-ratio: 16 / 9;
  perspective: 2200px;
  perspective-origin: 0% 50%;
}
.hoja {
  position: absolute; inset: 0; margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-3);
  transform-origin: left center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .95s cubic-bezier(.55, .06, .3, 1);
}
.hoja > img { width: 100%; height: 100%; object-fit: cover; }
.hoja.pasando { transform: rotateY(-172deg); }
.hoja figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.2rem .95rem;
  font-size: .84rem; line-height: 1.45; color: #fff;
  background: linear-gradient(180deg, rgba(4, 20, 44, 0) 0%, rgba(4, 20, 44, .82) 62%);
}

.libro-controles { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .9rem; }
.libro-btn {
  width: 46px; height: 46px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blanco); color: var(--tinta);
  border: 1px solid var(--borde-2); border-radius: 50%;
  cursor: pointer; transition: var(--transition);
}
.libro-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--sombra-1); }
.libro-btn .flecha { width: 18px; height: 18px; }
.libro-btn:hover .flecha { transform: none; }
.libro-puntos { display: flex; align-items: center; }
/* El punto se ve de 8 px pero el botón mide 44: área táctil mínima. */
.libro-punto {
  width: 44px; height: 46px; padding: 0; border: none; background: none;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.libro-punto::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--borde-2); transition: var(--transition);
}
.libro-punto:hover::before { background: var(--tinta-3); }
.libro-punto[aria-pressed="true"]::before { width: 24px; border-radius: 99px; background: var(--accent); }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ══════════════ MIGAS ══════════════ */
.migas { padding: .1rem 0 1.6rem; }
.migas ol { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; font-size: .83rem; }
.migas li + li::before { content: '›'; margin-right: .45rem; color: var(--tinta-3); }
.migas a { color: var(--tinta-2); text-decoration: none; }
.migas a:hover { color: var(--accent); text-decoration: underline; }
.migas [aria-current] { color: var(--tinta); font-weight: 600; }

/* ══════════════ REJILLAS Y TARJETAS ══════════════ */
.grid { display: grid; gap: 1.15rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.tarjeta { padding: 1.7rem; display: flex; flex-direction: column; }
.tarjeta h3 { margin-bottom: .5rem; }
.tarjeta p { margin-bottom: 0; font-size: .96rem; color: var(--tinta-2); }
.enlace-tarjeta { text-decoration: none; color: inherit; }
.tarjeta-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 1.1rem;
  border-radius: 13px; color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.tarjeta-icono svg { width: 23px; height: 23px; }
.tarjeta-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.2rem; font-family: var(--font-btn);
  font-size: .89rem; font-weight: 650; color: var(--accent);
}
.tarjeta-cta .flecha { width: 1em; height: 1em; transition: transform .3s var(--ease); }
.enlace-tarjeta:hover .tarjeta-cta .flecha { transform: translateX(4px); }

/* Variante en la que el enlace es SOLO el CTA, no la tarjeta entera.
   margin-top:auto lo pega al fondo de la tarjeta: así dos tarjetas con
   distinto largo de texto mantienen los CTA alineados entre sí, que es
   justo lo que se ve mal cuando no lo llevan. El padding-top garantiza
   el hueco cuando el texto ya llega abajo y auto no deja margen. */
a.tarjeta-cta {
  margin-top: auto; padding-top: 1.2rem;
  text-decoration: none; align-self: flex-start;
}
a.tarjeta-cta:hover { color: var(--accent-dark); }
a.tarjeta-cta:hover .flecha { transform: translateX(4px); }

/* Tarjeta con foto arriba */
.tarjeta-foto { padding: 0; }
.tarjeta-foto > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.tarjeta-foto .tarjeta-cuerpo { padding: 1.5rem 1.7rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta-foto .tarjeta-cuerpo p { flex: 1; }

/* ══════════════ BLOQUE DE TEXTO + IMAGEN ══════════════ */
.duo {
  display: grid; gap: clamp(1.8rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}
.duo-figura { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sombra-2); border: 1px solid var(--borde); }
.duo-figura img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.duo-figura figcaption { padding: .8rem 1.1rem; font-size: .82rem; color: var(--tinta-2); background: var(--nieve); border-top: 1px solid var(--borde); }
.duo-invertido .duo-figura { order: -1; }

/* ══════════════ LISTAS ══════════════ */
.lista-check { list-style: none; margin: 1.3rem 0; padding: 0; display: grid; gap: .7rem; }
.lista-check li { display: flex; gap: .7rem; align-items: flex-start; color: var(--tinta-2); }
.lista-check svg { width: 20px; height: 20px; color: var(--accent); margin-top: .28em; }
.lista-check strong { color: var(--tinta); }
.lista-simple { margin: 1.1rem 0; padding-left: 1.2rem; color: var(--tinta-2); display: grid; gap: .5rem; }
.lista-simple li::marker { color: var(--accent); }
.lista-simple strong { color: var(--tinta); }

/* ══════════════ PASOS ══════════════ */
.pasos { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.paso { padding: 1.7rem; }
.paso-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: .9rem;
  font-family: var(--font-display); font-size: .95rem; font-weight: 800;
  color: #fff; background: var(--accent); border-radius: 11px;
}
.paso h3 { font-size: 1.05rem; }
.paso p { font-size: .93rem; margin: 0; color: var(--tinta-2); }

/* ══════════════ CIFRAS ══════════════ */
.cifras { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 2rem; }
.cifra { padding: 1.5rem; }
.cifra strong { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--accent); line-height: 1.1; margin-bottom: .4rem; letter-spacing: -.02em; }
.cifra span { font-size: .89rem; color: var(--tinta-2); line-height: 1.5; display: block; }

/* ══════════════ ESQUEMA DE LA WEB ══════════════
   Mapa visible de la estructura: el visitante ve de un vistazo qué
   hay en la web y por dónde entrar. */
.esquema { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 2rem; }
.esquema-bloque { padding: 1.5rem; }
.esquema-bloque h3 { display: flex; align-items: center; gap: .55rem; font-size: 1.02rem; margin-bottom: .9rem; }
.esquema-bloque h3 svg { width: 20px; height: 20px; color: var(--accent); }
.esquema-bloque ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.esquema-bloque a { font-size: .91rem; color: var(--tinta-2); text-decoration: none; display: inline-flex; align-items: baseline; gap: .35rem; }
.esquema-bloque a:hover { color: var(--accent); }
.esquema-bloque a::before { content: '›'; color: var(--accent); font-weight: 700; }

/* ══════════════ ENLACES RELACIONADOS ══════════════ */
.enlaces-relacionados {
  margin-top: 2.6rem; padding: 1.7rem;
  border: 1px solid var(--borde); border-radius: var(--radius);
  background: var(--nieve);
}
.enlaces-relacionados h3 { font-size: 1rem; margin-bottom: .9rem; }
.enlaces-relacionados ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.enlaces-relacionados a { display: inline-flex; align-items: center; gap: .45rem; font-size: .93rem; text-decoration: none; }
.enlaces-relacionados a:hover { text-decoration: underline; }
.enlaces-relacionados .flecha { width: .95em; height: .95em; }

/* ══════════════ FAQ ══════════════ */
.faq-lista { display: grid; gap: .7rem; margin-top: 1.8rem; max-width: 900px; }
.faq-item { padding: 0; }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.5rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  color: var(--tinta);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { color: var(--accent); }
.faq-mas { position: relative; width: 15px; height: 15px; flex: none; }
.faq-mas::before, .faq-mas::after { content: ''; position: absolute; background: var(--accent); border-radius: 2px; transition: var(--transition); }
.faq-mas::before { inset: 6.5px 0; height: 2px; }
.faq-mas::after  { inset: 0 6.5px; width: 2px; }
.faq-item[open] .faq-mas::after { transform: rotate(90deg); opacity: 0; }
.faq-cuerpo { padding: 0 1.5rem 1.4rem; }
.faq-cuerpo p { margin: 0 0 .8rem; font-size: .97rem; color: var(--tinta-2); }
.faq-cuerpo p:last-child { margin: 0; }

/* ══════════════ BANDA CTA ══════════════ */
.cta-card {
  padding: clamp(2rem, 4.5vw, 3.4rem);
  text-align: center;
  background: linear-gradient(150deg, var(--tinta) 0%, #0C3E7F 100%);
  border-color: transparent;
}
.cta-card h2, .cta-card p { color: #fff; }
.cta-card h2 { max-width: 21ch; margin-inline: auto; }
.cta-card p { max-width: 54ch; margin-inline: auto; opacity: .88; }
.cta-card .btn-fantasma { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.cta-card .btn-fantasma:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.cta-acciones { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.8rem; }

/* ══════════════ INICIATIVAS (FARO / CIMBRA / CO.NEXUS) ══════════════ */
.iniciativas { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); }
.iniciativa { padding: 0; display: flex; flex-direction: column; border-top: 3px solid var(--c); }
.iniciativa > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.iniciativa-cuerpo { padding: 1.6rem 1.7rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.iniciativa .marca { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.iniciativa .marca svg { width: 27px; height: 27px; color: var(--c); }
.iniciativa .marca b { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -.025em; color: var(--c); display: block; line-height: 1.1; }
.iniciativa .marca em { font-style: normal; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-2); display: block; margin-top: .15rem; }
.iniciativa p { flex: 1; font-size: .96rem; color: var(--tinta-2); }
.iniciativa .btn { align-self: flex-start; margin-top: 1.3rem; }
.iniciativa .btn-fantasma:hover { border-color: var(--c); color: var(--c); }
.i-faro   { --c: var(--faro); }
.i-cimbra { --c: var(--cimbra); }
.i-nexus  { --c: var(--nexus); }

/* ══════════════ EQUIPO ══════════════ */
.equipo { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); margin-top: 2rem; }
.persona { padding: 0; overflow: hidden; }
.persona img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(100%) contrast(1.04); transition: var(--transition); }
.persona:hover img { filter: grayscale(0%) contrast(1); }
.persona-cuerpo { padding: 1.2rem 1.4rem 1.5rem; }
.persona h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.persona .cargo { font-family: var(--font-btn); font-size: .78rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin: 0 0 .7rem; }
.persona p { font-size: .89rem; margin: 0; color: var(--tinta-2); }

/* ══════════════ FORMULARIOS ══════════════ */
.form-bloque { padding: clamp(1.6rem, 3vw, 2.4rem); }
.form-bloque > h3 { margin-bottom: .4rem; }
.form-bloque > p { color: var(--tinta-2); }
.campos { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); margin-top: 1.5rem; }
.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo-ancho { grid-column: 1 / -1; }
.campo label { font-size: .87rem; font-weight: 650; color: var(--tinta); }
.campo label span[aria-hidden] { color: var(--accent); }
.campo .pista { font-size: .8rem; color: var(--tinta-2); }
.campo input, .campo select, .campo textarea {
  width: 100%; font-family: inherit; font-size: .97rem; color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--borde-2); border-radius: var(--radius-sm);
  padding: .8rem 1rem; min-height: 48px; transition: var(--transition);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-3); }
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); outline: none;
}
.campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.6rem;
}

.consent { display: flex; gap: .75rem; align-items: flex-start; margin-top: 1.3rem; }
.consent input { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: .16em; accent-color: var(--accent); }
.consent label { font-size: .88rem; color: var(--tinta-2); font-weight: 400; line-height: 1.55; }

.form-aviso {
  display: flex; gap: .75rem; align-items: flex-start;
  margin-top: 1.3rem; padding: 1rem 1.2rem;
  background: #FFFBEA;
  border: 1px solid #F2DF9B;
  border-radius: var(--radius-sm);
  font-size: .87rem; color: #6B5600; line-height: 1.6;
}
.form-aviso svg { width: 19px; height: 19px; color: #A38200; margin-top: .22em; }
.form-aviso strong { color: #4A3C00; }
.form-acciones { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-top: 1.5rem; }
.form-estado { font-size: .9rem; min-height: 1.4em; margin: 0; }
.form-estado.ok  { color: #0E7C3A; font-weight: 600; }
.form-estado.err { color: #C0102B; font-weight: 600; }
.hp-campo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ══════════════ BLOG ══════════════ */
.post-fecha { font-family: var(--font-btn); font-size: .76rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: .55rem; }
/* .tarjeta p anula el margen; en tarjetas, menos tracking para que «Experiencia de nuestro Patronato» quepa en una línea */
.tarjeta .post-fecha { margin-bottom: .55rem; letter-spacing: .05em; }
.post-card h3 { font-size: 1.06rem; }
.articulo { max-width: var(--ancho-txt); }
.articulo p { color: var(--tinta-2); }
.articulo h2 { font-size: clamp(1.35rem, 2.3vw, 1.75rem); margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--borde); }
.articulo h3 { margin-top: 1.9rem; }
.articulo blockquote {
  margin: 1.8rem 0; padding: 1.2rem 1.5rem;
  border-left: 4px solid var(--oro);
  background: #FFFBEA;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .97rem; color: #5C4A00;
}
.articulo blockquote p { margin: 0; color: inherit; }
.firma { display: flex; gap: 1rem; align-items: center; margin-top: 2.6rem; padding: 1.3rem 1.5rem; }
.firma strong { display: block; color: var(--tinta); }
.firma span { font-size: .87rem; color: var(--tinta-2); }

/* ══════════════ LEGAL ══════════════ */
.legal { max-width: 78ch; }
.legal p, .legal li { color: var(--tinta-2); }
.legal h2 { font-size: clamp(1.22rem, 2vw, 1.5rem); margin-top: 2.8rem; padding-top: 1.3rem; border-top: 1px solid var(--borde); }
.legal h3 { margin-top: 1.8rem; font-size: 1.04rem; }
.legal ul, .legal ol { padding-left: 1.3rem; display: grid; gap: .45rem; margin: 1.1rem 0; }
.legal li::marker { color: var(--accent); }
.legal table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .92rem; }
.legal th, .legal td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.legal thead th, .legal tr:first-child th { background: var(--nieve); }
.legal th { color: var(--tinta); font-weight: 650; }
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borde); border-radius: var(--radius-sm); }
.tabla-scroll table { margin: 0; }

/* ══════════════ SALIDA RÁPIDA ══════════════ */
.salida-rapida {
  position: fixed; top: calc(var(--nav-h) + 12px); right: 16px; z-index: 99;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1rem; min-height: 44px;
  background: var(--tinta); color: #fff;
  border-radius: 999px; box-shadow: var(--sombra-2);
  font-family: var(--font-btn); font-size: .82rem; font-weight: 650;
  text-decoration: none; cursor: pointer; border: none;
}
.salida-rapida:hover { background: var(--accent); color: #fff; }
.salida-rapida svg { width: 16px; height: 16px; }

/* ══════════════ PIE ══════════════ */
.pie { background: var(--nieve); border-top: 1px solid var(--borde); padding: 3.6rem 0 1.8rem; margin-top: 3rem; }
.pie-grid { display: grid; gap: 2.2rem; grid-template-columns: minmax(250px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); }
.pie-marca .logo { margin-bottom: 1.1rem; }
.pie-razon { font-size: .87rem; color: var(--tinta-2); max-width: 34ch; }
.pie-nap { font-style: normal; display: grid; gap: .55rem; font-size: .87rem; color: var(--tinta-2); }
.pie-nap span { display: flex; gap: .55rem; align-items: flex-start; }
.pie-nap svg { width: 17px; height: 17px; color: var(--accent); margin-top: .18em; }
.pie-nap a { color: var(--tinta-2); text-decoration: none; }
.pie-nap a:hover { color: var(--accent); }
.pie-col h2 { font-family: var(--font-btn); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta); margin-bottom: 1rem; }
.pie-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pie-col a { font-size: .89rem; color: var(--tinta-2); text-decoration: none; }
.pie-col a:hover { color: var(--accent); }
.pie-legal {
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem;
  align-items: center; justify-content: space-between;
  margin-top: 2.6rem; padding-top: 1.5rem;
  border-top: 1px solid var(--borde);
  font-size: .82rem; color: var(--tinta-2);
}
.pie-legal p { margin: 0; }
.pie-legal ul { display: flex; flex-wrap: wrap; gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
.pie-legal a { color: var(--tinta-2); text-decoration: none; }
.pie-legal a:hover { color: var(--accent); text-decoration: underline; }

/* ══════════════ BARRA CTA MÓVIL ══════════════ */
.barra-movil { display: none; }

/* ══════════════ BANNER DE COOKIES ══════════════ */
.cookies-banner {
  position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 150;
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  max-width: 760px; margin-inline: auto;
  padding: 1.2rem 1.4rem;
  background: var(--blanco);
  border: 1px solid var(--borde-2); border-radius: var(--radius);
  box-shadow: var(--sombra-3);
}
.cookies-banner p { margin: 0; font-size: .88rem; flex: 1 1 320px; color: var(--tinta-2); }
/* "Aceptar" y "Rechazar" con el mismo peso visual: esconder el rechazo
   es una infracción tipificada, no una decisión de diseño. */
.cookies-acciones { display: flex; gap: .6rem; flex: none; }
.cookies-acciones .btn { min-width: 116px; }
@media (max-width: 900px) { .cookies-banner { bottom: 5.2rem; } }

/* ══════════════ ENTRADA CON DESENFOQUE ══════════════
   Los tres a la vez: opacidad, desplazamiento y desenfoque. El desenfoque
   es lo que hace que no parezca un simple fade-in; el elemento "enfoca"
   al llegar. `--i` lo pone el JS con el índice dentro de su grupo, y de
   ahí sale la cascada. */
.anim {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  filter: blur(12px);
  transition:
    opacity   .85s var(--ease) var(--retardo, 0ms),
    transform .85s var(--ease) var(--retardo, 0ms),
    filter    .85s var(--ease) var(--retardo, 0ms);
  /* Sin will-change a propósito: hay ~70 elementos animados por página y
     declararlo los convertiría a todos en capas de GPU desde la carga.
     Solo animan los 5-6 que entran a la vez en pantalla, y para eso el
     navegador ya promociona la capa él solo. */
}
.anim.visible { opacity: 1; transform: none; filter: blur(0px); }

/* Terminada la entrada se RETIRA el filtro del todo.
   `blur(0)` no es lo mismo que `none`: con cualquier filtro distinto de
   `none` el elemento se queda en su propia capa de composición, y ahí el
   texto pierde el suavizado subpíxel. En Windows eso se ve como letras
   borrosas en toda la página. Hay que llegar a `none`, no a `blur(0)`.
   Se hace al acabar la transición porque `none` no se puede interpolar:
   animar hacia él haría desaparecer el efecto de golpe. */
.anim.asentado { filter: none; transform: none; }

/* El hero entra con algo más de recorrido.
   El `:not(.visible)` NO es adorno: `.hero .anim` y `.anim.visible` tienen la
   misma especificidad (dos clases), así que si esta regla se aplicara siempre
   ganaría por ir después en la hoja y el titular se quedaría con 16 px de
   desenfoque PARA SIEMPRE. */
.hero .anim:not(.visible) { transform: translateY(32px) scale(.98); filter: blur(16px); }

/* Las fotos, además, con un punto de zoom */
.anim-foto img { transform: scale(1.06); transition: transform 1.1s var(--ease) var(--retardo, 0ms); }
.anim-foto.visible img { transform: scale(1); }

/* Sombra de la cabecera solo cuando ya has bajado */
.cabecera { transition: box-shadow .3s var(--ease), background .3s var(--ease); }
.cabecera.desplazada { background: #fff; box-shadow: 0 1px 0 var(--borde), 0 8px 28px rgba(7, 43, 91, .07); }

/* ══════════════ RESPONSIVE ══════════════ */
/* Inter es más ancha que Segoe UI. Con 8 apartados, el nav creció lo
   justo para empujar el botón "Necesito ayuda" 10 px fuera de pantalla
   a 1366 px, que es la anchura de portátil más común. Se recorta el
   aire lateral de los enlaces de primer nivel en la franja donde el
   menú horizontal convive con el botón. Los submenús no se tocan:
   el selector es > ul > li > a, solo primer nivel. */
@media (min-width: 1241px) and (max-width: 1480px) {
  .nav > ul > li > a { padding-inline: .5rem; }
}
/* Segundo escalón, más estrecho. «Necesito información» ocupa unos 50 px
   más que «Necesito ayuda», y entre 1241 y 1300 px el botón volvía a
   salirse de pantalla (hasta 38 px). 1280 px no es un ancho raro: es lo
   que da un portátil de 1920×1080 con el escalado de Windows al 150 %.
   Se probaron tres variantes en Chrome real; esta es la mínima que deja
   todo dentro sin tocar el tamaño de letra ni el botón. */
@media (min-width: 1241px) and (max-width: 1340px) {
  .nav > ul > li > a { padding-inline: .36rem; }
  .cabecera-inner { gap: .7rem; }
}
@media (max-width: 940px) {
  .hero-con-imagen .hero-inner { grid-template-columns: 1fr; }
  .duo-invertido .duo-figura { order: 0; }
}
/* El menú horizontal pasa a hamburguesa por debajo de 1240 px.
   Antes estaba en 900 y con 7 apartados ya iba al límite; al añadir
   "Blog" (8 apartados) el nav empujaba el botón "Necesito ayuda" fuera
   del contenedor y la página ganaba scroll horizontal. Medido: a 1180
   se salía 45 px y a 901 se salían Contacto y el botón enteros.
   Entre 900 y 1240 el menú desplegable funciona perfectamente y enseña
   los submenús completos, así que no se pierde nada. */
@media (max-width: 1240px) {
  .hamburguesa { display: flex; }
  /* OJO con el posicionamiento de este panel. Tres cosas que ya han fallado:
     1) Mientras `.cabecera` tuvo backdrop-filter, era bloque contenedor de
        sus descendientes position:fixed y este panel medía contra ELLA, no
        contra el viewport: quedaba en una caja colgando del header.
     2) Al quitar el backdrop-filter desapareció ese bloque contenedor, y un
        `top: 100%` pasó a valer el alto del viewport entero: el menú se iba
        fuera de la pantalla. Por eso ahora se ancla con `top: var(--nav-h)`,
        que es correcto midiendo contra el viewport y no depende de qué
        propiedades tenga la cabecera.
     3) Nada de translateX(100%) para esconderlo: al ser fixed, el
        overflow-x:hidden del body no lo recorta y el documento acaba
        midiendo el doble de ancho, con scroll horizontal en todo el sitio. */
  .nav {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0; margin: 0;
    height: calc(100vh - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
    background: var(--blanco);
    padding: 1.4rem 1.2rem 6rem; overflow-y: auto;
    border-top: 1px solid var(--borde);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .26s var(--ease), transform .3s var(--ease), visibility 0s .3s;
  }
  .nav.abierto {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: opacity .22s var(--ease), transform .3s var(--ease), visibility 0s;
  }
  .nav > ul { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav a { padding: .85rem .9rem; font-size: 1rem; border-radius: var(--radius-sm); }
  .nav a[aria-current="page"] { background: var(--accent-soft); }
  .nav-pill { display: none; }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: none; box-shadow: none;
    padding: 0 0 .4rem .9rem; min-width: 0;
    border-left: 2px solid var(--borde); margin-left: .9rem;
  }
  .submenu a { font-size: .92rem; padding: .6rem .7rem; }
  .caret { display: none; }
  .cabecera-acciones .btn { display: none; }
  .barra-movil {
    display: flex; gap: .6rem; align-items: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 98;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: #fff;          /* opaco: dentro hay texto, ver nota en .cabecera */
    border-top: 1px solid var(--borde);
  }
  .barra-movil .btn-primario { flex: 1; }
  .barra-movil .btn-fantasma { width: 52px; padding: .8rem; }
  .pie { padding-bottom: 6.5rem; }
  .salida-rapida { top: auto; bottom: calc(5rem + env(safe-area-inset-bottom)); right: 12px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .seccion { padding: 2.8rem 0; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
  .cta-acciones .btn, .hero-ctas .btn { width: 100%; }
  .tarjeta, .paso, .form-bloque { padding: 1.4rem; }
}

/* ══════════════ MOVIMIENTO REDUCIDO ══════════════
   NO va detrás de `@media (prefers-reduced-motion: reduce)`: las
   animaciones se ven siempre, por decisión de la Fundación. Este
   bloque solo entra si `paginas.js` pone la clase `mov-reducido`
   en <html>, y eso ocurre únicamente con
   RESPETAR_MOVIMIENTO_REDUCIDO = true.

   Si algún día se reactiva: el delay tiene que irse a 0 igual que
   la duración. Si solo se anula la duración, un
   `transition: visibility 0s .3s` sigue retrasando el ocultado y el
   menú móvil se queda expuesto al lector de pantalla y al tabulador. */
html.mov-reducido { scroll-behavior: auto; }
html.mov-reducido *,
html.mov-reducido *::before,
html.mov-reducido *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: .001ms !important;
  transition-delay: 0s !important;
}
html.mov-reducido .anim,
html.mov-reducido .hero .anim { opacity: 1; transform: none; filter: none; }
html.mov-reducido .anim-foto img { transform: none; }
/* El libro no gira: las hojas se funden. Un giro 3D es justo lo que
   molesta a quien pide reducir el movimiento. */
html.mov-reducido .hoja { transition: opacity .3s linear; }
html.mov-reducido .hoja.pasando { transform: none; opacity: 0; }

/* ══════════════ IMPRESIÓN ══════════════ */
@media print {
  body::before, body::after, .cabecera, .barra-movil, .salida-rapida, .cta-banda, .cookies-banner { display: none !important; }
  .seccion-fondo { background-image: none !important; }
  .seccion-fondo::before { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .glass-card { border: 1px solid #ccc; box-shadow: none; }
  a { color: #000; }
}