/* ===========================================================================
   Estilos base de la Fábrica. Un solo archivo: cambiar «ese azul más oscuro»
   es cambiar una línea (patrones/mantenimiento.md).

   1. Colores: el PATRÓN DE TRES TONOS (patrones/color.md). El de marca, tal
      cual, SOLO para decorar; el oscurecido para todo el texto de color.
      Mide cada uno contra su fondo y apunta el contraste al lado.
   2. Escala tipográfica y de espacios (patrones/diseno.md): 7 tamaños, no 30.
   3. Puntos de ruptura: 560 · 900, y 1240 para el menú completo.
   =========================================================================== */
/* optional + preload en la plantilla: sin salto de líneas cuando llega la
   fuente (el único CLS medido venía de ahí; lecciones.md, «tipografías»). */
@font-face { font-family: "League Spartan"; font-style: normal; font-weight: 500 700; font-display: optional; src: url(assets/league-spartan-latin.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: optional; src: url(assets/inter-latin.woff2) format("woff2"); }
/* GN Asesores: el rojo de su CSS (#BE1522) ya cumple como texto; el del logo
   (#DE0D1D) va solo en decoración; el hondo es nuestro (oscurecido). */
:root {
  --marca: #DE0D1D;        /* el rojo del logo. Decoración: 5,02 sobre blanco, 2,85 sobre oscuro */
  --marca-texto: #BE1522;  /* el de su CSS. Texto y enlaces: 6,33 sobre blanco, 5,77 sobre --fondo-alt */
  --marca-honda: #9E111C;  /* nuestro (oscurecido). Botones y foco: 8,23 sobre blanco */
  --marca-clara: #F2A0A6;  /* nuestro. Texto de acento sobre --tinta: 7,06 */
  --fondo: #FFFFFF;
  --fondo-alt: #F6F4F2;
  --tinta: #262A36;        /* su gris azulado de titulares y franjas: 14,32 sobre blanco */
  --tinta-suave: #4B5563;  /* 7,56 sobre blanco, 6,89 sobre --fondo-alt */
  --sobre-oscuro: #C9CED4; /* texto secundario sobre --tinta: 9,6 */
  --borde: #DAD6D2;
  --rotulo: "League Spartan", "Segoe UI", system-ui, sans-serif; /* la misma familia que su web (Spartan), alojada */

  --p0: .875rem; --p1: 1.125rem; --p2: 1.25rem; --p3: 1.6rem; --p4: 2rem; --p5: 2.5rem; --p6: 3.2rem;
  --h1: clamp(var(--p4), 6vw, var(--p6));
  --h2: clamp(var(--p3), 4vw, var(--p5));
  --e1: .5rem; --e2: 1rem; --e3: 1.6rem; --e4: 2.5rem; --e5: 4rem;

  --barra: 64px;           /* el alto de la barra fija, en UN sitio */
  --barra-movil: 56px;     /* el de la barra de abajo */
  --radio: 10px;
  --letra: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* alojada en assets/: cero peticiones de fuera */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 1.4rem); } /* el freno de las anclas */
@media (max-width: 899px) { html { scroll-padding-bottom: calc(var(--barra-movil) + 1rem); } } /* que la barra de abajo no tape el foco */
body { margin: 0; font: var(--p1)/1.65 var(--letra); color: var(--tinta); background: var(--fondo); }
img, svg, video { max-width: 100%; height: auto; }
figure { margin: 1.7em 0; } /* el margin:1em 40px de fábrica descuadra las fotos */
[hidden] { display: none !important; } /* cualquier display tuyo le gana a hidden */
a { color: var(--marca-texto); }
/* El anillo de foco cambia de color con el fondo: el rojo hondo sobre --tinta
   da 1,74 (WCAG pide 3). Sobre lo oscuro, blanco. */
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--foco, var(--marca-honda)); outline-offset: 2px; }
.hero, .oscuro, .pie, .plazos li, .barra-movil { --foco: #fff; }
.hero--interior, .hero__tarjeta { --foco: var(--marca-honda); }
:where(p, li, td) a:where([href^="tel:"], [href^="mailto:"]) { display: inline-flex; align-items: center; min-height: 44px; } /* se pulsan con el dedo */
h1, h2, h3 { line-height: 1.15; text-wrap: balance; font-family: var(--rotulo); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--h1); margin: 0 0 var(--e2); }
h2 { font-size: var(--h2); margin: var(--e4) 0 var(--e2); }
h3 { font-size: var(--p2); margin: var(--e3) 0 var(--e1); }

