@charset "UTF-8";
/* ============================================================
   JCA Finance Group
   Sistema: bloques tonales planos (hueso / navy macizo), sin bordes
   ni sombras. El contraste de fondo hace todo el trabajo.
   Paleta de marca: #040020 navy · #E4E2DD hueso (color del logo)
   ============================================================ */

/* Plus Jakarta Sans variable, autoalojada. Subsets latinos. */
@font-face{font-family:'Jakarta';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/jakarta-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/jakarta-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Archivo — grotesca institucional, solo titulares. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/archivo-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/archivo-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/archivo-latin-ext-500.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/archivo-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


/* ---------- 1. Tokens ---------- */
:root {
  /* Marca */
  --ink:      #040020;
  --ink-2:    #0C0838;          /* navy elevado: hover de bloques macizos */
  --bone:     #E4E2DD;

  /* Superficies claras */
  --paper:    #FFFFFF;
  --mist:     #F3F2EE;          /* gris cálido derivado del hueso: tarjetas */
  --mist-2:   #EAE8E2;

  /* Texto sobre claro */
  --text:     #040020;
  /* Medido: con alfa .60 el texto secundario daba 4,79 sobre hueso. Pasa AA (4,5)
     y Google no lo marca, pero aprobar raspado no es legible: AA es el suelo.
     Con .74 y .70 la PEOR combinación del sistema (texto pequeño sobre hueso)
     queda por encima de 7, que es el nivel AAA. */
  --text-2:   rgba(4, 0, 32, .74);
  --text-3:   rgba(4, 0, 32, .70);

  /* Texto sobre navy */
  --on-ink:   #F4F3F0;
  --on-ink-2: rgba(228, 226, 221, .80);
  /* .58 daba 5,35 sobre --ink-2: el caso del «texto gris sobre azul marino». */
  --on-ink-3: rgba(228, 226, 221, .70);

  /* Filetes — se usan con cuentagotas */
  --rule:     rgba(4, 0, 32, .12);
  --rule-ink: rgba(228, 226, 221, .18);

  /* Radios */
  --r-bloque: 20px;
  --r-foto:   12px;
  --r-grande: 28px;
  --r-pill:   999px;

  /* Medidas */
  --container: 1500px;
  --gutter: clamp(18px, 4vw, 40px);
  --nav-h: 68px;
  --seccion-y: clamp(64px, 3.4rem + 4.4vw, 118px);
  --hueco: clamp(10px, .9vw, 16px);   /* separación entre celdas: apretada, como la referencia */

  /* Sombras: solo al pasar el ratón. En reposo la pieza es plana. */
  --sombra-hov:     0 2px 6px rgba(4, 0, 32, .04), 0 22px 46px -26px rgba(4, 0, 32, .26);
  --sombra-hov-ink: 0 2px 6px rgba(4, 0, 32, .16), 0 24px 50px -24px rgba(4, 0, 32, .55);

  /* Movimiento */
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 2. 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;
  background: var(--paper);
  color: var(--text);
  font-family: 'Jakarta', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; }
/* Los contenedores enfocables por ancla no deben dibujar anillo al recibir el foco. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
::selection { background: var(--ink); color: var(--bone); }

/* ---------- 3. Tipografía ----------
   La clave del registro premium: los titulares van en peso 400, no en bold. */
.display {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(2.55rem, 1.25rem + 5.3vw, 5.6rem);
  font-weight: 400;
  line-height: 1.01;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.h2 {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(2rem, 1.26rem + 2.95vw, 3.5rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.028em;
  text-wrap: balance;
}

.h3 {
  text-wrap: balance;
  font-size: clamp(1.1rem, 1.02rem + .36vw, 1.35rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.022em;
}

.lead {
  font-size: clamp(1rem, .95rem + .32vw, 1.19rem);
  line-height: 1.55;
  letter-spacing: -.016em;
  color: var(--text-2);
  text-wrap: pretty;
}

.eyebrow {
  font-size: .715rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-3);
}

.on-ink { color: var(--on-ink); }
.on-ink .lead { color: var(--on-ink-2); }
.on-ink .eyebrow { color: var(--on-ink-3); }

/* Marca de sección: cuando no hay un antetítulo legítimo (una palabra que ya
   esté en el H2 de esa sección), se usa el isotipo en vez de inventar texto. */
.marca-seccion { width: 15px; height: 23px; color: var(--text-3); }
.on-ink .marca-seccion, .sobre-foto .marca-seccion { color: var(--on-ink-3); }
/* Sobre fotografía no sirven los tokens de navy macizo: el velo deja el fondo
   entre (14,11,39) y (53,51,67) según la zona, y --on-ink-3 (hueso al 58%) se
   queda corto. Blanco con alfa, que es lo que ya hacen .cierre .h2 y .lead. */
.sobre-foto .eyebrow { color: rgba(255, 255, 255, .84); }
.sobre-foto .lead { color: rgba(255, 255, 255, .86); }

/* ---------- 4. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Cada sección declara su fondo y, con él, la superficie de sus tarjetas:
   sobre papel son gris cálido; sobre gris cálido, blancas. */
.seccion {
  --sup:   var(--mist);
  --sup-2: var(--mist-2);
  padding-block: var(--seccion-y);
  background: var(--paper);
}
.seccion--mist { --sup: var(--paper); --sup-2: #FAF9F5; background: var(--mist); }
.seccion--ink  { background: var(--ink); color: var(--on-ink); }

/* Paneles apilados: cada sección termina en curva y la siguiente, tirada hacia
   arriba, rellena las esquinas con su propio fondo. Sin el escalón de z-index la
   posterior taparía la curva de la anterior, porque va después en el documento. */
main > section {
  position: relative;
  border-bottom-left-radius: var(--r-grande);
  border-bottom-right-radius: var(--r-grande);
}
main > section + section {
  margin-top: calc(var(--r-grande) * -1);
  padding-top: calc(var(--seccion-y) + var(--r-grande));
}
main > section:nth-child(1) { z-index: 9; }
main > section:nth-child(2) { z-index: 8; }
main > section:nth-child(3) { z-index: 7; }
main > section:nth-child(4) { z-index: 6; }
main > section:nth-child(5) { z-index: 5; }
main > section:nth-child(6) { z-index: 4; }
main > section:nth-child(7) { z-index: 3; }
main > section:nth-child(8) { z-index: 2; }
main > section:nth-child(9) { z-index: 1; }

.cab { display: grid; gap: 20px; }
.cab .h2 { margin-top: 14px; }
@media (min-width: 900px) {
  .cab--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 24px clamp(40px, 6vw, 110px);
    align-items: end;
  }
  .cab--split .lead { padding-bottom: 7px; }
}
.cab--centro { max-width: 44rem; margin-inline: auto; text-align: center; }

.skip {
  position: absolute; left: 12px; top: 12px; z-index: 200;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--bone);
  font-size: .85rem; font-weight: 500;
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip:focus-visible { transform: none; }

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

/* ---------- 5. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  /* Versalitas y más cuerpo: a 14,4 px en caja baja los botones no pesaban lo
     suficiente frente a titulares de 56 px. El de la navbar lleva su propia
     regla más abajo y no se toca. */
  min-height: 52px; padding: 0 30px;
  text-transform: uppercase; letter-spacing: .085em;
  padding-right: calc(30px - .085em);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  /* El color sale de tokens que HEREDA de la superficie, no de una lista de
     selectores. Así, para que un componente oscuro nuevo invierta sus botones,
     basta con que declare los tokens de abajo; no hay que acordarse de añadirlo
     a cinco grupos de selectores. Ese olvido ya ha costado tres veces un botón
     navy sobre navy: .aviso, .cara y .sim__sticky. */
  background: var(--btn-fondo, var(--ink)); color: var(--btn-texto, var(--bone));
  font-size: .82rem; font-weight: 600; line-height: 1.2;
  white-space: nowrap; cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { background: var(--btn-fondo-hov, var(--ink-2)); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn .ico { width: 15px; height: 15px; flex: none; transition: transform .35s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }

.btn--linea {
  background: transparent; color: var(--btn-linea-texto, var(--text));
  border-color: var(--btn-linea-borde, var(--rule));
}
.btn--linea:hover {
  background: var(--btn-linea-hov, var(--mist));
  border-color: var(--btn-linea-borde-hov, rgba(4, 0, 32, .26));
}

/* UNA sola declaración de la inversión. Cualquier superficie oscura la adopta
   con solo heredar estos tokens; no se tocan los selectores de .btn. */
.on-ink, .sobre-foto, .bloque--ink, .sim__sticky, .cara {
  --btn-fondo: var(--bone);
  --btn-fondo-hov: #fff;
  --btn-texto: var(--ink);
  --btn-linea-texto: var(--on-ink);
  --btn-linea-borde: rgba(228, 226, 221, .34);
  --btn-linea-hov: rgba(228, 226, 221, .12);
  --btn-linea-borde-hov: rgba(228, 226, 221, .55);
}
.on-ink .btn--linea:hover, .sobre-foto .btn--linea:hover, .bloque--ink .btn--linea:hover {
  background: rgba(228, 226, 221, .12); border-color: rgba(228, 226, 221, .6);
}

.enlace {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: .92rem;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.enlace .ico { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.enlace:hover .ico { transform: translateX(4px); }

/* ---------- 6. Navegación ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--nav-h);
  /* Transparente arriba del todo, no blanca. Antes se pintaba de --paper, y en
     una página cuya portada es hueso eso dibujaba una banda blanca de 68 px
     cruzando el arranque. Transparente, la superficie de debajo pasa entera y
     la barra solo se pinta cuando despega (.fija), que es cuando hace falta.
     En la home no cambia nada: ahí lo que hay detrás ya es blanco. */
  background: transparent;
  /* El filete va como sombra interior y no como borde: con box-sizing:border-box
     un borde de 1px dejaba la caja interior en 67px y TODO centraba en y=33,5
     en vez de 34. Medio píxel en toda la barra. */
  box-shadow: inset 0 -1px 0 transparent;
  transition: box-shadow .4s var(--ease), background-color .4s var(--ease);
}
.nav.fija {
  box-shadow: inset 0 -1px 0 var(--rule);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

/* Tres columnas con los laterales de IGUAL ancho: así el menú queda centrado de
   verdad en el contenedor, pase lo que pase con el ancho del logo o del botón.
   Antes era flex con `margin-inline:auto` en el menú y `margin-left:auto` en la
   derecha: tres márgenes automáticos repartiéndose el hueco a partes iguales, que
   dejaban el menú 100 px descentrado. Por debajo de 1040 px el menú no existe, así
   que ahí la rejilla estorba y se vuelve a flex. */
.nav__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
/* 1100 y no 1040: tiene que ser EL MISMO punto en el que aparece el menú (abajo).
   Con la rejilla entrando antes, entre 1040 y 1099 quedaban dos celdas de tres y el
   burger se iba al centro de la barra, a 460 px del borde. */
@media (min-width: 1100px) {
  .nav__in { display: grid; grid-template-columns: 1fr auto 1fr; }
  /* Sin esto la celda estira el <a> del logo a todo el ancho de la columna (373 px a
     1440): el área clicable se comía medio hueco y al pulsar en vacío navegabas a inicio. */
  .marca { justify-self: start; }
  .nav__menu { justify-self: center; }
  .nav__dcha { justify-self: end; }
}

.marca { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--ink); }
.marca__m { width: 22px; height: 34px; flex: none; }
.marca__t { display: grid; line-height: 1; }
.marca__n { font-size: 1rem; font-weight: 700; letter-spacing: -.015em; }
.marca__s {
  font-size: .615rem; font-weight: 400; letter-spacing: .005em;
  text-transform: none; color: inherit; opacity: .82; margin-top: 3px;
}

.nav__menu { display: none; align-items: center; gap: 2px; }
.nav__a {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 15px; border: 0; border-radius: var(--r-pill);
  /* El `letter-spacing` también se aplica DESPUÉS de la última letra, así que el
     texto en versalitas se ve pegado a la derecha dentro de su pastilla. Se
     compensa devolviendo ese espacio al padding derecho. */
  padding-right: calc(15px - .085em);
  background: transparent; color: var(--text-2);
  font-size: .805rem; font-weight: 600; cursor: pointer;
  text-transform: uppercase; letter-spacing: .085em;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.nav__a:hover, .nav__a[aria-expanded="true"] { color: var(--text); background: var(--mist); }
/* Página actual: hasta ahora no había ningún estado activo, así que en una página
   interior los cuatro enlaces se veían igual y no se sabía dónde estabas. */
/* `[aria-current]` a secas, sin exigir el valor "page": el botón que abre el
   panel de tipos lleva "true" porque es la sección actual, no la página. Las 9
   páginas de tipo y el catálogo quedaban sin marcar en la barra. */
.nav__a[aria-current] { color: var(--text); }
.nav__a[aria-current]::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 6px;
  height: 1.5px; border-radius: 2px; background: var(--ink); opacity: .55;
}
/* El botón de tipos lleva el chevrón dentro de su caja, así que el filete tiene
   que terminar antes para subrayar el texto y no también la flechita. */
#mega-btn[aria-current]::after { right: calc(15px + 12px + 7px); }
.nav__a { position: relative; }
.pie__nav a[aria-current="page"] { color: var(--on-ink); }
.nav__a .ico { width: 12px; height: 12px; opacity: .6; transition: transform .35s var(--ease); }
.nav__a[aria-expanded="true"] .ico { transform: rotate(180deg); }

.nav__dcha { display: flex; align-items: center; gap: 10px; }
.nav .btn--nav {
  display: none; align-items: center; justify-content: center;
  min-height: 0; height: 40px; padding: 0 23px; padding-right: calc(23px - .085em);
  font-size: .765rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .085em;
}

/* Panel de tipos (escritorio) */
.mega {
  position: absolute; top: calc(var(--nav-h) - 4px); left: 50%;
  width: min(1120px, calc(100vw - var(--gutter) * 2));
  padding: 14px; border-radius: var(--r-grande);
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 24px 50px -24px rgba(4, 0, 32, .26);
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px);
  transition: opacity .28s var(--ease), transform .32s var(--ease), visibility .28s;
}
.mega.abierto { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* 5 columnas: con 9 tipos salen dos filas (5+4) en vez de tres. */
.mega__g { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
/* Cada tipo es una tarjeta con su foto, igual que en la sección */
.mega__i {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-radius: 13px; aspect-ratio: 4 / 3; background: var(--ink);
}
.mega__i img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease);
}
.mega__i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4, 0, 32, .94) 0%, rgba(4, 0, 32, .66) 38%,
                              rgba(4, 0, 32, .22) 74%, rgba(4, 0, 32, .14) 100%);
  transition: opacity .4s var(--ease);
}
.mega__i span {
  position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px;
  color: #fff; font-size: 1.06rem; font-weight: 500; line-height: 1.18; letter-spacing: -.026em;
  text-wrap: balance;
}
.mega__i:hover img { transform: scale(1.06); }
.mega__i:hover::after { opacity: .78; }
/* La décima celda. Nueve tipos en cinco columnas dejaban un hueco justo al
   final de la segunda fila y, debajo, una franja entera con un filete y un solo
   enlace: dos elementos de interfaz para decir una frase. La tarjeta ocupa el
   hueco y la franja desaparece. Cinco y cinco, sin sobras.

   Es la única sin foto: navy macizo, el isotipo arriba y el texto en la misma
   línea de base que las otras nueve. Así entra en el ritmo de la rejilla sin
   confundirse con un décimo tipo de hipoteca. */
.mega__todos {
  background: var(--ink);
  transition: background-color .4s var(--ease);
}
/* El velo existe para garantizar el texto sobre una foto. Aquí no hay foto. */
.mega__todos::after { content: none; }
.mega__todos:hover { background: var(--ink-2); }

/* Más grande que el isotipo de las tarjetas con foto (19 px): ahí acompaña a
   una imagen, aquí es lo único que hay. A 19 px la tarjeta se veía vacía. */
.mega__marca {
  position: absolute; z-index: 1; left: 16px; top: 15px;
  width: 27px; aspect-ratio: 71 / 111; height: auto;
  color: var(--bone); opacity: .95;
  transition: transform .55s var(--ease), opacity .4s var(--ease);
}
.mega__todos:hover .mega__marca { opacity: 1; transform: translateY(-2px); }

/* El texto hereda posición y tamaño de .mega__i span: misma línea de base que
   las otras nueve. Solo se le reserva el hueco de la flecha. */
.mega__todos span { right: 44px; }
.mega__todos .ico {
  position: absolute; z-index: 1; right: 16px; bottom: 16px;
  width: 16px; height: 16px; color: #fff; opacity: .78;
  transition: transform .45s var(--ease), opacity .35s var(--ease);
}
.mega__todos:hover .ico { opacity: 1; transform: translateX(3px); }

/* En /tipos-de-hipoteca sync-comunes le pone aria-current: se señala con un
   filete interior, no cambiando el fondo, que ya es el color de marca. */
.mega__todos[aria-current="page"]::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 13px;
  border: 1.5px solid rgba(228, 226, 221, .55); pointer-events: none;
}

