/* Fuentes cargadas desde includes/header.php con preconnect (mejor LCP). */

/* =============================================
   VARIABLES & RESET
   ============================================= */
 :root {
  color-scheme: light;

  /* --- Superficies y tinta ------------------------------------------ */
  --bg: #f7f1ed;
  --bg-soft: #fbf7f4;          /* arranque de los degradados de seccion */
  --bg-tint: #fff8fa;          /* fondo de .section-alt */
  --surface: #fff;             /* tarjetas, paneles, campos de formulario */
  --panel: rgba(255,255,255,.9);
  --glass: rgba(255,255,255,.72);
  --ink: #20151a;
  --muted: #695d63;
  --line: #eadbe0;
  /* --line vale para separadores decorativos, pero como borde de un campo
     se queda en 1,3:1 y el campo no se distingue de la tarjeta. WCAG pide
     3:1 para el limite visual de cualquier control. */
  --line-control: #b09aa2;
  /* Color del anillo de foco. El dorado de marca se queda en 2,4:1 sobre el
     fondo claro: quien navega con teclado no ve donde esta. */
  --foco: #8b0724;

  /* --- Marca --------------------------------------------------------- */
  --primary: #8b0724;
  --primary-dark: #641224;
  --primary-mid: #aa1d3c;
  --primary-soft: #fff0f3;
  --gold: #c9963a;
  --gold-soft: #fff7ea;

  /* El burdeos cumple dos papeles: relleno de boton y color de texto.
     Sobre fondo oscuro el primero aguanta y el segundo desaparece, asi
     que van separados para poder aclarar solo el texto en modo oscuro. */
  --primary-ink: var(--primary);
  --primary-ink-strong: var(--primary-dark);

  /* El pie va SIEMPRE oscuro (su texto es blanco fijo). Necesita token
     propio: usar --ink, que es color de tinta, lo pintaba casi blanco en
     modo oscuro y hacia desaparecer los enlaces legales. */
  --footer-a: #20151a;
  --footer-b: #2d1a24;

  --shadow-sm: 0 10px 24px rgba(55,18,26,.08);
  --shadow: 0 20px 60px rgba(55,18,26,.12);
  --shadow-lg: 0 40px 80px rgba(55,18,26,.18);

  /* --- Radios: 4 escalones, antes habia 14 --------------------------- */
  --radius-xs: 6px;
  --radius-sm: 13px;
  --radius-md: 18px;
  --radius: 20px;
  --radius-lg: 30px;

  /* --- Escala tipografica --------------------------------------------
     Antes habia 47 tamanos sueltos y nueve de ellos caian entre 13 y
     14 px: el ojo no los distingue, pero impiden que exista jerarquia
     porque casi todo mide lo mismo. Diez escalones, y los tres grandes
     son fluidos para que el titular pueda ser XXL en escritorio sin
     romper nada en movil. */
  --fs-2xs:  .72rem;
  --fs-xs:   .78rem;
  --fs-sm:   .85rem;
  --fs-md:   .92rem;
  --fs-base: 1rem;
  --fs-lg:   1.12rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  clamp(1.4rem, 1.2rem + .8vw, 1.85rem);
  --fs-3xl:  clamp(1.9rem, 1.45rem + 2vw, 2.9rem);
  --fs-4xl:  clamp(2.3rem, 1.6rem + 3.2vw, 4rem);

  --container: 1160px;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  /* --- Movimiento -----------------------------------------------------
     Duraciones y curvas como tokens, igual que los colores. Antes habia
     duraciones sueltas repartidas por el archivo y ninguna coherencia
     entre lo que tarda un hover y lo que tarda un desplegable. */
  --dur-micro:  160ms;
  --dur-media:  320ms;
  --dur-entra:  420ms;   /* antes 620: demasiado para algo que se repite en cada seccion */
  --dur-escena: 900ms;
  --ease-salida: cubic-bezier(.22, 1, .36, 1);
  /* Antes era (.4, 0, .2, 1), que arranca lento: retrasa justo el
     instante que el usuario esta mirando. Curva de salida real. */
  --ease-suave:  cubic-bezier(.25, .8, .3, 1);
  --ease-firme:  cubic-bezier(.34, 1.26, .64, 1);
  /* Duracion y curva, SIN propiedad: cada regla nombra la suya. Escribir
     `transition: var(--transition)` a secas equivale a `all`, y eso deja
     que se animen tambien el ancho o el relleno, que recalculan el
     diseno en cada fotograma. */
  --transition: var(--dur-micro) var(--ease-suave);
  --tr-color: color var(--dur-micro) var(--ease-suave), border-color var(--dur-micro) var(--ease-suave), background-color var(--dur-micro) var(--ease-suave);

  /* Canal RGB de los paneles translucidos y de la banda de cookies.
     Sin esto, un panel escrito como rgba(255,255,255,.72) se queda
     blanco en modo oscuro y el texto claro encima desaparece. */
  --velo-rgb: 255,255,255;
  --surface-tenue: #fdfbfc;
  --gold-ink: #7a5a1e;
  /* Un dorado mas claro se queda en 3,4:1 sobre el fondo blanco de la
     tarjeta, y las estrellas son texto de 14 px. */
  --estrella: #9c6500;
  --inverso: #20151a;
  --header-bg: rgba(251,247,244,.86);
  --header-bg-scrolled: rgba(251,247,244,.94);
  --linea-cabecera: rgba(232,221,226,.7);
}

/* =============================================
   MODO OSCURO
   =============================================
   Tres estados, no dos: el visitante puede elegir claro u oscuro (y queda
   grabado en data-theme), o no elegir nada, que es lo mas habitual y deja
   mandar a la preferencia del sistema.

   La paleta oscura NO es la clara invertida. El burdeos #8b0724 es
   practicamente negro y sobre fondo oscuro no se lee: como texto se
   sustituye por un rosa de la misma familia. El dorado, en cambio, luce
   mucho mejor sobre oscuro que sobre crema, y ahi gana protagonismo.

   Todos los colores estan declarados arriba en :root. Aqui solo se
   redefinen. Ninguno existe unicamente dentro de este bloque: esa fue la
   causa de los tres textos invisibles que ya hemos tenido en el pie. */
:root[data-theme="oscuro"] {
  color-scheme: dark;

  --bg: #191013;
  --bg-soft: #1f151a;
  --bg-tint: #211519;
  --surface: #241a1e;
  --panel: rgba(36,26,30,.92);
  --glass: rgba(36,26,30,.72);
  --ink: #f3eae7;
  --muted: #bfa9af;
  --line: #3a272e;
  --line-control: #7a5a64;
  --foco: #f0b429;

  --primary: #a81030;
  --primary-dark: #7d0c22;
  --primary-mid: #c9304d;
  --primary-soft: #2c1a20;
  --gold: #dcae55;
  --gold-soft: #2b2117;

  --primary-ink: #f0899d;
  --primary-ink-strong: #f7adba;

  /* Un punto por debajo del cuerpo, para que el pie siga separandose. */
  --footer-a: #120c0f;
  --footer-b: #1d1218;

  /* Sobre fondo oscuro una sombra negra no se ve. Se sustituye por una
     mas profunda y se apoya el relieve en el borde, no en la sombra. */
  --shadow-sm: 0 10px 24px rgba(0,0,0,.35);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --shadow-lg: 0 40px 80px rgba(0,0,0,.55);

  --velo-rgb: 36,26,30;
  --surface-tenue: #1e1418;
  --gold-ink: #e0bd72;
  --estrella: #f0b429;
  --inverso: #2e1f25;
  --header-bg: rgba(25,16,19,.86);
  --header-bg-scrolled: rgba(25,16,19,.95);
  --linea-cabecera: rgba(58,39,46,.85);
}

/* Sin eleccion explicita del visitante, manda el sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) { color-scheme: dark;
    --bg: #191013; --bg-soft: #1f151a; --bg-tint: #211519;
    --surface: #241a1e; --panel: rgba(36,26,30,.92); --glass: rgba(36,26,30,.72);
    --ink: #f3eae7; --muted: #bfa9af; --line: #3a272e;
    --line-control: #7a5a64; --foco: #f0b429;
    --primary: #a81030; --primary-dark: #7d0c22; --primary-mid: #c9304d;
    --primary-soft: #2c1a20; --gold: #dcae55; --gold-soft: #2b2117;
    --primary-ink: #f0899d; --primary-ink-strong: #f7adba;
    --footer-a: #120c0f; --footer-b: #1d1218;
    --shadow-sm: 0 10px 24px rgba(0,0,0,.35);
    --shadow: 0 20px 60px rgba(0,0,0,.45);
    --shadow-lg: 0 40px 80px rgba(0,0,0,.55);
    --velo-rgb: 36,26,30;
    --surface-tenue: #1e1418;
    --gold-ink: #e0bd72;
    --estrella: #f0b429;
    --inverso: #2e1f25;
    --header-bg: rgba(25,16,19,.86);
    --header-bg-scrolled: rgba(25,16,19,.95);
    --linea-cabecera: rgba(58,39,46,.85);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  /* Color solido de respaldo: si el degradado no pinta (impresion, modo
     alto contraste, captura), el fondo sigue siendo crema y no blanco.
     Va DENTRO de la abreviada: declarado antes como background-color,
     la abreviada posterior lo reiniciaba a transparente y el respaldo
     no existia en realidad. */
  background:
    radial-gradient(circle at top left, rgba(201,150,58,.08), transparent 28%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%)
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
body.menu-open .cta-bar,
body.menu-open .wa-float,
body.menu-open .back-to-top { opacity: 0; pointer-events: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); line-height: 1.1; }
p { margin: 0; color: var(--muted); line-height: 1.75; }

/* =============================================
   UTILITIES
   ============================================= */
.container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
.section { padding: 96px 0; }
.section-alt { background: linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 100%); }
.section-dark { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-mid) 100%); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(255,255,255,.8); }
.section-white { background: var(--glass); backdrop-filter: blur(12px); }

/* Texto solo para lectores de pantalla. No se puede usar display:none ni
   visibility:hidden: eso lo esconde tambien del lector, que es justo lo
   contrario de lo que se busca. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 400;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--primary-dark);
  color: #fff;
  transform: translateY(-150%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.text-center { text-align: center; }
.text-center .eyebrow { justify-content: center; }
.max-700 { max-width: 700px; margin-left: auto; margin-right: auto; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
.mt-32 { margin-top: 32px; }
.mb-0  { margin-bottom: 0 !important; }

/* =============================================
   SCROLL PROGRESS
   ============================================= */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--primary), var(--gold));
  z-index: 300;
  /* Antes animaba width. Se escala en su lugar: transform lo resuelve la
     tarjeta grafica sin recalcular el diseno en cada fotograma. */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .1s linear;
}

/* =============================================
   EYEBROW
   ============================================= */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 16px; letter-spacing: .2em; text-transform: uppercase;
  font-size: var(--fs-2xs); font-weight: 700; color: var(--primary-ink); font-family: var(--font-body);
}
.eyebrow::before {
  content: ''; display: block; width: 26px; height: 2px;
  background: var(--primary); border-radius: 2px; flex-shrink: 0;
}
.section-dark .eyebrow { color: rgba(255,255,255,.65); }
.section-dark .eyebrow::before { background: rgba(255,255,255,.45); }

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: inline-flex; justify-content: center; align-items: center;
  gap: 8px; border-radius: var(--radius-sm); padding: 15px 26px; font-weight: 700;
  font-size: var(--fs-base); border: 1.5px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition); cursor: pointer;
  font-family: var(--font-body); white-space: nowrap; line-height: 1;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible,
.field-input:focus-visible,
.tab-btn:focus-visible,
.menu-toggle:focus-visible,
.cta-bar-close:focus-visible,
.back-to-top:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  /* Halo claro alrededor del anillo: garantiza que se vea tanto sobre una
     tarjeta blanca como sobre una banda oscura, sin cambiar de color. */
  box-shadow: 0 0 0 5px rgba(255,255,255,.85);
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary-mid), var(--primary-dark));
  color: #fff; box-shadow: 0 8px 28px rgba(139,7,36,.28);
}
.btn-primary:hover { box-shadow: 0 14px 36px rgba(139,7,36,.38); }
.btn-secondary { background: var(--surface); color: var(--primary-ink); border-color: #d9bfc6; }
.btn-secondary:hover { background: var(--primary-soft); }
.btn-white { background: #fff; color: #8b0724; border-color: rgba(255,255,255,.3); }
.btn-white:hover { background: rgba(255,255,255,.92); }
.btn-sm, .btn-small { padding: 10px 18px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.btn-block { width: 100%; }
.btn-group { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-group-center { justify-content: center; }

/* =============================================
   HEADER
   ============================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  /* El color sale del token, no escrito a pelo: --header-bg esta definido
     para los dos temas mas abajo, y con un crema fijo aqui la cabecera se
     quedaria clara en modo oscuro el dia que alguien reordene el archivo. */
  background: var(--header-bg); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--linea-cabecera);
  transition: box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); background: var(--header-bg-scrolled); }
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(32,21,26,.42);
  backdrop-filter: blur(4px);
  z-index: 95;
}
.header-inner {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 20px; min-height: 78px;
  /* La barra no se ata a los 1160 px del contenido: con ocho elementos de
     menu, marca y tres acciones necesita mas sitio, y una cabecera puede
     usar el ancho de la ventana sin romper la medida de lectura del resto. */
  width: min(1400px, calc(100% - 40px));
}
.site-header > .container.header-inner { max-width: none; }
.brand { display: flex; align-items: center; gap: 12px; }
/* La medida va en el <picture>, no en el <img> de dentro. Con la clase en el
   <img>, dentro de .brand (que es flex) el <picture> calculaba su ancho a
   partir del contenido y el contenido estaba limitado por `max-width: 100%`
   del <picture>: cada uno esperaba al otro y el logo se quedaba en 0 px. */
