/* =============================================================================
   MAYORMA ASESORES — sistema visual
   -----------------------------------------------------------------------------
   Un solo sistema para todas las páginas. Lo que cambia entre ellas es el
   contenido, nunca el vocabulario visual.

   Reglas de la casa:
     · El blanco domina. El espacio separa; los fondos de color, casi nunca.
     · Negro #050505 para texto y acciones. Verde #D7FFE0 como apoyo.
     · El amarillo sólo dice una cosa: la consulta inicial es gratuita.
     · Ante la duda entre añadir y quitar, se quita.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tipos */

/* Tipografía del sistema: San Francisco en Apple, Segoe UI en Windows,
   Roboto en Android. No se distribuye ninguna fuente de terceros. */

/* --------------------------------------------------------------- 2. Tokens */

:root {
  /* ======================================================================
     COLOR · v8.3
     ----------------------------------------------------------------------
     POR QUÉ CAMBIA
     La paleta anterior era negro + cian. El logotipo de Mayorma es azul
     marino + oro, así que la web iba por un lado y la marca por otro. Esta
     paleta es la del logotipo: azul petróleo para las acciones, oro para el
     acento cálido, y un marfil de fondo en lugar del blanco de quirófano.

     TODOS LOS VALORES ESTÁN CALCULADOS, NO ELEGIDOS A OJO
     Cada color que lleva texto encima se comprobó contra los TRES fondos
     claros (marfil, beige y blanco) antes de escribirlo aquí. Los que no
     llegaban —el oro y la salvia, que en su tono original dan 2,1:1 y
     1,7:1— tienen una variante oscura de la misma familia, igual que se
     hizo en su día con el cian. El ratio va anotado en cada línea.
     ====================================================================== */

  /* ---- Superficies ---------------------------------------------------
     El fondo deja de ser blanco puro. Un marfil cálido hace dos cosas: da
     la sensación acogedora que se pedía, y hace que las tarjetas BLANCAS
     destaquen solas, sin necesidad de más sombra. El efecto de capas sale
     de la diferencia de temperatura, no de un borde más grueso. */
  --color-bg:      #F7F5F1;   /* marfil cálido: el lienzo */
  --color-ivory:   #F7F5F1;   /* nombre antiguo, mismo valor */
  --color-cream:   #F1EEE8;   /* beige: alternancia de secciones */
  --color-card:    #FFFFFF;   /* tarjetas: ahora el blanco es el que resalta */
  --color-surface: #EDEAE4;   /* huecos de fotografía */

  /* ---- Tinta y texto -------------------------------------------------- */
  --color-ink:     #1E2430;   /* grafito profundo    14,3:1 sobre marfil */
  --color-ink-2:   #294D7E;   /* hover de superficies de marca */
  --color-text:    var(--color-ink);
  --color-text-2:  #5F6773;   /* gris cálido          5,3 / 4,9 / 5,7:1 */
  /* El terciario se elimina a propósito: ningún gris más claro que el de
     arriba llega a 4,5:1 sobre el beige. Antes que inventar uno que falle,
     se usa el mismo para las etiquetas menudas. */
  --color-text-3:  #5F6773;

  /* ---- Marca: azul petróleo ------------------------------------------
     Es el color de las acciones. Blanco encima da 11,5:1. */
  --color-brand:    #1F3A5F;  /* base               10,6:1 sobre marfil */
  --color-brand-2:  #294D7E;  /* hover: +20 por canal, se ve de verdad */
  --color-brand-3:  #1B3353;  /* pulsado */
  /* Azul profundo, sólo para la gran banda de cierre. Blanco encima da
     13,1:1 y el oro 5,6:1, así que el botón dorado se lee sin forzar. */
  --color-brand-deep: #17324D;
  --color-slate:    #1F3A5F;  /* nombre antiguo, mismo valor */

  /* ---- Acento cálido: oro --------------------------------------------
     El oro del logotipo. En su tono original SÓLO vale como superficie con
     texto oscuro encima (grafito 6,7:1). Para texto o líneas hay que bajar
     de tono, y por eso hay tres. */
  --color-gold:       #C9A646;  /* superficie; grafito encima    6,7:1 */
  --color-acento:     #A48530;  /* líneas, iconos, texto grande  3,2:1 */
  --color-acento-2:   #A48530;
  --color-acento-3:   #C9A646;
  --color-acento-texto: #816926; /* texto pequeño     4,8 / 4,6 / 5,3:1 */

  /* ---- Apoyo: verde salvia -------------------------------------------
     Aporta la cercanía. Mismo caso que el oro: superficie sí, línea fina
     no, y por eso tiene su variante. */
  --color-ghost:    #A8C3B0;   /* superficie; grafito encima    8,2:1 */
  --color-ghost-2:  #97B6A1;   /* su hover */
  --color-sage-line:#659373;   /* borde perceptible             3,2:1 */
  --color-sage-text:#50745B;   /* texto                         4,8:1 */

  /* ---- Destacado de la consulta gratuita ------------------------------
     Era amarillo #FFD400, que junto a esta paleta chirriaba. Pasa al oro de
     la marca, con el texto en grafito: 6,7:1 y mucho más sobrio. Sigue
     siendo el único sitio donde aparece. */
  --color-yellow:  #C9A646;
  /* Amarillo de Correos, sólo para el distintivo de la consulta gratuita.
     Grafito encima da 10,86:1. Es el único amarillo saturado de la web y
     sigue apareciendo en un solo sitio por página. */
  --color-correos: #FFD400;

  /* ---- Colores que NO son nuestros y no se tocan ---------------------- */
  --color-wa:      #25D366;   /* verde oficial de WhatsApp */
  --color-google:  #FBBC04;   /* dorado de las estrellas de Google */

  /* ---- Líneas, sombras y estados -------------------------------------- */
  --color-border:   rgba(30, 36, 48, 0.10);
  --color-border-2: rgba(30, 36, 48, 0.20);
  --hover-wash:     rgba(31, 58, 95, 0.07);   /* «estoy encima» */
  --hover-wash-2:   rgba(31, 58, 95, 0.13);   /* pulsado */

  --card-bg:     #FFFFFF;
  --card-bd:     rgba(30, 36, 48, 0.07);
  --card-bd-2:   rgba(30, 36, 48, 0.14);
  /* Sombras en dos capas y teñidas de azul, no de negro: sobre un fondo
     cálido una sombra neutra se ve gris sucio. */
  --shadow-card: 0 1px 2px rgba(31, 58, 95, 0.05),
                 0 10px 28px -14px rgba(31, 58, 95, 0.16);
  --shadow-lift: 0 2px 4px rgba(31, 58, 95, 0.07),
                 0 20px 44px -18px rgba(31, 58, 95, 0.24);
  --shadow-btn:  0 1px 2px rgba(31, 58, 95, 0.14),
                 0 8px 18px -8px rgba(31, 58, 95, 0.36);

  /* ---- Sobre el grafito del pie ---------------------------------------- */
  --on-ink-2:      #B9BFC9;                    /* 8,6:1 sobre grafito */
  --on-ink-border: rgba(255, 255, 255, 0.16);

  /* ---- Medida y espacio --------------------------------------------- */
  --container: 1200px;
  --gutter:    clamp(1.25rem, 4.5vw, 3.5rem);
  --measure:   64ch;          /* línea de lectura: 60-65 caracteres */

  --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;
  /* El escalón grande (titular -> rejilla, y hueco de las columnas) era fijo en
     64 px. En escritorio está bien; en un móvil de 375 px abría un agujero. Se
     vuelve fluido: 40 px en el teléfono, los mismos 64 a partir de 1080. */
  --space-8: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  --space-9:  clamp(3rem, 2.25rem + 3vw, 4.5rem);

  /* Separación entre secciones. Dos bandas seguidas suman el doble: 88 px en
     móvil, 176 px en escritorio. Ese es el ritmo de toda la web, y es lo que
     hace que respire: el aire separa, no los fondos de color. */
  --band: clamp(2.5rem, 1.5rem + 4vw, 4.75rem);

  --header-h: 68px;

  /* ---- Radios -------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  /* ---- Tipografía ---------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
          'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-h1:      clamp(2.5rem, 1.35rem + 3.6vw, 4.25rem);   /* 40 -> 68 */
  --fs-h2:      clamp(1.8rem, 1.3rem + 1.9vw, 2.875rem);   /* 29 -> 46 */
  --fs-h3:      clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.32vw, 1.3125rem); /* 18 -> 21 */
  --fs-body:    1.0625rem;                                  /* 17 */
  --fs-small:   0.9375rem;                                  /* 15 */
  --fs-tiny:    0.8125rem;                                  /* 13 */
  --fs-label:   0.75rem;                                    /* 12 */

  /* Cuanto mayor es el cuerpo, más apretado el interletrado. Es lo que
     separa una escala cuidada de una automática. */
  --tr-h1:   -0.035em;
  --tr-h2:   -0.028em;
  --tr-h3:   -0.018em;
  --tr-lead: -0.011em;
  --tr-label: 0.15em;

  --lh-h1:   1.05;
  --lh-h2:   1.1;
  --lh-h3:   1.32;
  --lh-lead: 1.45;
  --lh-body: 1.65;

  /* ---- Movimiento ---------------------------------------------------- */
  /* Los tokens de superficie de la v8.2 vivían AQUÍ, después de la paleta, y
     al reescribir el color quedaron duplicados: como en CSS gana la última
     declaración, las sombras negras de antes seguían pisando a las nuevas,
     teñidas de azul. Se veía una sombra gris sucia sobre el marfil y costaba
     entender por qué. Ahora viven con el resto del color, más arriba, y aquí
     no queda nada. */

  --t:    0.18s;
  --t-2:  0.24s;
  --ease: cubic-bezier(0.32, 0.72, 0.28, 1);

  /* ---- Sombras (dos en toda la web) ---------------------------------- */
  --shadow-wa:   0 1px 2px rgba(5, 5, 5, 0.06), 0 6px 20px -8px rgba(5, 5, 5, 0.16);
  --shadow-menu: 0 1px 2px rgba(5, 5, 5, 0.05), 0 14px 40px -14px rgba(5, 5, 5, 0.18);
}

/* ----------------------------------------------------------- 3. Base/reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* `text-wrap: balance` reparte las líneas de un titular en vez de dejar una
   palabra suelta al final. Donde no está soportado, no pasa nada. */
h1, h2, h3 { text-wrap: balance; font-weight: 700; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }

/* Evita la palabra huérfana al final de un párrafo. */
p { text-wrap: pretty; }

a { color: inherit; }
img, svg, picture { display: block; max-width: 100%; }

/* La regla de arriba es de autor y pisa el `[hidden] { display: none }`
   de la hoja del navegador, que es de usuario-agente. Sin esto, un SVG
   con `hidden` se seguía viendo: las dos aspas del menú a la vez. */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 0; left: 0; z-index: 200;
  padding: 0.85rem 1.25rem;
  background: var(--color-ink); color: #fff;
  font-size: var(--fs-small); font-weight: 600; text-decoration: none;
  transform: translateY(-110%);
  transition: transform var(--t-2) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ---------------------------------------------------------- 4. Composición */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Banda = sección. Se separan por espacio, no por fondos distintos. */
.band        { padding-block: var(--band); }
.band--tight { padding-block: calc(var(--band) * 0.72); }
.band--first { padding-block: calc(var(--band) * 1.3) var(--band); }

/* Alternancia de fondos. No son «secciones de color»: son dos puntos de
   calidez sobre blanco para que la página no se sienta de quirófano. */
/* ALTERNANCIA DE BANDAS.
   Al pasar el fondo a marfil me cargué esto sin darme cuenta: `--color-ivory`
   quedó valiendo lo mismo que `--color-bg`, así que la banda «suave» salía
   exactamente del color de la página y el ritmo vertical desaparecía.
   Medido en el navegador: body y banda daban ambos rgb(247,245,241).
   Ahora la banda usa el beige, que son 6 puntos por canal: se percibe como
   un cambio de aire, no como «otra sección de color». */
.band--soft { background: var(--color-cream); }

/* Epígrafe: la etiqueta menuda que sitúa cada sección. */
.eyebrow {
  margin: 0 0 1.1rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--color-slate);
}

.lead {
  max-width: var(--measure);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
  color: var(--color-text-2);
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.1rem; }

/* Encabezado de sección: epígrafe + título + una frase. Nada más. */
.head h2 { max-width: 18ch; }
.head .lead { margin-top: 1.25rem; max-width: 52ch; }

/* Lista editorial con guion fino. Sin iconos ni viñetas de color. */
.dashed li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
  color: var(--color-text-2);
}
.dashed li:last-child { margin-bottom: 0; }
.dashed li::before {
  content: ''; position: absolute; left: 0; top: 0.85em;
  width: 11px; height: 1.5px; background: var(--color-border-2);
}

/* Nota al margen: filete fino, nunca una caja de color. */
.note {
  max-width: 56ch;
  padding-left: 1.25rem;
  border-left: 2px solid var(--color-border);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--color-text-2);
}
.note p + p { margin-top: 0.8rem; }
.note strong { color: var(--color-text); font-weight: 700; }