/* Hamburguesa */
.nav__burger {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: var(--r-pill);
  background: transparent; cursor: pointer; transition: background-color .25s var(--ease);
}
.nav__burger:hover { background: var(--mist); }
/* La clase .barra NO es decorativa: el selector que había, `.nav__burger span`,
   también alcanzaba al <span class="sr-only"> con la etiqueta para lectores de
   pantalla. Gana por especificidad (0,1,1 contra 0,1,0), así que le imponía
   `position:relative; width:15px` y lo convertía en un segundo item flex visible.
   Resultado medido: las rayas quedaban 6 px a la izquierda del centro del botón. */
.nav__burger .barra { position: relative; width: 16px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: background-color .2s; }
.nav__burger .barra::before, .nav__burger .barra::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 100%;
  background: var(--ink); border-radius: 2px; transition: transform .4s var(--ease);
}
.nav__burger .barra::before { top: -5px; }
.nav__burger .barra::after { top: 5px; }
/* La raya del medio se esconde para que las otras dos formen la X. Las reglas
   que invierten el color sobre portada oscura y con el menú abierto la volvían
   a pintar —ganan por especificidad—, así que la X salía con un palo cruzado.
   Se repiten aquí con el estado puesto para que no la alcancen. */
.nav__burger[aria-expanded="true"] .barra,
.portada-oscura .nav:not(.fija) .nav__burger[aria-expanded="true"] .barra,
body.menu-abierto.portada-oscura .nav:not(.fija) .nav__burger[aria-expanded="true"] .barra { background: transparent; }
.nav__burger[aria-expanded="true"] .barra::before { transform: translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .barra::after { transform: translateY(-5px) rotate(-45deg); }
/* Mientras el cajón está abierto la barra sigue siendo la única salida: se queda
   por encima del panel y con área táctil cómoda. */
.nav__burger { z-index: 101; }
.nav__burger:active { transform: scale(.94); }

/* ---------- Panel móvil ----------
   Vuelve a ser una lista: tres filas y, dentro de «Tipos de hipoteca», un
   acordeón con las nueve tarjetas. La versión anterior metía las tres entradas
   en pastillas y dejaba las nueve tarjetas siempre a la vista para que todo
   cupiera sin scroll; el precio era texto de 12 px dentro de tarjetas de 90 px,
   que es justo al revés de lo que pide la jerarquía. Plegado ocupa poco, y al
   desplegar manda el contenido: tarjetas más bajas y texto legible. */
.cajon {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 99;
  background: var(--paper);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 6px var(--gutter) max(28px, env(safe-area-inset-bottom, 0px));
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s;
}
.cajon.abierto { opacity: 1; visibility: visible; }
/* Sin esto, el `display` del autor pisaría el `display:none` de [hidden]. */
.cajon[hidden] { display: none; }

.cajon__a {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 18px 2px; border: 0; border-bottom: 1px solid var(--rule);
  background: transparent; color: var(--text);
  font-size: 1.18rem; font-weight: 400; letter-spacing: -.028em;
  text-align: left; cursor: pointer;
}
.cajon__a[aria-current="page"] { font-weight: 600; }
.cajon__a .ico { width: 16px; height: 16px; opacity: .5; transition: transform .35s var(--ease); }
.cajon__a[aria-expanded="true"] .ico { transform: rotate(180deg); }

/* El acordeón anima `grid-template-rows` de 0fr a 1fr: se puede transicionar y
   no exige saber la altura de antemano. */
.cajon__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease); }
/* `visibility` SÍ saca del orden de tabulación; `overflow: hidden` solo recorta
   píxeles, y además impide que las imágenes perezosas se descarguen cerradas. */
.cajon__sub > div { overflow: hidden; visibility: hidden; transition: visibility .42s; }
.cajon__a[aria-expanded="true"] + .cajon__sub { grid-template-rows: 1fr; }
.cajon__a[aria-expanded="true"] + .cajon__sub > div { visibility: visible; }

.cajon__rej {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
  padding: 12px 0 2px;
}
/* La primera a lo ancho: nueve no se reparten en pares, y dejar el hueco en la
   más buscada en vez de en la última lo convierte en una decisión. */
.cajon__rej > :first-child { grid-column: 1 / -1; }

.mcard {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: 64px; padding: 10px 12px;
  border-radius: 13px; background: var(--ink);
  transition: transform .35s var(--ease);
}
.mcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mcard::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4, 0, 32, .90) 0%, rgba(4, 0, 32, .64) 56%, rgba(4, 0, 32, .38) 100%);
}
/* El texto manda sobre la caja, no al revés: la tarjeta tiene un suelo de 64 px
   y crece si el nombre necesita dos líneas. */
.mcard span {
  position: relative; z-index: 1; color: #fff;
  font-size: 1.02rem; font-weight: 500;
  letter-spacing: -.024em; line-height: 1.2;
  text-wrap: balance;
}
.mcard--ancha { min-height: 74px; }
.mcard--ancha span { font-size: 1.12rem; }
.mcard[aria-current="page"]::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 13px;
  border: 1.5px solid rgba(255, 255, 255, .62); pointer-events: none;
}
.mcard:active { transform: scale(.975); }