.brand-logo { width: 58px; flex-shrink: 0; filter: drop-shadow(0 10px 14px rgba(139,7,36,.08)); }
.brand-logo img { width: 100%; height: auto; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-city { color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .13em; }
.brand-name { font-weight: 700; font-size: var(--fs-base); color: var(--ink); }
.site-nav { display: flex; justify-content: center; gap: 6px; }

/* Escalon 1: por debajo de 1340 px la pildora del telefono se queda en icono.
   Son unos 140 px que la cabecera necesita para no salirse, y el numero sigue
   a un toque de distancia. */
@media (min-width: 1201px) and (max-width: 1400px) {
  .header-actions .phone-pill {
    padding: 0; min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center; border-radius: 50%;
  }
  .header-actions .phone-pill .header-pill-label,
  .header-actions .phone-pill strong { display: none; }
  .header-actions .phone-pill .icono-tel { display: block; }
}

/* Escalon 2: entre 1201 y 1320 px se aprieta ademas el propio menu. */
@media (min-width: 1201px) and (max-width: 1320px) {
  .site-nav { gap: 2px; }
  .site-nav a,
  .site-nav .nav-toggle { padding: 10px 10px; }
  .header-inner { gap: 12px; }
}
.site-nav a,
.site-nav .nav-toggle {
  padding: 10px 14px; border-radius: 999px; font-weight: 600;
  font-size: var(--fs-sm); color: var(--muted);
  font-family: var(--font-body); line-height: 1.4;
  transition: color .2s ease, background-color .2s ease;
}
.site-nav a:hover, .site-nav a.active,
.site-nav .nav-toggle:hover,
.site-nav .nav-group.active .nav-toggle {
  color: var(--primary-ink); background: var(--primary-soft); font-weight: 600;
}
.mobile-nav-meta { display: none; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.phone-pill {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 10px 16px; border-radius: var(--radius-md); font-weight: 600;
  font-size: var(--fs-sm); border: 1.5px solid var(--line); color: var(--ink); transition: var(--tr-color);
  background: rgba(var(--velo-rgb),.7);
}
.phone-pill:hover { border-color: var(--primary-ink); background: var(--surface); }
.header-pill-label {
  font-size: var(--fs-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.phone-pill strong { font-size: var(--fs-md); color: var(--ink); }
/* Solo se ve en movil, donde el texto de la pildora no cabe. */
.icono-tel { display: none; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.wa-pill {
  background: linear-gradient(135deg, var(--primary-mid), var(--primary-dark));
  color: #fff; padding: 9px 18px; border-radius: 999px; font-weight: 600;
  font-size: var(--fs-sm); box-shadow: 0 10px 24px rgba(139,7,36,.22);
  transition: var(--tr-color), box-shadow var(--dur-micro) var(--ease-suave), transform var(--dur-micro) var(--ease-firme);
}
.wa-pill:hover { box-shadow: 0 16px 30px rgba(139,7,36,.32); transform: translateY(-1px); }
.menu-toggle {
  display: none; flex-direction: column; gap: 5px;
  border: 0; background: transparent; padding: 8px; cursor: pointer;
}
.menu-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 999px;
  transition: transform var(--dur-media) var(--ease-salida), opacity var(--dur-media) var(--ease-suave); }
.menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================
   BREADCRUMB
   ============================================= */
.breadcrumb { background: var(--surface); border-bottom: 1px solid var(--line); }
.breadcrumb-inner {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 0; font-size: var(--fs-sm); color: var(--muted);
}
.breadcrumb-inner a { color: var(--primary-ink); font-weight: 500; }
.breadcrumb-inner a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--line); font-size: var(--fs-md); }

/* =============================================
   PAGE HERO (páginas interiores)
   ============================================= */
.page-hero {
  padding: 64px 0 52px;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-mid) 100%);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at top right, rgba(255,255,255,.07) 0%, transparent 60%);
}
.page-hero-inner { position: relative; max-width: 800px; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); color: #fff; margin-bottom: 14px; }
.page-hero p { font-size: var(--fs-lg); color: rgba(255,255,255,.8); max-width: 62ch; }

/* =============================================
   HOME HERO
   ============================================= */
.hero-section { position: relative; overflow: hidden; padding: 80px 0 64px; }
.hero-section::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 70% at top left, rgba(248,235,239,.9) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at bottom right, rgba(139,7,36,.06) 0%, transparent 55%);
  pointer-events: none;
}
.hero-grid {
  position: relative; display: grid;
  grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center;
}
.hero-copy h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.4rem); color: var(--ink);
  max-width: 13ch; margin-bottom: 18px;
}
.hero-copy h1 em { font-style: normal; color: var(--primary-ink); position: relative; }
.hero-copy h1 em::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--primary), transparent); border-radius: 2px;
}
.hero-text { font-size: var(--fs-lg); max-width: 52ch; margin-bottom: 28px; color: var(--muted); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 26px;
}
.hero-metric {
  padding: 18px 16px;
  border-radius: var(--radius-md);
  background: rgba(var(--velo-rgb),.72);
  border: 1px solid rgba(232,221,226,.9);
  box-shadow: var(--shadow-sm);
}
.hero-metric strong {
  display: block;
  font-size: var(--fs-2xl);
  color: var(--primary-ink);
  line-height: 1;
  margin-bottom: 8px;
  font-family: var(--font-display);
}
.hero-metric span { display: block; font-size: var(--fs-sm); color: var(--muted); }
.trust-badge {
  display: flex; align-items: center; gap: 7px; padding: 8px 14px;
  background: rgba(var(--velo-rgb),.88); border: 1px solid var(--line);
  border-radius: 999px; font-weight: 600; font-size: var(--fs-sm); color: var(--ink);
  backdrop-filter: blur(8px);
}
.badge-check {
  width: 16px; height: 16px; background: var(--primary); border-radius: 50%; flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 10px;
}
.hero-visual { position: relative; }
.hero-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(150deg, rgba(139,7,36,.95), rgba(40,10,18,.92));
  box-shadow: var(--shadow-lg); padding: 14px;
}
.hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 30%, transparent 70%, rgba(255,255,255,.06));
  pointer-events: none;
}
.hero-image {
  display: block; width: 100%;
  /* Alto acotado: la foto es 23/22 y en un movil estrecho se estiraria
     hasta empujar los dos sellos flotantes fuera de la tarjeta. */
  min-height: 300px; max-height: 460px;
  aspect-ratio: 23 / 22;
  border-radius: calc(var(--radius-lg) - 6px);
  background-color: var(--tono, #8b7361);
  overflow: hidden;
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.floating-badge {
  position: absolute; background: rgba(var(--velo-rgb),.96);
  backdrop-filter: blur(12px); border-radius: var(--radius-sm);
  box-shadow: 0 10px 36px rgba(29,15,21,.2); padding: 13px 17px;
}
.badge-top { top: 26px; right: 22px; }
.badge-bottom { bottom: 26px; left: 22px; }
.badge-label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.badge-value { font-size: var(--fs-xl); font-weight: 700; color: var(--primary-ink); font-family: var(--font-display); line-height: 1; }
.badge-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }

/* =============================================
   FEATURES STRIP
   ============================================= */
.features-strip {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-mid));
  position: relative; overflow: hidden;
}
.features-strip::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 120% at bottom right, rgba(255,255,255,.05) 0%, transparent 60%);
}
.features-grid {
  position: relative; display: grid;
  grid-template-columns: repeat(4, 1fr); padding: 32px 0;
}
.feature-item { padding: 16px 22px; border-left: 1px solid rgba(255,255,255,.12); }
.feature-item:first-child { border-left: 0; }
.feature-icon { font-size: var(--fs-2xl); margin-bottom: 10px; display: block; }
.feature-item strong { display: block; font-size: var(--fs-base); font-weight: 700; margin-bottom: 5px; color: #fff; }
.feature-item span { display: block; color: rgba(255,255,255,.72); font-size: var(--fs-sm); line-height: 1.5; }

/* =============================================
   SECTION HEADING
   ============================================= */
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 14px; color: var(--ink); }
.section-head p { font-size: var(--fs-base); }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.centered .eyebrow { justify-content: center; }

.trust-panel {
  display: grid;
  grid-template-columns: 1.15fr .55fr .9fr;
  gap: 22px;
  align-items: stretch;
}
.trust-panel-copy,
.trust-panel-badge,
.trust-panel-points {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.trust-panel-copy {
  padding: 34px;
}
.trust-panel-copy h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  margin-bottom: 14px;
  color: var(--ink);
}
.trust-panel-badge {
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-mid) 100%);
  color: #fff;
}
.trust-badge-label {
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .78;
}
.trust-panel-badge strong {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  line-height: 1;
  margin: 12px 0 10px;
  /* Por si algun dia vuelve a llevar una cifra en euros en lugar de D871. */
  white-space: nowrap;
}
.trust-badge-meta {
  font-size: var(--fs-md);
  color: rgba(255,255,255,.82);
}
.trust-panel-points {
  padding: 18px;
  display: grid;
  gap: 12px;
}
.trust-point {
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(var(--velo-rgb),.78);
  border: 1px solid rgba(232,221,226,.95);
}
.trust-point strong {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-base);
  color: var(--ink);
}
.trust-point span {
  display: block;
  font-size: var(--fs-md);
  color: var(--muted);
  line-height: 1.6;
}

.promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.promise-card,
.process-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.promise-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
}
.promise-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--gold));
}
.promise-tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.promise-card h3,
.process-card h3 {
  font-size: var(--fs-base);
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--ink);
}
.promise-card p,
.process-card p { font-size: var(--fs-md); }

/* Se adapta al numero de pasos en vez de fijar cuatro columnas: al anadir
   el quinto paso (la revision posterior a la firma) se quedaba solo en una
   segunda fila, que es justo lo que hace que una rejilla parezca rota.
   Con auto-fit y un minimo de 200px, cinco pasos caben en una fila en
   escritorio ancho y se reparten en dos filas iguales si no. */
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.process-card {
  position: relative;
  padding: 76px 28px 28px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.process-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.process-number {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-mid), var(--primary-dark));
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: .08em;
}

/* =============================================
   STATS
   ============================================= */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat-box {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 22px; text-align: center;
  box-shadow: var(--shadow-sm); transition: transform 240ms var(--ease-salida), box-shadow 240ms var(--ease-salida);
}
.stat-box:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.stat-box { container-type: inline-size; }
.stat-number {
  font-size: var(--fs-4xl); font-family: var(--font-display);
  color: var(--primary-ink); line-height: 1; font-weight: 700;
  /* La cifra y su simbolo van juntos o no van. */
  white-space: nowrap;
}
/* Y el tamano se mide contra el ancho de la caja: con --fs-4xl (hasta 4rem)
   una cifra de seis caracteres mas el euro no cabe en una columna de 277 px,
   que es lo que mide cada caja en una pantalla de 1440. */
@container (max-width: 340px) {
  .stat-number { font-size: clamp(1.9rem, 15cqi, 4rem); }
}
@supports not (container-type: inline-size) {
  .stat-number { font-size: clamp(1.9rem, 4.4vw, 4rem); }
}
.stat-label { font-size: var(--fs-sm); color: var(--muted); margin-top: 8px; }
/* La caja de la valoracion de Google, en la rejilla de cifras. La nota va
   con el mismo tamano que los contadores para que las cuatro cajas pesen
   lo mismo; las estrellas van debajo, mas pequenas. */
.stat-estrellas {
  color: var(--estrella);
  font-size: var(--fs-lg);
  letter-spacing: 3px;
  line-height: 1;
  margin-top: 6px;
}

/* =============================================
   SERVICE CARDS
   ============================================= */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm);
  transition: transform 240ms var(--ease-firme), box-shadow 240ms var(--ease-firme);
  position: relative; overflow: hidden; display: flex; flex-direction: column;
}
.service-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg, var(--primary), var(--gold));
  transform: scaleX(0); transition: transform .3s ease; transform-origin: left;
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(139,7,36,.14); }
.service-card:hover::after { transform: scaleX(1); }
.service-icon {
  width: 50px; height: 50px; border-radius: var(--radius-sm);
  background: var(--primary-soft); border: 1px solid rgba(139,7,36,.1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; font-size: var(--fs-2xl); flex-shrink: 0;
}
.service-card h3 { font-size: var(--fs-base); font-family: var(--font-body); font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.service-card p { font-size: var(--fs-md); flex: 1; }
/* El avance de la flecha se hacia con `gap` y `letter-spacing`, que
   recalculan el diseno. El mismo gesto con transform va en el compositor. */
.service-card-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: var(--fs-sm); font-weight: 700; color: var(--primary-ink); }
.service-card-link .flecha, .service-card-link svg { transition: transform var(--dur-micro) var(--ease-salida); }
.service-card-link:hover .flecha, .service-card-link:hover svg { transform: translateX(4px); }

/* =============================================
   TWO-COLUMN LAYOUTS
   ============================================= */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.two-col.align-center { align-items: center; }
.two-col.gap-32 { gap: 32px; }
.interior-split { gap: 40px; }
.interior-copy { max-width: 620px; }
.content-shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: rgba(var(--velo-rgb),.62);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.info-stack {
  display: grid;
  gap: 16px;
  align-self: stretch;
}
.info-box-tall {
  min-height: 100%;
}
.process-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* =============================================
   CHECK LIST
   ============================================= */
.check-list { padding: 0; margin: 0; list-style: none; display: grid; gap: 12px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-md); color: var(--muted); }
.check-list li::before {
  content: ''; width: 20px; height: 20px; min-width: 20px;
  background: var(--primary); border-radius: 50%; margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 11px;
}

