/* =========================================================================
   Garantilo — hoja de estilos compartida (multi-página)
   Identidad visual del estudio 2026-07 (doc 09 · dirección de arte).
   Verde profundo de patrimonio + acento ámbar sobre neutros CÁLIDOS.
   Ratios de contraste verificados; los que van anotados están medidos, no estimados.
   ========================================================================= */

/* ===== Tipografía =========================================================
   Source Serif 4 (titulares) + Source Sans 3 (texto), las dos VARIABLES y
   AUTO-ALOJADAS: quita una conexión a un tercero, mejora el LCP y evita que la
   IP del visitante viaje a Google (RGPD). Licencia SIL OFL.

   ⚠️ Subconjunto LATÍN, no latín extendido. El doc justifica el extendido con
   «el español necesita ñ, á, ü, ¿, ¡» — y esos cinco están todos en el latín
   básico. El extendido (polaco, checo, turco) costaba 21 KB de los 66, un 32 %
   que se paga en LCP, y está comprobado que ni un carácter del sitio lo usa. Si
   algún día entra un nombre con š o ł, ese glifo cae al respaldo y ya está.
   Sí se añaden los símbolos que el sitio usa de verdad (→ ≈ ≤ € …), medidos
   sobre el HTML construido. Los emoji (🧪 💬) caen al tipo del sistema a
   propósito: meterlos costaría más que todo lo demás junto.

   ⚠️ Dos decisiones de peso, las dos MEDIDAS, no supuestas:
   · El eje ÓPTICO de la serif cuesta 57 KB (98 KB con `opsz` variable frente a
     41 KB sin él). Se fija en su valor por defecto (20), que además es con el
     que está generado el logotipo.
   · La serif solo se usa en titulares y todos van a 600, así que se entrega
     INSTANCIADA a ese peso: 25 KB en vez de 41. Sigue siendo un fichero por
     familia, que es lo que se buscaba. Si algún día hace falta otro peso de
     titular, hay que regenerarla (ver el registro de la sesión).

   El respaldo lleva métricas ajustadas para que el intercambio no mueva nada.
   ⚠️ Los `size-adjust` NO salen de dividir anchos medios: eso daba un desvío
   real del -4,9 % en la serif y 0,19 de CLS. Están CALIBRADOS en navegador,
   barriendo valores y quedándose con el que deja el desvío por debajo del 0,4 %.
   El respaldo declara rango de pesos: sin él, una sola cara a peso normal servía
   igual para 400 que para 700 y el desvío se disparaba en las negritas.
   ========================================================================= */
@font-face{
  font-family:'Source Serif 4';
  src:url('fonts/source-serif-4-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Source Sans 3';
  src:url('fonts/source-sans-3-var.woff2') format('woff2-variations');
  font-weight:400 800;font-style:normal;font-display:swap;
}
/* Respaldo de titular · calibrado a peso 600 → desvío 0,34 % */
@font-face{
  font-family:'Serif respaldo';
  src:local('Times New Roman'),local('Liberation Serif'),local('Tinos');
  font-weight:400 800;
  size-adjust:109%;ascent-override:95.0%;descent-override:30.7%;line-gap-override:0%;
}
/* Respaldo de texto · dos caras, porque el desvío óptimo cambia con el peso:
   91 % a 400 (0,37 %) y 96 % a 700 (0,21 %). Con una sola cara, las negritas bailaban. */
@font-face{
  font-family:'Sans respaldo';
  src:local('Arial'),local('Liberation Sans'),local('Helvetica Neue');
  font-weight:400 500;
  size-adjust:91%;ascent-override:109.9%;descent-override:35.8%;line-gap-override:0%;
}
@font-face{
  font-family:'Sans respaldo';
  src:local('Arial'),local('Liberation Sans'),local('Helvetica Neue');
  font-weight:600 800;
  size-adjust:96%;ascent-override:104.2%;descent-override:34.0%;line-gap-override:0%;
}

/* ===== Paleta ============================================================
   Regla que no se negocia: DOS ámbares con DOS trabajos distintos.
   --ambar-texto (#9C5606) es el de TEXTO y pasa AA (5,33:1 sobre hueso).
   --ambar        (#EFA81A) es el de RELLENO y jamás se usa como texto ni como
   borde fino sobre fondo claro (ahí da 1,94:1). Sobre verde hondo sí (5,45:1).
   ========================================================================= */
:root{
  /* Marca */
  --verde:#0E5C43;         /* titulares, enlaces, iconos, botón primario · 7,59:1 sobre hueso */
  --verde-hondo:#0A4432;   /* fondos de sección y pie */
  --verde-suave:#E7EFEA;   /* bloques y rellenos suaves */
  --ambar:#EFA81A;         /* RELLENO: botón sobre verde, acentos, punto de marca */
  --ambar-texto:#9C5606;   /* TEXTO de acento · 5,33:1 sobre hueso */
  --ladrillo:#9A3412;      /* SOLO el dato negativo (lo que el seguro no cubre) · 6,94:1 */

  /* Neutros cálidos — el gris azulado es la firma de "plantilla" */
  --tinta:#1C1B18;         /* 16,37:1 sobre hueso */
  --gris:#57534E;          /* 7,25:1 sobre hueso */
  --hueso:#FAF9F7;         /* fondo base: menos fatiga que el blanco puro */
  --crema:#F1EDE6;         /* bloques destacados, filas alternas */
  --linea:#E5E0D8;         /* separadores y bordes DECORATIVOS (sin requisito WCAG) */
  --linea-campo:#8A8378;   /* borde de control de formulario · 3,56:1 (WCAG 1.4.11 exige 3:1) */

  /* Sobre verde hondo */
  --sobre-verde:#FAF9F7;   /* 10,58:1 */
  --sobre-verde-2:#C9C3B8; /* texto secundario · 6,35:1 */
  --linea-verde:#2A6650;

  /* Superficies */
  --fondo:var(--hueso);
  --superficie:#FFFFFF;
  --sombra:0 6px 20px rgba(28,27,24,.06);
  --sombra-fuerte:0 14px 36px rgba(28,27,24,.11);

  /* Familias */
  --fuente-titular:'Source Serif 4','Serif respaldo',Georgia,serif;
  --fuente-texto:'Source Sans 3','Sans respaldo',system-ui,-apple-system,sans-serif;

  /* Sin modo oscuro en el lanzamiento (doc 09 §4): que el navegador no invente uno a medias */
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Base 18 px, no 16: el comprador tiene entre 45 y 70 años y lee en el móvil.
   Va en el raíz para que toda la escala en `rem` se mantenga proporcionada. */
html{scroll-behavior:smooth;font-size:112.5%}
body{font-family:var(--fuente-texto);color:var(--tinta);line-height:1.6;background:var(--fondo);overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--fuente-titular);font-weight:600;line-height:1.2;color:var(--verde);letter-spacing:-.005em}
/* La cabecera es sticky: sin esto, al saltar a un ancla el destino queda debajo. */
h1,h2,h3,[id]{scroll-margin-top:5.5rem}
h2{font-size:2rem;text-align:center;margin-bottom:.5rem}
.sub{text-align:center;color:var(--gris);max-width:640px;margin:0 auto 2.4rem;font-size:1.05rem}
/* Subrayado obligatorio: un enlace dentro de un párrafo de texto no puede
   distinguirse solo por el color. El verde sobre el gris de .sub da 1,04:1 y
   WCAG 1.4.1 pide 3:1 entre el enlace y el texto que lo rodea — o subrayarlo.
   (Lo cazó axe al meter el primer enlace en un .sub: accesibilidad 100 → 96.) */
.sub a,.compare-note a,.cond-fija a,.calc-note a{color:var(--verde);font-weight:600;text-decoration:underline;text-underline-offset:2px}
section{padding:4.5rem 1.2rem;max-width:1120px;margin:0 auto}
.alt{background:var(--crema);max-width:none}
.alt > *{max-width:1120px;margin-left:auto;margin-right:auto}
a{color:var(--verde);text-decoration:none}
/* Foco visible y consistente en todo lo interactivo */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--ambar-texto);outline-offset:2px;border-radius:4px}

