/* =========================================================================
   Detailerly · sistema visual de la web pública
   -------------------------------------------------------------------------
   Dirección: blanco total y moderno. Fondo blanco puro de arriba abajo, sin
   bandas de color ni bloques negros: la jerarquía la hacen el aire, el tamaño
   del texto y un único acento azul. Esquinas amplias, sombras difusas y ningún
   borde grueso ni sombra dura: nada de aspecto brutalista.

   Reglas de la casa:
   · El cristal se usa en paneles y tarjetas, nunca en bloques de texto largo.
   · Sombras grandes y suaves, nunca duras.
   · Un solo acento (azul) y en superficies pequeñas.
   · Las capturas del producto son el protagonista visual: nada de dibujos.
   ========================================================================= */

:root {
  /* Color ---------------------------------------------------------------- */
  --tinta: #0a0a0c;          /* negro: texto fuerte y bordes marcados */
  --tinta-suave: #434b57;    /* texto secundario: 9.1:1 */
  --tinta-tenue: #6b7280;    /* etiquetas: 4.8:1 */
  --noche: #f7f9fc;          /* «sección destacada»: gris azulado clarísimo */
  --noche-alto: #ffffff;

  --blanco: #ffffff;
  --nube: #f4f8ff;           /* bandas alternas, con un punto de azul */
  --linea: #dfe5ee;      /* borde marcado, visible sin ser duro */
  --linea-oscura: #1e2530;

  --azul: #1f6fff;           /* azul cristal: superficies (botones, rellenos) */
  --azul-hondo: #0b4fd6;     /* degradados y, sobre todo, TEXTO pequeño en azul:
                                el claro se queda en 4,4:1 sobre blanco y no
                                llega al mínimo legible (medido 20/09/2026) */
  --azul-texto: #0b4fd6;
  --azul-claro: #6aa8ff;
  --azul-vapor: #eef5ff;     /* fondo azulado clarísimo */
  --azul-borde: #c9ddff;     /* borde azul para lo destacado */
  --azul-brillo: rgba(31, 111, 255, .3);
  --alerta: #b42318;

  /* Cristal -------------------------------------------------------------- */
  --cristal: rgba(255, 255, 255, .62);
  --cristal-borde: rgba(255, 255, 255, .85);
  --cristal-sombra: var(--sombra-3);

  /* Tipografía ----------------------------------------------------------- */
  --titulo: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --sans: 'DM Sans', 'Segoe UI', system-ui, sans-serif;

  /* Escala: ocho tamaños y ni uno más -------------------------------------
     Antes había 24, doce de ellos apretados entre 12,5 y 16,5 px. Nadie
     distingue 15,2 de 14,9; lo único que consigue esa diferencia es que nada
     parezca decidido. Ocho pasos bien separados se repiten sin miedo, y esa
     repetición es la que se lee como oficio.

     El texto base vuelve a 16 px (estaba en 16,5) para que cada `rem` caiga en
     un número entero y no en un decimal feo. */
  --t-xs:   0.75rem;    /* 12 px · rótulos y etiquetas */
  --t-sm:   0.875rem;   /* 14 px · pies, ayudas, notas */
  --t-base: 1rem;       /* 16 px · el texto de leer */
  --t-md:   1.125rem;   /* 18 px · h3, listas destacadas */
  --t-lg:   1.25rem;    /* 20 px · entradillas */
  --t-xl:   1.5rem;     /* 24 px · citas y signos grandes */
  --t-2xl:  clamp(2rem, 3.1vw, 2.8rem);      /* h2 y cifras */
  --t-3xl:  clamp(2.5rem, 4.4vw, 3.9rem);    /* h1 */

  /* Pesos: tres. El 450 no se distingue del 400 y el 600 hace de 700 flojo. */
  --peso-normal: 400;
  --peso-medio:  500;
  --peso-fuerte: 700;

  /* Elevación: cuatro alturas, no doce sombras sueltas -------------------
     Lo que está apoyado, lo que está levantado, lo que flota y lo que está por
     encima de todo. Cada pieza elige una altura, no inventa una sombra. */
  --sombra-1: 0 1px 2px rgba(10, 10, 12, .05), inset 0 1px 0 #ffffff;
  --sombra-2: 0 1px 2px rgba(10, 10, 12, .04), 0 4px 10px -6px rgba(10, 10, 12, .06),
              0 12px 26px -16px rgba(10, 10, 12, .10), inset 0 1px 0 #ffffff;
  --sombra-3: 0 18px 44px -28px rgba(10, 10, 12, .35), inset 0 1px 0 #ffffff;
  --sombra-4: 0 30px 70px -30px rgba(11, 14, 20, .5);
  /* Las dos del acento: el botón principal y lo que se ilumina al pasar. */
  --sombra-azul: 0 8px 20px -8px rgba(31, 111, 255, .45);
  /* El anillo del foco es uno, no tres: quien navega con el teclado tiene que
     reconocerlo de una pantalla a otra. */
  --anillo-foco: 0 0 0 4px rgba(31, 111, 255, .18);
  /* Un borde de 1 px dibujado como sombra, para no mover el tamaño de la caja. */
  --filo-azul: inset 0 0 0 1px rgba(31, 111, 255, .35);
  --sombra-azul-alta: 0 2px 4px rgba(10, 10, 12, .05),
                      0 10px 20px -10px rgba(31, 111, 255, .18),
                      0 24px 48px -24px rgba(31, 111, 255, .3), inset 0 1px 0 #ffffff;

  /* Espacio -------------------------------------------------------------- */
  --e0: 4px;   --e15: 12px;
  --e1: 8px;  --e2: 16px;  --e3: 24px;  --e4: 40px;
  --e5: 64px; --e6: 96px;  --e7: 128px; --e8: 168px;

  --ancho: 1240px;
  --radio: 18px;
  --radio-pequeno: 10px;
}

/* Reinicio mínimo ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: #ffffff;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.62;
  letter-spacing: -0.011em;
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Dos halos muy suaves detrás de todo: dan profundidad para que el cristal
   tenga algo que desenfocar. Fijos, para que no distraigan al hacer scroll. */