.cajon__todos {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 7px; padding: 15px 14px; border-radius: 13px;
  background: var(--mist); color: var(--text);
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.cajon__todos .ico { width: 13px; height: 13px; }

.cajon__cta { margin-top: 30px; display: grid; gap: 9px; }
.cajon__cta .btn { width: 100%; }
.cajon__meta {
  margin-top: 22px; display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 2px 14px;
  font-size: .86rem; color: var(--text-3);
}
.cajon__meta a { color: var(--text-2); font-weight: 500; }

@media (min-width: 1100px) {
  .nav__menu { display: flex; }
  .nav .btn--nav { display: inline-flex; }
  .nav__burger { display: none; }
  .cajon { display: none; }
}

/* ---------- 7. Hero a pantalla completa ---------- */
.hero {
  position: relative;
  /* Antes empezaba bajo la navbar (`margin-top: var(--nav-h)`) y dejaba una
     banda blanca de 68 px sobre la foto. Ahora va a sangre y la barra flota
     encima, igual que en las interiores. El contenido se baja con padding. */
  padding-top: var(--nav-h);
  height: 100svh;
  min-height: 540px;
  max-height: 1000px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
/* El <picture> necesita caja propia: sin ella el height:100% del <img> resuelve
   a `auto` y object-fit:cover no llega a aplicarse nunca — quedaba una franja
   de 30px sin foto al pie del hero, justo bajo los botones. */
.hero__img { position: absolute; inset: 0; z-index: -2; }
.hero__img picture { display: block; width: 100%; height: 100%; }
/* `will-change` aquí sí está justificado: es UN elemento por página y el único
   que se recompone en cada fotograma del scroll por el paralaje. Sin él, el
   navegador rerasteriza una foto a pantalla completa en cada paso. */
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; will-change: transform; }
.hero__velo {
  position: absolute; inset: 0; z-index: -1;
  /* Dos capas: una lateral que oscurece solo la columna del texto y otra
     inferior. Así el titular tiene contraste garantizado sin apagar la foto
     entera — medido sobre los píxeles reales, no estimado. */
  background:
    linear-gradient(to right, rgba(4, 0, 32, .62) 0%, rgba(4, 0, 32, .34) 50%,
                    rgba(4, 0, 32, 0) 86%),
    linear-gradient(to top, rgba(4, 0, 32, .93) 0%, rgba(4, 0, 32, .80) 30%,
                    rgba(4, 0, 32, .42) 58%, rgba(4, 0, 32, .14) 100%);
}
@media (max-width: 899px) {
  /* En móvil el texto ocupa todo el ancho y ahora también toda la altura
     (antetítulo arriba, mensaje abajo), así que hacen falta dos capas: una
     superior para el antetítulo y otra inferior para el resto. */
  .hero__velo {
    background:
      linear-gradient(to bottom, rgba(4, 0, 32, .64) 0%, rgba(4, 0, 32, .22) 16%,
                      rgba(4, 0, 32, 0) 32%),
      linear-gradient(to top, rgba(4, 0, 32, .93) 0%, rgba(4, 0, 32, .82) 34%,
                      rgba(4, 0, 32, .52) 62%, rgba(4, 0, 32, .3) 100%);
  }
}

.hero__in {
  width: 100%;
  padding-bottom: clamp(36px, 3rem + 2.5vw, 76px);
  display: grid;
  gap: 28px;
  color: #fff;
}
.hero .display { color: #fff; margin-top: 18px; }
.hero__eyebrow { color: #fff; }
.hero__sub { color: rgba(255, 255, 255, .9); max-width: 38rem; margin-top: 0; }
.hero__nota {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .86rem; color: rgba(255, 255, 255, .8);
}
.hero__nota .ico { width: 16px; height: 16px; flex: none; }
.hero__pie { display: grid; gap: 18px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; }

/* El titular ocupa el ancho completo; subtítulo y acciones comparten la fila de
   abajo. Antes la pista de los botones tomaba su max-content (446px rígidos por
   el nowrap) y partía el titular en 3 o 5 líneas según el ancho. */
.hero__fila { display: grid; gap: 26px; }
@media (max-width: 899px) {
  /* Antes todo iba apelotonado abajo y sobraba medio hero vacío. Ahora el
     antetítulo sube al borde superior y el bloque de mensaje queda abajo, con la
     foto respirando entre los dos. */
  .hero { align-items: stretch; }
  .hero__in {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0;
    padding-top: clamp(24px, 5vw, 40px);
    padding-bottom: clamp(34px, 6vw, 54px);
  }
  .hero__cab { display: contents; }
  .hero__eyebrow { grid-row: 1; align-self: start; }
  .hero .display { grid-row: 2; align-self: end; margin-top: 0; padding-top: 28px; }
  .hero__fila { grid-row: 3; gap: 22px; margin-top: 22px; }
}
@media (max-width: 599px) {
  /* 100svh menos navbar deja demasiado aire para tan poco contenido. */
  .hero { height: min(100svh, 700px); min-height: 560px; }
}

@media (min-width: 1024px) {
  .hero__fila {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 30px clamp(32px, 5vw, 72px);
  }
  .hero__pie { gap: 15px; justify-items: end; text-align: right; }
  .hero__cta { justify-content: flex-end; }
}

/* ---------- 8. Bloque: la pieza base ---------- */
.bloque {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(24px, 1.6rem + 1.1vw, 40px);
  border-radius: var(--r-bloque);
  background: var(--sup);
  transition: background-color .45s var(--ease), color .45s var(--ease),
              transform .45s var(--ease), box-shadow .45s var(--ease);
}
/* Base primero; la variante maciza va DESPUÉS, si no la pisa por orden de cascada. */
.bloque p { color: var(--text-2); font-size: .97rem; margin-top: 10px; }
.bloque .h3 { margin-top: 12px; }
.bloque:hover { background: var(--sup-2); transform: translateY(-3px); box-shadow: var(--sombra-hov); }

.bloque--ink { background: var(--ink); color: var(--on-ink); }
/* Antes el hover pasaba de navy a otro navy un poco más claro: el cambio no se
   leía y lo que se percibía era «más azul». Ahora reacciona el borde, no el fondo. */
.bloque--ink { box-shadow: inset 0 0 0 1px transparent; }
.bloque--ink:hover {
  background: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(228, 226, 221, .30), var(--sombra-hov-ink);
}
.bloque--ink .h3 { color: var(--on-ink); }
.bloque--ink p { color: var(--on-ink-2); }
.bloque--ink .eyebrow { color: var(--on-ink-3); }
.bloque--ink .lead { color: var(--on-ink-2); }

/* Bloque con foto embebida: la imagen vive DENTRO, con su propio margen y radio */
.bloque--foto { padding: var(--hueco); gap: 0; }
.bloque--foto .foto { border-radius: var(--r-foto); overflow: hidden; background: var(--mist-2); }
.bloque--foto .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.bloque--foto:hover .foto img { transform: scale(1.035); }
.bloque--foto .txt { padding: clamp(18px, 1.2rem + .8vw, 28px) clamp(12px, 1rem + .4vw, 20px) clamp(14px, 1rem + .4vw, 20px); }
.bloque--foto .txt p { margin-top: 9px; }

/* ---------- 9. Bento del enfoque ----------
   Collage SIMÉTRICO respecto al eje vertical: las dos columnas exteriores son
   idénticas (foto arriba / bloque navy abajo) y la central las refleja invertida
   (bloque claro arriba / foto abajo). Una sola rejilla de 3×2 recorrida por
   columnas, así que todas las fotos miden lo mismo y las dos filas se igualan. */
.bento {
  display: grid;
  gap: var(--hueco);
  margin-top: clamp(36px, 2.6rem + 2vw, 62px);
}
@media (min-width: 640px) and (max-width: 1039px) {
  .bento { grid-template-columns: repeat(2, 1fr); }   /* damero foto/bloque */
}
@media (min-width: 1040px) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    grid-auto-flow: column;
  }
}
.bento__foto {
  border-radius: var(--r-bloque); overflow: hidden;
  background: var(--mist-2);
}
.bento__foto img {
  width: 100%; height: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 1s var(--ease);
}
.bento__foto:hover img { transform: scale(1.045); }
.bento__pilar { min-height: 192px; justify-content: flex-end; }
.bento__pilar .eyebrow { margin-bottom: auto; }
.bento__pilar .h3 { margin-top: 18px; }

/* ---------- 10. Trío de bloques ---------- */
.trio {
  display: grid; gap: var(--hueco);
  margin-top: clamp(36px, 2.6rem + 2vw, 62px);
}
@media (min-width: 720px)  { .trio { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .trio { grid-template-columns: repeat(3, 1fr); } }


.servicio { min-height: clamp(200px, 17vw, 250px); justify-content: space-between; }
.servicio__n {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}
.bloque--ink .servicio__n { color: var(--on-ink-3); }
.servicio .h3 { margin-top: 0; }
.servicio__cuerpo { margin-top: auto; padding-top: 28px; }

/* Cita grande: el texto es la pieza, sin icono ni adorno */
.cita { min-height: clamp(206px, 18vw, 266px); justify-content: space-between; }
.cita__n {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}
.bloque--ink .cita__n { color: var(--on-ink-3); }
.cita p {
  margin-top: 0;
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.14rem, 1.02rem + .62vw, 1.48rem);
  font-weight: 400; line-height: 1.32; letter-spacing: -.022em;
  color: var(--text-2); text-wrap: pretty;
}
/* Compuesto, no descendiente: el mismo elemento lleva .bloque--ink y .cita */
.bloque--ink.cita p { color: var(--on-ink-2); }
/* La entradilla se destaca por TONO, no por peso: solo cargamos el 400 de la
   serif y pedirle un 500 obliga al navegador a falsificar la negrita. */
.cita p b { font-weight: 400; color: var(--text); }
.bloque--ink.cita p b { color: var(--on-ink); }
/* El anclaje inferior solo tiene sentido cuando la celda es ancha. En una
   columna estrecha deja un hueco muerto, así que la altura pasa a ser la del
   contenido y la separación se fija a mano. */
@media (max-width: 719px) {
  .cita, .servicio { min-height: 0; }
  .cita p { margin-top: 36px; }
  .servicio__cuerpo { padding-top: 36px; }
}

/* ---------- 11. Panel partido ---------- */
.split {
  display: grid;
  border-radius: var(--r-grande);
  overflow: hidden;
  margin-top: clamp(36px, 2.6rem + 2vw, 62px);
  background: var(--ink);
  color: var(--on-ink);
}
@media (min-width: 940px) {
  .split { grid-template-columns: 1fr 1fr; min-height: clamp(460px, 44vw, 660px); }
}
.split__txt {
  padding: clamp(32px, 2.2rem + 2.6vw, 72px);
  display: flex; flex-direction: column; justify-content: center;
}
.split__txt .h2 { margin-top: 16px; font-size: clamp(1.8rem, 1.2rem + 1.9vw, 2.75rem); }
.split__txt > p { margin-top: 18px; color: var(--on-ink-2); max-width: 34rem; }
.split__img { position: relative; min-height: 300px; }
.split__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 940px) {
  .split--inv .split__txt { order: 2; }
}
@media (max-width: 939px) { .split__img { min-height: 260px; order: -1; } }

.lista { margin-top: 26px; display: grid; gap: 13px; }
.lista li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .97rem; letter-spacing: -.014em;
}
/* El icono iba fijo en hueso porque en la home esta lista solo existía sobre navy.
   En una superficie clara eso es hueso sobre blanco: invisible. Ahora lo decide
   la superficie, igual que --sup y el resto del sistema. */
.lista .ico { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--ink); opacity: .55; }
.on-ink .lista .ico, .bloque--ink .lista .ico, .sobre-foto .lista .ico { color: var(--bone); opacity: .85; }
.split__cta { margin-top: 32px; }
.split__cta p { color: var(--on-ink-2); font-size: .95rem; margin-bottom: 16px; max-width: 30rem; }

/* ---------- 12. Rejilla de tipos de hipoteca ---------- */
.tipos {
  display: grid; gap: var(--hueco);
  margin-top: clamp(36px, 2.6rem + 2vw, 62px);
}
@media (min-width: 620px)  { .tipos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .tipos { grid-template-columns: repeat(3, 1fr); } }
/* Carrusel horizontal en móvil. Patrón reutilizable para cualquier sección de
   muchas tarjetas: la tarjeta parcial que asoma por el borde es la pista de que
   hay más, y el snap deja cada una encuadrada. */
@media (max-width: 759px) {
  .tipos {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    /* `overflow-x: auto` obliga al navegador a calcular `overflow-y: auto`, así
       que la caja recorta TAMBIÉN en vertical. El anillo de foco global son
       2 px de trazo a 3 px de distancia, o sea 5 px por fuera de la tarjeta:
       sin este relleno se cortaba al ras y quien navega con teclado no veía
       dónde estaba. */
    padding-block: 6px 8px;
    margin-top: calc(clamp(36px, 2.6rem + 2vw, 62px) - 6px);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tipos::-webkit-scrollbar { display: none; }
  .tipos > * { scroll-snap-align: start; }
}

/* Cada tipo lleva su propia foto; el velo navy las unifica y garantiza el texto. */
.tipo {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-bloque);
  background: var(--ink);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tipo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.tipo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4, 0, 32, .94) 0%, rgba(4, 0, 32, .68) 36%,
                              rgba(4, 0, 32, .26) 72%, rgba(4, 0, 32, .18) 100%);
  transition: opacity .45s var(--ease);
}
.tipo__n {
  position: absolute; z-index: 1;
  left: clamp(20px, 1.4rem + .8vw, 30px); right: clamp(54px, 4.4vw, 70px);
  bottom: clamp(18px, 1.2rem + .7vw, 28px);
  color: #fff;
  font-size: clamp(1.26rem, 1.08rem + .72vw, 1.68rem);
  font-weight: 500; letter-spacing: -.028em; line-height: 1.16;
}
/* El isotipo personaliza la tarjeta y la ata a la marca sin añadir texto. */
.tipo__marca {
  position: absolute; z-index: 1;
  left: clamp(20px, 1.4rem + .8vw, 30px);
  top: clamp(18px, 1.2rem + .7vw, 26px);
  width: clamp(17px, 1.1rem + .4vw, 21px);
  aspect-ratio: 71 / 111;
  height: auto;
  color: #fff; opacity: .88;
  transition: opacity .4s var(--ease), transform .55s var(--ease);
}
.tipo:hover .tipo__marca { opacity: 1; transform: translateY(-2px); }

.tipo .ico {
  position: absolute; z-index: 1;
  right: clamp(18px, 1.3rem + .7vw, 26px); bottom: clamp(18px, 1.1rem + .6vw, 26px);
  width: 17px; height: 17px; color: #fff; opacity: .72;
  transition: transform .45s var(--ease), opacity .35s var(--ease);
}
.tipo:hover { transform: translateY(-4px); box-shadow: var(--sombra-hov-ink); }
.tipo:hover img { transform: scale(1.055); }
.tipo:hover::after { opacity: .82; }
.tipo:hover .ico { opacity: 1; transform: translate(3px, -3px); }

/* ---------- 13. Proceso ----------
   Va a sangre: la sección entera es navy, no un bloque redondeado dentro de blanco. */
.proceso { position: relative; overflow: hidden; isolation: isolate; }
/* La foto se ve de verdad aquí: banda propia, sin texto encima que proteger.
   Pelearla con un velo bajo los cuatro pasos solo la dejaba al 1%. */