/* ===== Iconos de línea ===== */
.ic{width:42px;height:42px;stroke:var(--verde);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.ic-az{stroke:var(--verde)}
/* iconos Phosphor (rellenos, heredan color del contenedor) */
.icp{width:40px;height:40px;fill:currentColor;display:block}

/* ===== Botones =============================================================
   Primario = verde relleno (7,59:1 con hueso). Sobre verde hondo el primario
   pasa a ÁMBAR relleno con tinta (8,44:1), que es donde el verde no leería.
   Secundario = contorno verde: sin fondo, no compite con el primario.
   ========================================================================= */
.btn{display:inline-block;background:var(--verde);color:var(--hueso);font-weight:600;border:2px solid var(--verde);
     padding:.85rem 1.7rem;border-radius:8px;font-size:1.02rem;cursor:pointer;font-family:inherit;
     transition:background .15s, border-color .15s}
.btn:hover{background:var(--verde-hondo);border-color:var(--verde-hondo)}
.btn-2{background:transparent;color:var(--verde);border:2px solid var(--verde);font-weight:600}
.btn-2:hover{background:var(--verde-suave)}
.full{width:100%;text-align:center}
/* Sobre fondo verde el primario se invierte a ámbar */
.prob .btn,.cierre .btn{background:var(--ambar);border-color:var(--ambar);color:var(--tinta)}
.prob .btn:hover,.cierre .btn:hover{background:#D9950F;border-color:#D9950F}

/* ===== Salto al contenido =====
   Con el menú en 8 grupos y una treintena de destinos, cruzar la cabecera con el
   tabulador son más de treinta paradas. Este enlace las salta de una. */
.skip{position:fixed;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.skip:focus{left:1rem;top:1rem;width:auto;height:auto;z-index:200;background:var(--verde);color:var(--hueso);
            padding:.7rem 1.1rem;border-radius:8px;font-weight:600;box-shadow:var(--sombra-fuerte)}

/* ===== Cabecera ===== */
header{position:sticky;top:0;z-index:50;background:var(--hueso);border-bottom:1px solid var(--linea);
       display:flex;align-items:center;justify-content:space-between;padding:.6rem 1.4rem;gap:1rem}
header.scrolled{box-shadow:var(--sombra)}
.logo{flex:none;display:flex;align-items:center}
.logo a{color:inherit;display:flex;align-items:center}
.logo img{height:30px;width:auto;display:block}
nav.mainnav{display:flex;gap:1rem;align-items:center;justify-content:center;flex:1;flex-wrap:nowrap}
nav.mainnav a{color:var(--tinta);font-weight:500;font-size:.94rem;position:relative;white-space:nowrap;padding:.2rem 0}
nav.mainnav a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--ambar);transition:width .22s}
nav.mainnav a:hover::after,nav.mainnav a.active::after{width:100%}
nav.mainnav a.active{color:var(--verde);font-weight:700}
/* Separador ámbar entre grupos del menú. Va en un pseudo-elemento ABSOLUTO, dentro
   del hueco que ya deja el `gap`: así no ocupa espacio y la barra no se ensancha —
   son 8 grupos y entran justos en una línea (s.79). Se apaga en el primero y en el
   menú móvil, donde los grupos se apilan y una línea vertical no separa nada. */
nav.mainnav>*+*::before{content:"";position:absolute;left:-.5rem;top:50%;
  transform:translateY(-50%);width:1px;height:1.05em;background:var(--ambar);opacity:.65}
.nav-cta{display:flex;align-items:center;gap:1rem;flex:none}

/* ===== Menú con desplegable =====
   Lo abre el CSS con :hover y :focus-within. El enlace padre está DENTRO del
   .navitem, así que enfocarlo con el tabulador ya despliega y se puede seguir
   tabulando a los hijos — que es lo que falla en el patrón habitual de
   display:none, donde nunca llegas a enfocar nada de dentro.
   En móvil no hay hover: ahí manda el botón .navsub (aria-expanded). */
.navitem{position:relative;display:flex;align-items:center}
.navitem>a .cvt{display:inline-block;width:0;height:0;margin-left:.34rem;vertical-align:.08em;
                border-left:4px solid transparent;border-right:4px solid transparent;
                border-top:5px solid currentColor;opacity:.5;transition:transform .18s}
.navsub{display:none;background:none;border:none;cursor:pointer;padding:.45rem;color:var(--verde)}
.navsub .cv{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;
            stroke-linejoin:round;display:block;transition:transform .18s}
.navitem.open>.navsub .cv{transform:rotate(180deg)}
nav.mainnav .dropdown a{display:block;padding:.5rem .75rem;border-radius:8px;font-size:.9rem;font-weight:500}
nav.mainnav .dropdown a::after{display:none}
nav.mainnav .dropdown a:hover,nav.mainnav .dropdown a:focus-visible{background:var(--crema);color:var(--verde-hondo)}
@media(min-width:861px){
  .navitem>.dropdown{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
                     margin-top:.62rem;min-width:246px;background:var(--hueso);border:1px solid var(--linea);
                     border-radius:12px;box-shadow:var(--sombra-fuerte);padding:.45rem;z-index:60}
  /* Puente invisible: sin él el ratón cruza el hueco entre el enlace y el panel
     y el desplegable se cierra a medio camino. */
  .navitem>.dropdown::before{content:"";position:absolute;left:0;right:0;top:-.62rem;height:.62rem}
  .navitem:hover>.dropdown,.navitem:focus-within>.dropdown{display:block}
  .navitem:hover>a .cvt,.navitem:focus-within>a .cvt{transform:rotate(180deg)}
}
.btn-pill{background:var(--verde);color:var(--hueso);font-weight:600;padding:.55rem 1.2rem;border-radius:8px;font-size:.95rem;
          transition:background .15s}
.btn-pill:hover{background:var(--verde-hondo)}
/* botón hamburguesa (móvil) */
.navtoggle{display:none;background:none;border:none;cursor:pointer;padding:.4rem;color:var(--verde)}
.navtoggle svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

/* ===== Hero =====
   Fondo PLANO (doc 09 §2 descarta degradados y glassmorphism). */
.hero{position:relative;background:var(--crema);max-width:none;border-bottom:1px solid var(--linea)}
/* `start`, no `center`: la tarjeta del formulario es más alta que el texto y,
   centrando, el titular caía muy por debajo de ella. Se alinean por arriba. */
.hero-wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:2.6rem;align-items:start;padding:2.6rem 1rem 3rem}
.hero-bottom{display:flex;align-items:center;gap:1.6rem;margin-top:1.6rem}
.hero-bottom .ticks{margin:0;flex:1 1 auto}
/* En el hero la ilustración cede ancho a los ticks: a 18 px de base, con 380 px
   de imagen cada tick se partía en dos líneas. */
.hero-bottom .hero-illu{max-width:300px}
.hero-illu{display:block;flex:0 0 auto;width:100%;max-width:380px;height:auto;margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:var(--verde-suave);border:1px solid var(--verde);
         color:var(--verde);font-weight:700;font-size:.82rem;padding:.4rem .9rem;border-radius:6px;margin-bottom:1.1rem;letter-spacing:.2px}