/* -------------------------------------------------------------- 5. Acciones

   Cuatro y ni una más:
     .btn           negro, acción principal
     .btn--quiet    contorno fino, acción secundaria
     .btn--soft     verde muy suave, acción de apoyo
     .arrow         enlace de texto con flecha
   ------------------------------------------------------------------------- */

.btn {
  /* v8.3 · el botón principal es AZUL DE MARCA, no tinta. Blanco encima da
     11,5:1 y el hover aclara 20 puntos por canal, que se ve de verdad. */
  --btn-bg: var(--color-brand);
  --btn-fg: #fff;
  --btn-bd: var(--color-brand);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 50px;
  padding: 0.75rem 1.6rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
/* Un píxel. Literalmente uno. Lo suficiente para que el botón conteste al
   cursor y poco bastante para que nadie piense «esto se ha movido». */
.btn:hover  {
  background: var(--color-brand-2); border-color: var(--color-brand-2);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(30, 36, 48, 0.1);
}
.btn:active { transform: translateY(0); box-shadow: none; }

.btn--quiet:hover { box-shadow: none; }
/* El de WhatsApp sólo cambia de luz, sin halo: el verde ya llama bastante. */
.wa-float:hover, .mobile-bar__btn--primary:hover {
  filter: brightness(0.96);
}

.btn--quiet { --btn-bg: transparent; --btn-fg: var(--color-brand); --btn-bd: rgba(31, 58, 95, 0.28); }
.btn--quiet:hover { background: transparent; border-color: var(--color-brand); }

.btn--soft { --btn-bg: var(--color-ghost); --btn-fg: var(--color-ink); --btn-bd: var(--color-ghost); }
.btn--soft:hover { background: var(--color-ghost-2); border-color: var(--color-ghost-2); color: var(--color-ink); }

.btn--wide { width: 100%; }

.actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: var(--space-6);
}

/* Enlace de texto con flecha. El desplazamiento es de 2 px: se nota y no grita. */
.arrow {
  display: inline-flex;
  justify-self: start; align-items: center; gap: 0.4rem;
  font-size: var(--fs-small); font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-border-2);
  transition: border-color var(--t) var(--ease);
}
.arrow::after {
  content: '→';
  transition: transform var(--t) var(--ease);
}
/* El subrayado se tiñe del acento y la flecha avanza 3 px. Es el único sitio
   donde el cian aparece en la web pública fuera de la palabra destacada. */
.arrow:hover { border-color: var(--color-acento-2); color: var(--color-acento-texto); }
.arrow:hover::after { transform: translateX(3px); }

/* Énfasis de una palabra suelta dentro de un titular: color en la letra, sin
   fondo ni subrayado. Una sola aparición por página. Va en sólido y no en
   degradado a propósito: el extremo claro de la familia baja a 1,7:1 y la
   mitad de la palabra dejaría de leerse. */
.marca { color: var(--color-acento); }

/* Distintivo de la oferta. Único lugar de la web donde aparece el amarillo
   de Correos, que es otro y más saturado. */
.free-badge {
  display: inline-flex;
  justify-self: start; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.75rem 0.32rem;
  border-radius: var(--radius-pill);
  background: var(--color-yellow);
  color: var(--color-ink);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.free-badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-ink); opacity: 0.55;
}

/* -------------------------------------------------------------- 6. Cabecera */

.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-2) var(--ease);
}
.header.is-stuck { border-bottom-color: var(--color-border); }

.header__inner {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: var(--header-h);
}
.header__logo { flex: none; display: flex; align-items: center;
                min-height: 44px; line-height: 0; }
.header__logo img { height: 30px; width: auto; }
.header__nav { margin-left: auto; }
.header__actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.header__actions .btn {
  min-height: 40px; padding: 0.45rem 1.15rem;
  font-size: 0.8125rem; letter-spacing: -0.004em;
}

.icon-btn {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
}

.nav__list { display: flex; align-items: center; gap: clamp(0rem, 0.55vw, 0.35rem); }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.5rem 0.8rem;
  border: 0; background: none;
  font-size: 0.875rem; font-weight: 500; letter-spacing: -0.006em;
  color: var(--color-text-2);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t) var(--ease);
}
.nav__link:hover,
.nav__link[aria-expanded='true'] { color: var(--color-ink); }

/* Estado activo: un punto de 3 px. Nada más. */
.nav__link.is-active { color: var(--color-ink); font-weight: 600; }
.nav__link.is-active::before {
  content: ''; position: absolute; left: 50%; bottom: -2px;
  width: 3px; height: 3px; margin-left: -1.5px;
  border-radius: 50%; background: var(--color-ink);
}

.nav__chev { transition: transform var(--t-2) var(--ease); }
.nav__link[aria-expanded='true'] .nav__chev { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + 0.6rem); right: 0; z-index: 10;
  min-width: 310px;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
}
.nav__menu-list { display: grid; }
.nav__menu-list a {
  display: block; padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--t) var(--ease);
}
.nav__menu-list a:hover { background: var(--color-surface); }
.nav__menu-label { display: block; font-size: var(--fs-small); font-weight: 600; }
.nav__menu-hint  { display: block; margin-top: 0.1rem; font-size: var(--fs-tiny);
                   line-height: 1.45; color: var(--color-text-2); }

/* --- menú móvil --- */
/* Cajón bajo la cabecera. Va suelto en el <body>, no dentro de <header>:
   ver el comentario del partial. `dvh` porque en iOS la barra de Safari
   aparece y desaparece, y con `vh` el final del menú quedaba debajo de ella. */
.mnav {
  position: fixed; left: 0; right: 0;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  z-index: 80;
  display: flex; flex-direction: column;
  background: #fff;
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-2) var(--ease), visibility var(--t-2) var(--ease);
}
.mnav.is-open { opacity: 1; visibility: visible; }
/* Sólo scrollea la lista. El pie se queda quieto. */
.mnav__list {
  flex: 1 1 auto; min-height: 0;
  padding: 1.25rem var(--gutter) 1.5rem;
  border-top: 1px solid var(--color-border);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mnav__pie {
  flex: none;
  padding: 1rem var(--gutter) calc(1.15rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border);
  background: var(--color-ivory);
}
.mnav__group {
  padding: 1.25rem 0 0.5rem;
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--color-text-3);
}
.mnav__link {
  display: block; padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 1.15rem; font-weight: 500; letter-spacing: -0.018em;
  text-decoration: none;
}
.mnav__link--featured, .mnav__link--primary { font-size: 1.4rem; font-weight: 700; }
.mnav__hint { display: block; margin-top: 0.15rem; font-size: var(--fs-small);
              font-weight: 400; color: var(--color-text-2); }
.mnav__actions { display: grid; gap: 0.6rem; }
.mnav__contact {
  margin-top: 0.85rem; font-size: var(--fs-small); line-height: 1.7;
  color: var(--color-text-2);
}
.mnav__contact a { font-weight: 600; color: var(--color-ink); text-decoration: none; }

/* --------------------------------------------------------------- 7. Pie */

.footer {
  padding-block: var(--space-9) var(--space-6);
  background: var(--color-ink);
  color: var(--on-ink-2);
  font-size: var(--fs-small);
}
.footer a { color: inherit; text-decoration: none; transition: color var(--t) var(--ease); }
.footer a:hover { color: #fff; }

.footer__grid { display: grid; gap: var(--space-7); }
.footer__logo img { height: 32px; width: auto; }
.footer__brandline { margin-top: 1.1rem; max-width: 30ch; line-height: 1.6; }
.footer__title {
  margin-bottom: 1rem;
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: #fff;
}
.footer__list { display: grid; gap: 0.6rem; }
.footer__contact { display: grid; gap: 0.75rem; font-style: normal; line-height: 1.55; }
.footer__contact strong { display: block; color: #fff; font-weight: 600; }

.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--on-ink-border);
  font-size: var(--fs-tiny);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

/* Acceso al panel interno: presente, nunca protagonista.
   Blanco al 48 % = 4,9:1 sobre el negro del pie. Más apagado sería ilegible. */
.footer__private a {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: rgba(255, 255, 255, 0.48);
}
.footer__private a:hover { color: rgba(255, 255, 255, 0.85); }
.footer__private a span { transition: transform var(--t) var(--ease); }
.footer__private a:hover span { transform: translateX(2px); }

/* ------------------------------------------------- 8. Contacto permanente */

/* Barra fija en móvil. En escritorio, el flotante. Nunca los dos. */
.mobile-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
}
.mobile-bar__btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.9rem 0.5rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  font-size: var(--fs-small); font-weight: 600;
  text-decoration: none;
}
/* Verde WhatsApp con tinta encima. En blanco daría 1,98:1 y no pasaría AA. */
.mobile-bar__btn--primary {
  background: var(--color-wa);
  color: var(--color-ink);
}

/* Flotante de escritorio: una utilidad discreta, no un widget de terceros. */
.wa-float {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 60;
  display: none; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem 0.6rem 0.75rem;
  background: var(--color-wa);
  border: 1px solid var(--color-wa);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-wa);
  color: var(--color-ink);
  font-size: var(--fs-tiny); font-weight: 600;
  text-decoration: none;
  transition: transform var(--t-2) var(--ease), opacity var(--t-2) var(--ease),
              border-color var(--t) var(--ease);
}
.wa-float:hover { background: var(--color-wa); border-color: var(--color-wa); }
.wa-float__icon { width: 18px; height: 18px; flex: none; }
/* Se retira sobre el pie, que ya lleva su propio WhatsApp. */
.wa-float.is-tucked { opacity: 0; transform: translateY(0.75rem); pointer-events: none; }

/* -------------------------------------------- 9. Huecos de fotografía ----

   Mientras no haya fotografías definitivas, cada imagen es un hueco con su
   proporción final. Sustituirlo será meter un <img> dentro y borrar la
   etiqueta: ni el tamaño ni la posición ni el radio cambian.
   El inventario completo está en docs/mayorma-fotografia.md
   ------------------------------------------------------------------------- */

.slot {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: var(--ratio, 3 / 2);
  background: var(--color-surface);
  border: 1px solid rgba(30, 36, 48, 0.05);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.slot > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus, center);
  transition: transform 0.65s var(--ease), filter 0.65s var(--ease);
}
/* Zoom editorial: 1,5 % en seis décimas de segundo. Es el gesto de una
   revista, no de una tienda. Sólo donde hay puntero: en un móvil el «hover»
   se queda pegado tras tocar y la foto no volvería a su sitio. */
@media (hover: hover) and (pointer: fine) {
  a:hover > .slot > img,
  .slot:hover > img {
    transform: scale(1.015);
    filter: brightness(1.02);
  }
}
.slot > img ~ .slot__label { display: none; }
.slot__label {
  display: grid; gap: 0.35rem; justify-items: center;
  font-size: var(--fs-label);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-3);
  text-align: center;
}
.slot__id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem; letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
}

/* --------------------------------------------------------- 10. Portada ---- */

/* Portada: la lectura empieza siempre a la izquierda y la fotografía
   acompaña a la derecha. Ni texto centrado ni bloques a sangre. */
.hero { display: grid; gap: var(--space-7); align-items: center; }
.hero__body { display: grid; align-content: center; gap: var(--space-5); }
.hero__body h1 { max-width: 12ch; }
.hero__body .lead { max-width: 38ch; }
.hero__body .actions { margin-top: 0; }
.hero__slot { --ratio: 4 / 5; }

/* Microdatos de confianza, dentro del propio hero: una línea, sin tarjetas,
   sin iconos y sin cifras enormes. */
.proof {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.4rem 1rem;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-small);
  color: var(--color-text-2);
}
.proof li { display: flex; align-items: center; gap: 1.1rem; }
.proof li:not(:last-child)::after {
  content: ''; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: 0.4;
}
.proof strong { color: var(--color-slate); font-weight: 700; }
.proof a { color: inherit; text-decoration: none; }
.proof a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }

/* --- Servicios: composición editorial, no una rejilla de tarjetas --- */

.svc-lead { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
.svc-lead__body { align-self: center; max-width: 44ch; }
.svc-lead__body h3 {
  font-size: clamp(1.65rem, 1.25rem + 1.6vw, 2.5rem);
  line-height: 1.12; letter-spacing: -0.028em;
  margin-block: 0.9rem 1rem;
}
.svc-lead__body p { color: var(--color-text-2); }
.svc-lead__body .arrow { margin-top: var(--space-5); }

.svc-pair {
  display: grid; gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.svc-pair h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); letter-spacing: -0.024em; }
.svc-pair p  { margin-top: 0.6rem; max-width: 34ch; color: var(--color-text-2); }
.svc-pair .arrow { margin-top: 1.1rem; }

/* Índice tipográfico del resto de servicios. Filetes, no cajas. */
/* Los filetes encadenan destacado -> pareja -> índice: un solo sistema,
   no tres bloques distintos pegados. */