/* =============================================
   VISUAL CARDS
   ============================================= */
.visual-stack { display: grid; gap: 14px; }
.visual-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; position: relative; box-shadow: var(--shadow-sm); }
.large-card { min-height: 300px; }
.visual-photo { width: 100%; height: 100%; object-fit: cover; }
.visual-overlay {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  background: rgba(var(--velo-rgb),.94); backdrop-filter: blur(10px);
  padding: 12px 15px; border-radius: var(--radius-sm); box-shadow: 0 4px 18px rgba(29,15,21,.12);
}
.visual-overlay strong { display: block; font-size: var(--fs-md); color: var(--ink); }
.visual-overlay span { font-size: var(--fs-xs); color: var(--muted); }
.stats-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px;
  display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow-sm);
}
.mini-logo-wrap {
  width: 62px; height: 62px; min-width: 62px; padding: 11px;
  border-radius: var(--radius-sm); background: var(--primary-soft);
  border: 1px solid rgba(139,7,36,.1);
  display: flex; align-items: center; justify-content: center;
}
.stats-card h3 { font-family: var(--font-body); font-size: var(--fs-base); font-weight: 700; margin-bottom: 5px; color: var(--ink); }
.stats-card p { font-size: var(--fs-sm); }

/* =============================================
   CALCULATOR
   ============================================= */
.calculator-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow);
}
.calculator-heading {
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--ink);
  font-size: var(--fs-base);
}
.calculator-submit {
  grid-column: 1 / -1;
}
.calculator-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-label { display: grid; gap: 7px; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.field-input {
  /* --line-control, no --line: ver el comentario del token. */
  width: 100%; padding: 13px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-control); background: var(--surface-tenue);
  font: inherit; font-size: var(--fs-md); color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease; outline: none;
}
.field-input:focus { border-color: var(--primary-ink); box-shadow: 0 0 0 3px rgba(139,7,36,.1); }
textarea.field-input { resize: vertical; min-height: 116px; }
.calculator-form .form-btn-row { grid-column: 1 / -1; margin-top: 4px; }
.calc-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.calc-results-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.result-box {
  background: linear-gradient(145deg, var(--primary-soft), #fff);
  border: 1px solid rgba(139,7,36,.1); border-radius: var(--radius-sm);
  padding: 16px; text-align: center;
}
.result-box span { display: block; color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.result-box strong { display: block; font-size: var(--fs-xl); color: var(--primary-ink-strong); font-family: var(--font-display); }
.calc-note {
  margin-top: 16px; padding: 12px 14px;
  background: var(--gold-soft); border: 1px solid rgba(201,150,58,.2);
  border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--gold-ink); text-align: center;
}

/* =============================================
   TABS
   ============================================= */
.tabs-wrapper { width: 100%; }
.tabs {
  display: flex; gap: 6px; background: var(--bg);
  padding: 5px; border-radius: var(--radius-sm); border: 1px solid var(--line); margin-bottom: 24px;
}
.tab-btn {
  flex: 1; padding: 10px 12px; border-radius: var(--radius-sm); font-weight: 600;
  font-size: var(--fs-sm); border: 0; background: transparent; cursor: pointer;
  color: var(--muted); transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; font-family: var(--font-body);
}
.tab-btn.active { background: var(--surface); color: var(--primary-ink); box-shadow: var(--shadow-sm); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* =============================================
   INFO BOX
   ============================================= */
.info-box {
  background: var(--gold-soft); border: 1px solid rgba(201,150,58,.2);
  border-radius: var(--radius); padding: 22px;
  display: flex; gap: 16px; align-items: flex-start;
}
.info-box-icon { font-size: var(--fs-2xl); flex-shrink: 0; line-height: 1; margin-top: 2px; }
.info-box h4 { font-family: var(--font-body); font-weight: 700; color: var(--ink); margin-bottom: 6px; font-size: var(--fs-md); }
.info-box p { font-size: var(--fs-sm); }

/* =============================================
   COMPARISON TABLE
   ============================================= */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.compare-table th {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-mid));
  color: #fff; padding: 14px 18px; text-align: left; font-weight: 600;
}
.compare-table td { padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--panel); }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table tr:nth-child(even) td { background: var(--surface-tenue); }
.compare-table-compact th,
.compare-table-compact td {
  white-space: normal;
  vertical-align: top;
}
.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; }
.tag-good { background: #edfaf2; color: #1a6b39; }
.tag-warn { background: var(--gold-soft); color: var(--gold-ink); }
.tag-bad  { background: #fff0f2; color: #8b0724; }

/* =============================================
   SEO EXPANDABLE
   ============================================= */
.seo-expand { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-sm); overflow: hidden; }
/* Este acordeon y el de .faq-item hacen exactamente lo mismo y se veian
   distintos: uno abria con un "+" y el otro con una flecha en circulo, con
   otro tamano de letra y otro relleno. Un visitante que pasa de /faq a
   /hipotecas encontraba dos componentes donde solo hay uno. Se iguala al de
   .faq-item, que es el que usa el componente compartido. */
.seo-expand summary {
  cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: var(--fs-base);
  color: var(--ink); list-style: none; display: flex;
  justify-content: space-between; align-items: center; gap: 16px; user-select: none;
}
.seo-expand summary::-webkit-details-marker { display: none; }
.seo-expand summary::after {
  content: '▾';
  width: 26px; height: 26px; min-width: 26px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xs);
  transition: transform var(--dur-media) var(--ease-salida), background-color var(--dur-micro) var(--ease-suave), color var(--dur-micro) var(--ease-suave);
}
.seo-expand[open] summary::after { transform: rotate(180deg); background: var(--primary); color: #fff; }
.seo-expand-body { padding: 14px 22px 20px; color: var(--muted); font-size: var(--fs-md); line-height: 1.75; border-top: 1px solid var(--line); }
.seo-expand-body h3 { font-family: var(--font-body); color: var(--ink); margin: 16px 0 6px; font-size: var(--fs-base); font-weight: 700; }
.seo-expand-body h4 { font-family: var(--font-body); color: var(--ink); margin: 12px 0 5px; font-size: var(--fs-md); font-weight: 700; }
.seo-expand-body p { margin-bottom: 10px; }
.seo-expand-body ul { padding-left: 20px; margin: 8px 0; }
.seo-expand-body li { margin-bottom: 5px; }
.seo-stack { display: grid; gap: 10px; }

/* =============================================
   FAQ
   ============================================= */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.faq-list { display: grid; gap: 10px; }
.faq-item {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.faq-item summary {
  cursor: pointer; padding: 18px 22px; font-weight: 700; color: var(--ink);
  font-size: var(--fs-base); list-style: none; display: flex;
  justify-content: space-between; align-items: center; gap: 16px;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-arrow {
  width: 26px; height: 26px; min-width: 26px; border-radius: 50%;
  background: var(--primary-soft); display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-2xs);
  transition: transform .3s ease, background .2s ease; color: var(--primary-ink);
}
.faq-item[open] .faq-arrow { transform: rotate(180deg); background: var(--primary); color: #fff; }
.faq-item .faq-answer {
  padding: 14px 22px 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.75;
}
.faq-item .faq-answer p { padding: 0; margin: 0 0 12px; font-size: inherit; }
.faq-item .faq-answer p:last-child { margin-bottom: 0; }
.faq-item .faq-answer strong { color: var(--ink); }

/* =============================================
   REVIEWS
   ============================================= */
.reviews-shell {
  display: grid; grid-template-columns: 240px 1fr; gap: 18px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px;
}
.reviews-summary {
  background: linear-gradient(150deg, var(--primary-soft), #fff);
  border: 1px solid rgba(139,7,36,.1); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
}
.reviews-summary-label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .15em; color: var(--primary-ink); font-weight: 700; }
.rating-big { font-size: var(--fs-4xl); font-family: var(--font-display); color: var(--primary-ink); line-height: 1; }
.stars-row { color: var(--estrella); font-size: var(--fs-lg); letter-spacing: 2px; }
.reviews-count { font-size: var(--fs-sm); color: var(--muted); }
.reviews-summary-copy p { font-size: var(--fs-sm); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.review-card {
  background: var(--surface-tenue); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
}
.review-card .stars { color: var(--estrella); font-size: var(--fs-md); letter-spacing: 1px; margin-bottom: 10px; }
.review-card p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.65; }
.review-meta { margin-top: 13px; display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); }
.review-meta strong { color: var(--ink); }

/* =============================================
   CONTACT
   ============================================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.contact-grid-balanced { align-items: stretch; }
.contact-panel {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: rgba(var(--velo-rgb),.62);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.contact-boxes { display: grid; gap: 10px; margin-top: 22px; }
.contact-boxes-stacked { gap: 12px; }
.contact-box {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--panel); transition: transform 220ms var(--ease-salida), box-shadow 220ms var(--ease-salida), border-color 220ms ease;
}
.contact-box:hover { border-color: var(--primary-ink); box-shadow: var(--shadow-sm); transform: translateX(4px); }
.contact-box-detailed {
  align-items: flex-start;
  padding: 18px 20px;
}
.contact-box-static:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: none;
}
.contact-box-icon {
  width: 42px; height: 42px; min-width: 42px; border-radius: var(--radius-sm);
  background: var(--primary-soft); display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-base); font-weight: 700; color: var(--primary-ink);
}
.contact-box-content {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.contact-box strong { display: block; font-size: var(--fs-md); color: var(--ink); font-weight: 700; }
.contact-box span { font-size: var(--fs-sm); color: var(--muted); }
.contact-break {
  overflow-wrap: anywhere;
  line-height: 1.6;
}
.contact-form-wrap {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow);
}
.contact-form-title {
  font-size: var(--fs-xl);
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink);
}
.contact-form { display: grid; gap: 15px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.alert { padding: 13px 17px; border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-md); margin-bottom: 14px; }
.alert-success { background: #edfaf2; color: #1a6b39; border: 1px solid #b0e4c4; }
.alert-error   { background: #fff0f2; color: #8b0724;  border: 1px solid #f4c0cb; }
.contact-trust-card {
  margin-top: 20px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,240,243,.72));
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  align-items: center;
}
.contact-trust-badge {
  padding: 18px 16px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-mid) 100%);
  color: #fff;
  text-align: center;
  display: grid;
  gap: 6px;
}
.contact-trust-kicker {
  font-size: var(--fs-2xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.contact-trust-badge strong {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: 1;
}
.contact-trust-meta {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.82);
}
.contact-trust-copy h4 {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.contact-trust-copy p {
  font-size: var(--fs-md);
  margin-bottom: 12px;
}
.contact-trust-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.contact-trust-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.contact-trust-list li::before {
  content: '';
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 50%;
  margin-top: 4px;
  background: linear-gradient(135deg, var(--primary-mid), var(--primary-dark));
  box-shadow: 0 0 0 4px rgba(139,7,36,.08);
}

/* =============================================
   CTA SECTION (centered dark)
   ============================================= */
.cta-section { padding: 80px 0; }
.cta-inner { text-align: center; max-width: 700px; margin: 0 auto; }
.cta-inner h2 { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 14px; color: #fff; }
.cta-inner p { margin-bottom: 30px; font-size: var(--fs-base); }

/* =============================================
   FLOATING ELEMENTS
   ============================================= */
.wa-float {
  position: fixed; bottom: 88px; right: 26px; z-index: 150;
  width: 54px; height: 54px; background: #25d366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 26px rgba(37,211,102,.4);
  transition: transform 240ms var(--ease-firme), box-shadow 240ms var(--ease-firme);
}
.wa-float:hover { transform: scale(1.1); }
.wa-float svg { width: 27px; height: 27px; fill: #fff; }
/* El latido va en una capa aparte: animar box-shadow obliga al navegador a
   repintar el boton en cada fotograma, y esto no para nunca. Un anillo en
   ::before con transform y opacity se resuelve en el compositor. */
.wa-float::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37,211,102,.5);
  pointer-events: none;
}
html.js .wa-float::before { animation: pulso-wa 3.4s var(--ease-suave) infinite; }

.back-to-top {
  position: fixed; bottom: 88px; left: 26px; z-index: 150;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--panel); border: 1.5px solid var(--line);
  color: var(--primary-ink); font-size: var(--fs-base); cursor: pointer;
  box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(8px);
  transition: transform 220ms var(--ease-salida), box-shadow 220ms var(--ease-salida), background-color 220ms ease, border-color 220ms ease; font-family: var(--font-body);
}
.back-to-top.visible { opacity: 1; transform: none; }
.back-to-top:hover { background: var(--primary); color: #fff; border-color: var(--primary-ink); }

.cta-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-mid));
  color: #fff; padding: 13px 24px;
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  /* Una sola curva. Estaba escrito con --ease-salida Y un cubic-bezier()
     detras: dos funciones de suavizado en la misma capa no son sintaxis
     valida, y al venir de una variable la declaracion entera se descarta.
     La barra entraba de golpe. */
  transform: translateY(100%); transition: transform var(--dur-media) var(--ease-salida);
  box-shadow: 0 -4px 28px rgba(139,7,36,.28);
}
.cta-bar.visible { transform: translateY(0); }
.cta-bar.hidden  { display: none; }
.cta-bar span    { font-size: var(--fs-md); }
.cta-bar-actions { display: flex; gap: 10px; }
.cta-bar-close   { background: transparent; border: 0; color: rgba(255,255,255,.5); font-size: var(--fs-base); cursor: pointer; padding: 4px 8px; margin-left: 6px; }