.contenedor { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.estrecho { max-width: 44rem; }
/* En escritorio, el texto arranca en el mismo borde que el hero y las tarjetas
   (centrado, saltaba tres veces de borde al bajar; auditor de diseño, DIS-06). */
@media (min-width: 900px) { .contenedor.estrecho { margin-left: calc((100% - min(100% - 2rem, 72rem)) / 2); } }
.seccion { padding: var(--e4) 0; }
.seccion--alt { background: var(--fondo-alt); }
/* Con la barra delante: .boton (display:inline-flex) va despues y ganaba,
   y el boton de escritorio aparecia en la cabecera del movil. En el movil
   llama la barra de abajo. */
.barra .solo-escritorio { display: none; }

/* --- barra fija --- */
.salto { position: absolute; left: -9999px; top: 0; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; background: var(--fondo); }
.salto:focus { left: 1rem; }
.barra { position: sticky; top: 0; z-index: 50; background: var(--fondo); border-bottom: 1px solid var(--borde); }
.barra__in { display: flex; align-items: center; gap: var(--e2); min-height: var(--barra); }
.barra__marca { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; margin-right: auto; color: var(--tinta); font-weight: 700; text-decoration: none; }
.barra__marca span { font-family: var(--rotulo); font-size: 1.2rem; letter-spacing: .02em; white-space: nowrap; }
.barra .boton { white-space: nowrap; } /* el teléfono partido en dos líneas (QA-11) */
.barra__logo { height: 44px; width: auto; }
.nav-escritorio { display: none; gap: .25rem; }
.nav-escritorio a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; color: var(--tinta); text-decoration: none; border-radius: 6px; white-space: nowrap; }
/* La página actual, subrayada en rojo y sin negrita: la negrita ensanchaba el menú y lo partía (QA-11) */
.nav-escritorio a[aria-current="page"], .nav-movil a[aria-current="page"] { color: var(--marca-honda); text-decoration: underline 3px var(--marca); text-underline-offset: .35em; }
.nav-movil summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--borde); border-radius: 6px; cursor: pointer; list-style: none; }
.nav-movil summary::-webkit-details-marker { display: none; }
.nav-movil[open] summary { background: var(--fondo-alt); }
.nav-movil nav { position: absolute; left: 0; right: 0; top: var(--barra); display: grid; background: var(--fondo); border-bottom: 1px solid var(--borde); padding: var(--e1) 1rem var(--e2);
  /* con el movil girado o con zoom, el menu no cabe: que haga scroll y no quede bajo la barra */
  max-height: calc(100vh - var(--barra) - var(--barra-movil)); max-height: calc(100dvh - var(--barra) - var(--barra-movil)); overflow-y: auto; overscroll-behavior: contain; }
.nav-movil nav a { display: flex; align-items: center; min-height: 48px; color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--fondo-alt); }