.proceso__banda {
  margin-top: clamp(40px, 3rem + 2.6vw, 72px);
  border-radius: var(--r-bloque);
  overflow: hidden;
  aspect-ratio: 21 / 8;
  background: var(--ink-2);
}
@media (max-width: 719px) { .proceso__banda { aspect-ratio: 16 / 9; } }
.proceso__banda img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pasos { display: grid; gap: 0; margin-top: clamp(38px, 2.6rem + 2.4vw, 68px); }
@media (min-width: 700px)  { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pasos { grid-template-columns: repeat(4, 1fr); } }
.paso { padding: 28px 0 0; border-top: 1px solid var(--rule-ink); }
@media (max-width: 699px) {
  /* Sin esto el párrafo de un paso toca el filete del siguiente. */
  .paso { padding-bottom: 34px; }
  .paso:last-child { padding-bottom: 0; }
}
@media (min-width: 700px) and (max-width: 1039.98px) {
  .paso { padding: 28px clamp(16px, 1.8vw, 30px) 0 0; }
  .paso:nth-child(even) { padding-left: clamp(16px, 1.8vw, 30px); padding-right: 0; }
  .paso:nth-child(n+3) { margin-top: 36px; }
}
@media (min-width: 1040px) {
  /* Cuatro columnas de ancho idéntico: el aire se reparte con gap, no con
     paddings por nth-child, que antes dejaban el tercer paso 26px más estrecho. */
  .pasos { column-gap: clamp(28px, 3.4vw, 56px); }
  .paso, .paso:nth-child(even) { padding: 28px 0 0; margin-top: 0; }
}
.paso__n {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  color: var(--on-ink-3); font-variant-numeric: tabular-nums;
}
/* El último paso es el destino: filete y numeral en hueso pleno. */
.paso:last-child { border-top-color: var(--bone); }
.paso:last-child .paso__n { color: var(--bone); }
.paso .h3 { margin-top: 13px; color: var(--on-ink); }
.paso p { margin-top: 11px; color: var(--on-ink-2); font-size: .95rem; }

/* ---------- 14. Simulación ---------- */
.sim { display: grid; gap: var(--hueco); margin-top: clamp(36px, 2.6rem + 2vw, 62px); }
@media (min-width: 1180px) {
  /* `stretch` (por defecto) iguala las dos columnas; las tres fichas se reparten
     esa altura en tres filas iguales, así suman exactamente la de la grande. */
  .sim { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: stretch; }
  /* `align-self` y no confiar en el `align-items: stretch` de arriba: la página
     de la calculadora declara OTRO `.sim` —misma clase, componente distinto—
     con `align-items: start`, y al ir después en la hoja ganaba también aquí.
     Medido: la columna se quedaba en 434 px frente a los 505 de la grande, o
     sea 71 px de menos. Puesto en el hijo, no hay regla de la otra página que
     lo alcance. */
  .sim__col { grid-template-rows: repeat(3, 1fr); align-self: stretch; }
  .aviso { align-self: stretch; }
}
.sim__col { display: grid; gap: var(--hueco); align-content: stretch; }
.sim__fila { display: grid; gap: 8px; align-content: center; height: 100%; }
@media (min-width: 760px) {
  .sim__fila { grid-template-columns: minmax(0, 11rem) minmax(26ch, 1fr); gap: 26px; align-items: baseline; }
}
.sim__fila .h3 { margin-top: 0; }
.sim__fila p { margin-top: 0; }
.aviso { position: sticky; top: calc(var(--nav-h) + 20px); }
@media (max-width: 1179px) { .aviso { position: static; } }
.aviso .h3 { margin-top: 16px; }
.aviso ul { margin-top: 20px; display: grid; gap: 11px; }
.aviso li {
  position: relative; padding-left: 18px;
  font-size: .94rem; line-height: 1.5; color: var(--on-ink-2);
}
.aviso li::before {
  content: ""; position: absolute; left: 1px; top: .64em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--on-ink-3);
}
.aviso__pie { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule-ink); }
.aviso__pie p { font-size: .93rem; color: var(--on-ink-2); margin-bottom: 16px; }

/* ---------- 15. Preguntas ---------- */
.faq { display: grid; gap: clamp(28px, 3vw, 56px); }
@media (min-width: 900px) {
  .faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .faq__cab { position: sticky; top: calc(var(--nav-h) + 40px); }
}
.faq__lista { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-size: clamp(1.02rem, .97rem + .28vw, 1.18rem);
  font-weight: 500; letter-spacing: -.024em; line-height: 1.35;
  transition: color .25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--text-2); }
.faq__mas { position: relative; flex: none; width: 24px; height: 24px; margin-top: 1px; }
.faq__mas::before, .faq__mas::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 13px; height: 1.5px; background: currentColor; border-radius: 2px;
  transform: translate(-50%, -50%); transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.faq__mas::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] .faq__mas::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease); }
details[open] .faq__panel { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p { padding-bottom: 26px; max-width: 42rem; color: var(--text-2); line-height: 1.6; }

/* ---------- 16. CTA final ---------- */
.cierre {
  position: relative; isolation: isolate;
  border-radius: var(--r-grande); overflow: hidden;
  padding: clamp(44px, 2.6rem + 3vw, 76px) clamp(26px, 2rem + 2.4vw, 68px);
  color: #fff;
}
/* Filete interior: enmarca el mensaje y da el gesto de pieza acabada. */
.cierre::before {
  content: ""; position: absolute; z-index: 0;
  inset: clamp(14px, 1.4vw, 22px);
  border: 1px solid rgba(228, 226, 221, .22);
  border-radius: calc(var(--r-grande) - 10px);
  pointer-events: none;
}
.cierre__marca { width: 26px; height: 40px; margin: 0 0 20px; color: var(--bone); opacity: .9; }
.cierre__bg { position: absolute; inset: 0; z-index: -1; background: var(--ink); }
.cierre__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.cierre__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(135% 125% at 50% 38%, rgba(4, 0, 32, .34) 0%, rgba(4, 0, 32, .86) 78%);
}
/* Antes: columna estrecha y muy alta para cuatro líneas. Ahora reparte a lo
   ancho — mensaje a la izquierda, acciones a la derecha. */