.idx { margin-top: var(--space-6); border-top: 1px solid var(--color-border); }
.idx__row {
  display: grid; gap: 0.2rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: opacity var(--t) var(--ease);
}
/* El hover de estas filas se define en el bloque de interacción del final:
   fondo marfil y flecha que avanza. Antes aquí bajaba la opacidad a 0,55,
   lo que ATENUABA el texto en vez de responder —y encima recortaba el
   contraste—. Quitarlo es lo que hace que el hover por fin se note. */
.idx__name {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.016em;
}
.idx__name::after {
  content: '→'; display: inline-block; margin-left: 0.4rem;
  transition: transform var(--t) var(--ease);
}
.idx__row:hover .idx__name::after { transform: translateX(2px); }
.idx__desc { font-size: var(--fs-small); color: var(--color-text-2); }

/* --- Cómo trabajamos: cuatro columnas de texto sobre un filete --- */

.flow { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
.flow__item { padding-top: 1.1rem; border-top: 1px solid var(--color-border); }
.flow__n {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--color-slate);
}
.flow__item h3 { margin-block: 0.5rem 0.4rem; font-size: 1.0625rem; }
.flow__item p  { font-size: var(--fs-small); color: var(--color-text-2); }

/* --- Opiniones de Google --- */

.stars { display: inline-flex; gap: 2px; vertical-align: -2px;
         color: var(--color-google); }
.stars svg { width: 13px; height: 13px; }

.reviews__line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: var(--fs-small);
  color: var(--color-text-2);
}
/* Tres opiniones en fila, sobre crema. Se buscan a propósito: una prueba
   social tiene que parecer de personas, no una rejilla de producto. */
.reviews__grid { display: grid; gap: var(--space-5); margin-top: var(--space-8); }

.review {
  position: relative;
  /* Cabecera arriba, cita al medio, firma abajo. Así las tres firmas quedan a
     la misma altura aunque las opiniones tengan distinta longitud. */
  display: grid; grid-template-rows: auto 1fr auto; gap: 0.7rem;
  padding: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);
  background: var(--color-cream);
  border: 1px solid rgba(31, 58, 95, 0.09);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(31, 58, 95, 0.04);
}
/* Filete superior: el único adorno de la tarjeta. Marca el borde sin encerrarla. */
.review::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 2px;
  background: var(--color-slate);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.band--soft .review { background: #FFFFFF; }
.review { transition: transform var(--t-2) var(--ease), border-color var(--t-2) var(--ease),
                      box-shadow var(--t-2) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .review:hover {
    transform: translateY(-2px);
    border-color: rgba(31, 58, 95, 0.18);
    box-shadow: 0 4px 16px rgba(31, 58, 95, 0.07);
  }
}

.review__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
}
/* Dorado de Google. Es el detalle que hace que se lean como reseñas suyas. */
.review__stars { display: inline-flex; gap: 2px; color: var(--color-google); }
.review__stars svg { width: 15px; height: 15px; }

/* La «G» va en texto, no en logotipo: ni pesa, ni hay que licenciar nada. */
.review__fuente {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--fs-tiny); color: var(--color-text-3);
  white-space: nowrap;
}
.review__g {
  display: grid; place-items: center;
  width: 20px; height: 20px; flex: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: var(--fs-label); font-weight: 700; line-height: 1;
  color: var(--color-slate);
}
.review p {
  font-size: var(--fs-small); line-height: 1.62;
  color: var(--color-text);
}
.review__who {
  padding-top: 0.55rem;
  border-top: 1px solid rgba(31, 58, 95, 0.09);
  font-size: var(--fs-tiny); color: var(--color-text-3);
}
.review__who strong {
  display: block; margin-bottom: 0.1rem;
  font-size: var(--fs-small); font-weight: 600;
  color: var(--color-slate);
}

/* --- Consulta inicial gratuita ---------------------------------------- */

/* No es una tarjeta promocional: es una pausa. Baja, ancha y tranquila. */
.free {
  padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem) clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  background: var(--color-ghost);
  border-radius: var(--radius-lg);
}
.free h2 {
  margin-block: 0 0.4rem;
  max-width: 22ch;
  font-size: clamp(1.35rem, 1.15rem + 0.85vw, 1.875rem);
  letter-spacing: -0.024em;
}
.free p  { max-width: 50ch; font-size: var(--fs-small); color: rgba(30, 36, 48, 0.7); }
.free .actions { margin-top: var(--space-5); }

/* En páginas de servicio, la misma idea sin panel: sólo un filete. */
/* La variante «slim» cerraba las páginas interiores con un simple filete
   arriba. Al pasar `.free` a ser una caja en la v8.2, ésta heredó la sombra
   pero conservó `background: none`: quedaba una sombra flotando sobre nada,
   y sobre marfil se veía como una mancha. Ahora es una caja de verdad,
   blanca y con menos peso que la del cierre principal. */
.free--slim {
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.free--slim h2 { margin-block: 0.9rem 0.4rem; }

/* ----------------------------------------- 11. Cabecera de página interior */

.phero { display: grid; gap: var(--space-7); align-items: center; }
.phero__body { display: grid; align-content: center; gap: var(--space-5); }
.phero__body h1 { max-width: 13ch; }
.phero__body .lead { max-width: 40ch; }
.phero__body .actions { margin-top: 0; }

/* --- Bloques de contenido de las interiores --- */

.cols { display: grid; gap: var(--space-7); }
.cols--60 { }
.cols h2 { max-width: 18ch; }

.who { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
.who__item { padding-top: 1.1rem; border-top: 1px solid var(--color-border); }
.who__item h3 { font-size: 1.0625rem; }
.who__item p  { margin-top: 0.45rem; font-size: var(--fs-small); color: var(--color-text-2); }

/* --- Carrusel de gestiones (extranjería) ------------------------------- */

.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem;
}
.rail-hint { font-size: var(--fs-tiny); color: var(--color-text-3); }
.rail-nav { display: flex; gap: 0.5rem; }
.rail-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;   /* para que no cante sobre el marfil */
  cursor: pointer;
  transition: border-color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.rail-btn svg { width: 15px; height: 15px; }
.rail-btn:hover:not(:disabled) { border-color: var(--color-ink); }
.rail-btn:disabled { opacity: 0.3; cursor: default; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* El carril sangra hasta el margen de la página. Sin este `scroll-padding`
     el navegador ancla la primera tarjeta al borde del scrollport y la página
     carga desplazada: empezaba en 53 px en vez de 0. */
  scroll-padding-inline-start: var(--gutter);
  padding-bottom: 0.5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

/* Sin caja: filete arriba y aire, igual que el índice de servicios y los
   cuatro pasos. Nueve tarjetas con borde saturaban la página. */
.rail-card {
  scroll-snap-align: start;
  padding-top: 1.1rem;
  padding-right: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.rail-card__n {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--color-slate);
}
.rail-card h3 { margin-block: 0.55rem 0.5rem; font-size: 1.0625rem; }
.rail-card p  { font-size: var(--fs-small); color: var(--color-text-2); }
.rail-card__foot { margin-top: 1rem; }

/* ------------------------------------------------------------- 12. FAQ --- */

.faq { margin-top: var(--space-7); border-top: 1px solid var(--color-border); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__item h3 { font-size: inherit; letter-spacing: 0; font-weight: 400; }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0;
  border: 0; background: none;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.014em;
  text-align: left;
  cursor: pointer;
  transition: opacity var(--t) var(--ease);
}
/* Igual que arriba: la atenuación se ha quitado. El hover de la pregunta
   es un cambio de color, definido al final del archivo. */
.faq__sign { position: relative; width: 12px; height: 12px; flex: none; }
.faq__sign::before, .faq__sign::after {
  content: ''; position: absolute; inset: 50% 0 auto;
  height: 1.5px; background: var(--color-ink);
  transition: transform var(--t-2) var(--ease);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__q[aria-expanded='true'] .faq__sign::after { transform: rotate(0deg); }
.faq__a { padding-bottom: 1.4rem; }
.faq__a > div { max-width: 62ch; font-size: var(--fs-small); color: var(--color-text-2); }
.faq__a a { color: var(--color-ink); text-underline-offset: 3px; }

/* ------------------------------------------------------ 13. Formulario --- */

.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); }

.field { display: grid; gap: 0.4rem; }
.field__label { font-size: var(--fs-small); font-weight: 600; }
.field__hint  { font-size: var(--fs-tiny); line-height: 1.55; color: var(--color-text-3); }
.field__error { font-size: var(--fs-tiny); color: #A4161A; }
.field__error:empty { display: none; }

.input, .select, .textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--color-text);
  transition: border-color var(--t) var(--ease);
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23050505' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--color-ink); }
.input[aria-invalid='true'], .select[aria-invalid='true'], .textarea[aria-invalid='true'] {
  border-color: #A4161A;
}

.consent {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.7rem;
  font-size: var(--fs-small);
  color: var(--color-text-2);
}
/* 24 px es el mínimo que pide la norma para una zona táctil (WCAG 2.5.8).
   Estaba en 22: se veía bien, pero no llegaba. */
.consent input { width: 24px; height: 24px; flex: none; margin-top: 0.05rem;
                 accent-color: var(--color-ink); }
.consent a { color: var(--color-ink); text-underline-offset: 3px; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { display: grid; gap: 0.9rem; }
.form__status { padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); font-size: var(--fs-small); }
.form__status--ok    { background: var(--color-ghost); color: var(--color-sage-text); }
.form__status--error { background: #FDECEC; color: #A4161A; }
.form__status a { color: inherit; }
.form__ref { display: inline-block; margin-top: 0.4rem; font-size: var(--fs-tiny); }

/* ----------------------------------------------------- 14. Contacto ------ */

.contact { display: grid; gap: var(--space-8); }
.contact__aside { display: grid; align-content: start; gap: var(--space-5); }
.contact__aside h2 {
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--color-text-3);
}
.contact__item dt {
  font-size: var(--fs-tiny); color: var(--color-text-3); margin-bottom: 0.15rem;
}
.contact__item dd {
  margin: 0;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.014em;
  line-height: 1.45;
}
.contact__item dd a {
  display: inline-block;
  padding-block: 0.75rem; margin-block: -0.75rem;   /* 20 px -> 44 px de toque */
  text-decoration: none;
}
.contact__item dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact__item dd span {
  display: block; font-size: var(--fs-small); font-weight: 400;
  color: var(--color-text-2);
}
/* La frase que recuerda que al otro lado hay alguien. Discreta, sobre filete. */
.contact__nota {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  max-width: 32ch;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--color-text-2);
}

.contact__privacy {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  max-width: 68ch;
  font-size: var(--fs-tiny);
  color: var(--color-text-3);
}

/* ---------------------------------------------------- 14bis. El mapa ---- */

/* Google no se carga hasta que la persona lo pide: si no, el mapa enviaría
   su IP a Google nada más abrir la página, antes de aceptar las cookies. */
.mapa {
  display: grid;
  margin-top: var(--space-8);
  background: var(--color-cream);
  border: 1px solid rgba(31, 58, 95, 0.09);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.mapa__datos { padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); align-self: center; }
.mapa__datos h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.85vw, 1.75rem);
  letter-spacing: -0.024em;
}
.mapa__dir {
  margin-top: 1rem;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.5;
  font-style: normal;
}
.mapa__dir span { display: block; font-weight: 400; color: var(--color-text-2); }
.mapa__datos .actions { margin-top: var(--space-5); }

/* El plano se ve de entrada: es una imagen nuestra. El botón va encima, y el
   iframe de Google solo aparece si alguien lo pide. */
.mapa__lienzo {
  position: relative; margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-top: 1px solid rgba(31, 58, 95, 0.09);
  background: var(--color-ivory);
}
.mapa__imagen {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: filter var(--t-2) var(--ease), transform 0.6s var(--ease);
}

/* El botón, abajo a la derecha, sobre el plano. Pastilla clara con sombra
   suave: tiene que leerse encima de un mapa lleno de detalle. */
.mapa__abrir {
  position: absolute; right: 0.9rem; bottom: 2.6rem; z-index: 2;
  min-height: 42px; padding: 0.5rem 1.1rem;
  font-size: var(--fs-tiny);
  box-shadow: 0 2px 12px rgba(30, 36, 48, 0.18);
}
@media (hover: hover) and (pointer: fine) {
  .mapa__lienzo:hover .mapa__imagen { filter: brightness(1.02); transform: scale(1.01); }
}

/* La atribución, sobre una banda translúcida para que se lea encima del
   plano sin taparlo. */
.mapa__credito {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 0.4rem 0.9rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(31, 58, 95, 0.09);
  font-size: 0.6875rem; line-height: 1.5;
  color: var(--color-text-3);
}
.mapa__credito a { color: var(--color-text-2); }
.mapa__credito a:hover { color: var(--color-acento-texto); }

/* Cuando se carga el de Google, el plano y el botón se quitan de en medio. */
.mapa__lienzo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.mapa__lienzo.is-cargado .mapa__imagen,
.mapa__lienzo.is-cargado .mapa__abrir { display: none; }
.mapa__lienzo.is-cargado .mapa__credito { z-index: 4; }

/* ------------------------------------------------- 15. Páginas legales --- */