/* =============================================
   COOKIE BANNER
   ============================================= */
/* Las dos decisiones del aviso de cookies pesan lo mismo: mismo relleno,
   mismo borde, mismo color, mismo tamano. Es lo que exige la guia de la
   AEPD y es lo que promete el texto de /cookies. */
.btn-cookie {
  background: var(--surface);
  color: var(--primary-ink-strong);
  border: 1.5px solid var(--line-control);
  box-shadow: none;
}
.btn-cookie:hover { border-color: var(--primary-ink); background: var(--primary-soft); }

.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--inverso); color: #fff; padding: 16px 24px;
  display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap; font-size: var(--fs-sm);
}
.cookie-banner p { margin: 0; color: rgba(255,255,255,.82); }
.cookie-banner.hidden { display: none; }
.cookie-actions { display: flex; gap: 10px; }

/* =============================================
   FOOTER
   ============================================= */
.site-footer { background: linear-gradient(135deg, var(--footer-a) 0%, var(--footer-b) 100%); padding: 52px 0 30px; }
.footer-inner { display: grid; gap: 26px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.footer-brand picture { width: 52px; flex-shrink: 0; }
.footer-brand img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.footer-brand-name { font-weight: 700; font-size: var(--fs-base); color: #fff; }
.footer-brand-sub  { font-size: var(--fs-xs); color: rgba(255,255,255,.52); }
.footer-tagline { font-size: var(--fs-sm); color: rgba(255,255,255,.48); line-height: 1.65; max-width: 36ch; }
.footer-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}
.footer-highlights span {
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.76);
  font-size: var(--fs-xs);
}
.footer-section-title { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.56); font-weight: 700; margin: 0 0 13px; }
.footer-links { display: grid; gap: 9px; }
.footer-links a { font-size: var(--fs-sm); color: rgba(255,255,255,.62); transition: color .2s ease; display: flex; align-items: center; gap: 8px; }
.footer-links a:hover { color: #fff; }
.footer-divider { border: 0; border-top: 1px solid rgba(255,255,255,.08); margin: 0; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: var(--fs-xs); color: rgba(255,255,255,.52); }

/* =============================================
   ANIMATIONS
   ============================================= */
/* El revelado se define entero en la seccion 2 de MOVIMIENTO, mas abajo.
   Aqui habia una version anterior que competia con aquella por la misma
   propiedad y ganaba o perdia segun el orden del archivo. */
/* Estas cuatro clases salen 76 veces en el marcado y no hacian NADA: mas
   abajo, `html.js .reveal` declara su propio transition-delay con mas
   especificidad y ganaba siempre. Se repiten aqui con el mismo peso que
   aquella regla para que el retardo escrito a mano mande sobre el
   escalonado automatico, que es lo que el marcado da por hecho. */
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; }
.delay-4 { transition-delay: .4s; }
html.js .reveal.delay-1 { transition-delay: .1s; }
html.js .reveal.delay-2 { transition-delay: .2s; }
html.js .reveal.delay-3 { transition-delay: .3s; }
html.js .reveal.delay-4 { transition-delay: .4s; }

/* =============================================
   RESPONSIVE — TABLET (≤1200px)
   ============================================= */
@media (max-width: 1200px) {
  .hero-grid, .two-col, .contact-grid, .faq-grid { grid-template-columns: 1fr; }
  .reviews-shell { grid-template-columns: 1fr; }
  .promise-grid, .services-grid, .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid, .stats-grid, .process-grid, .process-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .trust-panel { grid-template-columns: 1fr 1fr; }
  .trust-panel-copy { grid-column: 1 / -1; }
  .contact-trust-card { grid-template-columns: 1fr; }
  .features-grid { gap: 0; }
  .feature-item { padding: 18px 20px; }
  .feature-item:nth-child(1), .feature-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.12); }
  .feature-item:nth-child(odd)  { border-left: 0; }
  .feature-item:nth-child(even) { border-left: 1px solid rgba(255,255,255,.12); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .header-inner { grid-template-columns: auto auto auto; }
  .site-nav {
    position: fixed; top: 94px; left: 16px; right: 16px;
    max-height: calc(100vh - 118px);      /* respaldo para navegadores viejos */
    max-height: calc(100dvh - 118px);     /* la unica unidad que sigue a la barra de direcciones */
    overflow-y: auto;
    background: rgba(var(--velo-rgb),.98); padding: 16px; border-radius: var(--radius);
    border: 1px solid var(--line); box-shadow: var(--shadow);
    display: none; flex-direction: column; z-index: 110;
  }
  .site-nav a,
  .site-nav .nav-toggle { padding: 13px 15px; border-radius: var(--radius-sm); font-size: var(--fs-base); }
  .site-nav.is-open { display: flex; }
  .mobile-nav-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .menu-toggle { display: flex; justify-self: center; }
  .cta-bar { flex-direction: column; gap: 10px; text-align: center; padding: 16px; }
}

/* =============================================
   RESPONSIVE — MOBILE (≤700px)
   ============================================= */
@media (max-width: 700px) {
  .section { padding: 68px 0; }
  .hero-section { padding: 48px 0 40px; }
  .hero-copy h1 { font-size: clamp(2.3rem, 8vw, 3rem); }
  .promise-grid, .process-grid, .process-grid-3, .services-grid, .reviews-grid, .calculator-form, .calc-results, .calc-results-2, .form-row-2, .stats-grid, .hero-metrics, .trust-panel { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .content-shell,
  .contact-panel,
  .contact-form-wrap,
  .calculator-card { padding: 22px; }
  .contact-trust-card,
  .contact-trust-badge { padding: 16px; }
  .feature-item { border-left: 0 !important; border-bottom: 1px solid rgba(255,255,255,.12); }
  .feature-item:last-child { border-bottom: 0; }
  /* La pildora completa no cabe, pero el telefono no puede desaparecer:
     es la accion mas directa que ofrece la web y quien llega desde una
     red social no baja media pantalla para encontrarla. Se queda el
     icono, con el mismo enlace y el objetivo tactil completo. */
  .brand-copy { display: none; }
  .header-actions .phone-pill {
    padding: 0; min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center; border-radius: 50%;
  }
  .header-actions .phone-pill .header-pill-label,
  .header-actions .phone-pill strong { display: none; }
  .header-actions .phone-pill .icono-tel { display: block; }
  .header-actions { gap: 6px; }
  .wa-pill { padding: 9px 14px; }
  .header-inner { gap: 12px; min-height: 74px; }
  .site-nav {
    top: 84px;
    left: 12px;
    right: 12px;
    border-radius: var(--radius);
  }
  .mobile-nav-meta { grid-template-columns: 1fr; }
  .wa-float { bottom: 70px; right: 16px; }
  .back-to-top { bottom: 70px; left: 16px; }
  .footer-top { grid-template-columns: 1fr; }
  .tabs { flex-direction: column; }
  .tab-btn { text-align: left; }
  .floating-badge { position: static; margin-top: 10px; border-radius: var(--radius-sm); display: inline-block; }
  .hero-card { padding: 12px; }
}

/* Extra utility classes */
.mt-tab  { margin-top: 28px; }
.h3-lg   { font-size: var(--fs-2xl); margin-bottom: 14px; }
.p-mb    { margin-bottom: 16px; }
.overflow-x { overflow-x: auto; }
.grid-gap { display: grid; gap: 12px; }
.cta-inner h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 14px; }
.cta-inner p  { margin-bottom: 28px; }

/* =============================================
   MEJORAS VISUALES Y DE MOVIMIENTO
   Fondos ilustrados, micro-interacciones y
   accesibilidad de animaciones.
   ============================================= */

/* ---------------------------------------------
   1. FONDOS ILUSTRADOS
   Patrones lineales sobre el degradado granate.
   El degradado va por encima para garantizar
   contraste del texto blanco en el lado izquierdo.
   --------------------------------------------- */
.page-hero {
  background-image:
    linear-gradient(100deg,
      rgba(100, 18, 36, .97) 0%,
      rgba(100, 18, 36, .90) 38%,
      rgba(120, 15, 40, .60) 68%,
      rgba(139, 7, 36, .38) 100%),
    url('../img/hero-pattern.webp');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

.section-dark {
  background-image:
    linear-gradient(100deg,
      rgba(100, 18, 36, .97) 0%,
      rgba(100, 18, 36, .88) 40%,
      rgba(139, 7, 36, .55) 75%,
      rgba(139, 7, 36, .40) 100%),
    url('../img/trust-pattern.webp');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* En móvil el patrón queda tapado por el texto: lo suavizamos */
@media (max-width: 720px) {
  .page-hero,
  .section-dark {
    background-image:
      linear-gradient(160deg,
        rgba(100, 18, 36, .98) 0%,
        rgba(100, 18, 36, .94) 55%,
        rgba(139, 7, 36, .70) 100%),
      url('../img/hero-pattern.webp');
    background-position: center;
  }
}

/* ---------------------------------------------
   2. REVELADO AL HACER SCROLL
   ---------------------------------------------
   Por defecto todo es visible: si el JS falla o tarda, la pagina se lee
   igual. Solo ocultamos cuando sabemos que hay JS (clase .js en <html>).

   Cinco variantes, elegidas con data-reveal en el HTML. Todas animan
   unicamente transform y opacity, que la tarjeta grafica resuelve sola
   sin obligar al navegador a recalcular el diseno. La version anterior
   animaba tambien filter: blur(), que si obliga a repintar en cada
   fotograma y se notaba en moviles modestos.
   --------------------------------------------- */
.reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-entra) var(--ease-salida),
    transform var(--dur-entra) var(--ease-salida),
    clip-path var(--dur-entra) var(--ease-salida);
}

html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  /* El escalonado lo pone el JS como --i (indice dentro de su grupo).
     Antes eran reglas nth-child escritas a mano para cuatro rejillas
     concretas: cualquier bloque nuevo se quedaba sin escalonar. */
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* subir (por defecto), escala, lateral-izq, lateral-der, desvelado */
html.js .reveal[data-reveal="escala"]      { transform: scale(.96); }
html.js .reveal[data-reveal="lateral-izq"] { transform: translateX(-38px); }
html.js .reveal[data-reveal="lateral-der"] { transform: translateX(38px); }
/* El contenedor de una entrada lateral recorta lo que se sale mientras dura
   la animacion. Sin esto, esos 38 px asoman por el borde de la ventana y la
   pagina se puede arrastrar de lado hasta que la tarjeta termina de entrar.
   `clip` y no `hidden`: recorta igual pero no crea una caja de scroll, asi
   que no rompe la cabecera pegajosa ni el observador que dispara el
   revelado. */
:has(> .reveal[data-reveal^="lateral-"]) { overflow-x: clip; }
/* En una sola columna la tarjeta ocupa todo el ancho y esos 38 px se salen
   del viewport: la pagina ganaba scroll lateral hasta que se revelaba. En
   movil la entrada lateral no aporta nada, asi que entra como el resto. */
/* En una sola columna la entrada lateral no aporta nada: la tarjeta ocupa
   todo el ancho y el desplazamiento solo se nota como un temblor. */
@media (max-width: 1200px) {
  html.js .reveal[data-reveal^="lateral-"] { transform: translateY(26px); }
}
html.js .reveal[data-reveal="desvelado"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* will-change solo mientras dura la animacion. Dejarlo puesto de forma
   permanente reserva memoria de video en todos los elementos a la vez y
   acaba siendo peor que no ponerlo. */
html.js .reveal.esta-animando { will-change: opacity, transform; }

/* ---------------------------------------------
   3. MICRO-INTERACCIONES
   --------------------------------------------- */

/* Tarjetas: elevación suave y borde que se tiñe de marca */
.service-card,
.promise-card,
.process-card,
.info-box,
.stat-box,
.review-card,
.feature-item {
  transition:
    transform .35s cubic-bezier(.22, .61, .36, 1),
    box-shadow .35s cubic-bezier(.22, .61, .36, 1),
    border-color .35s ease;
}

.service-card:hover,
.promise-card:hover,
.process-card:hover,
.review-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: #d9bfc6;
}

.info-box:hover,
.feature-item:hover {
  transform: translateY(-3px);
}

/* El icono del servicio reacciona al pasar por la tarjeta */
.service-card .service-icon {
  transition:
    transform .4s cubic-bezier(.34, 1.56, .64, 1),
    background-color .35s ease,
    color .35s ease;
}

.service-card:hover .service-icon {
  transform: scale(1.08) rotate(-4deg);
}

/* El enlace de la tarjeta se tine al pasar por ella. Antes animaba tambien
   `gap` y `letter-spacing`: dos propiedades que rehacen el diseno del texto
   en cada fotograma, justo lo que el resto del archivo evita. */
.service-card-link {
  transition: color var(--dur-media) var(--ease-suave);
}