body::before, body::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  border-radius: 50%; filter: blur(90px); opacity: .5;
}
body::before {
  /* Brillo: una luz azulada muy tenue en lo alto de la página. Es lo que hace
     que el blanco se vea «brillante» y no plano. */
  content: ''; position: fixed; inset: 0 0 auto 0; height: 60vh; z-index: -1;
  background: linear-gradient(180deg, rgba(31, 111, 255, .09), rgba(31, 111, 255, 0) 70%);
  pointer-events: none;
}
body::after { display: none; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: var(--peso-fuerte);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 var(--e3);
  text-wrap: balance;
}
/* Escala grande a propósito. Un titular de 2,7 rem es el de una web de un
   producto de 50 €/mes; a partir de 3,5 rem el ojo lo lee como una empresa que
   se toma en serio lo que cobra. El interlineado baja al crecer la letra, o los
   titulares de dos líneas se despegan. */
h1 { font-size: var(--t-3xl); line-height: 1.05; letter-spacing: -.032em; }
h2 { font-size: var(--t-2xl); line-height: 1.12; letter-spacing: -.03em; }
h3 { font-size: var(--t-md); font-weight: var(--peso-fuerte); letter-spacing: -0.015em; line-height: 1.4; margin-bottom: var(--e15); }
p  { margin: 0 0 var(--e3); max-width: 66ch; }
strong { font-weight: var(--peso-fuerte); }

/* Estructura ---------------------------------------------------------------- */
.contenedor { width: min(100% - 2 * var(--e3), var(--ancho)); margin-inline: auto; }
.seccion {
  padding-block: clamp(96px, 8.5vw, 168px);
  position: relative;
  border-bottom: 1px solid var(--linea);
}
.seccion--ajustada { padding-block: clamp(64px, 5.5vw, 112px); }
.seccion--hondo, .seccion--hueso { background: var(--nube); }

.rejilla { display: grid; gap: var(--e4); }
@media (min-width: 760px) {
  .rejilla--2 { grid-template-columns: repeat(2, 1fr); gap: var(--e5); }
  .rejilla--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .rejilla--2-7 { grid-template-columns: 1fr 1.2fr; align-items: center; gap: var(--e6); }
  .rejilla--7-5 { grid-template-columns: 1.2fr 1fr; align-items: center; gap: var(--e6); }
}

/* Etiqueta de sección: píldora de cristal ---------------------------------- */
.kicker {
  display: block;
  font-family: var(--titulo);
  font-size: var(--t-xs); font-weight: var(--peso-fuerte); letter-spacing: 0.01em;
  color: var(--azul-texto);
  margin-bottom: 20px;
  display: block;
}
.kicker::after { content: none; }
.kicker::before { content: none; }

.entradilla { font-size: var(--t-lg); line-height: 1.55; color: var(--tinta-suave); max-width: 54ch; font-weight: var(--peso-normal); }

/* Botones ------------------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e15);
  min-height: 54px; padding: 0 28px;
  font-weight: var(--peso-fuerte); font-size: var(--t-base); letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  border-radius: var(--radio-pequeno); border: 1px solid var(--azul-hondo);
  /* El arranque del degradado es #376dee y no un azul más claro: encima va
     texto blanco de 16 px, que para la norma es texto normal, y con #4a8bff
     el contraste se quedaba en 3,27:1. Con este, 4,58:1 en la franja clara
     y 6,77:1 en la oscura. A ojo es el mismo azul (medido 20/09/2026). */
  background: linear-gradient(180deg, #376dee, var(--azul-hondo)); color: var(--blanco);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
  box-shadow: var(--sombra-azul);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.boton:hover { transform: none; background: linear-gradient(180deg, #2f63e4, #0a46bd); box-shadow: var(--sombra-azul-alta); }
.boton:active { transform: translateY(0); }
.boton--linea, .boton--senal {
  background: linear-gradient(180deg, #ffffff, #f6f9ff); color: var(--tinta);
  border-color: var(--linea);
  box-shadow: var(--sombra-1);
}
.boton--linea:hover, .boton--senal:hover { background: var(--azul-vapor); border-color: var(--azul-borde); color: var(--azul); }

.boton--pequeno { min-height: 44px; font-size: var(--t-sm); padding: 0 var(--e3); }

.enlace-flecha {
  font-weight: var(--peso-medio); text-decoration: none; display: inline-flex; align-items: center; gap: var(--e15);
  /* 44 px de alto: en el móvil esto es un destino de dedo, no solo un enlace. */
  min-height: 44px;
  color: var(--azul-texto);
}
.enlace-flecha:hover svg { transform: translateX(4px); }

/* Cristal: la pieza central del estilo ------------------------------------- */
.tarjeta {
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
  padding: var(--e3) var(--e3) calc(var(--e3) + 4px);
  transition: border-color .25s ease, box-shadow .25s ease;
}
/* El cristal se reserva para lo que flota sobre la pagina: cabecera, menu,
   marco de la portada y la barra del movil. En las tarjetas de contenido
   estorba: emborrona el texto y iguala esta web con otras mil. */
.cristal {
  background: var(--cristal); border: 1px solid var(--cristal-borde);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-radius: var(--radio); box-shadow: var(--cristal-sombra); padding: var(--e4);
}
.tarjeta:hover {
  border-color: var(--azul-borde);
  box-shadow: var(--sombra-azul-alta);
}
.tarjeta--destacada {
  border-color: var(--azul);
  box-shadow: var(--sombra-azul-alta);
}
.tarjeta--destacada { position: relative; }

/* Las secciones destacadas son claras: los botones no cambian de color dentro
   de ellas. Había aquí tres reglas heredadas del estilo oscuro que pintaban el
   botón de blanco sobre blanco y lo hacían invisible. */

/* Cabecera ------------------------------------------------------------------ */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); min-height: 76px; }
.marca { display: flex; align-items: center; gap: var(--e15); text-decoration: none; font-weight: var(--peso-fuerte); font-size: var(--t-md); letter-spacing: -0.02em; }
.marca svg { flex: none; }
.menu-boton {
  background: var(--cristal); border: 1px solid var(--cristal-borde); border-radius: var(--radio-pequeno);
  width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(14px);
}
.navegacion { display: none; gap: var(--e4); align-items: center; }
.navegacion a {
  text-decoration: none; font-size: var(--t-base); color: var(--tinta-suave); font-weight: var(--peso-medio);
  transition: color .25s ease; position: relative; padding-block: 4px;
}
.navegacion a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--azul); transition: right .3s ease; border-radius: 2px;
}
.navegacion a:hover { color: var(--tinta); }
.navegacion a:hover::after, .navegacion a[aria-current='page']::after { right: 0; }
.navegacion a[aria-current='page'] { color: var(--tinta); }
.cabecera__acciones { display: flex; align-items: center; gap: var(--e3); }
.cabecera__entrar { display: none; text-decoration: none; font-size: var(--t-base); color: var(--tinta-suave); }
.cabecera__entrar:hover { color: var(--azul); }
@media (min-width: 1000px) {
  .navegacion { display: flex; }
  .cabecera__entrar { display: inline-flex; }
  .menu-boton { display: none; }
}
.menu-movil { display: none; border-top: 1px solid var(--linea); padding-block: var(--e2); }
.menu-movil[data-abierto='si'] { display: block; }
.menu-movil a { display: block; padding: var(--e2) 0; text-decoration: none; border-bottom: 1px solid var(--linea); }
.menu-movil a.destacado { border-bottom: none; color: var(--azul); font-weight: var(--peso-medio); }