.legal { max-width: 68ch; }
.legal h2 { margin-top: var(--space-7); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); }
.legal h3 { margin-top: var(--space-5); font-size: 1.0625rem; }
.legal p, .legal li { color: var(--color-text-2); }
.legal p + p, .legal h2 + p, .legal h3 + p { margin-top: 0.9rem; }
.legal ul { margin-top: 0.9rem; }
.legal li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem; }
.legal li::before {
  content: ''; position: absolute; left: 0; top: 0.85em;
  width: 11px; height: 1.5px; background: var(--color-border-2);
}
.legal a { color: var(--color-ink); text-underline-offset: 3px; }

/* Fecha de revisión: un documento legal sin fecha no dice desde cuándo vale. */
.legal__fecha {
  margin-top: var(--space-5);
  font-size: var(--fs-small); color: var(--color-text-3);
}

/* La advertencia de no mandar documentación sensible. Tiene que verse sin
   gritar: es una instrucción, no una alarma. */
.legal__aviso {
  margin-top: 1.1rem; padding: 1rem 1.15rem;
  background: var(--color-cream);
  border-left: 2px solid var(--color-slate);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.legal__aviso strong { color: var(--color-ink); }

/* Nombres técnicos (utm_source, gclid). En monoespaciada se distingue de un
   plumazo qué es un nombre de parámetro y qué es prosa. */
.legal__tecnico {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em; color: var(--color-slate);
}

.legal__pie {
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-small);
}

/* ------------------------------------------------- 16. Aviso de cookies -- */

.consent-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 100;
  max-width: 620px; margin-inline: auto;
  padding: 1.25rem 1.4rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu);
  opacity: 0; transform: translateY(0.75rem);
  transition: opacity var(--t-2) var(--ease), transform var(--t-2) var(--ease);
}
.consent-banner.is-in { opacity: 1; transform: none; }
.consent-banner__text { font-size: var(--fs-small); line-height: 1.6; color: var(--color-text-2); }
.consent-banner__text a { color: var(--color-ink); text-underline-offset: 3px; }
.consent-banner__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.consent-banner__actions .btn { min-height: 44px; padding: 0.6rem 1.15rem; }

/* ---------------------------------------------------- 17. Respuesta ------ */

@media (min-width: 600px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .who  { grid-template-columns: repeat(3, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-6); }
}

@media (min-width: 760px) {
  .svc-pair { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .idx__row { grid-template-columns: minmax(0, 26ch) minmax(0, 1fr); gap: 2rem;
              align-items: baseline; }
}

@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
          gap: var(--space-9); }
  .phero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
           gap: var(--space-9); }
  .svc-lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
              gap: var(--space-8); }
  .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
  .cols--60 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .contact { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-9); }
  .mapa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .mapa__lienzo { border-top: 0; border-left: 1px solid rgba(31, 58, 95, 0.09);
                  aspect-ratio: auto; min-height: 340px; }
  .flow { grid-template-columns: repeat(4, 1fr); }
  .free { display: grid; grid-template-columns: minmax(0, 1fr) auto;
          gap: var(--space-8); align-items: center; }
  .free .actions { margin-top: 0; }
}

@media (min-width: 1000px) {
  .rail { grid-auto-columns: calc((100% - 4rem) / 3); }
}
@media (min-width: 700px) and (max-width: 999px) {
  .rail { grid-auto-columns: calc((100% - 2rem) / 2); }
}

/* --- Cambio de navegación --- */

@media (max-width: 999px) {
  .header__nav { display: none; }
  .icon-btn { display: inline-flex; }
  .header__actions .btn { display: none; }
  /* El `margin-left: auto` que empuja vivía en .header__nav, y aquí .header__nav
     está oculto: sin esto el botón se pegaba al logo, a media cabecera. */
  .header__actions { margin-left: auto; }
}
@media (min-width: 1000px) {
  .mnav { display: none; }
}

/* --- Contacto permanente: uno u otro, nunca los dos --- */

@media (max-width: 860px) {
  /* La barra mide 56 px más la franja del iPhone. El contenido se aparta lo
     justo: ni queda tapado, ni deja un agujero al final de la página. */
  :root { --barra: calc(56px + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: var(--barra); }
  .wa-float { display: none !important; }
  .consent-banner { bottom: calc(var(--barra) + 1rem); }
}
@media (min-width: 861px) {
  .mobile-bar { display: none; }
  .wa-float { display: inline-flex; }
}

/* --- Pie --- */

@media (min-width: 640px) {
  .reviews__grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
}
@media (min-width: 1000px) {
  .reviews__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 640px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--space-8); }
}
@media (min-width: 720px) {
  .footer__private { margin-left: auto; padding-left: 1.5rem;
                     border-left: 1px solid var(--on-ink-border); }
}

/* --- Pantallas estrechas --- */

@media (max-width: 599px) {
  .hero__body h1 { max-width: none; }
  .actions { gap: 0.75rem 1.25rem; }
  .actions .btn { width: 100%; }
}

/* ---------------------------------------------- 18. Toque cómodo en móvil */

@media (hover: none) {
  .btn, .mobile-bar__btn, .faq__q, .nav__link, .mnav__link { min-height: 48px; }

  /* En el pie los enlaces son pequeños por diseño. Con el dedo hace falta
     más superficie, así que se reparte el hueco entre relleno y separación:
     el ritmo visual apenas cambia y cada enlace pasa de 18 a 31 px. */
  .footer__list { gap: 0.15rem; }
  .footer__legal { gap: 0.15rem 1.5rem; }
  .footer__contact { gap: 0.4rem; }
  .footer__list a, .footer__legal a, .footer__contact a, .footer__private a {
    display: inline-block; padding-block: 0.45rem;
  }
  .footer__contact div { line-height: 1.4; }
  .arrow, .proof a, .idx__row { position: relative; }
  .arrow::before, .proof a::before {
    content: ''; position: absolute; inset: -11px -6px;
  }
}

/* ---------------------------------------------------- 19. Movimiento ----- */

/* ====================================================================
   APARICIÓN AL ENTRAR EN PANTALLA
   --------------------------------------------------------------------
   Catorce píxeles y medio segundo. El objetivo no es que se note la
   animación: es que la página no aparezca de golpe, toda a la vez.

   DOS REGLAS QUE NO SE SALTAN:

   1. El estado oculto SÓLO se aplica si el JavaScript ha marcado el
      documento con `js-reveal`. Si el script no carga, falla o el
      navegador es viejo, nada lleva `opacity: 0` y la página se ve
      entera. Animar no puede ser nunca el motivo de que algo no se lea.

   2. Quien pide menos movimiento no ve ninguno, y además lo ve todo:
      la regla de abajo anula el estado oculto, no sólo la transición.
   ==================================================================== */
.js-reveal [data-reveal] {
  opacity: 0;
  /* v8.2: 18 px en vez de 14 y 0,6 s en vez de 0,55. El recorrido anterior se
     quedaba corto con las cajas nuevas: con relieve, 14 px apenas se percibían
     y el bloque parecía aparecer de golpe. Sigue dentro de lo pedido
     (12–20 px, 450–700 ms).

     SE USA `translate` Y NO `transform`, Y ES IMPORTANTE.
     Con `transform`, la regla `.is-visible` —que tiene más especificidad que
     `.flow__item:hover`— imponía `transform: none` y DEJABA MUERTA la
     elevación de todas las tarjetas al pasar el cursor. Se veía el cambio de
     sombra pero la caja no subía, y costaba entender por qué.

     `translate` es una propiedad independiente: el reveal la usa para entrar
     y el hover usa `transform` para elevarse. No compiten, se componen, y no
     hace falta ninguna guerra de especificidad. Un navegador que no la
     soporte se queda sólo con el fundido, que es degradación aceptable. */
  translate: 0 18px;
  /* La transición enumera también lo que animan las tarjetas: esta regla gana
     en especificidad, así que si no se nombran aquí, el hover de las tarjetas
     reveladas saltaría de golpe, sin transición. Cada propiedad con su propio
     tiempo: lento para entrar, rápido para responder al cursor. */
  transition: opacity 0.6s var(--ease),
              translate 0.6s var(--ease),
              transform var(--t-2) var(--ease),
              box-shadow var(--t-2) var(--ease),
              border-color var(--t-2) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  translate: none;
  /* El retardo sólo vale para la entrada. Si se quedara puesto, el hover
     tardaría hasta 400 ms en responder y parecería que no funciona. */
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  /* Lo importante de aquí abajo: sin esto, quien pide menos movimiento se
     quedaría con los bloques invisibles para siempre. */
  .js-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .slot > img { transition: none !important; }
  @media (hover: hover) {
    a:hover > .slot > img, .slot:hover > img { transform: none; filter: none; }
    .btn:hover { transform: none; box-shadow: none; }
    .review:hover { transform: none; }
  }
}

/* --------------------------------------------------------- 20. Impresión */

@media print {
  .header, .footer, .mobile-bar, .wa-float, .consent-banner, .skip-link { display: none; }
  body { padding: 0; }
}

.legal dl { margin-top: 1rem; display: grid; gap: 0.6rem; }
@media (min-width: 560px) {
  .legal dl { grid-template-columns: minmax(0, 18ch) minmax(0, 1fr); gap: 0.6rem 1.5rem; }
}
.legal dt { font-size: var(--fs-small); color: var(--color-text-3); }
.legal dd { margin: 0; font-size: var(--fs-small); font-weight: 600; }
/* En privacidad y cookies el <dd> no es un dato suelto, es una explicación de
   varias líneas: ahí manda la legibilidad, no la rejilla. */
.legal dd > strong:first-child { font-weight: 600; color: var(--color-slate); }
.legal dd:has(a), .legal dd:has(br) { font-weight: 400; line-height: 1.65; }

/* ==========================================================================
   v8.1 — QUE TODO CONTESTE AL CURSOR
   --------------------------------------------------------------------------
   Una auditoría de los estados de cada elemento interactivo encontró once
   componentes que no cambiaban absolutamente nada al pasar el ratón: la
   navegación, el logotipo, los campos del formulario, el acordeón de
   preguntas, los botones del carrusel y la barra inferior del móvil.

   Funcionaban. Pero un control que no acusa el cursor se siente muerto, y
   ésa era justo la sensación de «landing estática» que había que quitar.

   Todo lo de aquí abajo son cambios de 1 o 2 píxeles y tonos contiguos. El
   criterio es el mismo de siempre: que se note sin que se vea.
   ========================================================================== */

/* --- navegación de escritorio --- */
/* El cambio de color ya existía más arriba (línea ~419). Aquí solo se añade
   el fondo y la transición, para no tener dos reglas peleándose. */
.nav__link {
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
  border-radius: var(--radius-sm);
}
.nav__link:hover { background: var(--color-ivory); }

/* --- logotipos: solo un punto de luz, no se mueven --- */
.header__logo, .footer__logo { transition: opacity var(--t) var(--ease); }
.header__logo:hover, .footer__logo:hover { opacity: 0.72; }

/* --- botón del menú móvil --- */
.icon-btn { transition: background var(--t) var(--ease), border-color var(--t) var(--ease); }
.icon-btn:hover { background: var(--color-ivory); border-color: var(--color-ink); }

/* --- enlaces del cajón móvil --- */
.mnav__link { transition: color var(--t) var(--ease); }
.mnav__link:hover { color: var(--color-acento-texto); }

/* --- filas del índice de servicios --- */
.idx__row { transition: background var(--t) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .idx__row:hover { background: var(--color-ivory); }
  .idx__row:hover .arrow::after { transform: translateX(3px); }
}

/* --- acordeón de preguntas --- */
.faq__q { transition: color var(--t) var(--ease); }
.faq__q:hover { color: var(--color-acento-texto); }

/* --- botones del carrusel --- */
.rail-btn { transition: border-color var(--t) var(--ease), background var(--t) var(--ease),
                        transform var(--t) var(--ease); }
.rail-btn:hover:not(:disabled) { border-color: var(--color-ink); background: var(--color-ivory); }
.rail-btn:active:not(:disabled) { transform: scale(0.94); }

/* --- barra inferior del móvil --- */
.mobile-bar__btn { transition: background var(--t) var(--ease); }
.mobile-bar__btn:hover { background: var(--color-ivory); }
.mobile-bar__btn--primary:hover { background: var(--color-wa); filter: brightness(0.96); }
.mobile-bar__btn:active { background: var(--color-cream); }

/* --- campos del formulario ---
   El borde se marca al pasar por encima: indica dónde se puede escribir antes
   de haber pinchado. */