.service-card:hover .service-card-link {
  color: var(--primary-ink-strong);
}

/* Numeración del proceso: se ilumina */
.process-card .process-number {
  transition: opacity .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.process-card:hover .process-number {
  opacity: .75;
  transform: translateY(-2px);
}

/* Botones: elevación y sombra coherentes en toda la web */
.btn {
  transition:
    transform .25s cubic-bezier(.22, .61, .36, 1),
    box-shadow .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .06s; }

/* Foco visible y consistente para navegación con teclado */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Enlaces de navegación: subrayado que crece desde el centro */
.site-nav > a {
  position: relative;
}

.site-nav > a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .3s cubic-bezier(.22, .61, .36, 1);
}

.site-nav > a:hover::after,
.site-nav > a.active::after { width: 22px; }

/* Acordeones: apertura más suave */
.seo-expand,
.faq-item {
  transition: border-color .3s ease, box-shadow .3s ease;
}

.seo-expand:hover,
.faq-item:hover { border-color: #d9bfc6; }

.seo-expand[open],
.faq-item[open] { box-shadow: var(--shadow-sm); }

.faq-arrow {
  display: inline-block;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.faq-item[open] .faq-arrow { transform: rotate(180deg); }

/* Imagen de cabecera: acercamiento muy leve al pasar el ratón */
.hero-card { overflow: hidden; }

.hero-image {
  transition: transform var(--dur-media) var(--ease-salida);
}

.hero-card:hover .hero-image { transform: scale(1.03); }

/* Insignias flotantes: flotan de verdad */
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

html.js .floating-badge {
  animation: flotar 5.5s ease-in-out infinite;
}

html.js .floating-badge.badge-bottom {
  animation-delay: 2.2s;
}

/* Cabecera: se compacta al bajar */
.site-header {
  transition:
    padding .3s ease,
    box-shadow .3s ease,
    background-color .3s ease;
}

.site-header.scrolled {
  box-shadow: 0 6px 24px rgba(55, 18, 26, .10);
}

/* Botón de WhatsApp: latido discreto para llamar la atención sin molestar */
@keyframes pulso-wa {
  0%   { transform: scale(1);    opacity: .9; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

html.js .wa-float {
  animation: pulso-wa 3.4s ease-out infinite;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.wa-float:hover { transform: scale(1.09); }

/* ---------------------------------------------
   4. ICONOS DE SERVICIO EN SVG
   Sustituyen a las letras sueltas anteriores.
   --------------------------------------------- */
.service-icon svg,
.info-box-icon svg {
  width: 26px;
  height: 26px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.info-box-icon svg { width: 22px; height: 22px; }

/* ---------------------------------------------
   5. ACCESIBILIDAD DEL MOVIMIENTO
   Si el sistema pide menos animación, se la damos.
   --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  html.js .floating-badge,
  html.js .wa-float {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================
   AMPLIACION 2026
   Navegacion desplegable, migas, blog, reserva de
   cita, tablas de datos y bloques de contenido.
   ============================================= */

/* --- Utilidades --- */
.container-narrow { width: min(880px, calc(100% - 40px)); margin-inline: auto; }
.section-intro { font-size: var(--fs-base); color: var(--muted); max-width: 68ch; }
.page-hero-text { font-size: var(--fs-lg); color: rgba(255,255,255,.85); max-width: 62ch; margin-bottom: 26px; }
.page-hero .hero-trust { margin-top: 22px; }
.page-hero .trust-badge { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #fff; }
.page-hero .badge-check { background: var(--gold); }

/* --- Navegacion con grupos desplegables --- */
.nav-group { position: relative; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer;
  /* Antes ponia `font: inherit`, que es una abreviada y reescribia el
     tamano y el peso definidos en la regla del menu. */
  font-family: inherit;
}
.nav-caret { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--transition); }
.nav-group[data-open="true"] .nav-caret { transform: rotate(180deg); }
.nav-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-8px);
  min-width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow); padding: 10px; display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}
.nav-group[data-open="true"] .nav-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-panel a { display: grid; gap: 2px; padding: 10px 13px; border-radius: var(--radius-sm); transition: background var(--transition); }
.nav-panel a:hover, .nav-panel a.active { background: var(--primary-soft); }
.nav-panel strong { font-size: var(--fs-md); color: var(--ink); font-weight: 700; }
.nav-panel span { font-size: var(--fs-xs); color: var(--muted); }

/* --- Migas de pan --- */
.breadcrumbs { padding: 18px 0 0; font-size: var(--fs-sm); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--primary-ink); }
.breadcrumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* --- Contenido largo --- */
.prose h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 18px; }
.prose h3 { font-size: var(--fs-lg); margin: 30px 0 12px; color: var(--ink); font-weight: 700; }
.prose p { margin-bottom: 16px; line-height: 1.75; }
.prose ul, .prose ol { margin: 0 0 18px 20px; display: grid; gap: 8px; }
.prose li { line-height: 1.65; }
.prose strong { color: var(--ink); }
.prose blockquote {
  margin: 24px 0; padding: 18px 22px; border-left: 3px solid var(--gold);
  background: var(--gold-soft); border-radius: 0 14px 14px 0; font-size: var(--fs-base);
}
.prose a { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px; }

/* --- Tablas de datos --- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); min-width: 480px; }
.data-table th, .data-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.data-table th { background: var(--primary-soft); color: var(--ink); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td strong { color: var(--primary-ink); }
.table-note { font-size: var(--fs-xs); color: var(--muted); margin-top: 12px; line-height: 1.6; }

/* --- Metricas --- */
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.metric-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; text-align: center; }
.metric-card strong { display: block; font-family: var(--font-display); font-size: var(--fs-3xl); color: var(--primary-ink); line-height: 1; margin-bottom: 8px; }
.metric-card span { font-size: var(--fs-sm); color: var(--muted); }

/* --- Entidades y zonas --- */
.bank-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.bank-chip { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.zone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.zone-chip {
  display: flex; align-items: center; gap: 10px; padding: 15px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-md);
  color: var(--ink); transition: var(--tr-color);
}
.zone-chip:hover { border-color: var(--primary-ink); color: var(--primary-ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.zone-chip .ico { width: 19px; height: 19px; fill: none; stroke: var(--primary); stroke-width: 1.7; }

/* --- CTA intermedia --- */
.inline-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  padding: 34px 38px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-mid) 100%);
  color: #fff;
}
.inline-cta h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 8px; }
.inline-cta p { color: rgba(255,255,255,.82); font-size: var(--fs-md); max-width: 56ch; }
.inline-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.inline-cta .btn-secondary { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
.inline-cta .btn-primary { background: #fff; color: #641224; }

/* --- Formulario de captacion --- */
.lead-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-sm); }
/* .btn lleva white-space: nowrap, que esta bien para "Pedir cita" y mal
   para "Enviar el caso y recibir la viabilidad". En movil, el boton de
   envio de un formulario ocupa el ancho y puede partir. */
@media (max-width: 700px) {
  .lead-form { padding: 22px; }
  .lead-form .btn[type="submit"],
  .form-actions .btn[type="submit"],
  form .btn[type="submit"] {
    white-space: normal; width: 100%; justify-content: center; text-align: center;
  }
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 20px; }
.form-label-full { grid-column: 1 / -1; }
/* display:none, no solo fuera de pantalla: un lector de pantalla leia el
   campo trampa y podia hacer que alguien lo rellenara y quedara marcado
   como robot. El campo se sigue enviando vacio en el POST. */
.hp-field { display: none; }
.consent-check { display: flex; gap: 11px; align-items: flex-start; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; margin-bottom: 20px; }
/* 22px y no 17: es una casilla OBLIGATORIA para poder enviar, y con el
   pulgar en un movil 17 px se falla. El area util es toda la etiqueta
   (el texto tambien la marca), pero el cuadro visible tiene que verse y
   poder pulsarse por si solo. */
/* 24 px, que es el minimo que exige la WCAG para un objetivo tactil. Con 22
   se quedaba justo por debajo, y esta es la casilla que hay que marcar
   obligatoriamente para poder enviar cualquier formulario del sitio. */
.consent-check input { margin-top: 1px; width: 24px; height: 24px; accent-color: var(--primary-ink); flex-shrink: 0; cursor: pointer; }
.consent-check { cursor: pointer; }
.consent-check a { color: var(--primary-ink); text-decoration: underline; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-note { font-size: var(--fs-sm); color: var(--muted); }
.form-note a { color: var(--primary-ink); font-weight: 600; }
.form-alert { padding: 15px 18px; border-radius: var(--radius-sm); margin-bottom: 22px; font-size: var(--fs-md); }
.form-alert-ok { background: #edf9f0; border: 1px solid #bfe6c8; color: #1d6b31; }
.form-alert-error { background: var(--primary-soft); border: 1px solid #f2c4cf; color: var(--primary-ink-strong); }

/* --- Pre-footer --- */
.pre-footer-cta { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); padding: 62px 0; }
.pre-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.pre-footer-inner h2 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 10px; }
.pre-footer-inner p { color: rgba(255,255,255,.82); max-width: 56ch; font-size: var(--fs-base); }
.pre-footer-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pre-footer-actions .btn-primary { background: #fff; color: #641224; }
.pre-footer-actions .btn-secondary { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.32); color: #fff; }

/* --- Pie: credencial, redes y legales --- */
.footer-badge {
  display: flex; gap: 13px; align-items: flex-start; margin-top: 22px; padding: 15px 18px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm);
}
.footer-badge .ico { width: 26px; height: 26px; fill: none; stroke: var(--gold); stroke-width: 1.6; flex-shrink: 0; }
.footer-badge strong { display: block; font-size: var(--fs-sm); color: #fff; margin-bottom: 3px; }
.footer-badge span {
  font-size: var(--fs-xs);
  /* Color explicito: sin el heredaba la tinta oscura del documento y quedaba
     invisible sobre el pie. Es la linea del registro del Banco de Espana. */
  color: rgba(255,255,255,.75);
}
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); transition: var(--tr-color);
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
.footer-social svg { width: 17px; height: 17px; fill: #fff; }
.footer-social a:hover svg { fill: var(--primary-dark); }
.footer-disclaimer {
  font-size: var(--fs-xs); line-height: 1.7; margin: 22px 0; max-width: 100ch;
  /* Antes usaba --muted con opacidad .62: sobre el pie oscuro daba 2,7:1,
     por debajo del minimo legible. Ahora ronda 5,5:1. */
  color: rgba(255,255,255,.62);
}
.footer-disclaimer strong { color: rgba(255,255,255,.88); }
.footer-nota-zonas { color: rgba(255,255,255,.6); }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-legal-links a { opacity: .75; }
.footer-legal-links a:hover { opacity: 1; color: var(--gold); }

/* --- Blog --- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
.post-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; transition: var(--tr-color);
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(139,7,36,.14); }
.post-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post-tag { display: inline-block; align-self: flex-start; padding: 4px 11px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-ink); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 13px; }
.post-card h3 { font-size: var(--fs-lg); line-height: 1.4; margin-bottom: 10px; color: var(--ink); font-weight: 700; }
.post-card p { font-size: var(--fs-sm); flex: 1; margin-bottom: 15px; }
.post-meta { font-size: var(--fs-xs); color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.article-header { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.article-header h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); margin: 14px 0 16px; }
.article-lead { font-size: var(--fs-lg); color: var(--muted); line-height: 1.7; }
.article-toc { background: var(--gold-soft); border: 1px solid #f0e0c4; border-radius: var(--radius-md); padding: 22px 26px; margin-bottom: 34px; }
.article-toc strong { display: block; margin-bottom: 11px; font-size: var(--fs-md); }
.article-toc ol { margin: 0 0 0 18px; display: grid; gap: 7px; font-size: var(--fs-md); }
.article-author { display: flex; gap: 14px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); margin-top: 36px; }
.article-author .avatar {
  width: 54px; height: 54px; border-radius: 50%; background: var(--primary-soft);
  display: grid; place-items: center; font-weight: 700; color: var(--primary-ink); flex-shrink: 0;
}
.article-author strong { display: block; font-size: var(--fs-md); }
.article-author span { font-size: var(--fs-xs); color: var(--muted); }

/* --- Reserva de cita --- */
.booking-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: start; }
.booking-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.booking-panel h2 { font-size: var(--fs-xl); margin-bottom: 6px; }
.booking-step-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--primary-ink); font-weight: 700; margin-bottom: 6px; }
.day-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 9px; margin-top: 18px; }
.day-btn {
  padding: 12px 6px; border: 1px solid var(--line-control); border-radius: var(--radius-sm); background: var(--surface);
  cursor: pointer; text-align: center; transition: var(--tr-color); font: inherit;
}
.day-btn:hover:not(:disabled) { border-color: var(--primary-ink); transform: translateY(-2px); }
.day-btn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary-ink); color: #fff; }
.day-btn:disabled { opacity: .32; cursor: not-allowed; }
.day-btn .dow { display: block; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .07em; opacity: .7; }
.day-btn .dnum { display: block; font-size: var(--fs-xl); font-weight: 700; font-family: var(--font-display); line-height: 1.2; }
.day-btn .dmon { display: block; font-size: var(--fs-2xs); opacity: .7; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 9px; margin-top: 16px; }
.slot-btn { padding: 11px 6px; border: 1px solid var(--line-control); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font: inherit; font-weight: 600; font-size: var(--fs-md); transition: var(--tr-color); }
.slot-btn:hover:not(:disabled) { border-color: var(--primary-ink); color: var(--primary-ink); }
.slot-btn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary-ink); color: #fff; }
.slot-btn:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.booking-summary { background: var(--primary-soft); border: 1px solid #f2c4cf; border-radius: var(--radius-sm); padding: 16px 18px; margin: 18px 0; font-size: var(--fs-md); }
.booking-summary strong { color: var(--primary-ink-strong); }
.booking-empty { font-size: var(--fs-sm); color: var(--muted); padding: 14px 0; }

/* --- Calculadora por pestanas --- */
.calc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.calc-tab {
  padding: 11px 20px; border: 1px solid var(--line-control); border-radius: 999px; background: var(--surface);
  cursor: pointer; font: inherit; font-weight: 600; font-size: var(--fs-md); color: var(--muted); transition: var(--tr-color);
}
.calc-tab:hover { border-color: var(--primary-ink); color: var(--primary-ink); }
.calc-tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary-ink); color: #fff; }
.calc-panel[hidden] { display: none; }
/* El panel entra con el mismo gesto que el resto de la web. No se toca el
   atributo [hidden], que es lo que hace funcionar el patron de pestanas
   para un lector de pantalla. */