.eyebrow svg{width:16px;height:16px;stroke:var(--verde);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hero h1{font-size:2.85rem;margin-bottom:1rem;color:var(--verde)}
/* resalte ámbar bajo una palabra del titular: relleno, nunca texto */
.hero h1 .hl{position:relative;white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.3em;z-index:-1;
     background:var(--ambar);opacity:.42;border-radius:2px}
.hero .lead{font-size:1.22rem;color:var(--gris);margin-bottom:1.4rem}
.ticks{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-bottom:.5rem}
.ticks li{font-weight:600;display:flex;align-items:center;gap:.55rem}
.ticks li svg{width:22px;height:22px;stroke:var(--verde);fill:none;stroke-width:2.6;flex:none}

.form-card{background:var(--superficie);border-radius:14px;box-shadow:var(--sombra-fuerte);padding:1.5rem 1.6rem;border:1px solid var(--linea)}
.form-card h2,.form-card h3{font-size:1.28rem;margin-bottom:.9rem;text-align:center}
.form-rating{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;font-size:.82rem;color:var(--gris);font-weight:600;margin-bottom:1.1rem}
.form-rating .stars{color:var(--ambar-texto);letter-spacing:1.5px;font-size:.92rem}
.field{margin-bottom:.7rem}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--gris);margin-bottom:.25rem}
.field input,.field select,.field textarea{width:100%;padding:.62rem .85rem;border:1.5px solid var(--linea-campo);border-radius:8px;font-size:1rem;font-family:inherit;color:var(--tinta);background:var(--superficie);transition:border-color .15s, box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(14,92,67,.18)}
.field .req{color:var(--ladrillo)}
.field .opt,.consent .opt{font-weight:400;font-size:.78rem;color:var(--gris)}
.consent{display:flex;gap:.5rem;align-items:flex-start;font-size:.78rem;color:var(--gris);text-align:left;line-height:1.45;margin:.05rem 0 .45rem;cursor:pointer}
.consent input{margin-top:.15rem;flex:none;width:16px;height:16px;accent-color:var(--verde);cursor:pointer}
.consent a{color:var(--verde);text-decoration:underline;text-underline-offset:2px}
.secure{font-size:.8rem;color:var(--gris);text-align:center;margin-top:.8rem;display:flex;align-items:center;justify-content:center;gap:.4rem}
.secure svg{width:15px;height:15px;stroke:var(--gris);fill:none;stroke-width:2}
.trust-badges{display:flex;justify-content:center;flex-wrap:wrap;gap:.45rem;margin-top:.8rem}
.trust-badges span{display:inline-flex;align-items:center;gap:.32rem;font-size:.74rem;font-weight:600;color:var(--gris);
     background:var(--crema);border:1px solid var(--linea);border-radius:6px;padding:.32rem .65rem}
.trust-badges svg{width:13px;height:13px;stroke:var(--verde);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ===== Tira de confianza ===== */
.trust{display:flex;justify-content:space-around;flex-wrap:wrap;gap:1.5rem;text-align:center;padding:2.2rem 1.2rem;border-bottom:1px solid var(--linea)}
.trust .num{font-size:2.1rem;font-weight:700;color:var(--verde);font-variant-numeric:tabular-nums}
/* La estrella va en SVG, no como carácter: ni Source Serif 4 ni Source Sans 3
   tienen U+2605 (comprobado en la fuente), así que como texto caería siempre a
   un tipo del sistema y se vería distinta en cada plataforma. */
.trust .num .rstar{width:.85em;height:.85em;fill:var(--ambar-texto);display:inline-block;vertical-align:-.06em}
.trust .lbl{font-size:.85rem;color:var(--gris)}
.backed{text-align:center;color:var(--gris);font-size:.9rem;padding:.75rem;background:var(--crema);border-bottom:1px solid var(--linea);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.45rem}
/* Alto fijo y ancho automatico: la altura la manda la linea de texto, no el fichero. A 42 px
   el descriptor del propio logo («Sociedad Española de Alquiler Garantizado») todavia se lee;
   por debajo se convierte en una mancha y entonces no cumple su funcion. */
.backed-logo{height:42px;width:auto;display:block}

.backed b{color:var(--verde)}
.backed a{text-decoration:underline;text-underline-offset:2px}

/* ===== Rejillas de tarjetas ===== */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1rem}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--superficie);border:1px solid var(--linea);border-radius:12px;padding:1.6rem 1.4rem;text-align:center;
      transition:box-shadow .2s, border-color .2s}
.card:hover{box-shadow:var(--sombra);border-color:var(--verde)}
.card .iconwrap{width:64px;height:64px;border-radius:12px;background:var(--verde-suave);color:var(--verde);display:flex;align-items:center;justify-content:center;margin:0 auto .8rem}
.card h3{font-size:1.08rem;margin-bottom:.35rem}
.tag-add{display:inline-block;vertical-align:middle;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
         color:var(--verde);background:var(--verde-suave);border:1px solid var(--linea);border-radius:5px;padding:.1rem .45rem;margin-left:.25rem}
.tag-promo{display:inline-block;vertical-align:middle;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
         color:var(--ambar-texto);background:var(--crema);border:1px solid var(--linea);border-radius:5px;padding:.1rem .5rem;margin-left:.25rem}
.tag-pct{display:inline-block;vertical-align:middle;font-size:.66rem;font-weight:800;letter-spacing:.2px;
         color:var(--verde);background:var(--verde-suave);border:1px solid var(--linea);border-radius:5px;padding:.1rem .5rem;margin-left:.25rem}
.cob-blocklabel{text-align:center;color:var(--gris);font-size:1.02rem;max-width:720px;margin:0 auto 1.5rem}
.bloque-tag{display:inline-block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;border-radius:5px;padding:.2rem .75rem;margin-right:.5rem;vertical-align:middle}
.bloque-inc{color:var(--hueso);background:var(--verde)}
.bloque-add{color:var(--verde);background:var(--verde-suave);border:1px solid var(--linea)}
.adic-grid{gap:1rem}
.adic-grid .card{padding:1.5rem 1rem}
.adic-grid h3{font-size:1rem;white-space:nowrap}
.adic-grid .tag-pct{font-size:.6rem;padding:.08rem .42rem;margin-left:.22rem}
.card p{font-size:.92rem;color:var(--gris)}
.center{text-align:center;margin-top:2.2rem}

/* ===== Problema (sección oscura) =====
   Fondo verde hondo plano; el acento sobre verde es ÁMBAR (5,45:1), nunca menta. */
.prob{background:var(--verde-hondo);color:var(--sobre-verde-2);max-width:none}
.prob h2,.prob h3{color:var(--sobre-verde)}
.prob .iconwrap{background:rgba(250,249,247,.08)}
.prob .ic{stroke:var(--ambar)}
.prob .grid .card{background:rgba(250,249,247,.05);border-color:var(--linea-verde);color:var(--sobre-verde-2)}
.prob .card:hover{border-color:var(--ambar);box-shadow:none}
.prob .relief{text-align:center;font-size:1.18rem;margin-top:2rem;color:var(--sobre-verde)}
.prob .relief b{color:var(--ambar)}

/* ===== Comparativa por columnas =====
   La columna del competidor va en gris cálido, no en rojo: el ladrillo es color
   de DATO negativo dentro de la celda, y pintar de rojo la cabecera se lee como
   ataque además de acercarnos al color del sector. */
/* ---- Comparativa (tabla): alinea por construcción -------------------------
   Sustituye al viejo `.compare` de tres columnas flex, donde cada columna
   calculaba sus alturas por separado y las filas se descuadraban. El "marco"
   redondeado de cada columna se dibuja con bordes por celda + radius en las
   esquinas, que es lo que permite `border-collapse:separate`. */
.comparativa{width:100%;max-width:840px;margin:0 auto;border-collapse:separate;border-spacing:14px 0;table-layout:fixed}
.comparativa th,.comparativa td{padding:.85rem 1rem;text-align:center;vertical-align:middle;font-size:.95rem}
.comparativa thead th{font-weight:700;font-size:1rem;padding:1.05rem 1.15rem}
.comparativa thead .them{background:var(--gris);color:var(--hueso);border-radius:12px 12px 0 0}
.comparativa thead .us{background:var(--verde);color:var(--hueso);border-radius:12px 12px 0 0}
/* Columna de etiquetas: 1.25fr como antes, alineada a la izquierda */
.comparativa tbody th{width:36%;text-align:left;font-weight:500;color:var(--tinta);border-top:1px solid var(--linea)}
.comparativa tbody tr:nth-child(even) th{background:var(--crema);border-radius:6px}
/* Columna del competidor */
.comparativa tbody .them{color:var(--ladrillo);background:var(--superficie);
  border-top:1px solid var(--linea);border-left:1px solid var(--linea);border-right:1px solid var(--linea)}