.input, .select, .textarea {
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/* Ojo: el borde de base ya es --color-border-2, así que el hover tiene que
   ser MÁS oscuro o no se nota nada. */
.input:hover, .select:hover, .textarea:hover { border-color: rgba(30, 36, 48, 0.38); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 3px rgba(30, 36, 48, 0.07);
}

/* --- estado «pulsado» para todo lo que no lo tenía --- */
.nav__link:active, .icon-btn:active, .mnav__link:active,
.faq__q:active, .idx__row:active { opacity: 0.82; }

/* Y quien pide menos movimiento, sigue sin verlo. */
@media (prefers-reduced-motion: reduce) {
  .rail-btn:active:not(:disabled) { transform: none; }
}

/* La casilla de consentimiento también acusa el cursor. Las otras dos cosas
   que la auditoría marca como «sin hover» están bien así:
     · .skip-link  solo existe cuando se enfoca con el tabulador;
     · .rail-btn   sí tiene hover, pero la medición pilla el botón «anterior»
                   del carrusel, que al cargar está deshabilitado. */
.consent input[type="checkbox"] { transition: outline-color var(--t) var(--ease); }
.consent input[type="checkbox"]:hover { outline: 2px solid var(--color-border-2); outline-offset: 1px; }

/* ==========================================================================
   v8.2 · ACABADO · cajas, relieve y estados de botón
   --------------------------------------------------------------------------
   Dos quejas concretas y qué se hace con cada una.

   «Los botones no cambian claramente al pasar el cursor.» Sí cambiaban, pero
   1 px de elevación y una sombra al 10 % son invisibles en una pantalla
   normal. Aquí el hover sube 2 px, enciende una sombra de verdad y cambia de
   tono. Sigue sin ser una plantilla: un gesto, no tres.

   «Todo se siente sobre el mismo lienzo plano.» Era literal: los pasos, los
   perfiles y las preguntas eran filas separadas por filetes de 1 px. Ahora
   son cajas sobre el fondo de la banda. Es el cambio que más se nota y el
   que no añade ni un color nuevo a la paleta.
   ========================================================================== */

/* --------------------------------------------------------------- superficie
   Una sola clase para todas las cajas. Si mañana cambia el radio o la
   sombra, cambia aquí y no en nueve sitios. */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
/* Sobre marfil la caja blanca ya destaca por sí sola, así que la sombra se
   suaviza: si no, el conjunto se ve sucio. */
.band--soft .card { box-shadow: 0 1px 2px rgba(31, 58, 95, 0.04),
                                0 8px 22px -14px rgba(31, 58, 95, 0.12); }

/* ------------------------------------------------- pasos y perfiles en caja
   Antes: `padding-top` + `border-top`. Ahora: caja con aire.
   El número del paso pasa a ser un disco, que es lo que lo convierte en un
   paso de una secuencia y no en un número suelto. */
.flow { gap: var(--space-5); }
.flow__item,
.who__item {
  padding: clamp(1.35rem, 1rem + 1vw, 1.9rem);
  border-top: 0;                      /* el filete ya no hace falta */
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-2) var(--ease),
              box-shadow var(--t-2) var(--ease),
              border-color var(--t-2) var(--ease);
}
.band--soft .flow__item,
.band--soft .who__item {
  box-shadow: 0 1px 2px rgba(30, 36, 48, 0.03),
              0 8px 22px -14px rgba(30, 36, 48, 0.08);
}
.flow__item h3, .who__item h3 { margin-top: 0; }

/* El disco del número. En pizarra, que es el color de los epígrafes: así el
   paso se lee como estructura, no como un acento más.

   OJO CON EL SELECTOR: el número es un <p>, así que `.flow__item p` (0-1-1)
   le gana a `.flow__n` (0-1-0) y dejaba el texto en gris sobre pizarra
   —ilegible—. Por eso aquí va el selector compuesto, no por capricho. */
.flow__item .flow__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; margin-bottom: 0.15rem;
  border-radius: var(--radius-pill);
  background: var(--color-slate); color: #fff;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0;
}

@media (hover: hover) and (pointer: fine) {
  .flow__item:hover, .who__item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: var(--card-bd-2);
  }
}

/* ------------------------------------------------------ índice de servicios
   El grupo entero pasa a ser un panel y cada fila vive dentro. La flecha, que
   antes aparecía al pasar por encima, ahora está siempre: así se ve que la
   fila es pulsable sin tener que descubrirlo con el ratón —que en una
   pantalla táctil no existe—. */
.idx {
  margin-top: var(--space-6);
  border-top: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;              /* para que el hover no se salga del radio */
}
.idx__row { border-bottom: 1px solid var(--card-bd); }
.idx__row:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .idx__row:hover { background: var(--color-cream); }
  .idx__row:hover .idx__name { color: var(--color-acento-texto); }
}
.idx__row:active { background: var(--color-ghost); }
.idx__name { transition: color var(--t) var(--ease); }

/* --------------------------------------------------------------- preguntas
   Mismo tratamiento: un panel con las preguntas dentro. */
.faq {
  margin-top: var(--space-7);
  border-top: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding-inline: clamp(0.9rem, 0.4rem + 1.4vw, 1.5rem);
}
.faq__item:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .faq__q:hover { background: var(--color-ivory); }
}
.faq__q {
  border-radius: var(--radius-sm);
  transition: color var(--t) var(--ease), background var(--t) var(--ease);
}

/* ------------------------------------------------------- reseñas y tarjetas
   Ya tenían relieve; se les sube el gesto al mismo nivel que el resto para
   que todo el sitio responda igual. */
@media (hover: hover) and (pointer: fine) {
  .review:hover, .rail-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
  }
}
.rail-card { transition: transform var(--t-2) var(--ease),
                         box-shadow var(--t-2) var(--ease); }

/* ------------------------------------------------------------- cierre y CTA
   El bloque de la consulta gratuita es el final de cada página: merece leerse
   como una pieza, no como un párrafo más. */
.free {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   BOTONES · los cinco estados, en un solo sitio
   --------------------------------------------------------------------------
   default · hover · active · focus-visible · disabled
   Todas las variantes heredan el mismo gesto y sólo cambian de color. Así no
   hay un botón que se eleve y otro que no.
   ========================================================================== */

.btn {
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              color var(--t) var(--ease), transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn);
  }
}

/* Pulsado: baja del todo y apaga la sombra. Es el gesto que da la sensación
   táctil, y hay que notarlo aunque se pida menos movimiento, porque no es
   decoración: es la confirmación de que el clic ha entrado. */
.btn:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(30, 36, 48, 0.18);
}

/* El negro principal. var(--color-ink) → var(--color-brand-2) es un salto pequeño; lo que de
   verdad se ve es la sombra. */
.btn:hover { background: var(--color-brand-2); border-color: var(--color-brand-2); }

/* El de contorno: antes sólo se oscurecía el borde y era casi imperceptible.
   Ahora además se rellena. */
.btn--quiet:hover {
  background: var(--color-ivory);
  border-color: var(--color-ink);
  box-shadow: var(--shadow-btn);
}
.band--soft .btn--quiet:hover { background: #FFFFFF; }

/* El verde de apoyo. */
.btn--soft:hover {
  background: var(--color-ghost-2); border-color: var(--color-ghost-2);
  box-shadow: var(--shadow-btn);
}

/* WhatsApp: el verde ya llama bastante, así que sube y se oscurece un punto,
   sin halo de color. */
.wa-float, .mobile-bar__btn--primary {
  transition: filter var(--t) var(--ease), transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .wa-float:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn); }
}

/* Deshabilitado: sin gesto y sin ambigüedad. */
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed;
  transform: none; box-shadow: none;
}
.btn:disabled:hover, .btn[aria-disabled="true"]:hover {
  transform: none; box-shadow: none;
}

/* Enlace con flecha: el desplazamiento sube de 2 a 4 px y el texto se tiñe.
   Es el elemento más repetido del sitio («Ver servicios», «Ver empresas»), y
   era de los que menos se notaban. */
.arrow { transition: color var(--t) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .arrow:hover { color: var(--color-acento-texto); }
  .arrow:hover::after { transform: translateX(4px); }
}
.arrow::after { transition: transform var(--t-2) var(--ease); }

/* ----------------------------------------------------------------- teclado
   Un único anillo para todo el sitio. Se dibuja con outline y no con sombra
   para que no lo recorte ningún `overflow: hidden`. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* Sobre superficies negras el anillo negro no se ve. */
.free :focus-visible, .footer :focus-visible,
.btn:not(.btn--quiet):not(.btn--soft):focus-visible {
  outline-color: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(30, 36, 48, 0.55);
}

/* --------------------------------------------------------------- movimiento
   Quien pide menos movimiento conserva el feedback de color y de sombra, que
   es información, y pierde sólo los desplazamientos. */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .wa-float:hover,
  .flow__item:hover, .who__item:hover,
  .review:hover, .rail-card:hover { transform: none; }
  .btn:active { transform: none; }
  .arrow:hover::after { transform: none; }
}

/* ==========================================================================
   v8.2 · SEGUNDA PASADA · lo que la medición dejó en «sutil»
   --------------------------------------------------------------------------
   Con el cursor real encima, seis componentes cambiaban sólo un matiz. El
   motivo no era que faltara la regla: era el COLOR. Marfil y crema están a un
   2 % del blanco —así están pensados, para alternar secciones sin que se note
   un cambio de color— y como respuesta al cursor eso no se ve.

   La solución no es inventar un gris nuevo, es teñir con el azul pizarra que
   ya está en la paleta. Un 6 % de pizarra se percibe al instante y sigue
   siendo la misma familia de color.
   ========================================================================== */

:root {
  /* Superficie de «estoy encima». Pizarra al 6 %: visible sobre blanco y
     sobre marfil, y no introduce ningún tono ajeno a la marca. */
  --hover-wash:   rgba(31, 58, 95, 0.06);
  --hover-wash-2: rgba(31, 58, 95, 0.11);   /* para el pulsado */
}

@media (hover: hover) and (pointer: fine) {
  /* Navegación: antes marfil, imperceptible sobre blanco. */
  .nav__link:hover { background: var(--hover-wash); }

  /* Filas del índice: además del tinte, el nombre se tiñe de acento y la
     flecha avanza. Tres señales a la vez porque es una fila grande y el
     cursor puede estar en cualquier punto de ella. */
  .idx__row:hover { background: var(--hover-wash); }

  /* Preguntas del acordeón. */
  .faq__q:hover { background: var(--hover-wash); }

  /* Botón del menú y barra inferior del móvil. */
  .icon-btn:hover      { background: var(--hover-wash); }
  .mobile-bar__btn:hover { background: var(--hover-wash); }

  /* El logotipo ya no se limita a apagarse. Bajar la opacidad era justo el
     gesto que he quitado del resto del sitio: atenúa en vez de responder.
     Ahora se marca sobre un tinte, con su propio radio. */
  .header__logo:hover, .footer__logo:hover { opacity: 1; }
  .header__logo:hover { background: var(--hover-wash); }
  .footer__logo:hover { background: rgba(255, 255, 255, 0.10); }
}

/* El logotipo necesita caja propia para que el tinte tenga forma. */
.header__logo, .footer__logo {
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.45rem;
  margin-inline-start: -0.45rem;      /* que no se mueva de donde estaba */
  transition: background var(--t) var(--ease), opacity var(--t) var(--ease);
}

/* Pulsado, con el mismo tinte un punto más fuerte. */
.nav__link:active, .idx__row:active, .faq__q:active,
.icon-btn:active, .mobile-bar__btn:active,
.header__logo:active, .footer__logo:active {
  background: var(--hover-wash-2);
  opacity: 1;                          /* se anula la atenuación de la v8.1 */
}

/* Enlaces del pie: sobre negro, un subrayado que aparece además del color.
   Sobre fondo oscuro un cambio de gris claro a blanco se ve poco. */
.footer__list a, .footer__legal a, .footer__contact a {
  text-decoration-color: transparent;
  text-underline-offset: 0.28em;
  transition: color var(--t) var(--ease), text-decoration-color var(--t) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .footer__list a:hover, .footer__legal a:hover, .footer__contact a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    text-decoration-color: currentColor;
  }
}

/* Enlace con flecha: además del color y del avance, un subrayado. Es el
   patrón más repetido del sitio y el que más se pedía que se notara. */
.arrow { text-decoration-color: transparent; text-underline-offset: 0.3em; }
@media (hover: hover) and (pointer: fine) {
  .arrow:hover { text-decoration: underline; text-decoration-color: currentColor; }
}