@media (prefers-reduced-motion: no-preference) {
  .calc-panel:not([hidden]) { animation: escena-entra var(--dur-media) var(--ease-salida) backwards; }
}
.amort-wrap { max-height: 420px; overflow-y: auto; margin-top: 20px; }
/* En movil, un solo eje. Con la caja de alto libre y la tabla sin ancho
   minimo, el cuadro se lee bajando, como el resto de la pagina. */
@media (max-width: 700px) {
  .amort-wrap { max-height: none; overflow-y: visible; }
  .amort-wrap .data-table { min-width: 0; font-size: var(--fs-sm); }
  .amort-wrap .data-table th,
  .amort-wrap .data-table td { padding: 9px 8px; }
  .amort-wrap .data-table td { text-align: right; font-variant-numeric: tabular-nums; }
  .amort-wrap .data-table td:first-child,
  .amort-wrap .data-table th:first-child { text-align: left; }
}

@media (max-width: 900px) {
  .booking-layout { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .inline-cta, .pre-footer-inner { flex-direction: column; align-items: flex-start; }
}

/* El mismo punto de corte que el cajon movil de mas arriba y que el JS.
   Estaba en 980 y dejaba rota la franja de 981 a 1060 px, justo la de un
   iPad Pro en vertical. */
@media (max-width: 1200px) {
  /* En movil el menu es una columna: los grupos se despliegan en linea. */
  .nav-panel {
    position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none;
    border: 0; border-left: 2px solid var(--line); border-radius: 0; margin: 4px 0 8px 10px;
    padding: 0 0 0 10px; display: none; min-width: 0;
  }
  /* El transform hay que anularlo TAMBIEN en el estado abierto: la regla
     de escritorio esta fuera de esta consulta de medios y tiene mas
     especificidad, asi que al desplegar devolvia el translateX(-50%) y el
     panel se salia media anchura por la izquierda. */
  .nav-group[data-open="true"] .nav-panel { display: grid; transform: none; }
  .nav-toggle { width: 100%; justify-content: space-between; }
  .nav-panel a { padding: 9px 10px; }
}

/* Con el menu ampliado, el nombre de marca se partia en dos lineas. */
.brand-name { white-space: nowrap; }
.brand-city { white-space: nowrap; }
@media (max-width: 1150px) and (min-width: 981px) {
  /* Menu mas compacto en portatiles pequenos para que todo quepa en una linea. */
  .site-nav { gap: 14px; }
  .site-nav .nav-link { font-size: var(--fs-sm); }
  .header-pill-label { display: none; }
}

/* =====================================================================
   MOVIMIENTO Y LENGUAJE VISUAL
   =====================================================================
   Todo lo de aqui abajo respeta una sola regla: se animan transform y
   opacity, nunca width, height, top, left, margin, padding ni box-shadow.
   Esas ultimas obligan al navegador a recalcular el diseno de la pagina
   en cada fotograma; las dos primeras las resuelve la tarjeta grafica.
   Es la diferencia entre una web que se mueve y una que va a tirones.
   ===================================================================== */

/* ---------------------------------------------------------------------
   COSTURAS ENTRE SECCIONES
   ---------------------------------------------------------------------
   El problema medido: sesiones de 4.453 px de alto que terminan en un
   corte plano y empiezan otra. El ojo nota el escalon. Cuatro
   tratamientos, para alternarlos y que no se conviertan en un tic.
   --------------------------------------------------------------------- */


/* 3. Bisagra dorada: una linea fina que marca el cambio de tema. */
.costura-oro { position: relative; }
.costura-oro::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: min(180px, 40%); height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}


/* ---------------------------------------------------------------------
   MARCO TECNICO
   ---------------------------------------------------------------------
   Esquinas en angulo que se trazan cuando el bloque entra en pantalla.
   La idea viene de las interfaces de ciencia ficcion; en cian neon seria
   una nave espacial, en dorado sobre burdeos lee como instrumental de
   precision, que es lo que queremos transmitir vendiendo financiacion.

   Reservado a tres sitios: resultado de la calculadora, credenciales y
   casos conseguidos. Puesto en todas las tarjetas dejaria de significar
   nada.
   --------------------------------------------------------------------- */
.marco-tecnico { position: relative; }
.marco-tecnico::before,
.marco-tecnico::after {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  border: 1.5px solid var(--gold);
  opacity: .85;
  transition: transform var(--dur-escena) var(--ease-salida),
              opacity var(--dur-escena) var(--ease-salida);
}
.marco-tecnico::before {
  top: -9px; left: -9px;
  border-right: 0; border-bottom: 0;
  border-radius: var(--radius-xs) 0 0 0;
  transform-origin: top left;
}
.marco-tecnico::after {
  bottom: -9px; right: -9px;
  border-left: 0; border-top: 0;
  border-radius: 0 0 var(--radius-xs) 0;
  transform-origin: bottom right;
}
/* scale(.92) y no scale(0): nada en el mundo real aparece de la nada, y
   un marco que sale de un punto se lee como un fallo de dibujado. */
html.js .marco-tecnico::before,
html.js .marco-tecnico::after { transform: scale(.92); opacity: 0; }
html.js .marco-tecnico.is-visible::before,
html.js .marco-tecnico.is-visible::after { transform: scale(1); opacity: .85; }

/* ---------------------------------------------------------------------
   CABECERA REACTIVA
   ---------------------------------------------------------------------
   Se compacta al bajar y se aparta cuando el visitante baja rapido, que
   es cuando esta buscando algo y la cabecera solo estorba. Vuelve en
   cuanto sube, sin esperar. La altura no se anima (obligaria a recalcular
   el diseno): se mueve el bloque entero con transform.
   --------------------------------------------------------------------- */
.site-header {
  background: var(--header-bg);
  transition: box-shadow var(--dur-media) var(--ease-suave),
              background var(--dur-media) var(--ease-suave),
              transform var(--dur-media) var(--ease-salida);
}
.site-header.scrolled { background: var(--header-bg-scrolled); }
.site-header.oculta { transform: translateY(-100%); }
body.menu-open .site-header.oculta { transform: none; }


/* ---------------------------------------------------------------------
   ALTERNADOR DE TEMA
   --------------------------------------------------------------------- */
.tema-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;           /* objetivo tactil minimo */
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--primary-ink);
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-firme),
              border-color var(--dur-micro) var(--ease-suave),
              color var(--dur-micro) var(--ease-suave);
}
.tema-btn:hover { transform: scale(1.06); border-color: var(--gold); color: var(--gold); }
.tema-btn:active { transform: scale(.96); }
.tema-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.tema-btn .icono-luna { display: none; }
:root[data-theme="oscuro"] .tema-btn .icono-luna { display: block; }
:root[data-theme="oscuro"] .tema-btn .icono-sol { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) .tema-btn .icono-luna { display: block; }
  :root:not([data-theme="claro"]) .tema-btn .icono-sol { display: none; }
}

/* ---------------------------------------------------------------------
   ESCENA DE PORTADA
   ---------------------------------------------------------------------
   La imagen NO espera a nada: es el elemento que Google mide como LCP y
   retrasarla penalizaria el posicionamiento. Lo que entra escalonado es
   el texto que va encima. Toda la secuencia acaba antes de 1,6 s: pasado
   ese punto el visitante ya esta leyendo y el movimiento estorba.
   --------------------------------------------------------------------- */
@keyframes escena-entra {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes escena-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

html.js .hero-copy > * {
  animation: escena-entra var(--dur-escena) var(--ease-salida) backwards;
}
html.js .hero-copy > *:nth-child(1) { animation-delay: .05s; }
html.js .hero-copy > *:nth-child(2) { animation-delay: .18s; }
html.js .hero-copy > *:nth-child(3) { animation-delay: .32s; }
html.js .hero-copy > *:nth-child(4) { animation-delay: .46s; }
html.js .hero-copy > *:nth-child(5) { animation-delay: .58s; }
html.js .hero-copy > *:nth-child(6) { animation-delay: .68s; }

html.js .hero-visual img,
html.js .hero-media img {
  animation: escena-zoom 1.4s var(--ease-salida) backwards;
}

/* Parallax: lo mueve el JS con translate3d dentro de un unico bucle de
   requestAnimationFrame compartido con la cabecera. Recorrido maximo
   40 px: mas que eso se nota como un fallo, no como profundidad. */
.parallax { will-change: auto; }

/* ---------------------------------------------------------------------
   MICRO-INTERACCIONES
   ---------------------------------------------------------------------
   La sombra no se anima: animar box-shadow repinta el elemento en cada
   fotograma. Se pinta una sombra mas profunda en una capa ::after y lo
   que se anima es su opacidad, que es gratis.
   --------------------------------------------------------------------- */
/* El shorthand tiene que repetir TODO lo que cambia al pasar el raton: esta
   regla va despues de la de .service-card y la sustituye entera. Sin
   border-color aqui, el borde se tenia de burdeos de golpe. */
.tarjeta-viva {
  position: relative;
  transition: transform var(--dur-media) var(--ease-salida),
              border-color var(--dur-media) var(--ease-suave);
}
.tarjeta-viva::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-media) var(--ease-suave);
}
.tarjeta-viva:hover { transform: translateY(-4px); }
.tarjeta-viva:hover::after { opacity: 1; }

/* La imagen dentro de una tarjeta amplia un poco al pasar por encima. */
.marco-imagen { overflow: hidden; border-radius: inherit; }
.marco-imagen img { transition: transform var(--dur-media) var(--ease-salida); }
.tarjeta-viva:hover .marco-imagen img { transform: scale(1.04); }

/* Botones: un relleno que barre desde la izquierda, no un cambio seco. */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.05));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-media) var(--ease-salida);
  z-index: -1;
}
.btn:hover::before { transform: scaleX(1); }
.btn-secondary::before,
.btn-white::before { background: linear-gradient(90deg, var(--primary-soft), transparent); }

/* Enlaces de texto: subrayado que crece desde la izquierda. */
.enlace-vivo { position: relative; }
.enlace-vivo::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-media) var(--ease-salida);
}
.enlace-vivo:hover::after { transform: scaleX(1); }

/* La flecha de "Saber mas" se adelanta, SI el enlace trae un icono propio.
   
   Aqui hubo un intento de dibujarla con ::after y fue un error: .enlace-vivo
   y .flecha-viva conviven en los MISMOS enlaces (comprobado: los 10 de la
   portada llevan las dos, y no hay ninguno con una sola), y las dos reglas se
   peleaban por el unico ::after que tiene el elemento. Resultado: la flecha
   heredaba position:absolute y scaleX(0) del subrayado, no se veia, y ademas
   se cargaba el subrayado, que era el efecto que si funcionaba.
   
   Se queda como enganche: si algun dia estos enlaces llevan un <svg> o un
   <span class="flecha">, se anima. Mientras tanto el efecto visible es el
   subrayado de .enlace-vivo, que no se toca. */
.flecha-viva svg,
.flecha-viva .flecha { transition: transform var(--dur-micro) var(--ease-salida); }
.flecha-viva:hover svg,
.flecha-viva:hover .flecha { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   PROCESO POR PASOS
   ---------------------------------------------------------------------
   El punto mas aburrido de cualquier web de hipotecas. Al bajar, cada
   paso se ilumina cuando llega y el anterior se atenua.
   --------------------------------------------------------------------- */
/* Igual que .tarjeta-viva: esta regla pisa la de .process-card, asi que
   repite las tres propiedades que tambien cambian en el hover. */
.paso-vivo {
  transition: opacity var(--dur-media) var(--ease-suave),
              transform var(--dur-media) var(--ease-salida),
              box-shadow var(--dur-media) var(--ease-salida),
              border-color var(--dur-media) var(--ease-suave);
}
html.js .paso-vivo { opacity: .45; }
html.js .paso-vivo.is-visible,
html.js .paso-vivo.paso-activo { opacity: 1; }
.paso-vivo .paso-numero { transition: transform var(--dur-media) var(--ease-firme); }
html.js .paso-vivo.paso-activo .paso-numero { transform: scale(1.12); }

/* ---------------------------------------------------------------------
   BARRAS COMPARATIVAS
   ---------------------------------------------------------------------
   "Sobreinformacion" bien entendida: no mas parrafos, mas datos de un
   vistazo. En la calculadora, ver la proporcion entre capital e intereses
   dice mas que la cifra sola.
   --------------------------------------------------------------------- */
.barra-dato {
  height: 10px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.barra-dato > span {
  display: block; height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--primary-mid));
  transform-origin: left;
  transform: scaleX(var(--valor, 0));
  transition: transform var(--dur-escena) var(--ease-salida);
}
.barra-dato.barra-oro > span { background: linear-gradient(90deg, var(--gold), #e6c579); }

/* Los numeros que cuentan hacia arriba no pueden ensanchar su bloque
   mientras cuentan: ancho de digito fijo. */
.stat-number,
.cifra-viva { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   ESQUELETO DE CARGA
   Las resenas llegan de Google: mientras tanto, un esqueleto en vez de
   un hueco vacio.
   --------------------------------------------------------------------- */
@keyframes esqueleto-brillo { to { transform: translateX(100%); } }
.esqueleto {
  position: relative;
  overflow: hidden;
  background: var(--line);
  border-radius: var(--radius-sm);
  min-height: 14px;
}
.esqueleto::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--surface), transparent);
  opacity: .55;
  transform: translateX(-100%);
  animation: esqueleto-brillo 1.4s infinite;
}