/* Pie ----------------------------------------------------------------------- */
/* El pie también es blanco: el bloque negro del final era lo último que
   quedaba del estilo anterior. */
.pie {
  background: var(--nube); color: var(--tinta-suave);
  border-top: 1px solid var(--linea);
  padding-block: var(--e6) var(--e4); margin-top: var(--e6);
}
.pie__titulo { font-size: var(--t-sm); color: var(--tinta); margin: 0 0 var(--e2); font-weight: var(--peso-fuerte); }
.pie a { color: var(--tinta-suave); text-decoration: none; display: block; padding: var(--e1) 0; transition: color .25s ease; }
.pie a:hover { color: var(--azul); }
.pie .marca { color: var(--tinta); }
.pie__legal {
  border-top: 1px solid var(--linea); margin-top: var(--e5); padding-top: var(--e3);
  font-size: var(--t-sm); display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4);
  justify-content: space-between; color: var(--tinta-tenue);
}

/* Piezas -------------------------------------------------------------------- */
.dato-grande {
  font-family: var(--titulo);
  font-size: var(--t-2xl); font-weight: var(--peso-fuerte); line-height: 1.1;
  letter-spacing: -0.025em; margin: 0 0 var(--e1); color: var(--tinta);
  /* El importe nunca se parte: «2.800 €» en dos líneas parece un fallo. */
  white-space: nowrap;
}
.dato-pie { font-size: var(--t-sm); color: var(--tinta-tenue); letter-spacing: 0; font-weight: var(--peso-medio); margin: 0; }

.listado-marcado { list-style: none; padding: 0; margin: 0 0 var(--e3); }
.listado-marcado li { position: relative; padding-left: 30px; margin-bottom: var(--e2); }
.listado-marcado li::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: 18px; height: 18px; border-radius: 6px;
  background: var(--azul-vapor);
  box-shadow: var(--filo-azul);
}
.listado-marcado li::after {
  content: ''; position: absolute; left: 6.5px; top: calc(.5em + 6.5px);
  width: 5px; height: 5px; border-radius: 2px; background: var(--azul);
}

/* Capturas: enmarcadas en cristal, que es donde luce el estilo ------------- */
.captura {
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-4);
  background: var(--blanco);
}
.marco-cristal {
  padding: var(--e15); border-radius: calc(var(--radio) + 6px);
  background: linear-gradient(180deg, #ffffff, #f7faff);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-3);
}
.marco-cristal .captura { box-shadow: none; border-radius: var(--radio); overflow: hidden; }
.marco-cristal { overflow: hidden; }

/* Ficha flotante sobre una captura */
.ficha-flotante {
  position: absolute; right: -6%; bottom: 8%; max-width: 300px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--cristal-borde);
  backdrop-filter: blur(20px) saturate(160%);
  border-radius: var(--radio); padding: var(--e3);
  box-shadow: var(--sombra-4);
}
@media (max-width: 860px) { .ficha-flotante { position: static; max-width: none; margin-top: var(--e3); } }

.tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabla th, .tabla td { text-align: left; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.tabla th { font-size: var(--t-xs); color: var(--tinta-tenue); font-weight: var(--peso-medio); letter-spacing: 0; }
.tabla td strong { font-weight: var(--peso-fuerte); font-size: var(--t-md); }

details {
  border: 1px solid var(--linea); border-radius: var(--radio-pequeno);
  padding: var(--e3); margin-bottom: 12px;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  box-shadow: inset 0 1px 0 #ffffff;
}
details summary {
  cursor: pointer; font-weight: var(--peso-medio); font-size: var(--t-md); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--e3);
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: '+'; color: var(--azul); font-size: var(--t-xl); font-weight: var(--peso-normal); line-height: 1;
}
details[open] summary::after { content: '–'; }
details p { margin: var(--e2) 0 0; color: var(--tinta-suave); }

/* Formularios ---------------------------------------------------------------- */
.campo { margin-bottom: var(--e3); }
.campo label { display: block; font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--tinta-suave); margin-bottom: 8px; }
.campo .ayuda { font-size: var(--t-sm); color: var(--tinta-tenue); margin: var(--e1) 0 0; font-weight: var(--peso-normal); }
.campo input, .campo textarea, .campo select {
  width: 100%; min-height: 52px; padding: var(--e15) 16px;
  background: #ffffff; border: 1px solid var(--linea);
  border-radius: var(--radio-pequeno);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.campo textarea { min-height: 128px; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible {
  /* Mismo anillo que en el resto de la web: quien rellena con el teclado tiene
     que ver dónde está, y aquí es donde más importa. */
  outline: 2px solid var(--azul); outline-offset: 2px;
  border-color: var(--azul); box-shadow: var(--anillo-foco);
}
.campo input::placeholder, .campo textarea::placeholder { color: #9aa3af; }
.campo--error input, .campo--error textarea { border-color: var(--alerta); }
.campo .error { color: var(--alerta); font-size: var(--t-sm); margin: 8px 0 0; }
.casilla { display: flex; gap: var(--e2); align-items: flex-start; margin-bottom: var(--e3); }
.casilla input { width: 20px; height: 20px; min-height: 0; margin-top: 4px; flex: none; accent-color: var(--azul); }
.casilla label { font-weight: var(--peso-normal); font-size: var(--t-base); margin: 0; color: var(--tinta-suave); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Barra de la calculadora ---------------------------------------------------- */
input[type='range'] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(90deg, var(--azul), var(--azul-claro));
  min-height: 0; padding: 0; margin-block: var(--e2);
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--blanco); border: 1px solid rgba(37, 99, 235, .4);
  box-shadow: var(--sombra-2); cursor: grab;
}
input[type='range']::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--blanco); border: 1px solid rgba(37, 99, 235, .4); cursor: grab;
}