/* El buscador, a un toque en todas: lupa con su palabra (en el móvil, solo la lupa) */
.barra__buscar { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 44px; min-width: 44px; padding: 0 .5rem; border-radius: 6px; color: var(--tinta); font-weight: 600; text-decoration: none; }
.barra__buscar[aria-current="page"] { color: var(--marca-honda); }
@media (max-width: 559px) {
  .barra__in { gap: .4rem; }
  .barra__buscar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* --- botones --- */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .15rem 1.2rem 0; border-radius: var(--radio); background: var(--marca-honda); color: #fff; font-family: var(--rotulo); font-size: 1.05rem; font-weight: 700; text-decoration: none; border: 2px solid var(--marca-honda); }
.boton--sec { background: transparent; color: var(--marca-honda); }
.boton--claro { background: transparent; color: #fff; border-color: #fff; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e1); }
/* En el móvil, los botones al ancho del recuadro de precio: misma columna, diana más grande */
@media (max-width: 559px) { .acciones .boton { flex: 1 1 100%; } }

/* --- primera pantalla --- */
.hero { padding: var(--e4) 0 var(--e3); background: var(--tinta); color: #fff; position: relative; overflow: hidden; }
.hero .contenedor { position: relative; z-index: 1; }
.antetitulo { margin: 0 0 var(--e1); color: var(--tinta-suave); font-weight: 700; letter-spacing: .02em; }
.hero .antetitulo { color: var(--sobre-oscuro); font-size: var(--p0); text-transform: uppercase; letter-spacing: .08em; }
.entradilla { font-size: var(--p2); color: var(--tinta-suave); max-width: 40rem; }
.hero .entradilla { color: #E9ECEF; }
.hero .boton--sec { color: #fff; border-color: #fff; }
/* Sobre la losa oscura, el botón de llamar en el rojo que se despega (blanco sobre #BE1522: 6,33), como en el cierre (DIS-24) */
.hero:not(.hero--interior) .boton:not(.boton--sec) { background: var(--marca-texto); border-color: var(--marca-texto); }
.hero a:not(.boton) { color: var(--marca-clara); }
.hero h1 { max-width: 22ch; }
/* «Zaragoza» subrayado con el rojo del logo: el acento de color es el botón de llamar */
.hero h1 span { color: #fff; text-decoration: underline 5px var(--marca); text-underline-offset: .18em; text-decoration-skip-ink: none; }
.precio-destacado { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem; line-height: 1.3; margin: 0 0 var(--e3); padding: .6rem 1rem; border-left: 4px solid var(--marca); background: rgb(255 255 255 / .06); font-size: var(--p2); }
.precio-destacado b { font-family: var(--rotulo); font-size: var(--p4); color: #fff; }
.precio-destacado .junto { white-space: nowrap; }
/* En el móvil la tarjeta de «qué incluye» no sale: el enlace a precios va bajo el precio */
.precio-enlace { margin: calc(-1 * var(--e2)) 0 var(--e2); }
.precio-enlace a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.precio-enlace a::after { content: " →"; white-space: pre; }
@media (min-width: 900px) { .solo-movil { display: none; } }
@media (max-width: 559px) {
  .hero .precio-destacado { margin-bottom: var(--e2); }
  .hero--portada .frases { margin-top: var(--e1); } /* que los atajos asomen antes de la barra (QA-20) */
  .hero--portada .entradilla { margin-bottom: var(--e2); }
}
.frases { list-style: none; margin: var(--e2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-size: var(--p1); color: #E9ECEF; }
.frases li::before { content: "·"; margin-right: .45rem; color: var(--marca-clara); font-weight: 700; }
.hero__rej { display: grid; gap: var(--e4); align-items: center; }
.hero__tarjeta { padding: var(--e3); border-radius: var(--radio); background: #fff; color: var(--tinta); border-top: 6px solid var(--marca); box-shadow: 0 12px 30px rgb(0 0 0 / .25); }
.hero__tarjeta-titulo { margin: 0 0 var(--e1); font-family: var(--rotulo); font-size: var(--p3); font-weight: 700; line-height: 1.15; }
.hero .hero__tarjeta a:not(.boton) { color: var(--marca-texto); font-weight: 700; }
.hero__tarjeta .lista-check { margin: 0 0 var(--e2); }
/* En el móvil sobra: lo mismo está en la página de precios, a un toque */
@media (max-width: 899px) { .hero__tarjeta { display: none; } }
@media (min-width: 900px) {
  .hero__rej { grid-template-columns: 1.5fr 1fr; }
  /* Su logo, enorme y casi transparente, detrás de la tarjeta: la primera
     pantalla es de GN y no de cualquier asesoría (DIS-01). Solo en escritorio:
     en el móvil no se descarga. */
  /* Centrado detrás de la tarjeta, que queda dentro del círculo como un halo (cortado abajo parecía una mancha, DIS-13) */
  .hero--portada::after { content: ""; position: absolute; right: -2rem; top: 50%; transform: translateY(-50%); width: 32rem; height: 32rem; background: url(assets/logo-gn.png) center / contain no-repeat; opacity: .09; pointer-events: none; }
}
/* Las páginas interiores: cabecera clara y corta, para que el contenido asome
   en la primera pantalla del móvil (DIS-08). La portada lleva la oscura. */
.hero--interior { background: var(--fondo-alt); color: var(--tinta); padding: var(--e3) 0; border-bottom: 4px solid var(--marca); } /* el trazo rojo del logo, como en las tarjetas (DIS-15) */
.hero--interior .antetitulo { color: var(--marca-texto); font-size: var(--p1); }
/* Titular y entradilla más contenidos: que la respuesta asome en la primera pantalla (QA-13) */
.hero--interior h1 { font-size: clamp(var(--p3), 5vw, var(--p5)); }
.hero--interior .entradilla { font-size: var(--p1); margin-bottom: var(--e2); }
@media (max-width: 559px) { .hero--interior .acciones .boton--sec { display: none; } } /* el correo ya está en la barra de abajo */
.horario-hero { margin: var(--e1) 0 0; font-size: var(--p0); color: var(--tinta-suave); }
/* En escritorio el titular interior en dos líneas, no en tres pegadas a la izquierda (DIS-23) */
@media (min-width: 900px) { .hero--interior h1 { max-width: 32ch; } }
.hero--interior .precio-destacado { display: flex; margin-bottom: var(--e2); background: #fff; } /* la misma caja en todas las páginas (DIS-21) */
.hero--interior .entradilla { color: var(--tinta-suave); }
.hero--interior .boton--sec { color: var(--marca-honda); border-color: var(--marca-honda); }
.hero--interior a:not(.boton) { color: var(--marca-honda); }
.hero--interior .precio-destacado b { color: var(--tinta); }
.hero--interior .frases { color: var(--tinta-suave); }
.hero--interior .frases li::before { color: var(--marca-texto); }
.hero--interior .fuente { margin-top: 0; }

/* --- bloques --- */
.rejilla { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } /* min(100%,…): con 300px fijos desborda el móvil */
/* Seis tarjetas: 3 + 3 en escritorio (con auto-fit salían 4 + 2 y un hueco) */
@media (min-width: 900px) { .rejilla--3 { grid-template-columns: repeat(3, 1fr); } }
.tarjeta { display: flex; flex-direction: column; padding: var(--e3); border: 1px solid var(--borde); border-top: 4px solid var(--marca); border-radius: var(--radio); background: var(--fondo); color: var(--tinta); text-decoration: none; transition: border-color .15s; }
.tarjeta:hover { border-color: var(--marca-texto); }
.tarjeta h3 { margin-top: 0; color: var(--tinta); font-size: var(--p3); }
.tarjeta p { margin-top: 0; }
.tarjeta .mas { margin-top: auto; padding-top: var(--e1); color: var(--marca-texto); font-weight: 700; }
.tarjeta .mas::after { content: " →"; }
/* En el móvil, las seis tarjetas de la portada sin la línea «→»: toda la tarjeta es el enlace (portada más corta) */
@media (max-width: 559px) { .hero--portada ~ .seccion .rejilla--3 .tarjeta .mas { display: none; } .hero--portada ~ .seccion .tarjeta { padding: var(--e2) var(--e3); } }
/* Los tres motivos de la portada, cada uno con su dato en grande */
.motivos { display: grid; gap: var(--e3); margin: var(--e3) 0; }
@media (min-width: 900px) { .motivos { grid-template-columns: repeat(3, 1fr); } }
.motivos > div { padding-top: var(--e2); border-top: 4px solid var(--marca); }
.motivos h3 { margin: var(--e1) 0; font-size: var(--p2); }
.motivos p { margin: 0; color: var(--tinta-suave); }
/* Atajos bajo los botones de la portada: lo que no está en el menú (QA-12) */
.atajos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.2rem; }
.atajos a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.fuentes-nota { margin: var(--e3) 0 0; padding-top: var(--e2); border-top: 1px solid var(--borde); color: var(--tinta-suave); }
/* Preguntas de la portada en escritorio: titular a la izquierda, lista a la derecha (DIS-16) */
@media (min-width: 900px) {
  .dos-col { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--e5); align-items: start; max-width: none; }
  .dos-col > h2 { margin-top: 0; }
}
.dato { display: block; font-family: var(--rotulo); font-size: var(--p4); font-weight: 700; line-height: 1.1; color: var(--marca-texto); }
.preguntas details { border-bottom: 1px solid var(--borde); padding: var(--e1) 0; }
.preguntas summary { min-height: 44px; display: flex; align-items: center; gap: var(--e2); cursor: pointer; font-weight: 700; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
/* Que se vea que se abren: con display:flex el triángulo del navegador desaparece */
.preguntas summary::after { content: "+"; margin-left: auto; font: 700 1.5rem/1 var(--rotulo); color: var(--marca-texto); }
.preguntas details[open] summary::after { content: "–"; }
table { width: 100%; border-collapse: collapse; margin: var(--e2) 0; }
th, td { padding: .7rem .4rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
th { font-size: var(--p0); color: var(--tinta-suave); }
.precio { text-align: right; white-space: nowrap; }
td a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: 700; }
/* La tabla de precios no cabe en 375 px: cada fila, una tarjeta, y cada celda dice qué es */
@media (max-width: 559px) {
  .tabla-apilada thead { position: absolute; left: -9999px; }
  .tabla-apilada tr { display: block; padding: var(--e1) 0; border-bottom: 1px solid var(--borde); }
  .tabla-apilada td { display: block; padding: .15rem 0; border: 0; }
  .tabla-apilada td[data-etiqueta]::before { content: attr(data-etiqueta) ": "; font-weight: 700; color: var(--tinta); }
  .tabla-apilada td.precio { text-align: left; white-space: normal; font-weight: 700; color: var(--marca-texto); }
}
/* Pasos numerados (cambiar de asesoría, empezar un negocio) */
.pasos-lista { counter-reset: paso; list-style: none; padding: 0; display: grid; gap: var(--e2); }
.pasos-lista > li { counter-increment: paso; position: relative; padding-left: 3rem; }
.pasos-lista > li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--marca-honda); color: #fff; font-family: var(--rotulo); font-weight: 700; }
.lista-check { padding-left: 1.2rem; }
.lista-check li { margin: .3rem 0; }
.lista-check li::marker { color: var(--marca-texto); }
.oscuro { background: var(--tinta); color: #fff; }
.oscuro a, .oscuro strong { color: inherit; } /* sobre fondo oscuro, la negrita no puede ir en tinta */
.oscuro .boton { background: var(--marca-texto); border-color: var(--marca-texto); } /* blanco sobre #BE1522: 6,33 */
.oscuro .boton--claro { background: transparent; border-color: #fff; }
.cierre__titulo { font-family: var(--rotulo); font-size: var(--h2); font-weight: 700; line-height: 1.15; margin: 0 0 var(--e2); }
.fuente { font-size: var(--p0); color: var(--tinta-suave); }
.aviso { padding: var(--e2) var(--e3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-alt); }
/* Verifactu: los dos plazos, en una linea de tiempo hecha con texto (se lee y la lee un robot) */
.plazos { list-style: none; margin: var(--e3) 0; padding: 0; display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.plazos li { padding: var(--e3); border-radius: var(--radio); background: var(--tinta); color: #fff; }
.plazos a { color: #fff; } /* sobre --tinta: el rojo de los enlaces no llega a 4,5 */
.plazos .fecha { display: block; font-family: var(--rotulo); font-size: var(--p4); font-weight: 700; color: var(--marca-clara); line-height: 1.1; }
.mapa-boton { margin-top: var(--e2); }

/* --- buscador (buscar.html) --- */
.buscador label { display: block; font-weight: 700; margin-bottom: .3rem; }
.buscador__fila { display: flex; gap: var(--e1); flex-wrap: wrap; }
.buscador input, .campo { flex: 1 1 14rem; min-height: 48px; padding: .5rem .8rem; border: 1px solid var(--tinta-suave); border-radius: 6px; font: inherit; background: #fff; color: var(--tinta); }
.resultados__cuenta { font-weight: 700; }
.resultados { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e2); }
.resultados li { padding: var(--e2) 0; border-bottom: 1px solid var(--borde); }
.resultados a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--rotulo); font-size: var(--p2); font-weight: 700; }
.resultados p { margin: 0; color: var(--tinta-suave); }
.resultados__grupo, .etiqueta { display: inline-block; margin-right: .5rem; padding: .05rem .5rem; border-radius: 99px; background: var(--fondo-alt); color: var(--tinta-suave); font-size: var(--p0); font-weight: 700; vertical-align: middle; }
.indice { list-style: none; padding: 0; margin: 0 0 var(--e3); }
.indice li { padding: .4rem 0; border-bottom: 1px solid var(--borde); }
.indice a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: 700; }
.tramites a { display: inline-flex; align-items: center; min-height: 44px; }
.indice span { display: block; color: var(--tinta-suave); font-size: var(--p0); }
.indice__grupo { font-size: var(--p2); }

/* --- herramientas: preguntas con opciones grandes (portada, papeles, calendario, precios) --- */
.asistente fieldset, .herramienta fieldset { margin: 0 0 var(--e3); padding: 0; border: 0; }
.asistente legend, .herramienta legend { margin-bottom: var(--e1); font-family: var(--rotulo); font-size: var(--p2); font-weight: 700; }
.asistente label, .opciones label { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; margin: 0 .4rem .5rem 0; padding: .3rem 1rem; border: 1px solid var(--tinta-suave); border-radius: 99px; background: #fff; cursor: pointer; }
.asistente label:has(input:checked), .opciones label:has(input:checked) { border-color: var(--marca-honda); background: #FBEAEC; box-shadow: inset 0 0 0 1px var(--marca-honda); }
.asistente input, .opciones input { width: 20px; height: 20px; margin: 0; accent-color: var(--marca-honda); }
.asistente__resultado:not(:empty), .herramienta__resultado:not(:empty) { margin-top: var(--e2); padding: var(--e3); border-radius: var(--radio); border-top: 6px solid var(--marca); background: var(--fondo-alt); }
.asistente__resultado h3, .herramienta__resultado h3 { margin-top: 0; }
.asistente__datos dt { margin-top: var(--e2); font-weight: 700; color: var(--tinta-suave); font-size: var(--p0); text-transform: uppercase; letter-spacing: .05em; }
.asistente__datos dd { margin: .2rem 0 0; }
.asistente__ir { padding-left: 1.2rem; }
.asistente__ir a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.asistente__urgente { padding: .5rem .8rem; border-left: 4px solid var(--marca); background: #fff; font-weight: 700; }
.campo-linea { display: grid; gap: .3rem; margin: 0 0 var(--e2); max-width: 24rem; }
.campo-linea label { font-weight: 700; }
.cifra { display: block; font-family: var(--rotulo); font-size: var(--p4); font-weight: 700; line-height: 1.1; color: var(--marca-texto); }
.error-campo { color: var(--marca-honda); font-weight: 700; }

/* Tu calendario fiscal: una fecha por fila */
.mis-fechas { list-style: none; padding: 0; margin: 0; }
.mis-fechas li { padding: var(--e2) 0; border-bottom: 1px solid var(--borde); }
.mis-fechas__dia { display: block; font-family: var(--rotulo); font-size: var(--p2); font-weight: 700; color: var(--marca-texto); }
.mis-fechas__dia::first-letter { text-transform: uppercase; }
.mis-fechas__que { margin: .2rem 0; }
.mis-fechas a { display: inline-flex; align-items: center; min-height: 44px; }
.cierre-herramienta { margin-top: var(--e2); font-weight: 700; }

/* Ficha del glosario: quién, cuándo, qué das */
.ficha { margin: var(--e3) 0; display: grid; gap: .2rem 0; }
.ficha dt { margin-top: var(--e2); font-weight: 700; color: var(--marca-texto); font-size: var(--p0); text-transform: uppercase; letter-spacing: .05em; }
.ficha dd { margin: 0; }

/* Novedades: la última, en la portada; todas, en novedades.html */
.novedad { margin: var(--e3) 0 0; padding: var(--e2) var(--e3); border-left: 4px solid var(--marca); background: var(--fondo-alt); }
.novedad a { font-weight: 700; }
.novedad-entrada { padding-top: var(--e2); border-top: 1px solid var(--borde); margin-top: var(--e3); }
.novedad-entrada h2 { margin-top: .2rem; font-size: var(--p3); }

/* Línea de tiempo (cambiar de asesoría): un trazo rojo con un punto por paso */
.linea-tiempo { list-style: none; margin: var(--e3) 0; padding: 0 0 0 1.6rem; border-left: 4px solid var(--marca); display: grid; gap: var(--e3); }
.linea-tiempo li { position: relative; }
.linea-tiempo li::before { content: ""; position: absolute; left: calc(-1.6rem - 12px); top: .35rem; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--marca-honda); }
.linea-tiempo__cuando { display: block; color: var(--marca-texto); font-weight: 700; font-size: var(--p0); text-transform: uppercase; letter-spacing: .05em; }

/* El asistente de la portada, plegado: una línea que invita, no una pantalla entera.
   Va dentro de «¿Qué te trae por aquí?»: en su propia sección dejaba un hueco
   de dos rellenos enteros en escritorio (encargo 3.º) */
.asistente-caja { margin: 0 0 var(--e3); }
.asistente-plegable { border: 2px solid var(--marca-honda); border-radius: var(--radio); background: #fff; }
.asistente-plegable > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; min-height: 56px; padding: .7rem 1.2rem; cursor: pointer; list-style: none; font-weight: 600; }
.asistente-plegable > summary::-webkit-details-marker { display: none; }
.asistente-plegable > summary::after { content: "+"; margin-left: auto; font: 700 1.6rem/1 var(--rotulo); color: var(--marca-honda); }
.asistente-plegable[open] > summary::after { content: "–"; }
.asistente-plegable__titulo { font-family: var(--rotulo); font-size: var(--p2); font-weight: 700; }
.asistente-plegable > form, .asistente-plegable > .asistente__resultado { margin: 0 1.2rem 1.2rem; }

/* Listas con casillas (prepara tus papeles) */
.papeles { margin-top: var(--e3); }
.casillas { list-style: none; padding: 0; margin: 0; }
.casillas li { border-bottom: 1px solid var(--borde); }
.casillas label { display: flex; align-items: flex-start; gap: .7rem; min-height: 48px; padding: .6rem 0; cursor: pointer; }
.casillas input { flex: none; width: 24px; height: 24px; margin: .1rem 0 0; accent-color: var(--marca-honda); }
.casillas input:checked + span { color: var(--tinta-suave); text-decoration: line-through; text-decoration-color: var(--marca); }
.casillas .etiqueta { margin-left: auto; flex: none; }
.papeles__salida { margin-top: var(--e3); }
button.boton { cursor: pointer; font: inherit; font-family: var(--rotulo); font-size: 1.05rem; font-weight: 700; }

/* --- migas de pan --- */
.migas { background: var(--fondo-alt); font-size: .95rem; }
.migas ol { list-style: none; margin-block: 0; padding: .4rem 0 0; display: flex; flex-wrap: wrap; align-items: center; }
.migas li { display: inline-flex; align-items: center; color: var(--tinta-suave); }
.migas li + li::before { content: "›"; margin: 0 .5rem; color: var(--tinta-suave); }
.migas a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--marca-honda); } /* alineada a la izquierda con el titular (DIS-22) */
.migas + .hero--interior { padding-top: var(--e1); }

/* --- formulario (apagado hasta que GN confirme la privacidad) --- */
.formulario { display: grid; gap: var(--e1); max-width: 32rem; }
.formulario label { display: block; font-weight: 700; }
.formulario input:not([type="checkbox"]), .formulario select, .formulario textarea { width: 100%; min-height: 48px; padding: .5rem .7rem; border: 1px solid var(--tinta-suave); border-radius: 6px; font: inherit; }
.formulario__privacidad label { font-weight: 400; }
.formulario__privacidad input { width: 24px; height: 24px; margin-right: .4rem; vertical-align: middle; }
.oculto { position: absolute; left: -9999px; }

/* --- pie --- */
/* Un tono más hondo que el cierre: que no se lean como un solo bloque (DIS-17). #E9ECEF sobre #1C1F28: 14,4 */
.pie { padding: var(--e4) 0 calc(var(--e4) + var(--barra-movil)); background: #1C1F28; color: #E9ECEF; border-top: 1px solid #3A4048; }
.pie a { color: #fff; }
.pie p { margin: .2rem 0; }
.pie__logo { display: block; width: 56px; height: 56px; margin-bottom: var(--e1); }
.pie__nombre { font-family: var(--rotulo); font-size: var(--p2); }
.pie__tel a { font-weight: 700; }
.pie__rej { display: grid; gap: var(--e3); }
.pie__mapa { display: grid; gap: var(--e2) var(--e2); grid-template-columns: repeat(2, minmax(0, 1fr)); } /* dos columnas también en el móvil: en una, el pie medía casi dos pantallas */
@media (min-width: 900px) { .pie__rej { grid-template-columns: 1.1fr 3.4fr; } .pie__mapa { grid-template-columns: repeat(4, 1fr); gap: var(--e2); } }
.pie__enlaces a { line-height: 1.3; }
.pie__grupo { font-family: var(--rotulo); font-weight: 700; color: var(--sobre-oscuro); text-transform: uppercase; letter-spacing: .06em; font-size: var(--p0); }
.pie__enlaces { list-style: none; margin: 0; padding: 0; }
.pie__enlaces a { display: flex; align-items: center; min-height: 44px; }
.pie__demo { margin-top: var(--e3); padding-top: var(--e2); border-top: 1px solid #3A4048; color: var(--sobre-oscuro); font-size: var(--p0); }
.pie__legal { margin-top: var(--e3); padding-top: var(--e1); border-top: 1px solid #3A4048; color: var(--sobre-oscuro); font-size: var(--p0); }
.pie__legal a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- encargo 3.º: lo que hace que el dueño diga «sí» --- */
/* Próximo plazo de Hacienda, bajo la primera pantalla, con la cuenta atrás (plazo.js) */
.plazo-vivo { background: var(--fondo); border-bottom: 1px solid var(--borde); }
.plazo-vivo__in { display: grid; gap: var(--e2) var(--e4); padding: var(--e3) 0; align-items: center; }
@media (min-width: 900px) { .plazo-vivo__in { grid-template-columns: 1fr auto; } }
.plazo-vivo__ante { margin: 0; font-size: var(--p0); text-transform: uppercase; letter-spacing: .08em; color: var(--marca-texto); }
.plazo-vivo__fecha { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin: .3rem 0; font-family: var(--rotulo); font-size: var(--p4); font-weight: 700; line-height: 1.1; }
.plazo-vivo__cuenta, .plazo-cuenta { display: inline-block; padding: .25rem .75rem; border-radius: 99px; background: var(--marca-honda); color: #fff; font-family: var(--letra); font-size: var(--p0); font-weight: 700; line-height: 1.3; vertical-align: middle; }
.plazos .plazo-cuenta { background: #fff; color: var(--marca-honda); margin: .4rem 0; }
.plazo-vivo__que { margin: 0; color: var(--tinta-suave); max-width: 46rem; }
.plazo-vivo__ir { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.plazo-vivo__ir a { display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: .4rem 1rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-alt); color: var(--tinta); font-weight: 700; text-decoration: none; }
.plazo-vivo__ir a:hover { border-color: var(--marca-texto); }
.plazo-vivo__ir .icono { flex: none; color: var(--marca-texto); }
@media (max-width: 899px) { .plazo-vivo__ir { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .plazo-vivo__ir a { padding: .4rem .7rem; gap: .45rem; font-size: var(--p0); line-height: 1.3; } }
/* Las herramientas en la portada: losa oscura, tarjetas blancas con su icono */
.seccion--oscura { background: var(--tinta); color: #fff; --foco: #fff; }
.seccion--oscura h2 { margin-top: 0; max-width: 24ch; }
.seccion--oscura .antetitulo { color: var(--sobre-oscuro); font-size: var(--p0); text-transform: uppercase; letter-spacing: .08em; }
.seccion--oscura .entradilla { color: #E9ECEF; }
.seccion--oscura .tarjeta { --foco: var(--marca-honda); border: 0; border-top: 4px solid var(--marca); }
.seccion--oscura .tarjeta:hover { box-shadow: 0 0 0 3px var(--marca-clara); }
.seccion--oscura a:not(.tarjeta):not(.boton) { color: var(--marca-clara); }
.tarjeta .icono { width: 48px; height: 48px; padding: 10px; margin-bottom: var(--e1); border-radius: 50%; background: #FBEAEC; color: var(--marca-honda); flex: none; }
/* En el móvil, los caminos y las herramientas de la portada en dos columnas,
   solo con su nombre (y su icono): con las seis tarjetas de los caminos una
   debajo de otra la portada pasaba de 9 pantallas, y el techo del kit es 8.
   El texto sigue en la página y se ve desde 560 px (encargo 3.º). */
@media (max-width: 559px) {
  .rejilla--caminos, .herramientas-rej { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .hero--portada ~ .seccion :is(.rejilla--caminos, .herramientas-rej) .tarjeta { padding: var(--e2); }
  :is(.rejilla--caminos, .herramientas-rej) .tarjeta :is(p, .mas) { display: none; }
  :is(.rejilla--caminos, .herramientas-rej) .tarjeta h3 { margin: 0; font-size: var(--p1); }
  .herramientas-rej .icono { width: 40px; height: 40px; padding: 8px; }
}
.herramientas-mas { margin: var(--e3) 0 0; font-weight: 600; }
.herramientas-mas a { display: inline-flex; align-items: center; min-height: 44px; }
/* Opciones con su explicación debajo (calculadora de factura) */
.opciones--explicadas { display: grid; gap: .5rem; }
.opciones--explicadas label { margin: 0; border-radius: var(--radio); align-items: flex-start; padding: .6rem 1rem; }
.opciones--explicadas input { margin-top: .2rem; flex: none; }
.opciones label small { display: block; color: var(--tinta-suave); font-size: var(--p0); line-height: 1.4; }
.campo-linea--ancha { max-width: 36rem; }
/* El desplegable de grupos, con rótulos largos: que no ensanche la página en el móvil */
.campo-linea > * { min-width: 0; }
select.campo { appearance: auto; width: 100%; max-width: 100%; text-overflow: ellipsis; }
/* El resultado de las calculadoras: una cuenta que se lee de arriba abajo */
.factura-cuenta { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--e2); margin: var(--e2) 0; }
.factura-cuenta dt, .factura-cuenta dd { margin: 0; padding: .55rem 0; border-bottom: 1px solid var(--borde); }
.factura-cuenta dd { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.factura-cuenta .factura-cuenta__total { font-weight: 700; }
.factura-cuenta .factura-cuenta__banco { font-family: var(--rotulo); font-size: var(--p3); font-weight: 700; color: var(--marca-texto); border-bottom: 0; }
@media (max-width: 559px) { .factura-cuenta { grid-template-columns: 1fr; } .factura-cuenta dt { border-bottom: 0; padding-bottom: 0; } .factura-cuenta dd { text-align: left; white-space: normal; } }
.factura-explica { padding-left: 1.2rem; }
.factura-explica li { margin: .3rem 0; }
/* «¿Te afecta Verifactu?» y la suscripción al calendario */
.herramienta-caja, .suscribir-caja { margin: var(--e4) 0; padding: var(--e3); border: 1px solid var(--borde); border-top: 6px solid var(--marca); border-radius: var(--radio); }
.herramienta-caja > h2, .suscribir-caja > h2 { margin-top: 0; }
.suscribir { list-style: none; margin: var(--e2) 0; padding: 0; display: grid; gap: var(--e1); }
.suscribir li { display: grid; gap: .2rem; padding: var(--e2); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo); }
.suscribir li > a { display: flex; align-items: center; min-height: 44px; font-weight: 700; }
.suscribir li > span:not(.suscribir__botones) { color: var(--tinta-suave); font-size: var(--p0); }
.suscribir li.suscribir__principal { border-left: 4px solid var(--marca-texto); }
.suscribir li.es-tuyo { background: #FBEAEC; border-color: var(--marca-honda); }
.suscribir li.es-tuyo > a::after { content: " · el tuyo"; color: var(--marca-honda); }
.suscribir__botones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.suscribir__botones .boton { min-height: 44px; font-size: .95rem; }
.suscribir__tuyo { font-weight: 700; }
.suscribir__ayuda summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--marca-honda); }

/* --- encargo 4.º: «¿cuánto aparto?» y «Tu espacio» (la app) --- */
.afinar { margin: 0 0 var(--e2); }
.afinar > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--marca-honda); }
.campo-linea .fuente { margin: 0; }
.seccion--corta { padding: var(--e3) 0 0; }
.espacio-promo { display: flex; align-items: center; gap: var(--e2); padding: var(--e3); border: 2px solid var(--marca-honda); border-radius: var(--radio); background: #FBEAEC; color: var(--tinta); text-decoration: none; }
.espacio-promo:hover { background: #F8DDE0; }
.espacio-promo b { display: block; font-family: var(--rotulo); font-size: var(--p3); line-height: 1.2; margin-bottom: .2rem; color: var(--marca-honda); }
.espacio-promo .icono { width: 56px; height: 56px; padding: 12px; border-radius: 50%; background: #fff; color: var(--marca-honda); flex: none; }
.espacio__resumen { font-weight: 600; }
.enlace-boton { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--marca-honda); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.espacio__bloques { display: grid; gap: var(--e2); margin: var(--e2) 0 var(--e4); }
@media (min-width: 900px) { .espacio__bloques { grid-template-columns: 1.4fr 1fr; } .espacio__bloques > :first-child { grid-row: span 2; } }
.espacio-bloque { padding: var(--e3); border: 1px solid var(--borde); border-top: 6px solid var(--marca); border-radius: var(--radio); background: var(--fondo); }
.espacio-bloque > h2 { margin: 0 0 var(--e1); font-family: var(--letra); font-size: var(--p0); text-transform: uppercase; letter-spacing: .08em; color: var(--marca-texto); }
.espacio__fecha { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin: 0 0 var(--e1); font-family: var(--rotulo); font-size: var(--p3); font-weight: 700; line-height: 1.15; }
.espacio__fecha::first-letter { text-transform: uppercase; }
.espacio__modelos { padding-left: 1.2rem; margin: 0 0 var(--e1); }
.espacio__modelos li { margin: .3rem 0; }
.espacio__cifra { margin: 0; font-family: var(--rotulo); font-size: var(--p4); font-weight: 700; line-height: 1.1; color: var(--marca-texto); }
.espacio__barra { width: 100%; height: 14px; margin: var(--e1) 0; accent-color: var(--marca-honda); }
.espacio__ir { display: flex; flex-wrap: wrap; gap: 0 1.2rem; margin: var(--e1) 0 0; }
.espacio__ir a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.espacio__herramientas { list-style: none; margin: var(--e2) 0; padding: 0; display: grid; gap: var(--e1); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.espacio__herramientas a { display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: .4rem .8rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-alt); color: var(--tinta); font-weight: 700; text-decoration: none; }
.espacio__herramientas a:hover { border-color: var(--marca-texto); }
.espacio__herramientas .icono { flex: none; color: var(--marca-texto); }
.instalar-ios { margin: var(--e1) 0 0; color: var(--tinta-suave); }

/* --- botón fijo de llamada, solo en el móvil --- */
/* La llamada ocupa dos tercios y lleva el número; el correo, un tercio y en segundo plano */
.barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; background: var(--marca-honda); box-shadow: 0 -2px 10px rgb(0 0 0 / .15); }
.barra-movil a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: var(--barra-movil); color: #fff; font-weight: 700; text-decoration: none; outline-offset: -4px; }
.barra-movil .barra-movil__llamar { flex: 1 1 auto; }
/* Tres botones en 360 px sin partir el número: los secundarios, a su medida */
.barra-movil a { white-space: nowrap; font-size: clamp(.85rem, 4.1vw, 1rem); }
.barra-movil .barra-movil__sec { flex: 0 0 auto; padding: 0 .75rem; }
.barra-movil .barra-movil__sec + .barra-movil__sec { border-left: 1px solid #3A4048; }
.barra-movil .barra-movil__sec { background: var(--tinta); font-weight: 600; }
/* Mientras el cartel de cookies (cookies-kit) está abierto, la barra le quedaría debajo. */
.cookies-abierto .barra-movil { display: none; }

@media (min-width: 900px) {
  .barra-movil { display: none; }
  .barra .solo-escritorio { display: inline-flex; }
  .seccion { padding: var(--e5) 0; }
  .pie { padding-bottom: var(--e4); }
  .hero { padding: var(--e5) 0; }
  .hero--interior { padding: var(--e4) 0; }
}
/* Siete enlaces + la marca + el botón de llamar no caben hasta ~1240 px (a 1180
   se partían en dos líneas, QA vuelta 3): por debajo, el menú plegable (en
   tableta, el botón de llamar sigue arriba). */
@media (min-width: 1240px) {
  .nav-escritorio { display: flex; }
  .nav-movil { display: none; }
  /* A 1280 px faltaban ~100 px y la marca se montaba sobre «Servicios»
     (encargo 3.º): la marca sin encoger, el menú más junto y un punto más
     pequeño, y la lupa sin su palabra (la lleva oculta para el lector de
     pantalla). Así cabe con el mismo ancho que el texto de debajo. */
  .barra__in { gap: .75rem; }
  .barra__marca { flex-shrink: 0; }
  .nav-escritorio { gap: 0; }
  .nav-escritorio a { padding: 0 .4rem; font-size: 1.05rem; }
  .barra__buscar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Al imprimir no salen los fondos: el texto blanco quedaría invisible (las fechas de Verifactu) */
@media print {
  .barra, .barra-movil, .nav-movil, .salto, .hero--portada::after { display: none !important; }
  /* Las herramientas se imprimen sin sus mandos: solo la lista o el resultado */
  .herramienta, .papeles__salida .acciones, .papeles__salida .fuente { display: none !important; }
  body:has(.herramienta) :is(.migas, .hero .acciones, .cierre, .pie__mapa, .preguntas, .seccion--alt) { display: none !important; }
  * { animation: none !important; opacity: 1 !important; background: transparent !important; color: #000 !important; box-shadow: none !important; }
  .boton { border: 2px solid #000; }
  .pasos-lista > li::before { background: transparent !important; color: #000 !important; border: 2px solid #000; } /* * no alcanza a ::before */
  a { text-decoration: underline; }
}