.comparativa tbody tr:last-child .them{border-bottom:1px solid var(--linea);border-radius:0 0 12px 12px}
/* La nuestra, resaltada */
.comparativa tbody .us{color:var(--verde);font-weight:700;background:var(--verde-suave);
  border-top:1px solid var(--ambar);border-left:2px solid var(--verde);border-right:2px solid var(--verde)}
/* La primera fila apoya en la cabecera verde: ahí la raya ámbar sobra (dos líneas seguidas). */
.comparativa tbody tr:first-child .us{border-top-color:var(--verde)}
.comparativa tbody tr:last-child .us{border-bottom:2px solid var(--verde);border-radius:0 0 12px 12px}
.comparativa sup{color:var(--ambar-texto);font-weight:800;font-size:.8em}
@media (max-width:640px){
  .comparativa{border-spacing:6px 0}
  .comparativa th,.comparativa td{padding:.7rem .5rem;font-size:.85rem}
  .comparativa thead th{font-size:.9rem;padding:.8rem .5rem}
  .comparativa tbody th{width:34%}
}
/* Enlace de descarga de un folleto de SEAG (documento de un tercero, servido por el asistente). */
.doc-seag{margin:.9rem 0 .2rem}
.doc-seag a{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--verde);
  text-decoration:none;border:1px solid var(--linea);border-radius:8px;padding:.5rem .8rem;background:var(--crema)}
.doc-seag a:hover{border-color:var(--verde)}
.doc-pdf{font-size:.66rem;font-weight:800;letter-spacing:.4px;background:var(--verde);color:var(--hueso);
  border-radius:4px;padding:.1rem .35rem}
.compare-note{max-width:840px;margin:1rem auto 0;font-size:.82rem;color:var(--gris);text-align:center;line-height:1.5}
.compare-note strong{color:var(--verde)}

/* ===== Pasos: diagrama lineal ===== */
.flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.5rem}
.flow::before{content:"";position:absolute;top:82px;left:17%;right:17%;height:2px;background:var(--verde);opacity:.35;z-index:0}
.fstep{position:relative;z-index:1;text-align:center;padding:0 .4rem}
.fnode{width:164px;height:164px;border-radius:50%;background:var(--superficie);border:2px solid var(--linea);
     display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;position:relative;transition:border-color .2s}
.fnode img{width:80%;height:80%;object-fit:contain}
.fstep:hover .fnode{border-color:var(--verde)}
.fnum{position:absolute;top:4px;right:4px;width:32px;height:32px;border-radius:50%;background:var(--verde);color:var(--hueso);
     font-size:.95rem;font-weight:700;display:flex;align-items:center;justify-content:center;border:3px solid var(--hueso)}
.fstep h3{font-size:1.08rem}
.fstep small{color:var(--ambar-texto);font-weight:700;display:inline-block;margin-top:.25rem}

/* ===== Recorrido de autoservicio (11 pasos) =====
   Maquetado en HTML y no en SVG: once filas de texto español necesitan
   reflow. El raíl y los nodos son CSS; el texto es texto. */
.recorrido{max-width:760px;margin:2.2rem auto 0}
.rtramo{position:relative}
.rtitulo{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-weight:700;font-size:.82rem;
     text-transform:uppercase;letter-spacing:.6px;color:var(--gris);margin:0 0 .9rem}
/* El arranque del contador lo fija cada lista (counter-reset no admite calc). */
.rlista{list-style:none;counter-reset:rp;margin:0;padding:0;position:relative}
.rlista::before{content:"";position:absolute;left:17px;top:14px;bottom:14px;width:2px;background:var(--linea)}
.rtu .rlista::before{background:var(--verde);opacity:.3}
.rlista li{counter-increment:rp;position:relative;padding:0 0 1.15rem 3.1rem;min-height:36px}
.rlista li:last-child{padding-bottom:0}
.rlista li::before{content:counter(rp);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
     display:flex;align-items:center;justify-content:center;font-family:var(--fuente-texto);
     font-size:.95rem;font-weight:700;background:var(--hueso);border:2px solid var(--linea);color:var(--gris)}
.rtu .rlista li::before{background:var(--verde);border-color:var(--verde);color:var(--hueso)}
.rcuerpo h3{font-size:1.06rem;margin:.15rem 0 .2rem;color:var(--verde);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.rcuerpo p{font-size:.94rem;color:var(--gris);margin:0;line-height:1.55}
.rquien{font-family:var(--fuente-texto);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
     color:var(--ambar-texto);background:var(--crema);border-radius:4px;padding:.15rem .45rem}
.rreloj{display:inline-flex;align-items:center;gap:.35rem;flex:none;white-space:nowrap;
     font-size:.83rem;font-weight:700;color:var(--ambar-texto);background:var(--crema);
     border-radius:999px;padding:.3rem .7rem;margin-top:.2rem}
.rreloj svg{width:15px;height:15px;flex:none}
.rreloj.rtotal{text-transform:none;letter-spacing:0}
/* La banda del corte: es el mensaje del diagrama, así que se ve. */
.rcorte{display:flex;align-items:center;justify-content:center;gap:.6rem;text-align:center;
     background:var(--ambar);color:var(--tinta);font-weight:700;font-size:.95rem;
     border-radius:10px;padding:.7rem 1.1rem;margin:1.3rem 0}
.rcorte::before{content:"↓";font-size:1.1rem;line-height:1}

/* Diagrama de plazos: el SVG escala solo, el pie va en HTML */
.dplazos{max-width:620px;margin:1.8rem auto 0;padding:1.3rem 1.4rem;background:var(--superficie);
     border:1px solid var(--linea);border-radius:14px;box-shadow:var(--sombra)}
.dplazos svg{display:block;width:100%;height:auto}
.dplazos figcaption{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--linea);
     font-size:.83rem;color:var(--gris);line-height:1.5;text-align:center}
@media(max-width:520px){
  /* El SVG encoge con el ancho y el pie no: sin esto, el pie pesa más que el diagrama. */
  .dplazos{padding:1rem .8rem}
  .dplazos figcaption{font-size:.76rem}
}

/* ===== Para quién ===== */
.chips-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--gris);margin:.4rem 0 .55rem}
/* CENTRADAS. Con varias filas, alineadas a la izquierda dejaban la ultima descolgada
   contra el margen y se leia como si faltara algo. La etiqueta de grupo (.chips-label)
   se centra con ellas o queda huerfana encima. */
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.1rem;justify-content:center}
.chips-label{text-align:center}
/* En la columna de texto de un split la rejilla es estrecha y el bloque va alineado a la
   izquierda: centrar ahi descuadraria con el parrafo de al lado. */
.split-text .chips{justify-content:flex-start}
.split-text .chips-label{text-align:left}
.chip{background:var(--verde-suave);color:var(--verde);border:1px solid var(--linea);padding:.5rem .95rem;border-radius:6px;font-weight:600;font-size:.9rem;transition:background .15s,border-color .15s}
a.chip:hover{background:var(--crema);border-color:var(--verde)}

/* ===== Precio ===== */
.price-wrap{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;align-items:center;max-width:840px;margin:0 auto}
.calc{background:var(--superficie);border:1px solid var(--linea);border-radius:12px;padding:1.7rem;box-shadow:var(--sombra)}
.calc .res{font-size:1rem;font-weight:600;color:var(--gris);margin:.7rem 0 1.1rem;white-space:nowrap;display:flex;align-items:baseline;gap:.4rem}
.calc .res b{font-size:1.55rem;font-weight:700;color:var(--verde)}
.calc-note{font-size:.76rem;color:var(--gris);margin-top:.7rem;line-height:1.45}
.calc-invite{font-size:.9rem;color:var(--tinta);margin:.4rem 0 1rem;line-height:1.45}
.calc-link{font-size:.85rem;margin-top:.55rem;line-height:1.45}
.calc-link a{color:var(--verde);font-weight:600;text-decoration:underline;text-underline-offset:2px}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--verde),var(--linea));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--verde);border:3px solid var(--superficie);box-shadow:0 1px 4px rgba(28,27,24,.3);cursor:pointer}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--verde);border:3px solid var(--superficie);cursor:pointer}
.anchor{font-size:1.12rem;color:var(--gris)}
.anchor b{color:var(--tinta)}