/* Accesibilidad -------------------------------------------------------------- */
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 6px;
}
.saltar {
  position: absolute; left: -9999px; top: 0; background: var(--tinta); color: var(--blanco);
  padding: var(--e2) var(--e3); z-index: 100; text-decoration: none;
}
.saltar:focus { left: 0; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cinta-seguridad { display: none; }

/* Movimiento ----------------------------------------------------------------- */
/* Las entradas son transiciones de CSS: el JS solo pone la clase «dentro»
   cuando la pieza asoma. Sin JS, todo se ve colocado desde el principio. */
/* La pieza entra deslizando unos píxeles y nada más. Se probó a descubrirla
   con un recorte (clip-path) y salía mal: si el vigía no llegaba a dispararse,
   el texto se quedaba cortado a la vista. Una animación nunca puede esconder
   contenido; esto, como mucho, lo deja unos píxeles más abajo. */
.entra {
  transform: translate3d(0, 12px, 0);
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.entra.dentro { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .entra { transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 620px) {
  .cabecera__acciones .boton { display: none; }
  .menu-movil a.destacado { margin-top: var(--e2); }
  .seccion--noche, .seccion--marino, .seccion--tinta { margin-inline: var(--e2); border-radius: var(--radio); }
}

/* =========================================================================
   Piezas añadidas: menú del móvil a pantalla completa, barra de llamada a la
   acción, animación del dibujo de la portada, testimonios y redes.
   ========================================================================= */

/* Menú del móvil: capa de cristal a pantalla completa, no una lista apretada */
.menu-movil {
  position: fixed; inset: 74px 0 0; z-index: 60;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-top: 1px solid var(--linea);
  padding: var(--e4) var(--e3) var(--e5);
  overflow-y: auto;
}
.menu-movil a {
  font-size: var(--t-xl); font-weight: var(--peso-medio); letter-spacing: -.03em;
  padding: var(--e2) 0; border-bottom: 1px solid var(--linea);
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
}
.menu-movil[data-abierto='si'] a { opacity: 1; transform: none; }
.menu-movil[data-abierto='si'] a:nth-child(2) { transition-delay: .05s; }
.menu-movil[data-abierto='si'] a:nth-child(3) { transition-delay: .1s; }
.menu-movil[data-abierto='si'] a:nth-child(4) { transition-delay: .15s; }
.menu-movil[data-abierto='si'] a:nth-child(5) { transition-delay: .2s; }
.menu-movil[data-abierto='si'] a:nth-child(6) { transition-delay: .25s; }
.menu-movil a.destacado {
  margin-top: var(--e4); border: 1px solid var(--tinta); border-radius: var(--radio-pequeno);
  background: var(--tinta); color: var(--blanco); text-align: center; font-size: var(--t-md);
  padding: var(--e2); box-shadow: var(--sombra-4);
}
.menu-boton span {
  display: block; width: 20px; height: 1.6px; background: var(--tinta); border-radius: 2px;
  transition: transform .3s ease, opacity .25s ease;
}
.menu-boton span + span { margin-top: 5px; }
.menu-boton[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.menu-boton[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* Barra de llamada a la acción, solo en el móvil ---------------------------- */
.barra-cta {
  position: fixed; left: var(--e2); right: var(--e2); bottom: var(--e2); z-index: 40;
  display: none; align-items: center; justify-content: space-between; gap: var(--e2);
  padding: 12px 12px 12px var(--e3); border-radius: var(--radio);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--cristal-borde);
  box-shadow: var(--sombra-4);
  transform: translateY(140%); transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.barra-cta.visible { transform: none; }
.barra-cta p { margin: 0; font-size: var(--t-sm); font-weight: var(--peso-medio); }
.barra-cta small { display: block; color: var(--tinta-tenue); font-weight: var(--peso-normal); }
@media (max-width: 860px) { .barra-cta { display: flex; } }

/* El dibujo de la portada: mismo lenguaje, dentro del marco de cristal ------ */
.plano { display: block; width: 100%; }
.plano [data-barrido], .plano [data-pieza], .plano [data-evento] { opacity: 0; }
.plano--quieto [data-pieza], .plano--quieto [data-evento] { opacity: 1; }

.plano--corriendo [data-barrido] { animation: barrido 3s cubic-bezier(.4, 0, .2, 1) forwards; }
.plano--corriendo [data-pieza] { animation: aparece .9s ease forwards; }
.plano--corriendo [data-pieza]:nth-of-type(1) { animation-delay: 1.1s; }
.plano--corriendo [data-pieza]:nth-of-type(2) { animation-delay: 1.6s; }
.plano--corriendo [data-pieza]:nth-of-type(3) { animation-delay: 2.1s; }
.plano--corriendo [data-evento] { animation: aparece 1s ease 2.8s forwards; }

@keyframes barrido {
  0%   { opacity: 0; transform: translateY(0); }
  12%  { opacity: .55; }
  88%  { opacity: .55; }
  100% { opacity: 0; transform: translateY(150px); }
}
@keyframes aparece {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Testimonios --------------------------------------------------------------- */
.testimonio { display: flex; flex-direction: column; gap: var(--e3); height: 100%; }
.testimonio blockquote {
  margin: 0; font-size: var(--t-md); line-height: 1.55; letter-spacing: -.015em; font-weight: var(--peso-medio);
}
.testimonio blockquote::before { content: '“'; color: var(--azul); font-size: var(--t-xl); line-height: 0; vertical-align: -.35em; margin-right: 4px; }
.testimonio figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.testimonio .inicial {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-weight: var(--peso-fuerte); color: var(--azul);
  background: var(--azul-vapor); box-shadow: var(--filo-azul);
}
.testimonio .quien { font-size: var(--t-base); line-height: 1.35; }
.testimonio .quien span { display: block; color: var(--tinta-tenue); font-size: var(--t-sm); }

/* Redes sociales ------------------------------------------------------------ */
.redes { display: flex; gap: var(--e15); margin-top: var(--e3); }
.redes a {
  width: 42px; height: 42px; padding: 0; display: grid; place-items: center;
  border-radius: var(--radio-pequeno);
  background: var(--blanco); border: 1px solid var(--linea);
  transition: background-color .25s ease, transform .25s ease, border-color .25s ease;
}
.redes a:hover { background: var(--azul-vapor); transform: translateY(-2px); border-color: rgba(37, 99, 235, .3); }
.redes svg { width: 19px; height: 19px; fill: var(--tinta-suave); }
.redes a:hover svg { fill: var(--azul); }

/* Estados sobre elementos que se pueden pulsar ------------------------------ */
.captura, .marco-cristal { transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease; }
.marco-cristal:hover { border-color: var(--azul-borde); box-shadow: var(--sombra-azul-alta); }
details:hover { border-color: rgba(37, 99, 235, .3); }
.pie a:hover { transform: translateX(2px); }
.pie a { transition: color .25s ease, transform .25s ease; }

/* Filas numeradas: alternativa a la retícula de tres cajas iguales ---------- */
.filas { border-top: 1px solid var(--linea); }
.fila {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--e3);
  padding: var(--e4) 0; border-bottom: 1px solid var(--linea);
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.fila:hover { transform: translateX(6px); }
.fila__num { font-family: var(--titulo); font-weight: var(--peso-fuerte); font-size: var(--t-md); color: var(--azul); padding-top: 4px; }
.fila h3 { margin-bottom: 8px; }
.fila p { margin: 0; color: var(--tinta-suave); }
@media (max-width: 620px) { .fila { grid-template-columns: 40px 1fr; gap: var(--e2); } }

/* Más azul, a juego con el botón principal ---------------------------------- */
/* Un halo azul dentro de las secciones oscuras: sin él, el negro se come el
   acento y la web pierde el hilo de color. */

/* Los enlaces del texto corrido se ven, y en azul */
main p a:not(.boton):not(.enlace-flecha) {
  color: var(--azul); text-decoration: none;
  border-bottom: 1px solid rgba(37, 99, 235, .35);
  transition: border-color .25s ease;
}
main p a:not(.boton):not(.enlace-flecha):hover { border-bottom-color: var(--azul); }

/* La lista marcada, con su punto azul más presente */
.listado-marcado li::before { box-shadow: var(--filo-azul); }

/* Preguntas frecuentes: el borde se tiñe al abrirlas */
details[open] { border-color: rgba(37, 99, 235, .35); box-shadow: var(--sombra-azul-alta); }

/* La barra del móvil, con el mismo azul del botón */
.barra-cta { border-color: rgba(37, 99, 235, .25); }

/* Un filete azul debajo de la cabecera cuando se baja: separa sin ruido */
.cabecera { border-bottom-color: rgba(37, 99, 235, .14); }

/* Barra de la calculadora ---------------------------------------------------
   La pista se ve fina (6 px) porque así queda elegante, pero el control mide
   44 px de alto y es transparente: si no, hay que acertar en una línea de seis
   píxeles y arrastrar es casi imposible, sobre todo con el dedo. Le pasó al
   dueño el 20/09/2026 con el selector de naves. */
input[type='range'] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; min-height: 44px;
  background: transparent; border: none; padding: 0; margin: 0;
  cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--azul) 0 var(--relleno, 20%), var(--linea) var(--relleno, 20%) 100%);
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%; margin-top: -10px;
  background: var(--blanco); border: 1px solid rgba(37, 99, 235, .45);
  box-shadow: var(--sombra-2);
  transition: border-color .2s ease, box-shadow .2s ease;
}
input[type='range']:hover::-webkit-slider-thumb,
input[type='range']:focus-visible::-webkit-slider-thumb {
  border-color: var(--azul); box-shadow: var(--anillo-foco);
}
input[type='range']::-moz-range-track {
  height: 6px; border-radius: 999px; background: var(--linea);
}
input[type='range']::-moz-range-progress {
  height: 6px; border-radius: 999px; background: var(--azul);
}
input[type='range']::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--blanco); border: 1px solid rgba(37, 99, 235, .45);
}

/* Cuadrícula de dos columnas para el bloque del problema: tarjetas normales,
   sin números grandes ni filetes de cartel. */
.filas { display: grid; gap: var(--e3); }
@media (min-width: 760px) { .filas { grid-template-columns: repeat(3, 1fr); } }
.fila {
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: var(--e3); box-shadow: var(--sombra-1);
}
.fila__num {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 12px;
  border-radius: var(--radio-pequeno); background: var(--azul-vapor); color: var(--azul-texto);
  font-family: var(--titulo); font-weight: var(--peso-fuerte); font-size: var(--t-xs);
}
.fila p { margin: 0; color: var(--tinta-suave); font-size: var(--t-base); }

/* =========================================================================
   Acabado al modo de las plantillas SaaS de referencia
   ========================================================================= */

/* Sombra en capas: muchas capas muy tenues en vez de una sola dura. Es lo que
   hace que una tarjeta parezca «levantada» sin ensuciar el blanco. */
.tarjeta, .fila, details, .marco-cristal {
  box-shadow: var(--sombra-2);
}
.tarjeta:hover, .fila:hover {
  transform: translateY(-2px);
  border-color: var(--azul-borde);
  box-shadow: var(--sombra-azul-alta);
}
.tarjeta, .fila { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease; }
.tarjeta, .fila, details { border-radius: var(--radio); }

/* Icono dentro de un cuadrado azul claro, encabezando la tarjeta. */
.icono-chip {
  width: 44px; height: 44px; border-radius: var(--radio-pequeno); margin-bottom: 16px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #eef5ff, #e2edff);
  border: 1px solid var(--azul-borde);
  box-shadow: inset 0 1px 0 #ffffff;
}
.icono-chip svg { width: 22px; height: 22px; stroke: var(--azul); fill: none; stroke-width: 1.6; }

/* Cabecera de sección centrada, como en las plantillas. */
.centrada { text-align: center; display: flex; flex-direction: column; align-items: center; }
.centrada .entradilla, .centrada p { margin-inline: auto; }
.centrada .kicker { display: inline-block; }

/* Resplandor detrás de la figura de la portada. */
.portada__figura { position: relative; }
.portada__figura::before {
  content: ''; position: absolute; z-index: -1; inset: 8% -6% -10% -6%;
  background: radial-gradient(60% 60% at 50% 40%, rgba(31, 111, 255, .22), transparent 70%);
  filter: blur(40px);
}

/* Cifras dentro de tarjeta, no sueltas sobre el fondo. */
.cifras { display: grid; gap: var(--e3); }
@media (min-width: 760px) { .cifras { grid-template-columns: repeat(3, 1fr); } }
.cifra {
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid var(--linea); border-radius: 18px; padding: var(--e3);
  box-shadow: var(--sombra-2);
}
.cifra .dato-grande { color: var(--azul); }

/* Etiqueta pequeña con fondo, solo en cabeceras centradas de sección. */
.centrada .kicker {
  background: var(--azul-vapor); border: 1px solid var(--azul-borde);
  border-radius: 999px; padding: var(--e1) var(--e2); font-size: var(--t-xs);
}

/* Si la ventana se ensancha con el menú abierto, el menú desaparece: antes se
   quedaba una capa opaca sobre toda la página, con su botón de cerrar ya
   escondido, y solo se salía con la tecla Escape. */
@media (min-width: 1000px) {
  .menu-movil[data-abierto='si'] { display: none; }
}

/* Aviso de error para quien envía el formulario sin JavaScript: el servidor
   devuelve a /contacto.html#error-envio y el ancla lo hace visible. Con
   JavaScript no aparece nunca: los errores se marcan campo a campo. */
.error-envio { display: none; margin-bottom: var(--e2); }
.error-envio:target { display: block; }

/* La barra del móvil miraba la posición del pie en cada píxel de scroll, lo que
   obliga al navegador a recalcular la página sin parar. Ahora se apunta el
   evento y se mira una vez por fotograma. */

/* Pasos que se fijan y se apilan --------------------------------------------
   Cada tarjeta se queda pegada bajo la cabecera mientras la siguiente sube por
   debajo; las de atrás se encogen un punto para que se vea la pila. La línea de
   la izquierda se llena con el avance de la sección (`--avance`, que pone el JS
   una vez por fotograma). Sin JavaScript la línea sale entera y el apilado
   funciona igual: es CSS puro. */
.pasos {
  list-style: none; margin: var(--e5) 0 0; padding: 0 0 0 56px;
  position: relative;
}
.pasos::before {
  content: ''; position: absolute; left: 21px; top: 6px; bottom: 25vh;
  width: 2px; background: var(--linea); border-radius: 2px;
}
.pasos::after {
  content: ''; position: absolute; left: 21px; top: 6px;
  width: 2px; border-radius: 2px; background: var(--azul);
  height: calc(var(--avance, 1) * (100% - 25vh));
  transition: height .15s linear;
}
.paso {
  position: relative; padding-bottom: var(--e4);
  /* Cada paso ocupa más de media pantalla: si no, la tarjeta se queda fija un
     instante y el apilado no se llega a ver. */
  min-height: 46vh;
}
.paso:last-child { padding-bottom: 0; min-height: auto; }
.paso__marca {
  position: absolute; left: -56px; top: 18px; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--blanco); border: 2px solid var(--linea);
  font-family: var(--titulo); font-weight: var(--peso-fuerte); font-size: var(--t-sm); color: var(--tinta-tenue);
  transition: border-color .4s ease, color .4s ease, background-color .4s ease;
  z-index: 2;
}
.paso.activo .paso__marca {
  border-color: var(--azul); color: var(--azul); background: var(--azul-vapor);
}
.paso__tarjeta {
  position: sticky; top: 96px;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: var(--e4);
  box-shadow: var(--sombra-2);
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.paso.detras .paso__tarjeta {
  transform: scale(.97); box-shadow: var(--sombra-1);
}
.paso.activo .paso__tarjeta { border-color: var(--azul-borde); }
.paso__pie {
  font-size: var(--t-xs); font-weight: var(--peso-fuerte); color: var(--azul-texto); margin: 0 0 var(--e1);
}
.paso h3 { margin-bottom: var(--e15); }
.paso p { margin: 0; color: var(--tinta-suave); }

/* Cada tarjeta se fija un poco más abajo que la anterior: así se ve el canto de
   las de atrás, que es lo que hace que parezca una pila y no un salto. */
.paso:nth-child(1) .paso__tarjeta { top: 96px; }
.paso:nth-child(2) .paso__tarjeta { top: 108px; }
.paso:nth-child(3) .paso__tarjeta { top: 120px; }

@media (max-width: 620px) {
  .pasos { padding-left: 44px; }
  .pasos::before, .pasos::after { left: 15px; }
  .paso__marca { left: -44px; width: 34px; height: 34px; font-size: var(--t-xs); }
  .paso__tarjeta { padding: var(--e3); }
}
@media (prefers-reduced-motion: reduce) {
  .paso__tarjeta { position: static; transform: none !important; }
  .pasos::after { height: 100%; }
}

/* Destinos de dedo y equilibrio de líneas ----------------------------------- */
details summary { padding-block: var(--e15); }
.entradilla, .paso p, .tarjeta p { text-wrap: pretty; }
/* En bloques centrados, los párrafos también se centran: con `max-width` a secas
   quedaban pegados a la izquierda del contenedor y el texto bailaba. */
.centrada p, .centrada .entradilla { margin-inline: auto; }

/* Nota al margen de una seccion ---------------------------------------------
   Para las advertencias honestas («esto NO lo hace»): se tienen que leer, pero
   no deben pesar como el texto principal. Filo azul a la izquierda y fondo de
   vapor, que es el mismo par que ya usan el numero de paso y el chip. */
.nota {
  background: var(--azul-vapor);
  border-left: 3px solid var(--azul);
  border-radius: 0 var(--radio-pequeno) var(--radio-pequeno) 0;
  padding: var(--e2) var(--e2);
  margin-top: var(--e3);
  font-size: var(--t-base);
  color: var(--tinta-suave);
}

/* Entrada de la portada y movimiento al bajar ================================
   Tres cosas, y ninguna decorativa porque sí:

   1. La portada entra **una vez, al cargar**, en cascada de arriba abajo: el
      ojo sigue el orden en que hay que leerla (rótulo, titular, explicación,
      botones) en vez de encontrarse la pantalla entera de golpe.
   2. El marco del dibujo se mueve un poco más despacio que la página al bajar
      («parallax»). Da profundidad sin que nada se mueva solo.
   3. Las capturas suben y crecen un punto al aparecer, para que se lean como
      algo que llega y no como un hueco que se rellena.

   Todo con `transform` y nada con `opacity` al hacer scroll: lo que aparece
   apareciendo gasta batería y marea, y el texto que se desvanece no se lee.
   Con «reducir movimiento» activado, todo esto queda en nada. */

.portada { position: relative; overflow: hidden; }

/* Un halo azul muy tenue detrás del dibujo. No es un foco que sigue al cursor:
   está quieto y solo respira, muy despacio, para que el blanco no quede muerto. */
.portada::before {
  content: '';
  position: absolute; z-index: 0; pointer-events: none;
  top: -18%; right: -12%; width: min(760px, 78vw); aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%,
              rgba(31, 111, 255, .13), rgba(31, 111, 255, .05) 42%, transparent 68%);
  animation: respira 14s ease-in-out infinite;
}
.portada > * { position: relative; z-index: 1; }