.cierre__in { position: relative; z-index: 1; display: grid; gap: 30px; }
@media (min-width: 900px) {
  .cierre__in { grid-template-columns: minmax(0, 1.35fr) auto; align-items: center; gap: clamp(44px, 5vw, 96px); }
}
.cierre .h2 { color: #fff; font-size: clamp(1.95rem, 1.2rem + 2.7vw, 3.1rem); max-width: 16ch; }
.cierre .lead { margin-top: 16px; color: rgba(255, 255, 255, .86); max-width: 38ch; }
/* El pie del CTA se apila: botón y, debajo, la línea de contacto. Antes iban de
   hermanos en una fila flex, así que el bloque del correo —con su filete y su
   margen superior— se plantaba al lado del botón y rompía la composición. */
/* `gap: 0` venía de cuando .cierre__mail era hijo de este bloque y su propio
   margen hacía la separación. Ahora los hijos son los dos botones y se tocaban. */
.cierre__acc { display: grid; justify-items: start; gap: 10px; }
@media (min-width: 900px) { .cierre__acc { justify-items: end; text-align: right; } }
.cierre__mail {
  margin-top: clamp(20px, 1.4rem + 1vw, 28px);
  padding-top: clamp(16px, 1.1rem + .8vw, 22px);
  border-top: 1px solid rgba(228, 226, 221, .22);
  width: 100%; max-width: 20rem;
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
@media (min-width: 900px) { .cierre__mail { text-align: right; } }
.cierre__mail a { color: #fff; border-bottom: 1px solid rgba(228, 226, 221, .4); padding-bottom: 2px; }
.cierre__mail a:hover { border-color: #fff; }

/* ---------- 17. Pie ---------- */
.pie {
  position: relative; z-index: 0;
  margin-top: calc(var(--r-grande) * -1);
  background: var(--ink); color: var(--on-ink);
  padding-top: calc(clamp(52px, 3rem + 4vw, 88px) + var(--r-grande));
  padding-bottom: 30px;
}
.pie .marca { color: var(--bone); }
.pie .marca__s { color: var(--on-ink-3); }
.pie .marca__m { width: 26px; height: 40px; }
.pie .marca__n { font-size: 1.22rem; }
.pie .marca__s { font-size: .72rem; }
/* El claim de arriba se quitó: repetía palabra por palabra el de la línea
   inferior. Una firma dicha dos veces en 400 px de alto no refuerza, cansa. */


.pie__top { display: grid; gap: clamp(40px, 3rem + 2.4vw, 72px); }
@media (min-width: 900px) { .pie__top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr); } }
.pie__sobre p { margin-top: 22px; max-width: 27rem; color: var(--on-ink-2); font-size: .94rem; }
.pie__contacto { margin-top: 24px; display: grid; gap: 6px; justify-items: start; }
.pie__contacto a {
  font-size: 1rem; font-weight: 500; letter-spacing: -.018em;
  border-bottom: 1px solid var(--rule-ink); padding-bottom: 2px;
  transition: border-color .3s var(--ease);
}
.pie__contacto a:hover { border-color: var(--bone); }
.pie__contacto span { font-size: .88rem; color: var(--on-ink-3); }

.pie__nav { display: grid; gap: 36px clamp(28px, 2rem + 2vw, 56px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pie__nav h3 {
  font-size: .685rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-ink-3);
}
.pie__nav ul { margin-top: 16px; display: grid; gap: 10px; }
.pie__nav a {
  font-size: .92rem; color: var(--on-ink-2);
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.pie__nav a:hover { color: var(--on-ink); padding-left: 5px; }

.pie__bajo {
  margin-top: clamp(44px, 3rem + 3vw, 72px); padding-top: 24px;
  border-top: 1px solid var(--rule-ink);
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  align-items: center; justify-content: space-between;
  font-size: .84rem; color: var(--on-ink-3);
}
.pie__bajo p { display: inline-flex; align-items: center; gap: 10px; }
.pie__bajo .pt { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.arriba { display: inline-flex; align-items: center; gap: 8px; color: var(--on-ink-2); transition: color .25s var(--ease); }
.arriba:hover { color: var(--on-ink); }
.arriba .ico { width: 13px; height: 13px; transition: transform .35s var(--ease); }
.arriba:hover .ico { transform: translateY(-3px); }

/* ---------- 18. Aparición al hacer scroll ----------
   Contenida a propósito: el cliente pidió menos efectos que la referencia. */
/* Condicionado a que haya JS: si main.js no llega a ejecutarse, el contenido se
   pinta tal cual en vez de quedarse en opacity:0 para siempre. */
.js .rev { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.rev.visible { opacity: 1; transform: none; }
.rev[data-d="1"] { transition-delay: .06s; }
.rev[data-d="2"] { transition-delay: .12s; }

/* Con GSAP al mando se apaga la transición CSS: GSAP reescribe los estilos en
   línea en cada fotograma y una transición encima los persigue con retraso, que
   se nota como un arrastre blando. El desenfoque de partida lo pone el CSS y no
   el JS para que no haya un fotograma nítido antes de que GSAP tome el control. */
.js.gsap .rev { transition: none; filter: blur(9px); }

/* Con GSAP al mando de los saltos a ancla hay que apagar el scroll suave del
   navegador: son dos motores empujando el mismo scroll. GSAP escribe la
   posición en cada fotograma, el navegador la toma como un destino al que
   animar, GSAP vuelve a leer y encuentra otra cosa, lo interpreta como que el
   usuario ha tocado la rueda y aborta. Medido: el salto se quedaba en 11 px de
   los 3.653 que tenía que recorrer. */
html.gsap { scroll-behavior: auto; }
.js.gsap .rev.visible { filter: none; }

/* ---------- 19. Preferencias ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  /* `.js .rev` son dos clases y gana a `.rev` a secas aunque esté en una media
     query: las media queries no suman especificidad. Tiene que ir igualado. */
  .js .rev, .js.gsap .rev { opacity: 1; transform: none; filter: none; }
}

@media (prefers-contrast: more) {
  :root {
    --text-2: rgba(4, 0, 32, .90); --text-3: rgba(4, 0, 32, .86);
    --on-ink-2: rgba(228, 226, 221, .95); --on-ink-3: rgba(228, 226, 221, .90);
    --rule: rgba(4, 0, 32, .26); --rule-ink: rgba(228, 226, 221, .34);
  }
}

@media print {
  .nav, .cajon, .hero__velo, .cierre__bg, .arriba { display: none !important; }
  body { background: #fff; }
  .bloque--ink, .proceso, .split, .cierre, .pie,
  .seccion--ink, .seccion--mist { background: #fff !important; color: #000 !important; }
  .cierre .h2, .cierre .lead, .cierre .eyebrow,
  .hero .display, .hero__sub, .hero__eyebrow, .hero__nota { color: #000 !important; }
  .hero__img { display: none !important; }
}

/* ---------- 20. Sobre nosotros ----------
   Secciones propias de la página interior. Todo lo demás (bloque, trío, cita,
   pasos, faq, cierre) se reutiliza tal cual de la home: si una pieza vale, no
   se duplica con otro nombre. */

/* Portada: NO es el hero de la home. Esa portada a pantalla completa con foto es
   el hito del sitio y repetirla aquí la devalúa. Esta es más baja, va sobre hueso
   —el color de marca que estaba infrautilizado— y guarda la primera fotografía
   para «La cara visible», que es donde de verdad importa. */
/* Portada de página interior CON fotografía de fondo. Mantiene exactamente la
   altura de la versión en hueso —no es el hero de la home, que va a pantalla
   completa— pero gana presencia. Es el componente que usan todas las interiores:
   cada una cambia la foto y nada más. */
.portada {
  position: relative; isolation: isolate;
  /* El radio inferior ya venía del sistema de planchas, pero la foto va en
     position:absolute y desbordaba la esquina, así que no se veía recortada. */
  overflow: hidden;
  background: var(--ink);
  --sup: var(--paper); --sup-2: #FAF9F5;
  display: grid; align-items: end;
  min-height: clamp(560px, 34rem + 10vw, 700px);
  padding-top: calc(var(--nav-h) + clamp(30px, 2rem + 2.4vw, 56px));
  padding-bottom: clamp(44px, 3rem + 3vw, 84px);
}
.portada__img { position: absolute; inset: 0; z-index: -2; background: var(--ink); }
/* El <picture> necesita caja propia: sin width/height el 100% de la <img> resuelve
   a auto y object-fit nunca llega a aplicarse. Ya pasó una vez en el hero. */
.portada__img picture { display: block; width: 100%; height: 100%; }
.portada__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; will-change: transform; }
.portada__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* Banda superior: protege la navbar, la miga y el kicker, que viven en la zona
       más clara de la foto. Sin ella la miga se quedaba en 4,25. Se apaga pronto
       para no volver a tapar la fotografía. */
    linear-gradient(to bottom, rgba(4, 0, 32, .70) 0%, rgba(4, 0, 32, .40) 12%, rgba(4, 0, 32, .14) 26%, rgba(4, 0, 32, 0) 38%),
    linear-gradient(to right, rgba(4, 0, 32, .58) 0%, rgba(4, 0, 32, .28) 52%, rgba(4, 0, 32, 0) 94%),
    linear-gradient(to top, rgba(4, 0, 32, .82) 0%, rgba(4, 0, 32, .44) 36%, rgba(4, 0, 32, .12) 72%, rgba(4, 0, 32, .06) 100%);
}
@media (max-width: 899px) {
  .portada__velo {
    background:
      linear-gradient(to bottom, rgba(4, 0, 32, .78) 0%, rgba(4, 0, 32, .50) 14%, rgba(4, 0, 32, .26) 30%, rgba(4, 0, 32, .14) 46%),
      linear-gradient(to top, rgba(4, 0, 32, .88) 0%, rgba(4, 0, 32, .64) 38%, rgba(4, 0, 32, .28) 70%, rgba(4, 0, 32, .16) 100%);
  }
}
.portada > .container { position: relative; z-index: 1; width: 100%; }
.miga {
  display: flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 500; letter-spacing: .04em;
  color: var(--text-3); margin-bottom: clamp(26px, 2rem + 1.6vw, 48px);
}
.miga a { color: var(--text-2); }
.miga a:hover { color: var(--text); }
.miga span[aria-hidden] { opacity: .4; }
.miga [aria-current] { color: var(--text); }
/* Sobre fotografía los tokens de superficie clara no valen: blanco con alfa. */
.sobre-foto .miga { color: rgba(255, 255, 255, .72); }
.sobre-foto .miga a { color: rgba(255, 255, 255, .80); }
.sobre-foto .miga a:hover { color: #fff; }
.sobre-foto .miga [aria-current] { color: #fff; }
.sobre-foto .display { color: #fff; }
.sobre-foto .portada__sub { color: rgba(255, 255, 255, .84); }

.portada__in { display: grid; gap: clamp(30px, 2rem + 2.4vw, 56px); }
@media (min-width: 1000px) {
  .portada__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: clamp(40px, 2rem + 3vw, 80px); }
}
.portada .display { margin-top: 16px; }
.portada__pie { display: grid; gap: 16px; }
@media (min-width: 1000px) { .portada__pie { padding-bottom: 8px; } }
.portada__sub { color: var(--text-2); font-size: .97rem; max-width: 40ch; }
.portada__acc { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

/* Quiénes somos: texto y foto vertical. La lista manda, la foto acompaña. */
.enfoque {
  display: grid; gap: clamp(28px, 2rem + 2vw, 54px);
  margin-top: clamp(40px, 2.6rem + 2.6vw, 76px);
}
@media (min-width: 980px) {
  /* `stretch` y no `start`: la foto llevaba aspect-ratio 4/5 y sacaba 244 px al
     texto. Ahora la columna la fija el texto y la foto rellena, que es lo que
     hace que las dos mitades acaben a la misma altura. */
  .enfoque { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); align-items: stretch; gap: clamp(40px, 2rem + 3.4vw, 84px); }
  .enfoque__foto { aspect-ratio: auto; position: static; min-height: 100%; }
}
.enfoque__txt > p { color: var(--text-2); font-size: .99rem; margin-top: 14px; max-width: 46ch; }
.h3--grande { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); margin-top: 12px; }
.enfoque__foto {
  border-radius: var(--r-grande); overflow: hidden;
  /* 4/5 era vertical: a 900 px de ancho la foto pedía 1.025 px de alto ella
     sola. Por encima de 980 px la altura la fija el texto (ver más arriba),
     pero por debajo manda esta proporción, y ahí es donde se desbocaba. */
  background: var(--mist-2); aspect-ratio: 4 / 3;
}
.enfoque__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* El trío de esta página no lleva titular propio: en el original esas tres
   tarjetas van sueltas, sin encabezado, y no me invento uno. */
.trio--suelto { margin-top: 0; }

/* Método: mismos .paso que la home, pero en 2x2 con el encabezado al lado.
   Repetir la composición de cuatro columnas sería calcar la sección de Proceso. */
.metodo__in { display: grid; gap: clamp(34px, 2.4rem + 2.4vw, 64px); }
@media (min-width: 1000px) {
  .metodo__in { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(40px, 2rem + 3.4vw, 88px); align-items: start; }
  .metodo__cab { position: sticky; top: calc(var(--nav-h) + 40px); }
}
.metodo__cab .lead { margin-top: 18px; max-width: 34ch; }
.pasos--duo { margin-top: 0; column-gap: clamp(24px, 1.6rem + 2vw, 48px); }
@media (min-width: 620px) { .pasos--duo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pasos--duo { grid-template-columns: repeat(2, 1fr); } }

/* La cara visible: el retrato es el único activo propio de la página, así que
   manda. Va recortado sobre un panel navy, a sangre por abajo. */
.cara {
  display: grid; gap: 0;
  border-radius: var(--r-grande); overflow: hidden;
  background: var(--ink); color: var(--on-ink);
  margin-top: clamp(10px, 1rem + 1vw, 24px);
}
@media (min-width: 900px) {
  /* La altura la marcaba el retrato: a .82fr son 558 px de ancho y, en 2:3,
     836 de alto, 217 más de los que pide el texto. Columna más estrecha. */
  .cara { grid-template-columns: minmax(0, .60fr) minmax(0, 1.40fr); align-items: end; }
}
/* El retrato viene recortado, con alfa real: tiene que flotar sobre el navy del
   panel. Darle fondo propio —aunque sea un degradado— dibuja un rectángulo más
   claro con bordes duros y se ve la caja pegada sobre la caja. Sin fondo.
   El halo va detrás, muy suave, para que el hombro no se funda con el fondo. */
.cara__foto {
  position: relative; align-self: end; isolation: isolate;
}
.cara__foto::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(72% 56% at 50% 72%, rgba(228, 226, 221, .09) 0%, rgba(228, 226, 221, 0) 70%);
}
.cara__foto img { display: block; width: 100%; height: auto; }
/* Solo en la composición a dos columnas: el retrato se acerca al texto y gana
   aire por la izquierda. En apilado la foto ya va centrada en su caja de 340 px
   y moverla la descuadraría. */
@media (min-width: 900px) { .cara__foto img { transform: translateX(6%); } }
@media (max-width: 899px) {
  .cara__foto { max-width: 340px; margin-inline: auto; padding-top: 18px; }
}
.cara__txt {
  padding: clamp(28px, 2rem + 2.4vw, 60px);
  padding-top: clamp(30px, 2rem + 2vw, 56px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
/* El texto no llena una columna de 950 px y dejaba medio panel vacío a la
   derecha. Todos los hijos miden lo mismo y se centran como bloque: así sus
   bordes izquierdos quedan alineados entre sí y el texto sigue en bandera a la
   izquierda. Centrar cada hijo por su ancho propio los dejaría escalonados. */
/* `rem` y no `ch`: la unidad ch depende del tamaño de fuente de CADA elemento,
   así que `46ch` daba 377 px en el kicker y 808 en el titular y los bordes
   izquierdos quedaban escalonados. */
.cara__txt > * { max-width: 32rem; width: 100%; }
@media (min-width: 900px) {
  .cara__txt { padding-inline: clamp(36px, 2rem + 3vw, 72px); }
}
@media (min-width: 900px) { .cara__txt { padding-bottom: clamp(44px, 2.6rem + 3vw, 72px); } }
.cara__txt .h2 { color: var(--on-ink); margin-top: 12px; }
.cara__txt .lead { margin-top: 16px; }
.cara__cita {
  margin-top: clamp(22px, 1.4rem + 1.4vw, 34px);
  padding-top: clamp(22px, 1.4rem + 1.4vw, 34px);
  border-top: 1px solid var(--rule-ink);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.1rem, .98rem + .6vw, 1.42rem);
  font-weight: 400; line-height: 1.34; letter-spacing: -.022em;
  color: var(--on-ink); text-wrap: pretty;
}
.cara__firma { margin-top: clamp(22px, 1.4rem + 1.2vw, 32px); }
.cara__n { font-size: 1.02rem; font-weight: 600; letter-spacing: -.018em; color: var(--on-ink); }
.cara__r { font-size: .83rem; letter-spacing: .02em; color: var(--on-ink-3); margin-top: 5px; }
.cara__acc { margin-top: clamp(24px, 1.6rem + 1.4vw, 36px); display: flex; flex-wrap: wrap; gap: 12px; }

/* Columnas de lista: mismo .bloque, pero el contenido es una lista, no prosa. */
.columna .lista { margin-top: 20px; }
.columna .lista li { font-size: .95rem; }

/* Opiniones: cuatro, no tres, así que 2x2 en escritorio. En móvil hereda el
   carrusel, igual que las tarjetas de tipo. */
.citas { display: grid; gap: var(--hueco); margin-top: clamp(36px, 2.6rem + 2vw, 62px); }
@media (min-width: 760px)  { .citas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1240px) { .citas { grid-template-columns: repeat(4, 1fr); } }
.cita__f { display: grid; gap: 3px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.bloque--ink .cita__f { border-top-color: var(--rule-ink); }
.cita__a { font-size: .92rem; font-weight: 600; letter-spacing: -.016em; color: var(--text); }
.bloque--ink .cita__a { color: var(--on-ink); }
.cita__c { font-size: .8rem; color: var(--text-3); }
.bloque--ink .cita__c { color: var(--on-ink-3); }

/* Carrusel en móvil — mismo patrón documentado para .tipos. */
@media (max-width: 759px) {
  .citas {
    grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: 82%;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    padding-block: 6px 8px; scrollbar-width: none;   /* ver .tipos: anillo de foco */
  }
  .citas::-webkit-scrollbar { display: none; }
  .citas > * { scroll-snap-align: start; }
}

/* Navbar sobre una portada oscura. La barra es transparente arriba del todo (para
   no cortar la superficie de debajo), así que sobre una foto oscura el navy del
   logo y los enlaces desaparece. En esas páginas se invierte hasta que despega;
   al hacer .fija vuelve a pintarse de blanco y recupera el navy. */
.portada-oscura .nav:not(.fija) { color: #fff; }
/* El panel de tipos vive dentro de .nav pero tiene fondo propio claro: si hereda
   la inversión, su texto sale blanco sobre blanco. Se queda fuera. */
.portada-oscura .nav:not(.fija) .mega { color: var(--text); }
.portada-oscura .nav:not(.fija) .marca { color: #fff; }
.portada-oscura .nav:not(.fija) .nav__a { color: rgba(255, 255, 255, .82); }
.portada-oscura .nav:not(.fija) .nav__a:hover,
.portada-oscura .nav:not(.fija) .nav__a[aria-expanded="true"] {
  color: #fff; background: rgba(255, 255, 255, .14);
}
.portada-oscura .nav:not(.fija) .nav__a[aria-current] { color: #fff; }
.portada-oscura .nav:not(.fija) .nav__a[aria-current]::after { background: #fff; opacity: .75; }
.portada-oscura .nav:not(.fija) .btn--nav { background: #fff; color: var(--ink); }
.portada-oscura .nav:not(.fija) .btn--nav:hover { background: var(--bone); }
.portada-oscura .nav:not(.fija) .nav__burger { border-color: rgba(255, 255, 255, .34); }
.portada-oscura .nav:not(.fija) .nav__burger .barra,
.portada-oscura .nav:not(.fija) .nav__burger .barra::before,
.portada-oscura .nav:not(.fija) .nav__burger .barra::after { background: #fff; }
.portada-oscura .nav:not(.fija) .nav__burger:hover { background: rgba(255, 255, 255, .14); }

/* ---------- 21. Simulador de hipoteca ----------
   El modelo de cálculo es el mismo que el del simulador en producción. Lo que
   cambia es la interfaz: allí es un asistente de tres pantallas; aquí es un
   único formulario con el resultado fijo al lado, que es lo que promete su
   propio texto («un resumen en vivo al lado») y ahorra dos saltos de pantalla. */

.sim { display: grid; gap: var(--hueco); margin-top: clamp(32px, 2.4rem + 2vw, 56px); }
@media (min-width: 1000px) {
  .sim { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: start; gap: clamp(28px, 1.6rem + 2vw, 48px); }
}
.sim__form {
  background: var(--sup); border-radius: var(--r-grande);
  padding: clamp(24px, 1.6rem + 2vw, 46px);
  display: grid; gap: clamp(28px, 2rem + 1.6vw, 44px);
}

.campo-grupo { border: 0; padding: 0; margin: 0; display: grid; gap: 20px; }
.campo-grupo + .campo-grupo { padding-top: clamp(26px, 2rem + 1.2vw, 40px); border-top: 1px solid var(--rule); }
.campo-grupo__t {
  display: flex; align-items: baseline; gap: 11px; padding: 0;
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.18rem, 1.04rem + .5vw, 1.46rem);
  font-weight: 400; letter-spacing: -.024em; color: var(--text);
}
.campo-grupo__n { font-family: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .14em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.campo-grupo__d { color: var(--text-2); font-size: .94rem; margin-top: -8px; max-width: 48ch; }

.campo { display: grid; gap: 9px; }
.campo-fila { display: grid; gap: 20px; }
@media (min-width: 560px) { .campo-fila { grid-template-columns: repeat(2, 1fr); } }
.campo__l { font-size: .86rem; font-weight: 600; letter-spacing: -.012em; color: var(--text); }
.campo__l--flex { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.campo__val { font-size: .95rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.campo__caja { position: relative; display: block; }
.campo__i {
  width: 100%; height: 52px; padding: 0 16px;
  border: 1px solid var(--rule); border-radius: 13px;
  background: var(--paper); color: var(--text);
  font: inherit; font-size: 1rem; letter-spacing: -.014em;
  appearance: none; -webkit-appearance: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.seccion--mist .campo__i { background: var(--paper); }
.campo__i:hover { border-color: rgba(4, 0, 32, .26); }
.campo__i:focus-visible { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(4, 0, 32, .12); }
.campo__i[aria-invalid="true"] { border-color: #9B2C2C; box-shadow: 0 0 0 3px rgba(155, 44, 44, .10); }
select.campo__i { padding-right: 42px; cursor: pointer; }
.campo__chev { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--text-3); pointer-events: none; }
.campo__sufijo { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: .95rem; pointer-events: none; }
.campo__i[inputmode="numeric"] { padding-right: 36px; font-variant-numeric: tabular-nums; }
.campo__ayuda { font-size: .84rem; color: var(--text-3); }
.campo__e { font-size: .84rem; font-weight: 500; color: #9B2C2C; }
.campo__e::before { content: "— "; }

/* Control de rango: hay que estilarlo en los dos motores por separado. */
.campo__rango { width: 100%; height: 26px; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.campo__rango::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--mist-2); }
.campo__rango::-moz-range-track { height: 4px; border-radius: 2px; background: var(--mist-2); }
.campo__rango::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px;
  border-radius: 50%; background: var(--ink); border: 3px solid var(--paper);
  box-shadow: 0 1px 4px rgba(4, 0, 32, .3);
}
.campo__rango::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--ink);
  border: 3px solid var(--paper); box-shadow: 0 1px 4px rgba(4, 0, 32, .3);
}
.campo__rango:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

/* Segmentado: tres opciones, una activa. Son <button>, no radios nativos,
   pero llevan role=radiogroup/radio para que se anuncien como tales. */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }

.seg__b {
  flex: 1 1 auto; min-height: 42px; padding: 0 16px; border-radius: 10px;
  /* Con borde se leen como opciones elegibles. Sin él parecían etiquetas y no
     quedaba claro que se pudiera pulsar más que la que ya estaba marcada. */
  border: 1px solid var(--rule);
  background: var(--paper); color: var(--text-2);
  font: inherit; font-size: .89rem; font-weight: 500; letter-spacing: -.012em;
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.seg__b:hover { color: var(--text); border-color: rgba(4, 0, 32, .34); background: var(--mist); }
.seg__b.activo { background: var(--ink); border-color: var(--ink); color: var(--on-ink); font-weight: 600; }
.seg__b.activo:hover { background: var(--ink-2); border-color: var(--ink-2); }
.seg__b:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.interruptor { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor__p {
  flex: none; width: 46px; height: 27px; margin-top: 1px; border-radius: 99px;
  background: var(--mist-2); position: relative;
  transition: background-color .25s var(--ease);
}
.seccion--mist .interruptor__p { background: #DCDAD3; }
.interruptor__p::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
  border-radius: 50%; background: var(--paper);
  box-shadow: 0 1px 3px rgba(4, 0, 32, .26);
  transition: transform .25s var(--ease);
}
.interruptor input:checked + .interruptor__p { background: var(--ink); }
.interruptor input:checked + .interruptor__p::after { transform: translateX(19px); }
.interruptor input:focus-visible + .interruptor__p { outline: 2px solid var(--ink); outline-offset: 3px; }
.interruptor strong { display: block; font-size: .93rem; font-weight: 600; letter-spacing: -.014em; }
.interruptor__d { display: block; font-size: .85rem; color: var(--text-2); margin-top: 3px; }

.sim__acc { display: flex; flex-wrap: wrap; gap: 12px; }

/* Panel de resultado: se queda a la vista mientras se rellena el formulario. */
.sim__panel { position: relative; }
@media (min-width: 1000px) { .sim__sticky { position: sticky; top: calc(var(--nav-h) + 24px); } }
.sim__sticky {
  background: var(--ink); color: var(--on-ink);
  border-radius: var(--r-grande);
  padding: clamp(24px, 1.6rem + 1.6vw, 36px);
  display: grid; gap: 18px;
}
.sim__sticky .eyebrow { color: var(--on-ink-3); }
.sim__sticky .h3 { color: var(--on-ink); margin-top: -8px; }

.cifra { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink); }
.cifra__n {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3rem);
  font-weight: 400; line-height: 1; letter-spacing: -.034em;
  color: #fff; font-variant-numeric: tabular-nums;
}
.cifra__l { font-size: .84rem; color: var(--on-ink-2); }

.desglose { display: grid; gap: 11px; }
.desglose > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.desglose dt { font-size: .89rem; color: var(--on-ink-2); }
.desglose dd { font-size: .95rem; font-weight: 600; color: var(--on-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.desglose__total { padding-top: 11px; border-top: 1px solid var(--rule-ink); }
.desglose__total dt { color: var(--on-ink); font-weight: 500; }

.sim__aviso {
  font-size: .86rem; line-height: 1.5; color: #fff;
  background: rgba(228, 226, 221, .13); border-left: 2px solid var(--bone);
  padding: 11px 14px; border-radius: 0 9px 9px 0;
}
.sim__pie { font-size: .8rem; line-height: 1.55; color: var(--on-ink-3); }
.sim__sticky .btn { justify-self: start; }

/* Escenarios */
.esc { margin-top: clamp(32px, 2.4rem + 2vw, 54px); border-radius: var(--r-grande); background: var(--sup); overflow: hidden; }
.esc__tabs { display: flex; gap: 4px; padding: 7px; background: var(--sup-2); flex-wrap: wrap; }
.esc__t {
  flex: 1 1 auto; min-height: 44px; padding: 0 18px; border: 0; border-radius: 11px;
  background: transparent; color: var(--text-2); font: inherit; font-size: .92rem; font-weight: 500;
  cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease);
}
.esc__t:hover { color: var(--text); }
.esc__t.activo { background: var(--ink); color: var(--on-ink); font-weight: 600; }
.esc__t:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.esc__cuerpo { padding: clamp(20px, 1.4rem + 1.4vw, 34px); }
.esc__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; }
.esc__fila + .esc__fila { border-top: 1px solid var(--rule); }
.esc__fila span { color: var(--text-2); font-size: .93rem; }
.esc__fila strong { font-weight: 600; font-size: 1rem; letter-spacing: -.016em; font-variant-numeric: tabular-nums; text-align: right; }

.nota-pie { margin-top: 24px; font-size: .86rem; color: var(--text-3); max-width: 62ch; }
.portada__nota { font-size: .84rem; color: rgba(255, 255, 255, .78); margin-top: 4px; }
.metodo__acc { margin-top: 26px; }

/* ---------- 22. Acabado de páginas interiores ----------
   Ajustes acotados a los componentes propios de las interiores. La home no se
   toca: está cerrada y validada. */

/* Tarjetas que solo llevan texto: más aire que las que llevan foto. En la home
   casi todas las tarjetas tienen imagen y el padding de 40 va sobrado; aquí una
   columna de bullets con ese mismo padding se ve apretada contra el borde. */
.columna { padding: clamp(28px, 1.8rem + 1.6vw, 48px); }
.columna .h3 { margin: 0; }
.columna .lista { margin-top: clamp(20px, 1.2rem + .8vw, 28px); }
.columna .lista li { gap: 13px; align-items: flex-start; }
.columna .lista li + li { padding-top: 13px; border-top: 1px solid var(--rule); }
.bloque--ink .lista li + li { border-top-color: var(--rule-ink); }

/* Opiniones: la cita manda, la atribución acompaña. Antes compartían peso. */
.citas .cita { padding: clamp(28px, 1.8rem + 1.6vw, 44px); min-height: 0; gap: 0; }
.citas .cita__n {
  font-size: .68rem; letter-spacing: .18em; margin-bottom: clamp(20px, 1.4rem + 1vw, 32px);
}
.citas .cita p { flex: 1 1 auto; }
.cita__f {
  margin-top: clamp(24px, 1.6rem + 1.2vw, 36px);
  padding-top: clamp(16px, 1rem + .6vw, 22px);
}

/* Quiénes somos: la lista de cinco puntos como pieza editorial, con filete
   entre ítems en vez de solo separación. */
.enfoque .lista { margin-top: clamp(26px, 1.6rem + 1.2vw, 36px); gap: 0; }
.enfoque .lista li { padding: 14px 0; align-items: flex-start; }
.enfoque .lista li + li { border-top: 1px solid var(--rule); }
.enfoque .lista li:first-child { padding-top: 0; }
.enfoque .lista li:last-child { padding-bottom: 0; }

/* El trío suelto necesita separarse de la sección anterior: sin cabecera propia
   quedaba pegado al canto superior de su sección. */
.trio--suelto { margin-top: 0; }

/* Cabeceras de sección: un punto más de aire antes del contenido. */
.seccion .cab--split + .trio,
.seccion .cab--split + .citas,
.seccion .cab--split + .esc { margin-top: clamp(40px, 2.6rem + 2.4vw, 68px); }

/* El panel de resultado del simulador con el mismo aire que las tarjetas. */
.sim__sticky { gap: clamp(18px, 1.2rem + .6vw, 24px); }

/* ---------- 23. Pasos premium (interiores) ----------
   La escalera de pasos de la home es cuatro columnas estrechas con un numeral
   diminuto: funciona allí porque el texto es corto y la foto manda. En una
   interior, con dos columnas anchas, ese mismo numeral de 11 px deja la pieza
   sin jerarquía. Aquí el número es el ancla visual. */

.pasos--duo .paso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(18px, 1rem + 1.2vw, 30px);
  align-items: start;
  padding: clamp(26px, 1.6rem + 1.2vw, 38px) 0 clamp(26px, 1.6rem + 1.2vw, 38px);
  border-top: 1px solid var(--rule-ink);
  transition: border-color .4s var(--ease);
}
.pasos--duo .paso__n {
  grid-row: 1 / span 2; align-self: start;
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.35rem);
  font-weight: 400; line-height: .92; letter-spacing: -.035em;
  color: var(--on-ink-3);
  transition: color .4s var(--ease);
  min-width: 1.9ch;
}
.pasos--duo .paso .h3 { margin-top: -2px; }
.pasos--duo .paso p { margin-top: 9px; max-width: 42ch; }
/* En la home el último paso se marca en hueso porque es el destino. Aquí no hay
   destino —son palancas o fases—, así que lo que se marca es el que señalas. */
.pasos--duo .paso:last-child { border-top-color: var(--rule-ink); }
.pasos--duo .paso:last-child .paso__n { color: var(--on-ink-3); }
.pasos--duo .paso:hover { border-top-color: var(--bone); }
.pasos--duo .paso:hover .paso__n { color: var(--bone); }

/* El filete de remate de la primera fila va como border-top, no como ::before.
   Un pseudoelemento aquí entra en la rejilla como una celda más y descolocaba
   numeral, título y texto: el número acababa en su propia fila y el párrafo en
   la columna de al lado. */
@media (min-width: 620px) {
  .pasos--duo { column-gap: clamp(30px, 2rem + 2.4vw, 64px); }
  .pasos--duo .paso:nth-child(-n+2) { border-top-color: var(--bone); }
}
@media (max-width: 619px) {
  .pasos--duo .paso:first-child { border-top-color: var(--bone); }
}
.seccion:not(.seccion--ink) .pasos--duo .paso:nth-child(-n+2) { border-top-color: var(--ink); }

/* Cuando la escalera va sobre superficie clara (página de la calculadora usa
   navy, pero esto deja la variante lista para las que no). */
.seccion:not(.seccion--ink) .pasos--duo .paso { border-top-color: var(--rule); }
.seccion:not(.seccion--ink) .pasos--duo .paso__n { color: var(--text-3); }
.seccion:not(.seccion--ink) .pasos--duo .paso:hover { border-top-color: var(--ink); }
.seccion:not(.seccion--ink) .pasos--duo .paso:hover .paso__n { color: var(--ink); }
.seccion:not(.seccion--ink) .pasos--duo .paso p { color: var(--text-2); }
.seccion:not(.seccion--ink) .pasos--duo .paso .h3 { color: var(--text); }

/* ---------- 24. Confianza y cumplimiento ----------
   Tercer intento. Los dos anteriores fallaban por lo mismo: era otra rejilla de
   tres cajas en una página que ya tiene dos, y el disclaimer colgaba suelto.
   Ahora la sección entera va en navy —hace de bisagra antes del cierre—, las
   garantías son tres columnas numeradas sin caja, y el disclaimer es una banda
   ancha al pie, clara sobre el navy, que remata en vez de colgar. */
.garantias {
  display: grid; gap: clamp(28px, 1.8rem + 2vw, 52px);
  margin-top: clamp(40px, 2.6rem + 2.4vw, 68px);
}
@media (min-width: 760px) { .garantias { grid-template-columns: repeat(3, 1fr); } }
.garantia {
  display: grid; align-content: start; gap: 0;
  padding-top: clamp(20px, 1.2rem + 1vw, 28px);
  border-top: 1px solid var(--rule-ink);
  transition: border-color .4s var(--ease);
}
.garantia:hover { border-top-color: var(--bone); }
.garantia__n {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
  font-weight: 400; line-height: 1; letter-spacing: -.035em;
  color: var(--on-ink-3); margin-bottom: clamp(18px, 1.2rem + 1vw, 26px);
  transition: color .4s var(--ease);
}
.garantia:hover .garantia__n { color: var(--bone); }
.garantia .eyebrow { color: var(--on-ink-3); }
.garantia .h3 { color: var(--on-ink); margin-top: 9px; }
.garantia > p:last-child { color: var(--on-ink-2); font-size: .95rem; line-height: 1.58; margin-top: 11px; }

.disclaimer {
  margin-top: clamp(44px, 2.8rem + 2.6vw, 76px);
  padding: clamp(26px, 1.8rem + 1.6vw, 40px);
  border-radius: var(--r-bloque);
  background: rgba(228, 226, 221, .07);
  display: grid; gap: clamp(20px, 1.4rem + 1.2vw, 32px);
}
@media (min-width: 900px) {
  .disclaimer { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(32px, 2rem + 2.4vw, 64px); }
}
.disclaimer .h3 { color: var(--on-ink); margin-top: 10px; }
.disclaimer .lista { margin-top: 0; }
.disclaimer .lista li { font-size: .94rem; line-height: 1.56; color: var(--on-ink-2); }
.disclaimer .lista li + li { margin-top: 13px; }

/* ---------- 25. Catálogo de tipos ----------
   No son las tarjetas de la home: allí el tipo es solo foto + nombre, aquí cada
   uno lleva kicker, titular, descripción y enlace. Foto arriba, texto debajo,
   y toda la tarjeta clicable sin anidar enlaces (el <a> del título es el real;
   la foto lo repite con tabindex=-1 y aria-hidden para no duplicar el foco). */
.catalogo {
  display: grid; gap: var(--hueco);
  margin-top: clamp(40px, 2.6rem + 2.4vw, 68px);
}
@media (min-width: 640px)  { .catalogo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .catalogo { grid-template-columns: repeat(3, 1fr); } }

.catal {
  position: relative; display: flex; flex-direction: column;
  background: var(--sup); border-radius: var(--r-bloque); overflow: hidden;
  transition: background-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.catal:hover { background: var(--sup-2); transform: translateY(-3px); box-shadow: var(--sombra-hov); }
.catal__foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist-2); }
.catal__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease); }
.catal:hover .catal__foto img { transform: scale(1.04); }
.catal__txt {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: clamp(22px, 1.4rem + 1.2vw, 32px);
}
.catal__txt .h3 { margin-top: 11px; font-size: clamp(1.2rem, 1.05rem + .62vw, 1.52rem); }
/* El enlace se estira sobre toda la tarjeta: un solo destino, un solo tabulador. */
.catal__a { color: inherit; }
.catal__a::after { content: ""; position: absolute; inset: 0; }
.catal__a:hover { color: var(--text); }
.catal__txt > p { color: var(--text-2); font-size: .95rem; line-height: 1.58; margin-top: 10px; }
.catal__ver { margin-top: auto; padding-top: clamp(18px, 1.2rem + .8vw, 26px); align-self: flex-start; }
.catal:hover .catal__ver .ico { transform: translateX(4px); }

/* Carrusel en móvil: nueve tarjetas, muy por encima del umbral de cuatro. */
@media (max-width: 759px) {
  .catalogo {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    padding-block: 6px 8px; scrollbar-width: none;   /* ver .tipos: anillo de foco */
  }
  .catalogo::-webkit-scrollbar { display: none; }
  .catalogo > * { scroll-snap-align: start; }
}

.cab__extra { color: var(--text-2); font-size: .96rem; margin-top: 12px; max-width: 46ch; }

/* Invitación a la calculadora: texto y foto a la misma altura, como el bloque
   de Quiénes somos. La foto NO lleva proporción fija, la marca el texto. */
.invita {
  display: grid; gap: clamp(26px, 1.8rem + 1.6vw, 44px);
  margin-top: clamp(36px, 2.4rem + 2vw, 60px);
  background: var(--sup); border-radius: var(--r-grande); overflow: hidden;
}
@media (min-width: 980px) {
  /* Más foto y menos caja de texto: con tres frases, una columna de texto ancha
     deja hueco muerto. La foto absorbe el espacio sobrante. */
  .invita { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: stretch; gap: 0; }
}
.invita__txt {
  padding: clamp(28px, 1.8rem + 2vw, 48px);
  display: flex; flex-direction: column; justify-content: center;
}
.invita__txt > * { max-width: 40ch; }
.invita__txt > p { color: var(--text-2); font-size: .98rem; margin-top: 14px; max-width: 44ch; }
.invita__acc { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 1.6rem + 1.2vw, 34px); }
.invita__foto { position: relative; background: var(--mist-2); min-height: 260px; }
.invita__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 980px) {
  /* La imagen se saca del flujo: si no, su `height:100%` sobre una caja sin
     altura resuelve a `auto`, la proporción 4:5 manda y la sección se iba a
     805 px para tres frases de texto. */
  .invita__foto { min-height: 0; overflow: hidden; }
  .invita__foto img { position: absolute; inset: 0; }
}
@media (max-width: 979px) { .invita__foto { order: -1; aspect-ratio: 16 / 9; min-height: 0; } }

/* ---------- 26. Páginas de tipo ---------- */
.comp__sub, .columna__sub {
  color: var(--text-2); font-size: .93rem; line-height: 1.5; margin-top: 8px;
  padding-bottom: clamp(16px, 1rem + .8vw, 22px);
  border-bottom: 1px solid var(--rule);
}
.bloque--ink .comp__sub, .bloque--ink .columna__sub { color: var(--on-ink-2); border-bottom-color: var(--rule-ink); }
.comp .lista, .columna .lista { margin-top: clamp(18px, 1.2rem + .8vw, 24px); }
.comp { padding: clamp(26px, 1.7rem + 1.5vw, 42px); }
.comp .h3 { margin-top: 11px; }

.requisitos { display: grid; gap: var(--hueco); margin-top: clamp(40px, 2.6rem + 2.4vw, 68px); }
@media (min-width: 680px)  { .requisitos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .requisitos { grid-template-columns: repeat(4, 1fr); } }
/* Cuatro bloques de requisitos: por encima del umbral, carrusel en móvil. */
@media (max-width: 679px) {
  .requisitos {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    padding-block: 6px 8px; scrollbar-width: none;   /* ver .tipos: anillo de foco */
  }
  .requisitos::-webkit-scrollbar { display: none; }
  .requisitos > * { scroll-snap-align: start; }
}

/* La reseña lleva titular entrecomillado y cuerpo: dos niveles, no uno. */
.cita__cuerpo {
  font-family: var(--f-cuerpo, inherit);
  font-size: .94rem; line-height: 1.6; color: var(--text-2);
  margin-top: clamp(14px, 1rem + .6vw, 20px);
}
.bloque--ink .cita__cuerpo { color: var(--on-ink-2); }

/* ---------- 27. 404 ----------
   Sin foto: una página de error no debe pesar ni distraer. El numeral hace de
   imagen y el resto es una salida clara hacia donde sí hay contenido. */
.e404 {
  background: var(--bone); --sup: var(--paper); --sup-2: #FAF9F5;
  min-height: 100svh;
  /* El relleno de arriba y el de abajo son el MISMO valor más la altura de la
     barra. Así el bloque queda centrado en el hueco que de verdad se ve, no en
     el rectángulo completo que incluye lo que tapa la barra. Con 40/56 de
     partida quedaba 74 px arriba y 90 abajo: centrado sobre el papel y
     descentrado en la pantalla. */
  padding: calc(var(--nav-h) + clamp(28px, 2rem + 2vw, 56px)) 0 clamp(28px, 2rem + 2vw, 56px);
  display: grid; place-items: center;
  text-align: center;
}
.e404__in { max-width: 44rem; margin-inline: auto; }
.e404__n {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  font-weight: 400; line-height: .86; letter-spacing: -.055em;
  color: var(--ink); opacity: .13; margin: clamp(6px, 1vw, 14px) 0 clamp(-18px, -1.4vw, -8px);
  font-variant-numeric: tabular-nums;
}
.e404 .display { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.4rem); }
.e404 .lead { margin: 18px auto 0; max-width: 42ch; }
.e404__acc { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(26px, 1.8rem + 1.4vw, 38px); }
.e404__mapa {
  margin-top: clamp(40px, 2.6rem + 2.4vw, 64px);
  padding-top: clamp(22px, 1.4rem + 1.2vw, 32px);
  border-top: 1px solid rgba(4, 0, 32, .14);
}
.e404__mapa ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 14px; }
.e404__mapa a {
  font-size: .95rem; font-weight: 500; color: var(--text);
  border-bottom: 1px solid rgba(4, 0, 32, .22); padding-bottom: 2px;
}
.e404__mapa a:hover { border-bottom-color: var(--ink); }

/* ---------- 28. Canales de contacto ---------- */
.canales { display: grid; gap: var(--hueco); margin-top: clamp(40px, 2.6rem + 2.4vw, 68px); }
@media (min-width: 900px) { .canales { grid-template-columns: 1.25fr 1fr 1fr; align-items: stretch; } }
.canal {
  display: flex; flex-direction: column; gap: 9px;
  padding: clamp(24px, 1.6rem + 1.4vw, 38px);
  border-radius: var(--r-bloque); background: var(--sup); color: var(--text);
  transition: background-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.canal:hover { background: var(--sup-2); transform: translateY(-3px); box-shadow: var(--sombra-hov); }
.canal__v {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.18rem, 1.02rem + .6vw, 1.5rem);
  font-weight: 400; letter-spacing: -.026em; line-height: 1.15;
}
.canal__d { font-size: .93rem; line-height: 1.55; color: var(--text-2); }
.canal__ir { margin-top: auto; padding-top: clamp(16px, 1rem + .8vw, 24px); }
.canal--destacado {
  background: var(--ink); color: var(--on-ink);
  --btn-fondo: var(--bone); --btn-texto: var(--ink);
}
.canal--destacado:hover { background: var(--ink); box-shadow: inset 0 0 0 1px rgba(228,226,221,.30), var(--sombra-hov-ink); }
.canal--destacado .eyebrow { color: var(--on-ink-3); }
.canal--destacado .canal__d { color: var(--on-ink-2); }
.canal--destacado .canal__ir { color: var(--bone); border-bottom-color: rgba(228,226,221,.4); }
.canal:hover .canal__ir .ico { transform: translateX(4px); }

/* Aviso al pie de la explicación: es un consejo, no un párrafo más. */
.aviso-nota {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: clamp(32px, 2rem + 2vw, 52px);
  padding: clamp(20px, 1.3rem + 1vw, 28px) clamp(20px, 1.3rem + 1.2vw, 30px);
  border-radius: var(--r-bloque);
  background: var(--sup-2);
  border-left: 2px solid var(--ink);
}
.aviso-nota .ico { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--ink); opacity: .6; }
.aviso-nota p { font-size: .95rem; line-height: 1.6; color: var(--text-2); max-width: 74ch; }

/* ---------- 29. Páginas legales ----------
   Documento largo de leer, no una landing: medida de lectura corta, índice
   lateral pegajoso y jerarquía plana. Va sobre hueso para que se distinga de
   las páginas comerciales sin salirse de la paleta. */
.legal {
  background: var(--bone); --sup: var(--paper); --sup-2: #FAF9F5;
  padding-top: calc(var(--nav-h) + clamp(30px, 2rem + 2.4vw, 56px));
}
.legal__cab { max-width: 46rem; margin-bottom: clamp(44px, 2.8rem + 3vw, 80px); }
.legal__cab .display { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem); margin-top: 14px; }
.legal__cab .lead { margin-top: 18px; max-width: 40ch; }
.legal__fecha {
  margin-top: 22px; font-size: .82rem; letter-spacing: .04em;
  color: var(--text-3); padding-top: 16px;
  border-top: 1px solid rgba(4, 0, 32, .14); display: inline-block;
}
.legal__cuerpo { display: grid; gap: clamp(34px, 2.4rem + 2vw, 56px); }
@media (min-width: 1000px) {
  .legal__cuerpo { grid-template-columns: minmax(0, .3fr) minmax(0, .7fr); gap: clamp(40px, 2rem + 4vw, 100px); align-items: start; }
  .legal__ind { position: sticky; top: calc(var(--nav-h) + 32px); }
}
.legal__ind ul { margin-top: 16px; display: grid; gap: 11px; }
.legal__ind a {
  font-size: .9rem; line-height: 1.4; color: var(--text-2);
  display: inline-block; border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.legal__ind a:hover { color: var(--text); border-bottom-color: var(--ink); }
/* Sección que se está leyendo. El marcador es un filete a la izquierda, no un
   fondo: no desplaza el texto ni rompe la alineación de la columna. */
.legal__ind li { position: relative; }
.legal__ind a.activo { color: var(--text); font-weight: 600; }
.legal__ind a.activo::before {
  content: ""; position: absolute; left: -16px; top: .22em; bottom: .22em;
  width: 2px; border-radius: 2px; background: var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
  .legal__ind a { transition: color .25s var(--ease); }
}

.legal__txt { max-width: 40rem; }
.legal__s + .legal__s {
  margin-top: clamp(40px, 2.6rem + 2.4vw, 68px);
  padding-top: clamp(36px, 2.4rem + 2vw, 60px);
  border-top: 1px solid rgba(4, 0, 32, .14);
}
.legal__h { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); }
.legal__txt p { margin-top: 16px; color: var(--text-2); line-height: 1.68; font-size: .98rem; }
.legal__txt .h3 { margin-top: clamp(26px, 1.6rem + 1.2vw, 36px); font-size: 1.1rem; }
.legal__txt strong { color: var(--text); font-weight: 600; }
.legal__txt a { color: var(--text); border-bottom: 1px solid rgba(4, 0, 32, .3); padding-bottom: 1px; }
.legal__txt a:hover { border-bottom-color: var(--ink); }

.lista--legal { margin-top: 18px; gap: 0; }
.lista--legal li {
  display: list-item; list-style: none; position: relative;
  padding: 11px 0 11px 20px; font-size: .97rem; line-height: 1.62; color: var(--text-2);
}
.lista--legal li + li { border-top: 1px solid rgba(4, 0, 32, .1); }
.lista--legal li::before {
  content: ""; position: absolute; left: 0; top: 1.5em;
  width: 6px; height: 1px; background: var(--ink); opacity: .45;
}
.legal__nota {
  margin-top: 22px; padding: clamp(16px, 1rem + .8vw, 22px) clamp(18px, 1.1rem + .9vw, 24px);
  background: rgba(4, 0, 32, .045); border-left: 2px solid var(--ink);
  border-radius: 0 10px 10px 0; font-size: .93rem;
}
.legal__destacado {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); font-weight: 400;
  letter-spacing: -.024em; color: var(--text) !important; line-height: 1.35;
}
.ficha { margin-top: 18px; display: grid; }
.ficha > div {
  display: grid; gap: 3px; padding: 12px 0;
  border-top: 1px solid rgba(4, 0, 32, .1);
}
@media (min-width: 540px) { .ficha > div { grid-template-columns: 11rem 1fr; gap: 16px; align-items: baseline; } }
.ficha dt { font-size: .83rem; font-weight: 600; letter-spacing: .03em; color: var(--text-3); text-transform: uppercase; }
.ficha dd { margin: 0; font-size: .98rem; color: var(--text); }
.tabla-legal { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: .93rem; }
.tabla-legal th {
  text-align: left; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600; padding: 0 14px 11px 0;
  border-bottom: 1px solid rgba(4, 0, 32, .22);
}
.tabla-legal td { padding: 14px 14px 14px 0; border-bottom: 1px solid rgba(4, 0, 32, .1); color: var(--text-2); line-height: 1.55; vertical-align: top; }
.tabla-legal tr td:last-child { padding-right: 0; color: var(--text-3); font-size: .89rem; }
@media (max-width: 599px) {
  .tabla-legal, .tabla-legal tbody, .tabla-legal tr, .tabla-legal td { display: block; width: 100%; }
  .tabla-legal thead { display: none; }
  .tabla-legal tr { padding: 14px 0; border-bottom: 1px solid rgba(4, 0, 32, .1); }
  .tabla-legal td { border: 0; padding: 0; }
  .tabla-legal tr td:last-child { margin-top: 6px; }
}
/* Hueco por rellenar: tiene que cantar, no esconderse. */
mark.pend {
  background: #FFF3C4; color: #5C4600; font-weight: 600;
  padding: 1px 7px; border-radius: 5px; font-size: .92em;
  box-decoration-break: clone;
}
.pie__bajo p a { color: var(--on-ink-2); border-bottom: 1px solid transparent; padding-bottom: 1px; }
.pie__bajo p a:hover { color: var(--on-ink); border-bottom-color: var(--on-ink-3); }

/* Línea inferior del pie: tres piezas separadas por puntos, no apelotonadas. */
.pie__bajo {
  margin-top: clamp(40px, 2.8rem + 2.4vw, 68px);
  padding-top: clamp(22px, 1.4rem + 1.2vw, 30px);
  border-top: 1px solid var(--rule-ink);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px 28px;
}
.pie__bajo p {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  font-size: .85rem; color: var(--on-ink-3); margin: 0;
}
.pie__bajo .pt {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--on-ink-3); opacity: .55; flex: none;
}