/* ===== Calculadora avanzada (página Precio) ===== */
.calc-pro{background:var(--superficie);border:1px solid var(--linea);border-radius:14px;box-shadow:var(--sombra);padding:1.8rem;max-width:760px;margin:1.6rem auto 0}
.cp-renta{display:flex;align-items:center;gap:.7rem;margin:.6rem 0 0}
.cp-renta input[type=range]{flex:1}
.cp-renta input[type=number]{width:120px;padding:.55rem .7rem;border:1.5px solid var(--linea-campo);border-radius:8px;font-weight:700;text-align:right;font-size:1rem;font-family:inherit;color:var(--tinta)}
.cp-renta input[type=number]:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(14,92,67,.18)}
.cp-renta span{color:var(--gris);font-weight:600;flex:none}
.calc-extras{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.2rem 0 1.5rem}
.calc-extras label{display:flex;align-items:center;gap:.55rem;font-size:.92rem;color:var(--tinta);background:var(--crema);
     border:1px solid var(--linea);border-radius:8px;padding:.6rem .8rem;cursor:pointer;transition:border-color .15s}
.calc-extras label:hover{border-color:var(--verde)}
.calc-extras input{accent-color:var(--verde);width:16px;height:16px;flex:none;cursor:pointer}
.calc-extras .tag-pct{margin-left:auto}
/* Prestación que el Cobro puntual ya incluye: su % va TACHADO. Marcada y bloqueada pero con el
   porcentaje intacto, el lector entendía que se sumaba al 2% y calculaba de más. */
.calc-extras .tag-pct.incluido{text-decoration:line-through;opacity:.5;background:transparent;border-color:var(--linea);color:var(--gris)}
.est-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:stretch}
.est{border:1px solid var(--linea);border-radius:12px;padding:1.2rem 1rem;text-align:center;background:var(--superficie);display:flex;flex-direction:column;justify-content:center}
.est-mid{border:2px solid var(--verde);background:var(--verde-suave);position:relative}
.est-tag{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--gris)}
.est-mid .est-tag{color:var(--verde)}
.est-pct{font-size:1.6rem;font-weight:700;color:var(--verde);margin:.15rem 0 .35rem}
.est b{font-size:1.18rem;color:var(--tinta);font-weight:700;font-variant-numeric:tabular-nums}
.est small{display:block;color:var(--gris);font-size:.82rem;margin-top:.15rem}
.est-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;
     background:var(--ambar);color:var(--tinta);font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.3px;padding:.16rem .6rem;border-radius:5px}
@media(max-width:560px){.calc-extras{grid-template-columns:1fr}.est-grid{grid-template-columns:1fr}.est-mid{order:-1}}

/* ===== Ventajas (rejilla estática) =====
   Era un carrusel automático. Fuera: doc 09 §4 lo descarta por accesibilidad,
   conversión y porque roba el LCP. */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.5rem}
.feat{background:var(--superficie);border:1px solid var(--linea);border-radius:12px;padding:1.5rem 1.4rem;
      display:flex;flex-direction:column;gap:.6rem;transition:border-color .2s}