@keyframes respira {
  0%, 100% { transform: scale(1) translate3d(0, 0, 0); }
  50%      { transform: scale(1.08) translate3d(-1.5%, 2%, 0); }
}

/* -- La cascada de la portada ---------------------------------------------- */
/* Más recorrido que una sección cualquiera (24 px frente a 12) porque es lo
   primero que se ve y no compite con nada. */
.portada .entra { transform: translate3d(0, 24px, 0); }
.portada__figura.entra { transform: translate3d(0, 30px, 0) scale(.975); }
.portada__figura.entra.dentro { transform: none; }
.portada .entra, .portada__figura.entra {
  transition: transform .85s cubic-bezier(.22, .61, .36, 1);
}

/* -- Profundidad al bajar --------------------------------------------------- */
/* `--desliz` lo pone el JS una vez por fotograma; sin JS vale 0 y no pasa nada. */
.portada__figura .marco-cristal {
  transform: translate3d(0, calc(var(--desliz, 0) * 1px), 0);
  will-change: transform;
}

/* -- Capturas que llegan ---------------------------------------------------- */
/* El que se anima es el envoltorio con `data-anima`, no la imagen: es el que
   recibe `.entra`. `:has()` evita tener que marcar a mano cada bloque. */
.entra:has(> .marco-cristal), .entra:has(> .captura) {
  transform: translate3d(0, 26px, 0) scale(.985);
  transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}