/* Variante del bloque explicativo para las páginas de tipo. La foto de esos
   tipos es apaisada (16:10) y, metida en una columna que iguala la altura del
   texto, quedaba un recorte de 535x669: muy alta y muy cortada. Aquí se le da
   su proporción natural y se ancla arriba, así la sección la mide el texto. */
@media (min-width: 980px) {
  .enfoque--tipo { align-items: start; }
  .enfoque--tipo .enfoque__foto {
    aspect-ratio: 5 / 4; min-height: 0;
    position: sticky; top: calc(var(--nav-h) + 28px);
  }
}


/* ---------- 30. Carrusel arrastrable ----------
   El scroll táctil ya lo da el navegador y es mejor que cualquier imitación en
   JS: tiene inercia nativa, respeta los ajustes del sistema y no se pelea con
   el gesto de «atrás». Lo que falta es el ratón y el lápiz, que en un contenedor
   con overflow solo pueden usar la rueda. Esto añade agarrar y tirar para esos
   dos, y deja el táctil intacto. */
.arrastrable { cursor: grab; }
.arrastrable.agarrando { cursor: grabbing; }
/* Durante el arrastre el navegador no debe interpretar el gesto como selección
   de texto ni como clic en la tarjeta de debajo. */
.arrastrable.agarrando, .arrastrable.agarrando * { user-select: none; }
.arrastrable.agarrando a { pointer-events: none; }