/* WhatsApp flotante: sube y enciende sombra como cualquier otro botón. */
@media (hover: hover) and (pointer: fine) {
  .wa-float:hover { filter: brightness(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .arrow:hover { text-decoration-color: currentColor; }   /* el aviso se queda */
}

/* Campos: además del borde, un fondo apenas teñido. No se elevan a propósito
   —un campo que se mueve al pasar el cursor estorba al ir a escribir en él—,
   pero con sólo el borde la medición decía que no se notaba. */
@media (hover: hover) and (pointer: fine) {
  .input:hover, .select:hover, .textarea:hover {
    background-color: rgba(31, 58, 95, 0.035);
  }
}
.input, .select, .textarea { transition: border-color var(--t) var(--ease),
                                         background-color var(--t) var(--ease),
                                         box-shadow var(--t) var(--ease); }

/* ==========================================================================
   v8.3 · ACABADO SOBRE LA PALETA CÁLIDA
   --------------------------------------------------------------------------
   La paleta por sí sola ya cambia la cara del sitio. Esto es lo que hay que
   afinar DESPUÉS de cambiarla, porque son cosas que antes no se notaban y
   sobre marfil sí.
   ========================================================================== */

/* ------------------------------------------------------------- imágenes
   Sobre blanco una foto a sangre funcionaba. Sobre marfil, el borde de la
   foto queda flotando y se nota que «no está apoyada». Un filete finísimo y
   una sombra muy difusa la asientan sin convertirla en una pegatina. */
.slot {
  border-color: rgba(31, 58, 95, 0.08);
  box-shadow: 0 1px 2px rgba(31, 58, 95, 0.04),
              0 16px 36px -20px rgba(31, 58, 95, 0.20);
}

/* ------------------------------------------------------------------ hero
   Más aire entre el texto y lo que viene debajo. El hero es lo primero que
   se ve y era donde menos respiraba. */
.hero__body > .actions { margin-top: var(--space-7); }
.hero__body .free-badge { margin-top: var(--space-5); }

/* El distintivo de la consulta gratuita pasa al oro de la marca. El texto va
   en grafito —6,7:1— y el punto, en el azul. */
.free-badge {
  background: var(--color-gold);
  color: var(--color-ink);
  border: 1px solid rgba(31, 58, 95, 0.14);
}
.free-badge::before { background: var(--color-brand); opacity: 1; }

/* -------------------------------------------------------- ritmo vertical
   Dos bandas seguidas del mismo color se leían como una sola pieza larga.
   Cuando se tocan, un filete finísimo marca la junta: no es una línea
   divisoria, es el canto de una superficie. */
.band + .band:not(.band--soft) { border-top: 1px solid rgba(31, 58, 95, 0.06); }
.band--soft + .band--soft      { border-top: 1px solid rgba(31, 58, 95, 0.06); }

/* ------------------------------------------------------------ navegación
   La cabecera translúcida sobre marfil pedía un tono más cálido; con el
   blanco anterior se veía un escalón de color al hacer scroll. */
.header { background: rgba(247, 245, 241, 0.86); }
.header--stuck { background: rgba(247, 245, 241, 0.94); }

/* El enlace activo de la navegación lleva el punto en oro: es el único
   detalle dorado de la cabecera y basta para que se note la marca. */
.nav__link.is-active::before { background: var(--color-acento); }

/* ------------------------------------------------------------ acordeón
   El signo + en azul de marca en vez de tinta: es un control, y los
   controles de este sitio son azules. */
.faq__sign::before, .faq__sign::after { background: var(--color-brand); }

/* --------------------------------------------------------------- enlaces
   Los enlaces con flecha llevan el acento cálido al pasar por encima, que es
   lo que da la personalidad que se pedía sin añadir ningún elemento nuevo. */
@media (hover: hover) and (pointer: fine) {
  .arrow:hover      { color: var(--color-acento-texto); }
  .idx__row:hover .idx__name { color: var(--color-brand); }
}

/* ------------------------------------------------------------- epígrafes
   Las etiquetas menudas de sección pasan al azul de marca: antes eran
   pizarra, que ahora ES el azul, pero conviene dejarlo explícito. */
.eyebrow { color: var(--color-brand); }

/* ==========================================================================
   v8.4 · COMPOSICIÓN
   --------------------------------------------------------------------------
   La v8.3 cambió el color y poco más: seguía siendo la misma maqueta pintada
   de otro modo. Esto cambia la COMPOSICIÓN —tarjetas, franja de datos, banda
   de cierre, iconografía— sin tocar ni un texto ni un enlace.
   ========================================================================== */

/* ------------------------------------------------------------------ iconos
   Un solo tamaño y un solo grosor para todo el sitio. Heredan el color del
   elemento, así que un icono dentro de una tarjeta azul sale azul sin tener
   que declararlo. */
.ic { width: 1.25rem; height: 1.25rem; flex: none; display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Banda para piezas que traen su propio relleno interior —la franja de datos
   y la de cierre—. No lleva relleno, pero SÍ separación: sin ella la banda
   de cierre quedaba pegada al pie y la franja encajada bajo el hero. */
.band--none { padding-block: 0; margin-block: var(--band); }
/* Pegada al hero, la franja sube: forma parte de la primera pantalla. */
.band--first + .band--none { margin-top: calc(var(--band) * -0.25); }

/* ====================================================================== hero
   Más compacto: el titular, el texto y los botones van juntos, y la prueba
   social se ha ido abajo, a su propia franja. */
.hero__body { gap: var(--space-5); }
.hero__media { position: relative; }

/* El distintivo que flota sobre la foto. Repite la dirección, que es el dato
   que más se busca en una asesoría local. */
.hero__pin {
  position: absolute; left: 1rem; bottom: 1rem; right: 1rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  width: fit-content; max-width: calc(100% - 2rem);
  margin: 0; padding: 0.55rem 0.9rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  font-size: var(--fs-tiny); font-weight: 600;
  color: var(--color-ink);
  /* El desenfoque va DESPUÉS del color de fondo: si el navegador no lo
     soporta, el fondo sigue siendo opaco y el texto se lee igual. */
  backdrop-filter: saturate(140%) blur(8px);
}
.hero__pin .ic { width: 1rem; height: 1rem; color: var(--color-brand); }

/* ======================================================== franja de confianza
   Una sola superficie horizontal con los cuatro datos que ya existían. */
.confianza {
  display: grid; gap: 0;
  grid-template-columns: repeat(4, 1fr);
  margin: 0; padding: 0; list-style: none;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.confianza__it {
  display: grid; justify-items: center; align-content: start; gap: 0.2rem;
  padding: clamp(1.1rem, 0.8rem + 1vw, 1.6rem) 1rem;
  text-align: center;
  /* Divisores sutiles, no líneas de tabla. */
  border-left: 1px solid var(--card-bd);
}
.confianza__it:first-child { border-left: 0; }
.confianza__ic { color: var(--color-brand); margin-bottom: 0.35rem; }
.confianza__dato {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--color-ink); line-height: 1.25;
}
.confianza__pie { font-size: var(--fs-tiny); color: var(--color-text-2); }
.confianza__enl { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .confianza__enl:hover { color: var(--color-brand); text-decoration: underline; }
}

/* ==================================================== servicios principales */
.svc-grid {
  display: grid; gap: var(--space-5);
  /* DOS columnas, no tres. Con tres, la tarjeta destacada ocupaba la fila
     entera y las otras dos dejaban la tercera columna vacía: un agujero a la
     derecha. Con dos, la destacada cruza arriba y Empresas y Autónomos
     quedan a la misma anchura debajo. */
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-7);
}
.svc-card {
  display: flex; flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  color: inherit; text-decoration: none;
  transition: transform var(--t-2) var(--ease),
              box-shadow var(--t-2) var(--ease),
              border-color var(--t-2) var(--ease);
}
/* La destacada ocupa toda la fila y pone la foto al lado, no encima: así las
   tres piezas pesan parecido y ninguna parece un anuncio. */
.svc-card--destacada {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
}
.svc-card__foto {
  margin: 0; border: 0; border-radius: 0; box-shadow: none;
  height: 100%; min-height: 100%;
}
.svc-card__foto > img { border-radius: 0; }
.svc-card__body {
  display: grid; align-content: start; gap: 0.5rem;
  padding: clamp(1.35rem, 1rem + 1.2vw, 2rem);
}
.svc-card__body h3 { margin: 0; font-size: var(--fs-h3); letter-spacing: var(--tr-h3); }
.svc-card__body p  { margin: 0; font-size: var(--fs-small); color: var(--color-text-2); }
.svc-card__body .eyebrow { margin: 0; }
.svc-card__body .arrow { margin-top: 0.6rem; }

/* El icono en un disco de azul muy diluido: señala sin competir. */
.svc-card__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; margin-bottom: 0.3rem;
  border-radius: var(--radius-md);
  background: rgba(31, 58, 95, 0.08);
  color: var(--color-brand);
}

@media (hover: hover) and (pointer: fine) {
  .svc-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(31, 58, 95, 0.22);
  }
  .svc-card:hover .arrow::after { transform: translateX(4px); }
  .svc-card:hover .arrow { color: var(--color-acento-texto); }
  .svc-card:hover .svc-card__foto > img { transform: scale(1.03); }
}

/* ==================================================== servicios secundarios
   Antes eran cinco filas de una tabla blanca. */
.mini-grid {
  display: grid; gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: var(--space-5);
}
.mini {
  position: relative;
  display: grid; align-content: start; gap: 0.3rem;
  padding: 1.1rem 2.4rem 1.1rem 1.1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  color: inherit; text-decoration: none;
  transition: transform var(--t-2) var(--ease),
              box-shadow var(--t-2) var(--ease),
              border-color var(--t-2) var(--ease);
}
.mini__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; margin-bottom: 0.35rem;
  border-radius: var(--radius-sm);
  background: rgba(31, 58, 95, 0.07);
  color: var(--color-brand);
}
.mini__t { font-weight: 600; font-size: var(--fs-body); letter-spacing: -0.01em; }
.mini__d { font-size: var(--fs-tiny); color: var(--color-text-2); line-height: 1.5; }
.mini__f {
  position: absolute; top: 1.15rem; right: 1.1rem;
  color: var(--color-text-2); font-size: 1rem; line-height: 1;
  transition: transform var(--t-2) var(--ease), color var(--t) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .mini:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(31, 58, 95, 0.22);
  }
  .mini:hover .mini__f { transform: translateX(3px); color: var(--color-brand); }
  .mini:hover .mini__t { color: var(--color-brand); }
}

/* ================================================================== pasos */
.flow { grid-template-columns: repeat(4, 1fr); gap: 0.85rem; }
.flow__item { padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.45rem); }
.flow__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.65rem;
}
.flow__item .flow__n { margin: 0; }
.flow__ic { color: var(--color-brand); opacity: 0.55; width: 1.4rem; height: 1.4rem; }

/* ============================================================ banda de cierre
   El elemento con más peso visual de la portada. */
.cta {
  display: grid; gap: var(--space-5); align-items: center;
  grid-template-columns: 1fr auto;
  padding: clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem);
  border-radius: var(--radius-lg);
  background: var(--color-brand-deep);
  color: #FFFFFF;
  /* Un punto de luz arriba a la izquierda para que la banda no sea un
     rectángulo plano. Es gradiente, no imagen: no pesa nada. */
  background-image:
    radial-gradient(120% 140% at 8% 0%, rgba(255, 255, 255, 0.09), transparent 58%);
  box-shadow: 0 2px 6px rgba(23, 50, 77, 0.18),
              0 26px 56px -26px rgba(23, 50, 77, 0.55);
}
.cta__body { display: grid; gap: 0.6rem; }
.cta h2 { margin: 0; color: #FFFFFF; }
.cta p  { margin: 0; max-width: 52ch; color: #C8CDD6; font-size: var(--fs-small); }
.cta .actions { margin: 0; }

/* La variante baja de las páginas interiores: misma idea, menos cuerpo. */
.cta--slim { padding: clamp(1.5rem, 1rem + 1.8vw, 2.25rem); }
.cta--slim h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.cta--slim .free-badge { margin-bottom: 0.4rem; }

/* El distintivo dorado sobre azul: el texto va en grafito, 6,7:1. */
.cta .free-badge { background: var(--color-gold); color: var(--color-ink); border-color: transparent; }

/* Botón dorado. Grafito encima da 6,7:1, y sobre el azul profundo el propio
   botón destaca 5,6:1. */
.btn--oro {
  --btn-bg: var(--color-gold);
  --btn-fg: var(--color-ink);
  --btn-bd: var(--color-gold);
}
.btn--oro:hover {
  background: #D8B65C; border-color: #D8B65C; color: var(--color-ink);
}

/* ========================================================== opiniones
   Acento azul fino arriba en cada tarjeta, en vez de depender sólo del
   borde. */
.review { border-top: 2px solid var(--color-brand); }

/* ====================================================== salvia, al mínimo
   Deja de ser una superficie grande y se queda en detalle. El botón de
   apoyo pasa a contorno azul; la salvia sólo vive ya en iconos y acentos. */
.btn--soft {
  --btn-bg: transparent;
  --btn-fg: var(--color-brand);
  --btn-bd: rgba(31, 58, 95, 0.28);
}
.btn--soft:hover {
  background: rgba(31, 58, 95, 0.06);
  border-color: var(--color-brand);
  color: var(--color-brand);
}

/* ================================================================ adaptación */
@media (max-width: 1023px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-card--destacada { grid-template-columns: 1fr; }
  .svc-card--destacada .svc-card__foto { min-height: 0; }
  .flow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .confianza { grid-template-columns: repeat(2, 1fr); }
  .confianza__it:nth-child(3) { border-left: 0; }
  .confianza__it:nth-child(n+3) { border-top: 1px solid var(--card-bd); }
}
@media (max-width: 639px) {
  .svc-grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .cta { grid-template-columns: 1fr; }
  .cta .actions .btn { width: 100%; }
}
@media (max-width: 479px) {
  .confianza { grid-template-columns: 1fr; }
  .confianza__it { border-left: 0; }
  .confianza__it + .confianza__it { border-top: 1px solid var(--card-bd); }
}

@media (prefers-reduced-motion: reduce) {
  .svc-card:hover, .mini:hover { transform: none; }
  .svc-card:hover .svc-card__foto > img { transform: none; }
  .mini:hover .mini__f { transform: none; }
}

/* ==========================================================================
   v8.4 · PROPAGACIÓN A LAS PÁGINAS INTERIORES
   --------------------------------------------------------------------------
   Lo que no puede pasar es que la portada parezca una web nueva y las
   interiores la antigua. Casi todo se hereda solo —las tarjetas, el fondo,
   los botones, las sombras ya son compartidos—; esto es lo que faltaba.
   ========================================================================== */

/* El bloque de aviso pasa a ser una superficie como el resto, con un filete
   dorado al canto. Antes era texto sobre el fondo con un borde suelto. */
.note {
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-left: 3px solid var(--color-acento);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
}

/* Las listas con viñeta de guion llevan ahora el guion en azul de marca: es
   el mismo recurso que los iconos, en pequeño. */
.dashed li::before { color: var(--color-brand); }

/* Las tarjetas del carrusel, al mismo gesto que las de la portada. */
.rail-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
/* OJO CON EL SELECTOR, por segunda vez en este proyecto: el número es un
   <p>, así que `.rail-card p` (0-1-1) le gana a `.rail-card__n` (0-1-0) y
   dejaba el texto en gris sobre azul —2,01:1, ilegible—. Lo detectó la
   auditoría de contraste, no el ojo. De ahí el selector compuesto. */
.rail-card .rail-card__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-brand); color: #fff;
  font-variant-numeric: tabular-nums; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0;
}