.entra.dentro:has(> .marco-cristal), .entra.dentro:has(> .captura) { transform: none; }

/* -- El rótulo de sección se subraya al entrar ------------------------------ */
/* Un trazo azul que se dibuja de izquierda a derecha: marca dónde empieza cada
   bloque, que es justo lo que se pedía al querer las secciones más marcadas. */
.kicker { position: relative; padding-bottom: var(--e15); }
.kicker::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 34px; height: 2px; border-radius: 2px; background: var(--azul);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1) .15s;
}
.kicker.dentro::after, .dentro .kicker::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .portada::before { animation: none; }
  .portada__figura .marco-cristal { transform: none !important; }
  .kicker::after { transform: scaleX(1) !important; transition: none !important; }
  .portada .entra, .portada__figura.entra,
  .entra:has(> .marco-cristal), .entra:has(> .captura) {
    transform: none !important; transition: none !important;
  }
}

/* Elegir entre dos, en la calculadora --------------------------------------
   Dos tarjetas que se pulsan, no dos puntitos: en el móvil un radio de toda la
   vida es un objetivo de 13 px y se falla. Aquí el objetivo es la tarjeta
   entera, y la elegida se marca en azul, que es como se marca todo lo demás. */
.eleccion { border: 0; padding: 0; margin: 0 0 var(--e3); }
.eleccion legend {
  padding: 0; margin-bottom: var(--e15);
  font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--tinta-suave);
}
.eleccion__opciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e15); }
@media (max-width: 420px) { .eleccion__opciones { grid-template-columns: 1fr; } }