.feat:hover{border-color:var(--verde)}
.feat .bic{width:48px;height:48px;border-radius:10px;background:var(--verde-suave);color:var(--verde);display:flex;align-items:center;justify-content:center}
.feat .bic svg{width:25px;height:25px;stroke:var(--verde);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feat h3{font-size:1.05rem}
.feat p{color:var(--gris);font-size:.93rem;line-height:1.55;margin:0}

/* ===== FAQ ===== */
.faq{max-width:780px;margin:0 auto}
details{background:var(--superficie);border:1px solid var(--linea);border-radius:10px;padding:.95rem 1.2rem;margin-bottom:.7rem}
details[open]{border-color:var(--verde)}
summary{font-weight:600;cursor:pointer;color:var(--verde);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.4rem;color:var(--ambar-texto);font-weight:700;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:.7rem;color:var(--gris)}
.cbody{margin-top:.8rem;color:var(--gris)}
.cbody p{margin:0 0 .7rem}
.cbody ul{margin:.2rem 0 .7rem 1.1rem}
.cbody li{margin-bottom:.4rem}
.cbody b{color:var(--verde)}
.cbody .small{font-size:.82rem;opacity:.85}
/* ⚠️ `.condtable` está pensada para VALORES CORTOS en la última columna: esa
   columna va centrada, en negrita y con white-space:nowrap. Con prosa dentro
   revienta en móvil — pasó con una tabla de 2 columnas en /seag (s.133) y volvió
   a pasar con las de /pasar-el-estudio-de-solvencia, que empujaban la página 500
   px a 390. Dos medidas:
   · `display:block;overflow-x:auto` — RED estructural: si una tabla no cabe,
     scrollea dentro de su caja y nunca empuja el documento.
   · `.condtable.prosa` — para tablas cuya última columna es texto: deja que
     envuelva, alineada a la izquierda y con peso normal. */
/* CENTRADA en el bloque. `display:block` (la red de arriba) hace que la caja ocupe
   todo el ancho pero la tabla se dimensione a su contenido, así que quedaba pegada
   a la izquierda con medio bloque vacío al lado. Con `width:fit-content` la caja
   mide lo que la tabla y `margin-inline:auto` la centra — y como sigue habiendo
   `max-width:100%`, cuando NO cabe vuelve a ocupar el ancho y scrollea dentro de
   sí misma: la red anti-overflow no se pierde. */
.condtable{border-collapse:collapse;margin:.4rem auto .6rem;font-size:.9rem;
           display:block;overflow-x:auto;width:fit-content;max-width:100%}
.condtable th,.condtable td{border:1px solid var(--linea);padding:.55rem .7rem;text-align:left;vertical-align:top}
.condtable th{background:var(--crema);color:var(--verde);font-weight:700}
/* OJO: esta regla pinta la ÚLTIMA celda de cada fila. Con rowspan pinta la que
   no es, y con frases largas revienta en móvil por el nowrap. Solo para tablas
   de valores CORTOS en la última columna. */
.condtable td:last-child,.condtable th:last-child{text-align:center;white-space:nowrap;font-weight:700;color:var(--verde)}
.condtable.prosa td:last-child,.condtable.prosa th:last-child{text-align:left;white-space:normal;font-weight:400;color:inherit}
.condtable.prosa th:last-child{font-weight:700;color:var(--verde)}
.condtable.prosa td:first-child{white-space:nowrap;font-weight:600}
/* `ancha` = 3+ columnas de texto: ahí la etiqueta también tiene que envolver o
   no queda ancho para las otras dos, y la última recupera su realce. */
.condtable.prosa.ancha td:first-child{white-space:normal}
.condtable.prosa.ancha td:last-child{font-weight:600;color:var(--verde)}

/* ===== Cierre + pie ===== */
.cierre{background:var(--verde-hondo);color:var(--sobre-verde);text-align:center;max-width:none}
.cierre h2{color:var(--sobre-verde)}
.cierre p{color:var(--sobre-verde-2);max-width:620px;margin:.8rem auto 0}
footer{background:var(--verde-hondo);color:var(--sobre-verde-2);padding:3rem 1.2rem;font-size:.9rem}
.fcols{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
/* Título de columna del pie: es un grupo de navegación, no un encabezado del
   documento (ver footer() en lib/site.mjs). */
.fh{color:var(--sobre-verde);margin-bottom:.7rem;font-size:.95rem;font-weight:700}
.fh a{color:inherit;display:inline;margin:0}
/* El crédito de las ilustraciones: sin opacity, que bajaba el contraste por debajo de AA */
.fcredito{display:inline-block;font-size:.82rem;margin-top:.5rem}
.fcredito a{display:inline;text-decoration:underline;text-underline-offset:2px}
footer a{color:var(--sobre-verde-2);display:block;margin-bottom:.35rem;transition:color .15s}
footer a:hover{color:var(--sobre-verde);text-decoration:underline;text-underline-offset:2px}
.fcities{max-width:1120px;margin:1.6rem auto 0;padding-top:1.3rem;border-top:1px solid var(--linea-verde);display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.1rem;font-size:.85rem}
.fcities a{display:inline;margin:0}
.fcity{max-width:1120px;margin:1.6rem auto 0;padding-top:1.3rem;border-top:1px solid var(--linea-verde);text-align:center;color:var(--sobre-verde-2)}
.fcity a{display:inline}
.fcity .legal-row{margin-top:.6rem;font-size:.82rem}
.fcity .legal-row a{color:var(--sobre-verde-2);text-decoration:underline;text-underline-offset:2px}
.seag-respaldo{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-bottom:1.2rem;color:var(--sobre-verde-2);font-size:.9rem;flex-wrap:wrap}
.seag-num{color:var(--sobre-verde-2);font-size:.9rem;letter-spacing:.3px}
.seag-respaldo a{display:inline-flex;background:var(--hueso);border-radius:8px;padding:.5rem .85rem;line-height:0;margin:0}
.seag-respaldo img{height:34px;width:auto;display:block}
.fmarca{display:block;height:26px;width:auto;margin:0 auto 1.4rem}

/* ===== Flotantes ===== */
/* ⚠️ Los tres flotantes cuelgan de UN contenedor fijo y en móvil COLAPSAN en un
   botón. Medido a 390 px: desplegados ocupan 145×189 px (37 % del ancho de línea
   y 22 % de la pantalla) y tapaban el final de cuatro líneas seguidas. Colapsados
   son 56×56 → 14 % y 7 %. El posicionamiento pasa del botón al contenedor: por eso
   `.float` ya no es `fixed` ni lleva `bottom` propio. */
.floats{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.floatgrupo{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.float{border:none;border-radius:8px;padding:.75rem 1.1rem;font-weight:600;cursor:pointer;font-family:inherit;font-size:.92rem;
       box-shadow:var(--sombra-fuerte);display:flex;align-items:center;gap:.45rem}
.float svg{width:20px;height:20px}
/* WhatsApp y Telegram: círculo del color de marca EXACTO con el glifo blanco,
   que es su forma publicada y la que se reconoce sin leer nada.
   Sin etiqueta a propósito: es lo que permite conservar el color. Sobre
   #25D366 el texto blanco da 1,98:1 y el oscuro deja el logo con pinta de mal
   recortado; sin texto no hay nada que no cumpla, y el nombre lo lleva el
   aria-label. El botón se separa del fondo por su propia sombra. */
.chat{background:var(--verde-hondo);color:var(--sobre-verde)}
.float.ico{width:56px;height:56px;padding:0;border-radius:50%;justify-content:center;color:#FFFFFF}
.float.ico svg{width:30px;height:30px}
.tg{background:#229ED9}
.wa{background:#25D366}
.float.ico:hover{filter:brightness(1.07)}

/* El lanzador solo existe en móvil: en escritorio los tres caben sin molestar
   (a 1280 el texto acaba en 1030 y el primer botón empieza en 1135). */
.float.lanzador{display:none;width:56px;height:56px;padding:0;border-radius:50%;justify-content:center;
                background:var(--verde-hondo);color:var(--sobre-verde)}
.float.lanzador svg{width:28px;height:28px}
.float.lanzador .f-cerrar{display:none}
.float.lanzador[aria-expanded="true"] .f-abrir{display:none}
.float.lanzador[aria-expanded="true"] .f-cerrar{display:block}
@media(max-width:860px){
  .float.lanzador{display:flex}
  .floatgrupo{display:none}
  .floatgrupo.open{display:flex}
}

/* ===== Panel del chat =====
   Abierto TAPA los botones flotantes de encima (comprobado en captura: solo
   asoma el último). Es el comportamiento normal de un panel de chat y no se
   pelea con él; lo que sí hace falta es que la vía de escape no desaparezca con
   ellos, y por eso el enlace a WhatsApp vive DENTRO del panel, en el pie: es
   justo donde mira quien no ha resuelto su duda con el asistente.
   En móvil ocupa casi todo el ancho — una conversación en una columna de 200 px
   no se lee. */
.chatpanel{position:fixed;right:18px;bottom:88px;z-index:61;width:360px;max-width:calc(100vw - 36px);
           display:flex;flex-direction:column;background:var(--superficie);border:1px solid var(--linea);
           border-radius:14px;box-shadow:var(--sombra-fuerte);overflow:hidden}
.chatpanel[hidden]{display:none}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
           background:var(--verde-hondo);color:var(--sobre-verde);padding:.7rem .9rem}
.chat-tit{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem}
/* El punto ámbar es el mismo de la marca: dice «está encendido» sin escribirlo. */
.chat-punto{width:8px;height:8px;border-radius:50%;background:var(--ambar);flex:none}
.chat-x{background:none;border:none;color:var(--sobre-verde);cursor:pointer;padding:.2rem;display:flex;border-radius:6px}
.chat-x svg{width:20px;height:20px}
.chat-x:hover{background:rgba(250,249,247,.14)}
.chat-log{flex:1;min-height:220px;max-height:46vh;overflow-y:auto;padding:.9rem;display:flex;
          flex-direction:column;gap:.55rem;background:var(--hueso)}
.chat-msg{max-width:85%;padding:.55rem .75rem;border-radius:12px;font-size:.92rem;line-height:1.45;
          white-space:pre-wrap;overflow-wrap:anywhere}
.chat-msg.bot{align-self:flex-start;background:var(--crema);color:var(--tinta);border-bottom-left-radius:4px}
.chat-msg.yo{align-self:flex-end;background:var(--verde-suave);color:var(--tinta);border-bottom-right-radius:4px}
.chat-msg.esperando{opacity:.65;letter-spacing:.15em}
.chat-adj{background:none;padding:.15rem 0}
.chat-adj a{color:var(--verde);font-weight:600;text-decoration:underline}
.chat-form{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid var(--linea);background:var(--superficie)}
.chat-form input{flex:1;border:1px solid var(--linea-campo);border-radius:9px;padding:.55rem .7rem;
                 font-family:inherit;font-size:16px;color:var(--tinta);background:var(--superficie)}
.chat-form input:focus-visible{outline:2px solid var(--verde);outline-offset:1px}
.chat-form button{flex:none;width:42px;border:none;border-radius:9px;background:var(--verde);color:#FFFFFF;
                  cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-form button svg{width:19px;height:19px}
.chat-form button:disabled{opacity:.5;cursor:default}
.chat-pie{margin:0;padding:0 .7rem .7rem;font-size:.76rem;color:var(--gris);background:var(--superficie)}
.chat-pie a{color:var(--verde);text-decoration:underline}
.chat-wa{display:inline-block;margin-top:.3rem;font-weight:600}
@media(max-width:860px){
  .chatpanel{right:12px;left:12px;bottom:84px;width:auto;max-width:none}
  .chat-log{max-height:52vh}
}
/* Etiqueta para lector de pantalla sin ocupar sitio: el cuadro de texto se
   entiende por su placeholder, pero un placeholder NO es una etiqueta. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
                 clip:rect(0 0 0 0);white-space:nowrap;border:0}

.demo-note{background:var(--crema);border-bottom:1px solid var(--linea);color:var(--ambar-texto);text-align:center;padding:.55rem;font-size:.85rem}

/* ===== Ilustraciones de sección ===== */
.illu{width:100%;height:auto;display:block}
/* Fotografía en el cuerpo de la página. El aspect-ratio + object-fit evitan que
   una foto 3:2 deforme el hueco de una ilustración que era cuadrada. */
.foto{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px}
.split .foto,.prob .foto,.cierre .foto{max-width:430px;margin:0 auto;box-shadow:var(--sombra)}
/* En el círculo de los pasos manda cover: con contain la foto se encoge dentro
   del redondel y deja dos franjas de fondo a los lados. */
.fnode .foto{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:50%}
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.split .illu{max-width:430px;margin:0 auto}
.split-text h2,.split-text .sub{text-align:left}
.split-text .sub{margin-left:0;margin-right:0}
.illu-panel{background:var(--superficie);border-radius:16px;padding:1.4rem;box-shadow:var(--sombra);max-width:430px;margin:0 auto}
/* Sobre fondo verde, el panel va en crema: el blanco puro abre un agujero.
   Provisional — las ilustraciones de línea necesitan fondo claro; desaparece
   cuando entren las fotografías editoriales (hito de imágenes). */
.prob .illu-panel,.cierre .illu-panel{background:var(--crema);box-shadow:none}
.prob-list{list-style:none;display:flex;flex-direction:column;gap:1.1rem;margin:1.4rem 0 1.6rem}
.prob-list li{display:flex;gap:1rem;align-items:flex-start;padding:.5rem .7rem;margin:-.5rem -.7rem;border-radius:10px}
.prob-list .pic{flex:none;width:52px;height:52px;border-radius:50%;background:rgba(239,168,26,.14);border:1px solid rgba(239,168,26,.4);color:var(--ambar);display:flex;align-items:center;justify-content:center}
.prob-list .pic .ic{width:26px;height:26px;stroke:var(--ambar);stroke-width:1.9}
.prob-list .pic .icp{width:25px;height:25px}
.prob-list h3{color:var(--sobre-verde);font-size:1.08rem;margin-bottom:.15rem}
.prob-list p{color:var(--sobre-verde-2);font-size:.93rem}

/* ===== .reveal — NEUTRALIZADA a propósito ==================================
   Era una aparición al hacer scroll. Doc 09 §4 la descarta como lenguaje
   general («un elemento en movimiento llama la atención; ocho la dispersan»),
   y además dejaba el contenido en opacity:0 hasta que corriera el JS: si el
   script fallaba, la página entera quedaba invisible.
   La clase sigue en los módulos de contenido (quitarla de 58 ficheros sería
   ruido), pero ya no pinta nada.
   ========================================================================= */
.reveal,.reveal.in{opacity:1;transform:none}

/* =========================================================================
   ===== PÁGINAS INTERNAS =====
   ========================================================================= */

.subhero{position:relative;background:var(--crema);max-width:none;border-bottom:1px solid var(--linea)}
.subhero-wrap{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:2.6rem 1.2rem 3rem;text-align:center}
.subhero h1{font-size:2.5rem;margin:.4rem auto 1rem;max-width:840px}
.subhero .lead{font-size:1.18rem;color:var(--gris);max-width:680px;margin:0 auto 1.6rem}
.subhero .hero-illu{margin:1.4rem auto 0;max-width:340px}
/* Fotografía editorial: 3:2, esquina blanda y sin el flotar de las ilustraciones
   (una foto que se mueve sola parece un fallo de render, no una gracia). */
.hero-foto{display:block;width:100%;max-width:520px;height:auto;aspect-ratio:3/2;object-fit:cover;
     border-radius:14px;margin:1.8rem auto 0;box-shadow:var(--sombra)}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;align-items:center}

/* Artículo de blog */
.subhero-art .subhero-wrap{text-align:left}
.subhero-art h1{margin-left:0;margin-right:0;font-size:2.2rem}
.subhero-art .lead{margin-left:0;margin-right:0}
.subhero-art .tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--verde);background:var(--verde-suave);border:1px solid var(--linea);border-radius:5px;padding:.25rem .7rem}
.art-meta{color:var(--gris);font-size:.9rem;margin:.7rem 0 .2rem}
.art-disclaimer{margin-top:2.2rem;font-size:.9rem}
.prose article,article.prose{max-width:780px;margin:0 auto}

/* Migas */
/* ⚠️ Una sola línea, con scroll horizontal si no cabe — y NO es cosmético.
   Con las migas envolviendo, al llegar la tipografía la ruta pasaba de N a N+1
   líneas y empujaba 25 px TODO el contenido de debajo: CLS 0,25 medido en la
   landing de Madrid al añadirle el cuarto nivel. Y la ruta está arriba del todo,
   así que cada línea que crece desplaza la página entera.
   En una línea la altura es constante pase lo que pase con la fuente. */
.crumbs{max-width:1120px;margin:1rem auto -.5rem;padding:.4rem 1.2rem;font-size:.85rem;color:var(--gris);
        white-space:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.crumbs::-webkit-scrollbar{display:none}
.crumbs a{color:var(--gris);text-decoration:underline;text-underline-offset:2px}
.crumbs a:hover{color:var(--verde)}
.crumbs span{color:var(--verde);font-weight:600}
.crumbs .sep{margin:0 .4rem;opacity:.6}

/* ===== Documento (plantilla de contrato) ===== */
.doc{max-width:820px;margin:0 auto;background:var(--superficie);border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra);padding:2.4rem 2.6rem;font-size:.95rem;line-height:1.75;color:var(--tinta)}
.doc h2{font-size:1.35rem}
.doc h3{font-size:1.05rem;color:var(--verde);margin:1.6rem 0 .5rem;border-bottom:1px solid var(--linea);padding-bottom:.3rem}
.doc p{margin:.5rem 0}
@media(max-width:560px){.doc{padding:1.4rem 1.2rem}}

@media print{
  .demo-note,#hdr,header,footer,.floats,.float,.chatpanel,.crumbs,.subhero,.note,.ctaband,.related,.faq,.center,.alt h2,.btn{display:none !important}
  body{background:#fff}
  section{padding:0 !important;max-width:none}
  .doc{box-shadow:none;border:none;border-radius:0;padding:0;max-width:none}
}

/* Contenido tipo "prose" */
.prose{max-width:780px;margin:0 auto}
.prose h2{text-align:left;font-size:1.55rem;margin:2.2rem 0 .7rem}
.prose h3{font-size:1.18rem;margin:1.6rem 0 .5rem}
.prose p{color:var(--tinta);margin-bottom:1rem}
.prose ul,.prose ol{margin:0 0 1.2rem 1.2rem;color:var(--tinta)}
.prose li{margin-bottom:.5rem}
.prose a{color:var(--verde);text-decoration:underline;text-underline-offset:2px}
.prose .lead{font-size:1.12rem;color:var(--gris);text-align:left;max-width:none;margin-bottom:1.6rem}
.prose strong{color:var(--verde)}
.prose .note{background:var(--crema);border:1px solid var(--linea);border-left:4px solid var(--ambar-texto);border-radius:8px;padding:1rem 1.2rem;margin:1.4rem 0;font-size:.95rem;color:var(--gris)}
/* Los enlaces dentro de un aviso van SUBRAYADOS, esté el `.note` dentro de
   `.prose` o suelto en una sección. Dentro de `.prose` lo heredaban de
   `.prose a`; fuera se quedaban distinguidos solo por el color (verde sobre
   crema = 1,04:1) y axe lo marca como `link-in-text-block` — es el mismo fallo
   que la s.137 arregló en la regla, por el borde que quedaba suelto. */
.note a{color:var(--verde);text-decoration:underline;text-underline-offset:2px}

/* ⚠️ CITA LITERAL (ley, sentencia, condicionado de SEAG). Medido el 2026-08-06: el reset dejaba
   `blockquote` con margin 0, padding 0, sin borde y sin fondo — o sea, IDÉNTICO a un párrafo. En
   páginas cuyo argumento se apoya en citar el BOE palabra por palabra, la cita se leía como texto
   propio, que es justo lo contrario de lo que se pretende. Afectaba también a `seag.mjs`.
   Se distingue de `.note` a propósito y con otro color: aquello es un aviso NUESTRO, esto es la voz
   de la fuente. La barra es decorativa (sin requisito WCAG) y el texto va en tinta: 16,37:1. */
.prose blockquote{margin:1.4rem 0;padding:.2rem 0 .2rem 1.1rem;border-left:4px solid var(--verde);
  font-family:var(--fuente-titular);font-size:1.02rem;color:var(--tinta)}
.prose blockquote p{margin:.55rem 0}
.prose blockquote>:first-child{margin-top:0}
.prose blockquote>:last-child{margin-bottom:0}

/* Callout "condiciones de este caso" */
.cond-fija{max-width:820px;margin:0 auto;background:var(--verde-suave);border:1px solid var(--linea);border-left:4px solid var(--verde);border-radius:10px;padding:1rem 1.2rem}
.cond-fija-tit{display:block;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--verde);margin-bottom:.45rem}
.cond-fija ul{margin:0;padding-left:1.1rem;color:var(--tinta)}
.cond-fija li{margin:.3rem 0;font-size:.95rem}
.cond-fija b{color:var(--verde)}

/* Bloque de bullets con check */
.checklist{list-style:none;max-width:760px;margin:1.4rem auto;display:grid;gap:.8rem}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;background:var(--superficie);border:1px solid var(--linea);border-radius:10px;padding:.9rem 1.1rem;transition:border-color .15s}
.checklist li:hover{border-color:var(--verde)}
.checklist .ck{flex:none;width:26px;height:26px;border-radius:50%;background:var(--verde-suave);color:var(--verde);display:flex;align-items:center;justify-content:center;margin-top:.05rem}
.checklist .ck svg{width:16px;height:16px;stroke:var(--verde);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.checklist b{color:var(--verde)}
.checklist span{color:var(--gris);font-size:.95rem}
.checklist .ct{display:block}

/* Tarjetas de enlaces relacionados */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1rem}
.related a{background:var(--superficie);border:1px solid var(--linea);border-radius:12px;padding:1.1rem 1.2rem;color:var(--tinta);
           transition:border-color .18s;display:block}
.related a:hover{border-color:var(--verde)}
.related a b{color:var(--verde);display:block;margin-bottom:.2rem}
.related a span{color:var(--gris);font-size:.9rem}
.related a .arrow{color:var(--ambar-texto);font-weight:700}
.related a.rel-center{grid-column:2}
.related a.rel-right{grid-column:3}

/* Contacto */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:start;max-width:960px;margin:0 auto}
.contact-info .ci{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:1.3rem}
.contact-info .ci .iconwrap{flex:none;width:46px;height:46px;border-radius:10px;background:var(--verde-suave);color:var(--verde);display:flex;align-items:center;justify-content:center}
.contact-info .ci .iconwrap svg{width:22px;height:22px;stroke:var(--verde);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-info h3{font-size:1.02rem;margin-bottom:.15rem}
.contact-info p{color:var(--gris);font-size:.95rem}
.contact-card{background:var(--superficie);border:1px solid var(--linea);border-radius:14px;box-shadow:var(--sombra);padding:1.6rem}

/* Blog */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.5rem}
.post{background:var(--superficie);border:1px solid var(--linea);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;
      transition:border-color .18s}
.post:hover{border-color:var(--verde)}
/* Franja verde con la punta ámbar: el eco del punto de la marca */
.post .ph{height:6px;background:linear-gradient(90deg,var(--verde) 0 72%,var(--ambar) 72% 100%)}
.post .pbody{padding:1.3rem 1.3rem 1.5rem}
.post .tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--verde);background:var(--verde-suave);border:1px solid var(--linea);border-radius:5px;padding:.25rem .65rem;margin-bottom:.7rem}
.post h3{font-size:1.08rem;margin-bottom:.45rem}
.post p{color:var(--gris);font-size:.93rem}