/* Los perfiles «para quién es» ya eran tarjetas; se les iguala el aire. */
.who { gap: 0.85rem; }
.who__item { padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.45rem); }

/* Las dos columnas de las interiores: la secundaria se apoya en una
   superficie para que la página tenga la misma densidad que la portada. */
.cols--60 > :last-child {
  align-self: start;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

/* El formulario de contacto, en caja: es la pieza más importante de esa
   página y estaba suelta sobre el fondo. */
.page-contacto .form {
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.35rem, 1rem + 1.4vw, 2rem);
}

@media (max-width: 1023px) { .who { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .who { grid-template-columns: 1fr; } }

/* ==========================================================================
   v8.5 · AJUSTE AL BOCETO
   --------------------------------------------------------------------------
   Con el boceto delante, lo que faltaba no era color: era DENSIDAD. El boceto
   es mucho más horizontal —cabeceras en fila, tarjetas con foto al lado, los
   pasos junto al titular— y usa el oro mucho más de lo que yo lo usaba.
   ========================================================================== */

/* ---------------------------------------------------------- cabecera
   Deja de ser una barra a todo lo ancho y pasa a ser una tarjeta flotante. */
.header {
  top: 0.75rem;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}
.header__inner {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(31, 58, 95, 0.05),
              0 12px 30px -16px rgba(31, 58, 95, 0.22);
  padding-inline: clamp(1rem, 0.6rem + 1.2vw, 1.6rem);
  backdrop-filter: saturate(150%) blur(10px);
}
.header--stuck .header__inner { background: rgba(255, 255, 255, 0.97); }

/* --------------------------------------------------------------- hero
   Foto apaisada y a mayor tamaño. */
.hero { align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); } }
/* Panorámica, como en el boceto: allí la foto mide 670x255, o sea 2,6:1.
   Con 16/11 salía casi cuadrada y no se parecía. */
.hero__slot { --ratio: 21 / 10; }
/* El encuadre sube: la catedral está en el tercio superior de la foto, y al
   recortar a apaisado un centrado la decapitaba. */
.hero__slot > img { object-position: center 32%; }

/* Los dos distintivos que flotan sobre la foto. */
.pin {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin: 0; padding: 0.6rem 0.9rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 6px rgba(31, 58, 95, 0.10),
              0 14px 32px -16px rgba(31, 58, 95, 0.32);
  font-size: var(--fs-tiny); line-height: 1.3; color: var(--color-text-2);
  backdrop-filter: saturate(140%) blur(8px);
}
.pin strong { color: var(--color-ink); font-weight: 600; }
.pin__ic { display: inline-flex; color: var(--color-acento); }
.pin__ic .ic { width: 1.1rem; height: 1.1rem; }
.pin--alto { top: 1rem; right: 1rem; }
.pin--bajo { bottom: 1rem; left: 1rem; }
.pin--bajo .pin__ic { color: var(--color-brand); }

/* Botones con la flecha dentro, como en el boceto. */
.btn--flecha::after {
  content: '→'; font-size: 1em; line-height: 1;
  transition: transform var(--t-2) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn--flecha:hover::after { transform: translateX(3px); }
}

/* ------------------------------------------------- franja de confianza
   Icono dorado a la izquierda y dos líneas de texto al lado. */
.confianza { grid-template-columns: repeat(4, 1fr); }
.confianza__it {
  display: flex; align-items: center; gap: 0.85rem;
  justify-items: stretch; text-align: left;
  padding: clamp(1rem, 0.8rem + 0.7vw, 1.35rem) clamp(0.9rem, 0.6rem + 1vw, 1.5rem);
}
.confianza__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: var(--radius-md);
  /* Oro diluido con el oro oscuro encima: 3,2:1, suficiente para un icono. */
  background: rgba(201, 166, 70, 0.16);
  color: var(--color-acento);
  margin: 0;
}
.confianza__ic .ic { width: 1.35rem; height: 1.35rem; }
.confianza__txt { display: grid; gap: 0.1rem; min-width: 0; }
.confianza__dato { font-size: var(--fs-small); font-weight: 600; }
.confianza__pie { font-size: 0.78rem; line-height: 1.35; }

/* ------------------------------------------------- cabecera de sección
   Titular, texto de apoyo y enlace, en una sola fila. */
.sec-head {
  display: grid; align-items: end; gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  margin-bottom: var(--space-6);
}
.sec-head__t h2 { margin: 0; }
.sec-head__t .eyebrow { margin-bottom: 0.5rem; }
.sec-head__d { margin: 0; font-size: var(--fs-small); color: var(--color-text-2); }
.sec-head__a { justify-self: end; white-space: nowrap; }

/* ====================================================== tres servicios
   Mismo tamaño las tres, con el icono en disco de color y la foto al lado. */
.svc3 { display: grid; gap: var(--space-5); grid-template-columns: repeat(3, 1fr); }
.svc3__c {
  position: relative;
  display: grid; gap: 0.75rem 0.9rem;
  /* En el boceto la foto va AL LADO del texto, ocupando la mitad derecha de
     la tarjeta y de arriba abajo. La tenía debajo y por eso las tarjetas
     salían más altas y menos densas que en la referencia. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  grid-template-areas: 'ic    foto'
                       'texto foto';
  /* La segunda fila se come el alto sobrante. Sin esto, en las tarjetas con
     texto corto las filas sumaban menos que la tarjeta —que se estira para
     igualar a la más alta— y la foto se quedaba a 277 px en una tarjeta de
     328. Medido: sólo la de Empresas llegaba abajo. */
  grid-template-rows: auto 1fr;
  align-content: stretch;
  padding: clamp(1.15rem, 0.9rem + 0.8vw, 1.5rem);
  padding-right: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  color: inherit; text-decoration: none;
  transition: transform var(--t-2) var(--ease),
              box-shadow var(--t-2) var(--ease),
              border-color var(--t-2) var(--ease);
}
.svc3__ic {
  grid-area: ic;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: none;
  border-radius: var(--radius-pill);
}
.svc3__ic .ic { width: 1.35rem; height: 1.35rem; }
/* Tres colores distintos, como en el boceto: salvia, oro y azul. Todos con
   el icono en un tono que da más de 4,5:1 sobre su disco. */
.svc3__c--salvia .svc3__ic { background: rgba(168, 195, 176, 0.42); color: #2F5B41; }
.svc3__c--oro    .svc3__ic { background: var(--color-gold);         color: var(--color-ink); }
.svc3__c--azul   .svc3__ic { background: rgba(31, 58, 95, 0.10);    color: var(--color-brand); }

.svc3__b { grid-area: texto; display: grid; gap: 0.4rem; padding-right: 1.1rem; }
.svc3__b h3 { margin: 0; font-size: var(--fs-h3); letter-spacing: var(--tr-h3); }
.svc3__b p  { margin: 0; font-size: var(--fs-small); color: var(--color-text-2); }
.svc3__b .arrow { margin-top: 0.35rem; }

/* La foto ocupa el ancho de la tarjeta por abajo, pegada al borde. */
.svc3__foto {
  grid-area: foto;
  /* Sin proporción fija: se estira a lo que mida la columna de texto, que es
     lo que la hace ocupar la tarjeta de arriba abajo como en el boceto. */
  --ratio: auto;
  align-self: stretch;
  margin: calc(clamp(1.15rem, 0.9rem + 0.8vw, 1.5rem) * -1) 0;
  min-height: 100%;
  border: 0; border-radius: 0; box-shadow: none;
}
.svc3__foto > img { border-radius: 0; }

@media (hover: hover) and (pointer: fine) {
  .svc3__c:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(31, 58, 95, 0.22);
  }
  .svc3__c:hover .arrow { color: var(--color-acento-texto); }
  .svc3__c:hover .arrow::after { transform: translateX(4px); }
  .svc3__c:hover .svc3__foto > img { transform: scale(1.04); }
}

/* ============================================ tira de otros servicios
   Una sola superficie con cinco piezas y divisores. */
.tira {
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin-top: var(--space-5);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.tira__it {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 1.1rem 1rem;
  border-left: 1px solid var(--card-bd);
  color: inherit; text-decoration: none;
  transition: background var(--t) var(--ease);
}
.tira__it:first-child { border-left: 0; }
.tira__ic { display: inline-flex; flex: none; color: var(--color-brand); margin-top: 0.1rem; }
.tira__ic .ic { width: 1.1rem; height: 1.1rem; }
.tira__b { display: grid; gap: 0.15rem; min-width: 0; }
.tira__t {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-small); font-weight: 600; line-height: 1.3;
}
.tira__f { color: var(--color-text-2); transition: transform var(--t-2) var(--ease); }
.tira__d { font-size: 0.78rem; line-height: 1.4; color: var(--color-text-2); }
@media (hover: hover) and (pointer: fine) {
  .tira__it:hover { background: var(--hover-wash); }
  .tira__it:hover .tira__t { color: var(--color-brand); }
  .tira__it:hover .tira__f { transform: translateX(3px); color: var(--color-brand); }
}

/* ================================================================ pasos
   Titular a la izquierda, las cuatro tarjetas a la derecha. */