.opcion {
  display: flex; align-items: center; gap: var(--e15);
  min-height: 52px; padding: 0 var(--e2); cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid var(--linea); border-radius: var(--radio-pequeno);
  font-size: var(--t-base); color: var(--tinta-suave);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.opcion:hover { border-color: var(--azul-borde); }
.opcion input { width: 18px; height: 18px; accent-color: var(--azul); margin: 0; flex: none; }
.opcion:has(input:checked) {
  border-color: var(--azul); background: var(--azul-vapor);
  color: var(--tinta); font-weight: var(--peso-medio);
  box-shadow: var(--filo-azul);
}
.opcion:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }

/* La etiqueta con forma de píldora ya se delimita sola: el trazo de debajo,
   dentro de ella, se leía como un subrayado suelto. */
.centrada .kicker::after { content: none; }

/* Sección negra: la puntuación de la página ================================
   El fondo de la web es blanco y se queda blanco. Pero una página entera del
   mismo color se lee plana, y lo plano se lee barato. Una sola sección en negro
   hace de punto y aparte: obliga a parar, y el argumento que vaya dentro se lee
   como el importante, que es justo lo que se quiere del que dice por qué
   creernos.

   Una sola, y con contraste de verdad (blanco sobre casi negro, 19:1). No es
   «modo oscuro»: es un bloque negro dentro de una web blanca, que es otra cosa.
   El azul aquí sube a `--azul-claro`, porque el azul de los botones sobre negro
   se apaga y deja de leerse. */