/* Barra de avance. Hace visible que hay más tarjetas a la derecha sin añadir
   flechas ni puntos, y da el destino de un vistazo mientras se arrastra. */
.pista {
  position: relative; height: 2px; margin-top: 16px;
  background: var(--rule); border-radius: 2px; overflow: hidden;
}
.pista__b {
  position: absolute; inset: 0 auto 0 0;
  width: var(--pista-w, 30%);
  transform: translateX(var(--pista-x, 0));
  background: var(--ink); border-radius: 2px;
}
.on-ink .pista, .bloque--ink .pista { background: var(--rule-ink); }
.on-ink .pista__b, .bloque--ink .pista__b { background: var(--bone); }
@media (min-width: 760px) { .pista { display: none; } }


/* ---------- 31. Microinteracciones ----------
   Regla de la casa: nada se mueve más de 4 px ni dura más de .5 s. El objetivo
   es que la página responda al dedo, no que se note la animación. */

/* Respuesta al pulsar. En táctil no hay hover, y sin esto nada acusa el toque. */
.btn:active, .enlace:active, .tipo:active, .cajon__rapido a:active { transform: scale(.985); }
.btn { transition: background-color .3s var(--ease), color .3s var(--ease),
                   border-color .3s var(--ease), transform .18s var(--ease); }