/* ---------------------------------------------------------------------
   TRANSICIONES ENTRE PAGINAS
   ---------------------------------------------------------------------
   Nativo del navegador: sin JavaScript y sin libreria. En navegadores
   que no lo admiten simplemente no ocurre nada y la navegacion es la de
   siempre. Mejora progresiva pura, coste cero.
   --------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-sale 140ms var(--ease-suave) both; }
::view-transition-new(root) { animation: vt-entra 220ms var(--ease-salida) both; }
@keyframes vt-sale  { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------------
   MOVIMIENTO REDUCIDO
   ---------------------------------------------------------------------
   El contenido queda VISIBLE, no oculto. Un visitante con esta
   preferencia activada tiene que ver la web entera, solo que quieta. Es
   el fallo mas habitual al montar entradas por scroll: se olvida el
   clip-path y medio texto se queda recortado para siempre.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal.is-visible,
  html.js .reveal[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  html.js .hero-copy > *,
  html.js .hero-visual img,
  html.js .hero-media img { animation: none !important; }
  html.js .marco-tecnico::before,
  html.js .marco-tecnico::after { transform: none !important; opacity: .85 !important; }
  html.js .paso-vivo { opacity: 1 !important; }
  .esqueleto::after { animation: none !important; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* ---------------------------------------------------------------------
   TIPOGRAFIA XXL
   ---------------------------------------------------------------------
   Es la palanca que mas "actualizado" comunica por euro invertido: un
   titular que ocupa un tercio de la pantalla sostiene la composicion el
   solo, sin depender de la imagen. Todo con clamp(), asi que crece en
   escritorio sin romper nada en movil.
   --------------------------------------------------------------------- */
.hero-copy h1 {
  /* Medido: con 4.6vw el titular salia a 79 px en un portatil de 1280 y
     ocupaba cuatro lineas y 350 px de alto, empujando la imagen fuera de
     la primera pantalla. XXL no puede costarle al titular su propio
     escenario. A 3.2vw son tres lineas y la escena entera cabe. */
  font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4.15rem);
  letter-spacing: -.015em;
}
.section-head h2 { font-size: var(--fs-3xl); letter-spacing: -.01em; }
.page-hero h1 { font-size: var(--fs-3xl); letter-spacing: -.01em; }
.cta-inner h2 { font-size: var(--fs-3xl); }

/* ---------------------------------------------------------------------
   OBJETIVOS TACTILES
   ---------------------------------------------------------------------
   Medido en la auditoria: 52 de 59 elementos pulsables quedaban por
   debajo de los 44 px que recomienda la guia de accesibilidad. Los
   "Saber mas" median 18 px de alto. En movil no se falla por poco: se
   falla y el visitante pulsa otra cosa.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Controles principales: 44 px, la referencia de las guias de
     interfaz movil. */
  .service-card-link,
  .zone-chip,
  .bank-chip,
  .breadcrumb a,
  .tab-btn,
  .site-nav .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .service-card-link { gap: 8px; }

  /* El enlace del desplegable NO puede pasar a flex: es una rejilla de dos
     filas (titulo arriba, descripcion debajo) y con flex las dos caian en
     la misma linea. Se gana el area pulsable con altura, no cambiando la
     forma de colocar el contenido. */
  .nav-panel a {
    min-height: 44px;
    align-content: center;
  }

  /* Botones e iconos sueltos: cuadrados de 44, agrandando el area
     pulsable con padding, nunca el icono. */
  .cta-bar-close,
  .menu-toggle,
  .back-to-top,
  .footer-social a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .wa-pill,
  .btn-sm, .btn-small { min-height: 44px; display: inline-flex; align-items: center; }

  /* Listas de enlaces del pie: 38 px. Son 32 enlaces seguidos; a 44 el
     pie se convertiria en una pagina entera de desplazamiento. 38
     supera con holgura el minimo de 24 px que exige la norma de
     accesibilidad para objetivos tactiles, y mantiene el pie legible. */
  .footer-links a,
  .footer-legal-links a {
    min-height: 38px;
    display: flex;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------
   CLASES QUE SUSTITUYEN A ESTILOS EN LINEA
   ---------------------------------------------------------------------
   Estaban escritos con style="..." dentro del PHP, fuera del alcance de
   la escala tipografica y del sistema de temas. La nota media de
   opiniones usaba color: var(--primary), que es el burdeos de RELLENO:
   sobre el fondo del tema oscuro daba 2,47:1 y no se leia.
   --------------------------------------------------------------------- */
#reviews-rating {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  color: var(--primary-ink);
  line-height: 1;
}
.reviews-count { color: var(--muted); font-size: var(--fs-md); }
.faq-categoria {
  font-size: var(--fs-2xl);
  margin-bottom: 20px;
  color: var(--primary-ink);
  font-family: var(--font-body);
  font-weight: 700;
}
.zona-barrio-nota {
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.5;
}

/* =====================================================================
   FOTOGRAFIA
   =====================================================================
   Antes solo la portada tenia una imagen de contenido; las otras 42
   paginas no tenian ninguna. Aqui esta todo lo que gobierna como se
   comportan las 27 fotos nuevas.
   ===================================================================== */

.foto {
  display: block;
  position: relative;
  overflow: hidden;
  /* El color medio de la propia foto, calculado al procesarla. Mientras la
     imagen llega se ve ese tono en lugar de un rectangulo gris, y como el
     hueco ya tiene su proporcion reservada nada se mueve al cargar. */
  background-color: var(--tono, #8b7361);
  aspect-ratio: var(--ratio, 3 / 2);
  border-radius: inherit;
}
.foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------------
   FOTO DE CABECERA
   ---------------------------------------------------------------------
   La foto va detras del titular, con un velo degradado encima. El velo no
   es decorativo: sin el, un titular blanco sobre una foto clara baja de
   4.5:1 y deja de leerse, y ocurre justo en la primera pantalla.
   --------------------------------------------------------------------- */
.page-hero-con-foto { padding: 104px 0 88px; }
.page-hero-con-foto .cabecera-foto {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.cabecera-foto .foto {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  background-color: var(--primary-dark);
}
.cabecera-foto .foto img { transform: scale(1.08); }
.cabecera-foto::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(102deg, rgba(38,6,17,.95) 0%, rgba(100,18,36,.88) 46%, rgba(139,7,36,.62) 100%),
    linear-gradient(to top, rgba(38,6,17,.55), transparent 45%);
}
.page-hero-con-foto::before { z-index: 1; }
.page-hero-con-foto .page-hero-inner { position: relative; z-index: 2; }

/* ---------------------------------------------------------------------
   PARALLAX NATIVO
   ---------------------------------------------------------------------
   `animation-timeline: view()` ata la animacion al recorrido del elemento
   por la pantalla. Lo resuelve el navegador en el hilo de composicion, sin
   una sola linea de JavaScript y sin escuchar el scroll: es mas fluido que
   cualquier parallax hecho a mano y no gasta nada.

   Va dentro de @supports porque en los navegadores que aun no lo admiten
   simplemente no ocurre: la foto se queda quieta y no se rompe nada.
   --------------------------------------------------------------------- */
@keyframes foto-parallax {
  from { transform: scale(1.12) translate3d(0, -2.4%, 0); }
  to   { transform: scale(1.12) translate3d(0,  2.4%, 0); }
}
@keyframes foto-entra {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cabecera-foto .foto img,
    .foto-parallax img {
      animation: foto-parallax linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    /* Las fotos de seccion aparecen al entrar, en lugar de estar ya ahi. */
    .foto-entra {
      animation: foto-entra .8s var(--ease-salida) both;
      animation-timeline: view();
      animation-range: entry 10% cover 32%;
    }
  }
}

/* ---------------------------------------------------------------------
   BANDA DE FOTO ENTRE SECCIONES
   ---------------------------------------------------------------------
   El remedio directo al problema medido: secciones de 4.453 px sin un
   solo descanso visual. Una banda ancha parte el muro de texto y da aire.
   --------------------------------------------------------------------- */
.banda-foto {
  position: relative;
  margin: 0;
  overflow: hidden;
}
.banda-foto .foto {
  aspect-ratio: 21 / 9;
  border-radius: 0;
}
@media (max-width: 700px) {
  .banda-foto .foto { aspect-ratio: 4 / 3; }
}
.banda-foto-texto {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 84px 0 38px;
  /* Tres paradas, no dos: con un degradado simple el texto caia sobre las
     zonas claras de la foto y el antetitulo dorado se perdia. Asi la franja
     donde va el texto es siempre oscura, mida lo que mida la foto. */
  background: linear-gradient(to top,
    rgba(30,5,14,.95) 0%,
    rgba(30,5,14,.86) 38%,
    rgba(30,5,14,.45) 68%,
    transparent 100%);
  color: #fff;
}
/* El selector va sobre p:not(.eyebrow): el antetitulo tambien es un <p>,
   y heredaba el ancho maximo de 22ch, que lo partia en dos lineas. */
.banda-foto-texto p:not(.eyebrow) {
  color: rgba(255,255,255,.94);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1.25;
  max-width: 24ch;
  margin: 0;
}
/* Dorado mas claro: el de marca (#c9963a) es correcto sobre crema, pero
   sobre foto oscura se apaga. */
.banda-foto-texto .eyebrow { color: #e6c179; }
.banda-foto-texto .eyebrow::before { background: #e6c179; }


/* ---------------------------------------------------------------------
   FOTO EN LAS TARJETAS DE SERVICIO
   --------------------------------------------------------------------- */
.service-card { overflow: hidden; }
.service-card .foto {
  margin: -26px -24px 20px;
  aspect-ratio: 16 / 10;
  border-radius: 0;
  width: calc(100% + 48px);
}
@media (max-width: 700px) {
  .service-card .foto { margin: -20px -18px 16px; width: calc(100% + 36px); }
}

/* ---------------------------------------------------------------------
   CINTA DE ENTIDADES
   ---------------------------------------------------------------------
   Los nombres de banco pasan en bucle. Es el recurso que usan las webs de
   constructoras para los logos de clientes, y aqui resuelve un problema
   real: son 18 entidades y en movil ocupaban seis filas.
   --------------------------------------------------------------------- */
.cinta {
  overflow: hidden;
  position: relative;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cinta-pista {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: cinta-corre 46s linear infinite;
}
/* Tres formas de pararla: raton, teclado (foco dentro) y el boton, que es
   la unica que funciona con el dedo. WCAG 2.2.2 exige poder detener
   cualquier movimiento automatico de mas de cinco segundos. */
.cinta:hover .cinta-pista,
.cinta:focus-within .cinta-pista,
.cinta.pausada .cinta-pista { animation-play-state: paused; }
.cinta { position: relative; }
.cinta-pausa {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  z-index: 2; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--muted);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color var(--dur-micro) var(--ease-suave), border-color var(--dur-micro) var(--ease-suave);
}
.cinta-pausa:hover { color: var(--primary-ink); border-color: var(--primary-ink); }
.cinta-pausa-icono {
  width: 10px; height: 12px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
/* Pausada: las dos barras se funden en un triangulo de "reanudar". */
.cinta.pausada .cinta-pausa-icono {
  width: 0; height: 0;
  border: 6px solid transparent;
  border-left: 10px solid currentColor;
  border-right: 0;
}
@media (max-width: 700px) { .cinta-pausa { right: 2px; } }
@keyframes cinta-corre {
  from { transform: translate3d(0, 0, 0); }
  /* -50% exacto porque la lista va duplicada: al llegar a la mitad, el
     fotograma es identico al inicial y el bucle no da tirones. */
  to   { transform: translate3d(-50%, 0, 0); }
}


/* ---------------------------------------------------------------------
   PALABRA SUBRAYADA A MANO
   Un trazo dorado bajo la palabra clave del titular. Es el unico adorno
   tipografico que se permite, y solo una vez por pagina.
   --------------------------------------------------------------------- */
.subrayado {
  position: relative;
  white-space: nowrap;
  /* Sin esto, el ::after de abajo lleva z-index:-1 y, al no haber ningun
     contexto de apilamiento por encima, sube hasta la raiz y se pinta por
     DETRAS del fondo de la seccion: el subrayado dorado no se veia. */
  isolation: isolate;
}
.subrayado::after {
  content: '';
  position: absolute;
  left: -.04em; right: -.04em; bottom: .06em;
  height: .12em;
  background: var(--gold);
  opacity: .55;
  border-radius: .06em;
  transform: scaleX(0);
  transform-origin: left;
  animation: subrayado-traza .7s var(--ease-salida) .5s both;
  z-index: -1;
}
@keyframes subrayado-traza { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .cinta-pista { animation: none !important; }
  .subrayado::after { animation: none !important; transform: scaleX(1) !important; }
  .cabecera-foto .foto img { transform: scale(1.02) !important; }
}

/* Foto de cabecera del articulo: entre el titular y el texto, que es donde
   el visitante decide si sigue leyendo o se va. */
.article-foto {
  margin: 28px 0 34px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.article-foto .foto { border-radius: var(--radius-lg); }

/* ---------------------------------------------------------------------
   REPARTO ENTRE CAPITAL E INTERESES
   ---------------------------------------------------------------------
   Ver la proporcion explica el prestamo mejor que la cifra sola: es lo que
   hace entender por que merece la pena negociar medio punto.
   La parte de intereses se escala con transform desde la derecha, no con
   width, para no recalcular el diseno en cada tecleo.
   --------------------------------------------------------------------- */
.reparto {
  margin-top: 26px;
  padding: 20px 22px 18px;
  background: var(--surface-tenue);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.reparto-titulo {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .14em;
  font-weight: 700; color: var(--muted); margin: 0 0 12px;
}
.reparto-barra {
  position: relative;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--primary), var(--primary-mid));
}
.reparto-intereses {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gold), #e2c179);
  transform: scaleX(var(--p, 0));
  transform-origin: right;
  transition: transform var(--dur-escena) var(--ease-salida);
}
.reparto-leyenda {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 12px 0 0; font-size: var(--fs-sm); color: var(--muted);
}
.reparto-leyenda span { display: inline-flex; align-items: center; gap: 8px; }
.reparto-leyenda strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.punto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.punto-capital { background: var(--primary); }
.punto-intereses { background: var(--gold); }
.reparto-texto {
  margin: 10px 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  .reparto-intereses { transition: none !important; }
}

/* Esqueleto de resenas y aviso si no cargan. */
.review-esqueleto { pointer-events: none; }
.review-esqueleto .esqueleto { display: block; }
.aviso-resenas {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px;
}
.aviso-resenas strong { color: var(--ink); display: block; }
.aviso-resenas p { margin-top: 8px; }

/* ---------------------------------------------------------------------
   INDICADOR DE PROGRESO DEL PROCESO
   ---------------------------------------------------------------------
   Una linea que se va llenando conforme bajas por los pasos. Convierte el
   bloque mas aburrido de cualquier web de hipotecas en el que mejor se
   recuerda, y de paso dice cuanto queda.
   --------------------------------------------------------------------- */
.process-grid { position: relative; }
.proceso-riel {
  position: absolute;
  left: 0; right: 0; top: 26px;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  z-index: 0;
}
.proceso-riel > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--gold));
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left;
}
.process-card { position: relative; z-index: 1; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .proceso-riel > span {
      animation: riel-avanza linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 70%;
    }
  }
}
@keyframes riel-avanza { to { transform: scaleX(1); } }