.seccion--tinta {
  background:
    radial-gradient(800px 420px at 78% 8%, rgba(31, 111, 255, .22), transparent 62%),
    radial-gradient(620px 380px at 12% 96%, rgba(31, 111, 255, .12), transparent 60%),
    #07080c;
  color: #ffffff;
  border-bottom: 0;
  /* La franja de 1 px de arriba y abajo hace que el bloque parezca encajado en
     la página y no pegado encima. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(255, 255, 255, .08);
}
.seccion--tinta h1, .seccion--tinta h2, .seccion--tinta h3 { color: #ffffff; }
.seccion--tinta p, .seccion--tinta li { color: rgba(255, 255, 255, .78); }
.seccion--tinta .entradilla { color: rgba(255, 255, 255, .84); }
.seccion--tinta strong { color: #ffffff; }
.seccion--tinta .kicker { color: var(--azul-claro); }
.seccion--tinta .kicker::after { background: var(--azul-claro); }
.seccion--tinta .dato-grande { color: #ffffff; }
.seccion--tinta .dato-pie { color: rgba(255, 255, 255, .6); }
.seccion--tinta .enlace-flecha { color: var(--azul-claro); }
.seccion--tinta .listado-marcado li::before { color: var(--azul-claro); }
.seccion--tinta .boton--linea {
  background: rgba(255, 255, 255, .07); color: #ffffff;
  border-color: rgba(255, 255, 255, .28); box-shadow: none;
}
.seccion--tinta .boton--linea:hover {
  background: rgba(255, 255, 255, .14); border-color: var(--azul-claro); color: #ffffff;
}
/* La píldora centrada, en negativo. */
.seccion--tinta .centrada .kicker {
  background: rgba(31, 111, 255, .16); border-color: rgba(106, 168, 255, .4);
}

/* Cifras dentro del bloque negro: sin tarjeta blanca, que ahí grita. */
.seccion--tinta .cifra {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.seccion--tinta .cifra .dato-grande { color: var(--azul-claro); }

/* La franja de hechos comprobables --------------------------------------------
   Lo que pregunta quien tiene que justificar la compra: dónde están los datos,
   cuánto se guardan, a qué me ato. Van juntos y en una línea, porque sueltos por
   la página no los encuentra nadie, y juntos se leen como una ficha técnica. */
.hechos {
  display: grid; gap: 1px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radio); overflow: hidden;
  margin-top: var(--e5);
}
@media (min-width: 760px) { .hechos { grid-template-columns: repeat(4, 1fr); } }
.hecho { background: #07080c; padding: var(--e3); }
.hecho strong {
  display: block; font-family: var(--titulo); font-size: var(--t-md);
  color: #ffffff; margin-bottom: var(--e1); letter-spacing: -.015em;
}
.hecho span { font-size: var(--t-sm); color: rgba(255, 255, 255, .62); line-height: 1.5; }

/* La portada reparte al revés que el resto: con el titular grande, el texto
   necesita la columna ancha o sale en cuatro líneas, que ya no se lee de un
   vistazo. El dibujo aguanta bien en la estrecha. */
@media (min-width: 1000px) {
  .portada .rejilla--2-7 { grid-template-columns: 1.15fr 1fr; gap: var(--e5); }
}

/* Cierre en azul ============================================================
   La última sección de cada página es la que pide que escriban. En blanco sobre
   blanco se lee como un párrafo más y se pasa de largo. En el azul de la marca
   se lee como el final, y el botón blanco encima es lo más contrastado de toda
   la página, que es exactamente donde debe estar.

   El azul es el hondo, no el claro: el claro con texto blanco encima se queda
   en 3,2:1 y no se puede leer. */
.seccion--marino {
  background:
    radial-gradient(760px 400px at 84% 0%, rgba(255, 255, 255, .17), transparent 60%),
    linear-gradient(160deg, #1a5fe0, #0a3fae);
  color: #ffffff;
  border-bottom: 0;
}
.seccion--marino h1, .seccion--marino h2, .seccion--marino h3 { color: #ffffff; }
.seccion--marino p, .seccion--marino li { color: rgba(255, 255, 255, .82); }
.seccion--marino .entradilla { color: rgba(255, 255, 255, .88); }
.seccion--marino strong { color: #ffffff; }
.seccion--marino .kicker { color: #ffffff; }
.seccion--marino .kicker::after { background: rgba(255, 255, 255, .75); }
.seccion--marino .centrada .kicker {
  background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .34); color: #ffffff;
}
/* .72 sobre el azul se queda en 3,7:1 y no llega al minimo legible para texto
   pequeno; medido el 20/09/2026. */
.seccion--marino .dato-pie { color: rgba(255, 255, 255, .9); }
.seccion--marino .enlace-flecha { color: #ffffff; }
/* Botón blanco sobre azul: el punto de más contraste de la página. */
.seccion--marino .boton {
  background: #ffffff; color: var(--azul-hondo);
  border-color: #ffffff; text-shadow: none;
  box-shadow: var(--sombra-4);
}
.seccion--marino .boton:hover { background: #f2f7ff; color: #06308c; }
.seccion--marino .boton--linea {
  background: rgba(255, 255, 255, .1); color: #ffffff;
  border-color: rgba(255, 255, 255, .45); box-shadow: none;
}
.seccion--marino .boton--linea:hover { background: rgba(255, 255, 255, .2); color: #ffffff; }
.seccion--marino .tarjeta {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2);
  box-shadow: none; color: #ffffff;
}

/* El rótulo se ajusta a su texto, no al ancho del bloque: si no, en las
   secciones centradas el trazo azul se quedaba pegado al borde izquierdo,
   a medio metro del texto que subraya. */
.kicker { display: inline-block; }

/* Cabecera que reacciona al separarse de arriba ==============================
   Arriba del todo va ligera y sin sombra, como parte de la página. En cuanto se
   empieza a bajar se compacta, se vuelve más opaca y proyecta una sombra fina:
   deja de ser parte de la página y pasa a estar por encima de ella. Es un
   detalle de nada que se nota en cada scroll, y de los que separan una web
   cuidada de una que solo está bien. */
.cabecera { transition: box-shadow .3s ease, background-color .3s ease, border-color .3s ease; }
.cabecera__fila { transition: min-height .3s cubic-bezier(.22, .61, .36, 1); }
.cabecera--posada {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: var(--linea);
  box-shadow: 0 1px 0 rgba(10, 10, 12, .04), 0 10px 24px -22px rgba(10, 10, 12, .4);
}
.cabecera--posada .cabecera__fila { min-height: 60px; }
@media (prefers-reduced-motion: reduce) {
  .cabecera, .cabecera__fila { transition: none; }
}

/* Destinos de pulsación: 44 px, también los que parecen solo texto ==========
   La auditoría midió 40 enlaces de 39 px de alto y 20 de 33. En el móvil eso es
   fallar el toque, y fallar el toque en la navegación es de lo que peor sabe.
   El alto se consigue con `padding`, no con `height`, para que el texto siga
   centrado y no se muevan las cajas. */
.cabecera__nav a, .cabecera__entrar {
  display: inline-flex; align-items: center; min-height: 44px;
}
.pie a { min-height: 44px; display: flex; align-items: center; }
.pie__legal a { min-height: 44px; display: inline-flex; align-items: center; }
.marca { min-height: 44px; }