.pasos {
  display: grid; gap: var(--space-6);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr);
  align-items: center;
}
.pasos__head h2 { margin: 0; }
.pasos__head .eyebrow { margin-bottom: 0.6rem; }
.pasos__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.paso {
  padding: clamp(1rem, 0.85rem + 0.5vw, 1.3rem);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-2) var(--ease),
              box-shadow var(--t-2) var(--ease),
              border-color var(--t-2) var(--ease);
}
.paso__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.7rem;
}
.paso__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums; font-size: 0.8125rem; font-weight: 600;
}
.paso__ic { opacity: 0.85; width: 1.35rem; height: 1.35rem; }
/* Los cuatro discos alternan color, como en el boceto. */
.paso--azul   .paso__n { background: var(--color-brand);      color: #fff; }
.paso--oro    .paso__n { background: var(--color-gold);       color: var(--color-ink); }
.paso--salvia .paso__n { background: rgba(168,195,176,0.55);  color: #2F5B41; }
.paso--azul   .paso__ic { color: var(--color-brand); }
.paso--oro    .paso__ic { color: var(--color-acento); }
.paso--salvia .paso__ic { color: #2F5B41; }
.paso h3 { margin: 0 0 0.25rem; font-size: var(--fs-body); letter-spacing: -0.01em; }
.paso p  { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-2); }
@media (hover: hover) and (pointer: fine) {
  .paso:hover {
    transform: translateY(-3px); box-shadow: var(--shadow-lift);
    border-color: rgba(31, 58, 95, 0.22);
  }
}

/* ================================================== banda de cierre
   Tres columnas: mensaje, motivos y botón. */
.cta {
  grid-template-columns: minmax(0, 1.05fr) auto auto;
  gap: clamp(1.25rem, 0.8rem + 2vw, 2.75rem);
  position: relative; overflow: hidden;
}
.cta__epi {
  margin: 0 0 0.45rem;
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--color-gold);
}
.cta__sub { margin: 0.5rem 0 0; color: #C8CDD6; font-size: var(--fs-small); }
.cta__ventajas {
  display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none;
}
.cta__ventajas li {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.8125rem; line-height: 1.35; color: #DCE1E8;
}
.cta__vic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex: none;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
}
.cta__vic .ic { width: 1.1rem; height: 1.1rem; }

/* ------------------------------------------------------------ adaptación */
@media (max-width: 1199px) {
  .cta { grid-template-columns: 1fr 1fr; }
  .cta .actions { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
  .svc3 { grid-template-columns: 1fr; }
  /* En una sola columna la tarjeta es ancha, así que la foto puede ser más
     baja sin que parezca un sello. */
  .svc3__foto { --ratio: 16 / 5; }
  .tira { grid-template-columns: repeat(2, 1fr); }
  .tira__it:nth-child(odd) { border-left: 0; }
  .tira__it:nth-child(n+3) { border-top: 1px solid var(--card-bd); }
  .pasos { grid-template-columns: 1fr; }
  .pasos__grid { grid-template-columns: repeat(2, 1fr); }
  .sec-head { grid-template-columns: 1fr; }
  .sec-head__a { justify-self: start; }
  .confianza { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .cta { grid-template-columns: 1fr; }
  .tira { grid-template-columns: 1fr; }
  .tira__it { border-left: 0; }
  .tira__it + .tira__it { border-top: 1px solid var(--card-bd); }
  .pasos__grid { grid-template-columns: 1fr; }
  .pin { font-size: 0.7rem; padding: 0.45rem 0.7rem; }
  .pin--alto { top: 0.6rem; right: 0.6rem; }
  .pin--bajo { bottom: 0.6rem; left: 0.6rem; }
}
@media (max-width: 479px) {
  .confianza { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .paso:hover, .svc3__c:hover { transform: none; }
  .svc3__c:hover .svc3__foto > img { transform: none; }
  .btn--flecha:hover::after, .tira__it:hover .tira__f { transform: none; }
}

/* --------------------------------------------- formas de fondo del hero
   El boceto lleva unas formas muy tenues, como pétalos, en los márgenes de
   la primera pantalla. Van en CSS puro —dos elipses con degradado— y no
   como imagen: no añaden ni una petición ni un byte de descarga.

   `aria-hidden` no hace falta porque son pseudoelementos: no existen para
   quien usa un lector de pantalla. */
.band--first { position: relative; overflow: hidden; }
.band--first::before,
.band--first::after {
  content: ''; position: absolute; z-index: 0;
  pointer-events: none;
  border-radius: 50% 50% 50% 8%;
  background: radial-gradient(closest-side,
              rgba(201, 166, 70, 0.10), rgba(201, 166, 70, 0));
}
.band--first::before {
  width: 46rem; height: 34rem;
  top: -14rem; right: -16rem;
  transform: rotate(-18deg);
}
.band--first::after {
  width: 34rem; height: 26rem;
  bottom: -12rem; left: -14rem;
  transform: rotate(12deg);
  background: radial-gradient(closest-side,
              rgba(168, 195, 176, 0.16), rgba(168, 195, 176, 0));
}
/* El contenido por encima de las formas. */
.band--first > .wrap { position: relative; z-index: 1; }

/* Quien pide menos movimiento no pierde nada: son estáticas. */
@media (max-width: 767px) {
  /* En el teléfono estorban más que ayudan: ocupan el mismo sitio que el
     texto y lo ensucian. */
  .band--first::before, .band--first::after { display: none; }
}

/* ==========================================================================
   v8.6 · PULIDO FINAL · la dirección de la página Empresas
   --------------------------------------------------------------------------
   Empresas es la página mejor resuelta: rejillas completas, nada cortado,
   mucho aire y una nota flotante bien puesta. Esto lleva el resto ahí.
   ========================================================================== */

/* ------------------------------------------------------------- cabecera
   Deja de ser una tarjeta flotante y pasa a ser una franja blanca a todo el
   ancho. La caja encapsulaba la navegación y la hacía parecer un widget;
   una franja limpia se lee como navegación nativa. */
.header { top: 0; }
.header__inner {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding-inline: var(--gutter);
}
.header {
  background: #FFFFFF;
  /* Una línea de pelo, no una sombra de tarjeta. */
  border-bottom: 1px solid rgba(30, 36, 48, 0.07);
}
/* Al desplazar, la franja gana una sombra mínima: sigue siendo una franja,
   sólo que ahora se sabe que hay contenido debajo. */
.header--stuck {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(30, 36, 48, 0.09);
  box-shadow: 0 1px 0 rgba(30, 36, 48, 0.03),
              0 10px 24px -20px rgba(31, 58, 95, 0.30);
}

/* ---------------------------------------------------------- hero · encuadre
   TERCER INTENTO, y esta vez con la foto medida en vez de a ojo.

   La fotografía es 1122x1402, o sea VERTICAL (0,80:1). Con `cover`, la parte
   que se ve es  aspectoFoto / aspectoCaja,  así que cuanto más apaisada la
   caja, menos foto cabe. Medido sobre la imagen:

       aguja de la torre alta   10 %     tablero del puente   48,5 %
       cúpula derecha         15,3 %     pies de los arcos    64 %
       base de la catedral    35,7 %     agua y reflejo       desde 63 %

   Y esto es lo que entraba con cada proporción:

       21:10  se ve el 38 %   ventana 26 → 64 %   torres FUERA
       16:10  se ve el 50 %   ventana 21 → 71 %   torres FUERA  ← el fallo
        3:2   se ve el 53 %   ventana  4 → 58 %   torres dentro, puente a medias
        4:3   se ve el 60 %   ventana  5 → 65 %   torres, puente y agua

   De ahí 4:3. Con 3:2 las torres ya entraban, pero el puente quedaba cortado
   a media estructura y no se veía nada de agua; se probó y se descartó.

   El 12 % del encuadre sale de la cuenta: con el 60 % visible, la ventana
   empieza en 0,12 × 0,40 = 4,8 %, que deja algo más de cinco puntos de cielo
   por encima de la aguja. Más arriba y sobra cielo; más abajo y la torre
   vuelve a tocar el borde. */
.hero__slot { --ratio: 4 / 3; }
.hero__slot > img { object-position: center 12%; }

/* Los distintivos respiran más y se separan de las esquinas. */
.pin--alto { top: 1.15rem; right: 1.15rem; }
.pin--bajo { bottom: 1.15rem; left: 1.15rem; }

/* ----------------------------------------------------------- botones
   El hover aclara un punto más. Era +0,08 de luminosidad; pasa a +0,13, que
   son unos 32 puntos por canal: se nota sin convertirse en otro color. */
.btn:hover { background: #30589A; border-color: #30589A; }
.btn--oro:hover { background: #DFC070; border-color: #DFC070; }

/* ------------------------------------------------- las nueve vías
   Rejilla completa, al estilo de «Para quién es» de Empresas. Las tarjetas
   heredan todo lo que ya tenía `.rail-card` —relieve, radio, disco azul del
   número— y sólo cambia cómo se colocan. */
.vias {
  display: grid; gap: 0.85rem;
  grid-template-columns: repeat(3, 1fr);
}
.via {
  display: grid; align-content: start; gap: 0.3rem;
  padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.45rem);
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-2) var(--ease),
              box-shadow var(--t-2) var(--ease),
              border-color var(--t-2) var(--ease);
}
.via .rail-card__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; margin: 0 0 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-brand); color: #fff;
  font-variant-numeric: tabular-nums; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0;
}
.via h3 { margin: 0; font-size: var(--fs-body); letter-spacing: -0.01em; }
.via p  { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-2); }
@media (hover: hover) and (pointer: fine) {
  .via:hover {
    transform: translateY(-3px); box-shadow: var(--shadow-lift);
    border-color: rgba(31, 58, 95, 0.22);
  }
}
@media (max-width: 1023px) { .vias { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .vias { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .via:hover { transform: none; } }

/* ==========================================================================
   DIFUMINADO · dónde sí y dónde no
   --------------------------------------------------------------------------
   El criterio: el desenfoque sólo tiene sentido cuando hay ALGO DETRÁS que
   se vea moverse o cambiar. Sobre un fondo liso no aporta nada y sólo cuesta
   pintura. Por eso va en cuatro sitios y en ninguno más:

     · los distintivos del hero, que flotan sobre una fotografía;
     · la cabecera al desplazar, que tiene la página pasando por debajo;
     · la nota destacada de las páginas de servicio;
     · el aviso de cookies, que se superpone al contenido.

   NO va en las tarjetas, ni en los paneles, ni en la banda de cierre: ahí
   detrás sólo hay color plano y el efecto sería gratuito.

   Todos los fondos son opacos ANTES del desenfoque, así que en un navegador
   que no lo soporte —o con el ahorro de datos activado— el texto se lee
   exactamente igual. El desenfoque añade acabado, nunca legibilidad.
   ========================================================================== */

/* Los distintivos del hero: detrás hay foto, así que el desenfoque separa el
   texto del follaje sin tener que taparlo con una caja opaca. */
.pin {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(31, 58, 95, 0.10),
              0 16px 34px -18px rgba(23, 50, 77, 0.38);
}

/* La nota de las páginas de servicio. Detrás está el fondo de la banda, así
   que el desenfoque es casi imperceptible: lo que aporta es el matiz de
   translucidez, que la hace parecer apoyada y no pegada. */
.note {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(140%) blur(10px);
}

/* El aviso de cookies se superpone a la página: aquí el desenfoque sí hace
   trabajo real. */
.consent-banner {
  backdrop-filter: saturate(160%) blur(16px);
}

/* Un navegador sin soporte se queda con fondos opacos, que ya están puestos
   arriba. Esto sólo los sube a opacidad completa para que no se transparente
   nada sin el desenfoque que lo compensa. */
@supports not (backdrop-filter: blur(1px)) {
  .pin  { background: rgba(255, 255, 255, 0.97); }
  .note { background: #FFFFFF; }
}

/* ==========================================================================
   v8.7 · AJUSTES FINALES
   ========================================================================== */

/* -------------------------------------------- 1 · reseñas · una sola línea
   Había DOS líneas de 2 px apiladas arriba: la tarjeta ya traía una dibujada
   con `::before`, y en la v8.4 le añadí encima un `border-top`. El borde
   empuja al pseudoelemento hacia abajo, así que se veían las dos.

   Se quita el borde que sobraba y se afina la que queda: de 2 px a 1,5 y en
   azul diluido en vez de sólido. Queda como un detalle, no como un marco. */
.review { border-top: 0; }
.review::before {
  height: 1.5px;
  background: rgba(31, 58, 95, 0.55);
}

/* --------------------------------- 2 · home · las tres tarjetas, con aire
   El bloque se veía apretado: la descripción llegaba casi tocando el corte
   de la foto y la columna de texto iba justa.

   Tres ajustes, ninguno de concepto:
     · la foto baja de 0,82 a 0,62 de la columna, así el texto manda;
     · el hueco entre texto y foto sube de 0,9 a 1,6 rem;
     · el relleno interior crece y la descripción respira. */
/* SEGUNDO INTENTO, porque el primero empeoró lo que quería arreglar.
   Estrechar la foto para dar sitio al texto no funcionó: con tres tarjetas a
   1440 px cada una mide unos 330, y repartidos entre texto y foto el texto
   se quedaba en 190. «Arraigos, renovaciones, nacionalidad y cambios en la
   familia» salía en cuatro líneas cortadas. Más apretado, no menos.

   La foto pasa debajo, en banda. Así el texto tiene el ANCHO COMPLETO de la
   tarjeta y el recorte de la imagen es apaisado y suave, en vez de una tira
   vertical. Se mantiene el concepto —tres tarjetas iguales con icono, texto,
   enlace y foto— y cambia sólo dónde va la imagen. */
.svc3__c {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 'ic' 'texto' 'foto';
  gap: 0.75rem;
  padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  padding-bottom: 0;
}
.svc3__b {
  gap: 0.55rem;
  padding-right: 0;
}
.svc3__b p { line-height: 1.6; }
.svc3__b .arrow { margin-top: 0.75rem; }
.svc3__ic { margin-bottom: 0.15rem; }

/* El recorte de la foto, menos agresivo: en vez de pegarse a los bordes de
   la tarjeta, se separa y lleva su propio radio. Así deja de leerse como un
   corte y pasa a ser una imagen puesta al lado. */
.svc3__foto {
  /* Apaisada y ancha: el recorte deja de ser agresivo. */
  --ratio: 16 / 7;
  align-self: end;
  min-height: 0;
  margin: 0.45rem 0 clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.svc3__foto > img { border-radius: var(--radius-md); }

/* ------------------------- 3 · «Consulta inicial gratuita», con presencia
   Vuelve al amarillo de Correos, que es el que tenía antes de la v8.3 y el
   que de verdad llama. Grafito encima: 10,86:1.

   Y crece: tipo más grande, más relleno y el punto un poco mayor. Sigue
   siendo una píldora fina, no un cartel. */
.free-badge {
  background: var(--color-correos);
  color: var(--color-ink);
  border: 1px solid rgba(30, 36, 48, 0.12);
  padding: 0.6rem 1.15rem;
  gap: 0.55rem;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 2px rgba(30, 36, 48, 0.08),
              0 8px 20px -10px rgba(214, 178, 0, 0.55);
}
.free-badge::before {
  width: 7px; height: 7px;
  background: var(--color-ink); opacity: 1;
}
/* Sobre la banda azul del cierre sigue valiendo: 10,9:1. */
.cta .free-badge {
  background: var(--color-correos);
  color: var(--color-ink);
  border-color: rgba(30, 36, 48, 0.14);
}