/* La flecha de los botones se adelanta un poco antes que el resto. */
.btn .ico { transition: transform .4s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }

/* Subrayado que se despliega desde la izquierda en vez de aparecer de golpe. */
.enlace { position: relative; }
.enlace::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .42s var(--ease);
}
.enlace:hover::after, .enlace:focus-visible::after { transform: scaleX(1); }

/* Enlaces del pie: el mismo gesto, más discreto.

   El menú de escritorio NO lleva este subrayado, y es una decisión, no un olvido.
   Esos enlaces ya tienen su propia respuesta al hover —la pastilla de fondo— y
   el filete inferior es el marcador de PÁGINA ACTUAL. Poniendo los dos, pasar el
   ratón por «Calcula tu hipoteca» la dejaba con el mismo subrayado que la página
   en la que estás: dos cosas distintas dichas con el mismo signo. Un lenguaje
   por estado: pastilla = estás encima, filete = estás aquí.

   En el pie no hay pastilla, así que allí el subrayado sí es la única respuesta
   y se queda. El enlace de página actual del pie se marca solo con color, de
   modo que tampoco choca. */
.pie__nav a { position: relative; }
.pie__nav a:not([aria-current="page"])::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; opacity: .5;
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.pie__nav a:not([aria-current="page"]):hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .btn:active, .enlace:active, .tipo:active, .cajon__rapido a:active,
  .mcard:active, .nav__burger:active { transform: none; }
  .enlace::after, .pie__nav a::after { transition: none; }
}