/* Banda CTA reutilizable */
.ctaband{background:var(--verde-suave);border:1px solid var(--verde);border-radius:14px;max-width:900px;margin:0 auto;
         padding:2.2rem 1.6rem;text-align:center}
.ctaband h2{margin-bottom:.6rem}
.ctaband p{color:var(--gris);max-width:560px;margin:0 auto 1.4rem}

/* ===== Responsive ===== */
@media(max-width:860px){
  .hero-wrap,.price-wrap,.split,.contact-grid{grid-template-columns:1fr}
  .hero-bottom{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .hero-bottom .hero-illu{max-width:280px;margin:0 auto}
  .split-text h2,.split-text .sub{text-align:center}
  .split .illu,.illu-panel{order:-1}
  .grid,.grid.g4,.fcols,.related,.posts,.feats{grid-template-columns:1fr 1fr}
  .related a.rel-center,.related a.rel-right{grid-column:auto}
  .hero h1{font-size:2.2rem}
  .subhero h1{font-size:2rem}
  nav.mainnav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--hueso);border:1px solid var(--linea);
              border-radius:0 0 12px 12px;flex-direction:column;gap:0;padding:.6rem;box-shadow:var(--sombra-fuerte);
              max-height:calc(100dvh - 86px);overflow-y:auto;overflow-x:hidden}
  /* Aquí los grupos van APILADOS: una línea vertical entre ellos no separaría nada. */
  nav.mainnav>*+*::before{display:none}
  nav.mainnav.open{display:flex}
  nav.mainnav a{width:100%;padding:.7rem .9rem;border-radius:8px}
  nav.mainnav a::after{display:none}
  nav.mainnav a:hover,nav.mainnav a.active{background:var(--crema)}
  header{position:relative}
  .navtoggle{display:block}
  /* Desplegables plegados: con los ocho abiertos el panel medía ~1.400 px y
     había que hacer scroll dentro de un menú. Los abre el botón, no el hover. */
  /* Con `.navitem>a` a secas gana `nav.mainnav a{width:100%}` (0,1,2 frente a
     0,1,1) y el chevron se cae a su propia línea. Hay que igualar el selector. */
  .navitem{display:flex;flex-wrap:wrap;width:100%;align-items:center;position:static}
  nav.mainnav .navitem>a{flex:1 1 0;width:auto;min-width:0}
  .navitem>a .cvt{display:none}
  .navsub{display:flex;align-items:center;flex:0 0 auto;padding:.5rem .55rem}
  /* La base es 100% MENOS la sangría: con `flex:1 0 100%` el margen izquierdo se
     suma por fuera y el panel se iba 7 px a la derecha. */
  .navitem>.dropdown{display:none;flex:0 0 calc(100% - 1rem);margin:.1rem 0 .5rem 1rem;padding:0 0 0 .55rem;
                     border-left:2px solid var(--linea)}
  .navitem.open>.dropdown{display:block}
  /* `nav.mainnav a` viene con white-space:nowrap y aquí «Calculadora de subida
     del alquiler» no cabe: sin esto el panel se llevaba una barra horizontal. */
  nav.mainnav .dropdown a{padding:.6rem .7rem;font-size:.94rem;white-space:normal}
  .flow{grid-template-columns:1fr;gap:1.8rem}
  .flow::before{top:0;bottom:0;left:82px;right:auto;width:2px;height:auto}
  .fstep{display:flex;align-items:center;gap:1.3rem;text-align:left;padding:0}
  .fnode{margin:0;width:130px;height:130px;flex:none}
}
@media(max-width:520px){
  .grid,.grid.g2,.grid.g4,.fcols,.related,.posts,.feats{grid-template-columns:1fr}
  h2{font-size:1.6rem}
  .hero h1{font-size:1.95rem}
  .subhero h1{font-size:1.7rem}      .cta-row .btn,.cta-row .btn-2{width:100%}
  section{padding:3.2rem 1.1rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ===== Capturas del producto =============================================
   Doc 09 §5: la prueba de la promesa de autoservicio. Son pantallas ALTAS y
   estrechas (formularios), así que se limita su altura y se recorta por abajo
   con una degradación: encajan en la rejilla sin deformar la proporción y sin
   obligar a leer un formulario entero dentro de una imagen. Lo que se lee es el
   pie, que es texto de verdad y sí se indexa.
   ========================================================================= */
.capturas{display:grid;gap:1.6rem;margin:0 auto;
  max-width:var(--capt-max,1000px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--capt-min,240px)),1fr))}
.capt{margin:0}
/* Se recorta por abajo y se DEGRADA el corte: así se ve que la pantalla sigue, en vez de parecer que
   la interfaz se acaba ahí. Lo que hay que leer es el pie, que es texto de verdad y sí se indexa. */
.capt img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover;object-position:top;
  border:1px solid var(--linea);border-top-left-radius:12px;border-top-right-radius:12px;
  border-bottom:0;background:var(--superficie);
  -webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 82%,transparent 100%)}
.capt figcaption{margin-top:.7rem;color:var(--gris);font-size:.92rem;line-height:1.5}
@media (max-width:640px){
  .capturas{gap:1.4rem}
  .capt img{max-height:300px}
}