/* Sin soporte para animaciones ligadas al scroll, el riel se muestra lleno:
   asi nunca queda una linea gris a medias que parezca un fallo. */
@supports not (animation-timeline: view()) {
  .proceso-riel > span { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .proceso-riel > span { transform: scaleX(1) !important; animation: none !important; }
}
@media (max-width: 860px) { .proceso-riel { display: none; } }

/* ---------------------------------------------------------------------
   COSTURAS APLICADAS
   ---------------------------------------------------------------------
   Se reparten con selectores de hermano adyacente, sin tocar el HTML de
   las 43 paginas. La regla es alternar: si siempre se usa el mismo
   recurso deja de leerse como intencion y pasa a leerse como plantilla.
   --------------------------------------------------------------------- */

/* 1. Bisagra dorada donde cambia el fondo de claro a tenido. */
.section-white + .section-alt,
.section-alt + .section-white {
  position: relative;
}
.section-white + .section-alt::before,
.section-alt + .section-white::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: min(160px, 34%); height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .7;
}

/* 2. Corte diagonal al entrar en la seccion oscura del final. Dos grados:
      suficiente para que se note, poco para que no parezca de plantilla. */
.cta-section {
  clip-path: polygon(0 2vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -1px;
}
@media (max-width: 700px) {
  .cta-section { clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%); }
}

/* 3. La banda de foto entra y sale en diagonal contraria, para que las dos
      costuras no vayan en el mismo sentido y el ojo note el cambio. */
.banda-foto {
  clip-path: polygon(0 0, 100% 1.6vw, 100% calc(100% - 1.6vw), 0 100%);
  margin-top: -1px;
  margin-bottom: -1px;
}
@media (max-width: 700px) { .banda-foto { clip-path: none; } }

/* 4. Fusion suave bajo la cabecera con foto, para que el burdeos no corte
      en seco contra el crema de la primera seccion. */
.page-hero-con-foto + * { position: relative; }
.page-hero-con-foto + *::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 90px;
  background: linear-gradient(to bottom, rgba(100,18,36,.10), transparent);
  pointer-events: none;
}

/* Sobre foto, el texto de apoyo sube de opacidad.
   Medido con los pixeles reales de la foto y el velo aplicado: a 0.8 el
   peor punto daba 4,48:1 y el minimo exigible para texto normal es 4,5.
   Fallaba por dos centesimas, pero fallaba. A 0.94 hay margen en las 20
   fotos de cabecera, no solo en la que se midio primero. */
.page-hero-con-foto p { color: rgba(255,255,255,.94); }
.page-hero-con-foto .page-hero-text { color: rgba(255,255,255,.94); }

/* La etiqueta de oficina de cada resena. Estaba con estilo en linea. */
.post-tag-resena { margin-bottom: 10px; }

/* ---------------------------------------------------------------------
   AVISO DE SITIO DE PRUEBAS
   Solo aparece cuando el dominio no es el bueno. Amarillo de obra a
   proposito: tiene que cantar, no integrarse.
   --------------------------------------------------------------------- */
.aviso-pruebas {
  position: sticky; top: 0; z-index: 300;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 6px 14px;
  padding: 7px 16px;
  background: #ffd54a;
  color: #2a1d05;
  font-size: var(--fs-sm);
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,.18);
}
.aviso-pruebas strong { text-transform: uppercase; letter-spacing: .1em; font-size: var(--fs-2xs); }
/* La cabecera se pega justo debajo de la franja, no encima de ella. */
.aviso-pruebas + .skip-link ~ .site-header { top: 33px; }
@media (max-width: 700px) { .aviso-pruebas + .skip-link ~ .site-header { top: 0; } }

/* ---------------------------------------------------------------------
   DOS BARRAS FIJAS EN EL MISMO SITIO
   ---------------------------------------------------------------------
   Medido en movil: la banda de cookies ocupa desde el pixel 623 hasta
   abajo (189 px de los 812 de pantalla) y la barra de llamada a la accion
   arranca en el 632. Se pisan. Como la de cookies va por encima, la otra
   quedaba invisible, y entre las dos tapaban casi una cuarta parte de la
   pantalla: lo que caiga ahi debajo no se puede pulsar.

   Mientras la banda de cookies este visible, la barra espera su turno.
   --------------------------------------------------------------------- */
body:has(#cookie-banner:not(.hidden)) .cta-bar { display: none; }

/* Y un colchon al final de la pagina, para que el ultimo bloque nunca
   quede permanentemente debajo de la barra. */
@media (max-width: 900px) {
  /* El valor real lo escribe main.js midiendo la barra; 64px es solo el
     respaldo por si el JS no llega a correr. La barra apilada en columna
     mide unos 160px y tapaba el final de todas las paginas. */
  body { padding-bottom: var(--alto-cta-bar, 64px); }
  body:has(#cookie-banner:not(.hidden)) { padding-bottom: 0; }
}

/* ---------------------------------------------------------------------
   FORMULARIOS EN MOVIL
   ---------------------------------------------------------------------
   1. .form-grid-1: rejilla de una columna tambien en escritorio (la
      calculadora de gastos). Antes iba con style= en linea, y ese estilo
      en linea ganaba a la regla de movil: en un movil de 390 px las otras
      tres calculadoras seguian a dos columnas y la pagina desbordaba 170 px.
   2. Campos a 16 px en movil. Por debajo de 16 px, iOS hace zoom
      automatico al tocar un campo y descoloca toda la pagina. Medido:
      la calculadora tenia los campos a 14,7 px y el contacto a 13,3 px.
   --------------------------------------------------------------------- */
.form-grid-1 { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  /* Por debajo de 16px, iOS amplia la pagina entera al enfocar el campo y
     ya no vuelve. Los selectores llevan el nombre de la etiqueta DELANTE de
     la clase para ganarle a .field-input, que si no fija 14,7px. */
  input.field-input, select.field-input, textarea.field-input,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: max(16px, 1em); }
}

/* ---------------------------------------------------------------------
   REJILLAS QUE NO PUEDEN CRECER MAS QUE SU CONTENEDOR
   ---------------------------------------------------------------------
   Un hijo de rejilla tiene min-width:auto, que equivale a "el ancho
   minimo de mi contenido". Si dentro hay una tabla o un bloque ancho, la
   columna 1fr crece hasta ese minimo aunque el contenedor sea mas
   estrecho, y la pagina desborda. Medido en la calculadora a 390 px: la
   columna calculaba 540 px. Con min-width:0 la columna respeta al
   contenedor y lo que sea mas ancho (la tabla) se desplaza dentro de su
   propio .table-wrap, que ya tiene overflow-x:auto.
   --------------------------------------------------------------------- */
.booking-layout > *,
.two-col > *,
.form-grid > *,
.calc-results-2 > * { min-width: 0; }

/* ---------------------------------------------------------------------
   TABLAS DE RESULTADO EN MOVIL
   ---------------------------------------------------------------------
   .data-table lleva min-width: 480px para que las tablas comparativas
   anchas (ITP, cuadro de amortizacion) se lean con desplazamiento en vez
   de aplastarse. Pero las tablas de resultado de la calculadora son dos
   columnas (concepto / importe) y con ese minimo, en un movil de 390 px
   la columna del importe quedaba fuera de vista: la cuota mensual, que es
   justo lo que el visitante venia a ver, habia que buscarla deslizando
   dentro de la tabla. Aqui se libera el minimo y se alinea el importe a la
   derecha con cifras de ancho fijo.
   --------------------------------------------------------------------- */
.booking-panel .data-table { min-width: 0; }
.booking-panel .data-table td:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
  .data-table th, .data-table td { padding: 11px 12px; }
  .booking-panel { padding: 22px 18px; }
}


/* ---------------------------------------------------------------------
   FORMULARIOS: nota legal, campo opcional, siguiente paso de la calculadora
   --------------------------------------------------------------------- */
.form-note-legal {
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.6;
  max-width: 70ch;
}
.form-note-legal a { color: var(--primary-ink); text-decoration: underline; text-underline-offset: 2px; }
.form-opcional { font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
.calc-siguiente {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  margin: 22px 0 6px;
}
.calc-siguiente .form-note { color: var(--muted); font-size: var(--fs-sm); }
/* .btn lleva white-space: nowrap, pensado para etiquetas de dos o tres
   palabras. Esta tiene seis y no cabe en un movil: aqui si puede partir. */
.calc-siguiente .btn { white-space: normal; text-align: center; }
@media (max-width: 700px) {
  .calc-siguiente { gap: 10px; }
  .calc-siguiente .btn { width: 100%; }
}

/* Banda de dos audiencias en portada */
.two-col-audiencias { gap: clamp(18px, 3vw, 40px); align-items: stretch; }
.two-col-audiencias .service-card { display: flex; flex-direction: column; }
.two-col-audiencias .service-card p { flex: 1; }
.two-col-audiencias .btn { align-self: flex-start; margin-top: 18px; }
@media (max-width: 860px) { .two-col-audiencias { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   HOVER SOLO CON RATON
   ---------------------------------------------------------------------
   En una pantalla tactil, tocar dispara un :hover falso que se queda
   pegado: la tarjeta se levanta y no vuelve a bajar hasta que tocas otra
   cosa. Parece que se ha roto. Aqui se anula el MOVIMIENTO del hover en
   dispositivos sin raton fino; el cambio de color y de sombra se queda,
   porque ese si ayuda a saber que has pulsado.
   --------------------------------------------------------------------- */
@media not all and (hover: hover) and (pointer: fine) {
  .btn:hover,
  .btn:hover::before,
  .contact-box-static:hover,
  .contact-box:hover,
  .day-btn:hover:not(:disabled),
  .enlace-vivo:hover::after,
  .feature-item:hover,
  .flecha-viva:hover .flecha,
  .footer-social a:hover,
  .hero-card:hover .hero-image,
  .post-card:hover,
  .process-card:hover,
  .process-card:hover .process-number,
  .review-card:hover,
  .service-card:hover,
  .service-card:hover .service-icon,
  .service-card:hover::after,
  .stat-box:hover,
  .tarjeta-viva:hover,
  .tarjeta-viva:hover .marco-imagen img,
  .tema-btn:hover,
  .wa-float:hover,
  .wa-pill:hover,
  .zone-chip:hover {
    transform: none;
  }
}