@import url("tokens.css");

/* ============================================================
   1. Base
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: var(--t-cuerpo);
  line-height: var(--alto-cuerpo);
  letter-spacing: var(--ancho-letra-cuerpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 400;
  color: var(--tinta);
  text-wrap: balance;
}

h1 { font-size: var(--t-titulo); line-height: var(--alto-titulo); letter-spacing: var(--ancho-letra-titulo); }
h2 { font-size: var(--t-seccion); line-height: 1.15; letter-spacing: var(--ancho-letra-seccion); }
h3 { font-size: var(--t-bloque); line-height: 1.25; letter-spacing: -0.014em; }
h4 { font-size: var(--t-guia); line-height: 1.35; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }

strong { font-weight: 600; }

hr {
  border: 0;
  border-top: 1px solid var(--trazo);
  margin: var(--e6) 0;
}

:focus-visible {
  outline: 2px solid var(--cobre);
  outline-offset: 3px;
  border-radius: 2px;
}
.oscuro :focus-visible { outline-color: var(--cobre-clara); }

::selection { background: var(--cobre); color: #fff; }

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--tinta);
  color: #fff;
  padding: var(--e3) var(--e5);
  border-radius: 0 0 var(--r-media) 0;
}
.salto-contenido:focus { left: 0; }

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

/* ============================================================
   2. Estructura
   ============================================================ */

.marco {
  width: 100%;
  max-width: var(--ancho-pagina);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.marco--angosto { max-width: 820px; }

.seccion { padding-block: var(--aire-seccion); }
.seccion--bruma { background: var(--bruma); }
.seccion--filete { border-top: 1px solid var(--trazo); }
.seccion--ajustada { padding-block: calc(var(--aire-seccion) * 0.6); }

.texto-ancho { max-width: var(--ancho-texto); }

.guia {
  font-size: var(--t-guia);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--humo);
  max-width: 58ch;
}

.encabezado-seccion { margin-bottom: var(--e7); }

/* la frase de la home, que en el original ya era un encabezado */
.cita-home {
  max-width: 24ch;
  text-wrap: pretty;
}
@media (min-width: 900px) { .cita-home { max-width: 30ch; } }
.encabezado-seccion .guia { margin-top: var(--e4); }

/* ============================================================
   3. Cabecera: pastilla flotante
   ============================================================ */

.cabecera {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  padding-top: var(--e5);
}
.cabecera--fija { position: fixed; }

.pastilla {
  display: flex;
  align-items: center;
  gap: var(--e5);
  background: var(--tinta);
  border-radius: var(--r-tarjeta);
  padding: 11px 12px 11px 20px;
  transition: background var(--paso);
}

.marca {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.marca img { height: 34px; width: auto; }

.nav-escritorio { display: none; }

.nav-escritorio ul {
  display: flex;
  align-items: center;
  gap: var(--e5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-escritorio li { margin: 0; }

.nav-escritorio a {
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  font-size: var(--t-menor);
  letter-spacing: -0.008em;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--paso), border-color var(--paso);
}
.nav-escritorio a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.4); }
.nav-escritorio a[aria-current="page"] { color: #fff; border-bottom-color: var(--cobre-clara); }

.cabecera-acciones { margin-left: auto; display: flex; align-items: center; gap: var(--e2); }

.menu-boton {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-chico);
  cursor: pointer;
}
.menu-boton span {
  display: block;
  height: 1.5px;
  background: #fff;
  transition: transform var(--paso), opacity var(--paso);
}
.menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-movil {
  display: none;
  background: var(--tinta);
  border-radius: var(--r-tarjeta);
  margin-top: var(--e2);
  padding: var(--e4) var(--e5) var(--e5);
}
.nav-movil.abierto { display: block; }

.nav-movil ul { list-style: none; margin: 0; padding: 0; }
.nav-movil li { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.nav-movil li:last-child { border-bottom: 0; }
.nav-movil a {
  display: block;
  padding: var(--e3) 0;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: var(--t-guia);
  letter-spacing: -0.012em;
}
.nav-movil a[aria-current="page"] { color: #fff; }
.nav-movil .boton { margin-top: var(--e4); width: 100%; justify-content: center; }

@media (max-width: 420px) {
  .pastilla { padding: 10px 10px 10px 14px; gap: var(--e3); }
  .marca img { height: 28px; }
  .cabecera-acciones .boton { padding: 11px 16px; font-size: var(--t-nota); }
}

@media (min-width: 1040px) {
  .nav-escritorio { display: block; }
  .menu-boton { display: none; }
  .nav-movil { display: none !important; }
}

/* ============================================================
   4. Botones
   ============================================================ */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  font-family: inherit;
  font-size: var(--t-menor);
  font-weight: 600;
  letter-spacing: -0.009em;
  line-height: 1.2;
  padding: 13px 22px;
  border-radius: var(--r-pastilla);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--paso), color var(--paso), border-color var(--paso);
}

.boton--cobre { background: var(--cobre); color: #fff; }
.boton--cobre:hover { background: var(--cobre-honda); }

.boton--tinta { background: var(--tinta); color: #fff; }
.boton--tinta:hover { background: var(--tinta-honda); }

.boton--linea { background: transparent; color: var(--tinta); border-color: var(--trazo); }
.boton--linea:hover { border-color: var(--tinta); }

.boton--linea-clara {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}
.boton--linea-clara:hover { border-color: #fff; }

.boton--grande { font-size: var(--t-cuerpo); padding: 15px 28px; }

.botonera { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* enlaces de texto dentro de contenido */
.enlace {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--trazo);
  transition: text-decoration-color var(--paso);
}
.enlace:hover { text-decoration-color: var(--cobre); }

/* ============================================================
   5. Hero
   ============================================================ */

.oscuro { background: var(--tinta-honda); color: #fff; }
.oscuro h1, .oscuro h2, .oscuro h3, .oscuro h4 { color: #fff; }

.hero {
  background: var(--tinta-honda);
  color: #fff;
  padding-top: clamp(140px, 17vw, 200px);
  padding-bottom: clamp(72px, 9vw, 120px);
}

.hero__titulo {
  font-size: var(--t-display);
  line-height: var(--alto-display);
  letter-spacing: var(--ancho-letra-display);
  max-width: 17ch;
  color: #fff;
}

.hero__guia {
  margin-top: var(--e5);
  font-size: var(--t-guia);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: rgba(255, 255, 255, 0.72);
  max-width: 48ch;
}

.hero__texto {
  margin-top: var(--e4);
  color: rgba(255, 255, 255, 0.62);
  max-width: 56ch;
}
.hero__texto strong { color: rgba(255, 255, 255, 0.92); font-weight: 500; }

.hero .botonera { margin-top: var(--e6); }

/* tira de financiación dentro del hero */
.tira-cuotas {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--e8);
  border: 1px solid var(--tinta-suave);
  border-radius: var(--r-tarjeta);
  overflow: hidden;
}
.tira-cuotas__celda {
  padding: var(--e5);
  border-bottom: 1px solid var(--tinta-suave);
}
.tira-cuotas__celda:last-child { border-bottom: 0; }

.tira-cuotas__plazo {
  font-size: var(--t-menor);
  color: rgba(255, 255, 255, 0.6);
}
.tira-cuotas__cuota {
  display: block;
  margin-top: var(--e2);
  font-size: 1.875rem;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: #fff;
}
.tira-cuotas__dato {
  margin-top: var(--e1);
  font-size: var(--t-nota);
  color: rgba(255, 255, 255, 0.55);
}
.tira-cuotas__pie {
  grid-column: 1 / -1;
  padding: var(--e4) var(--e5);
  border-top: 1px solid var(--tinta-suave);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--t-nota);
  color: rgba(255, 255, 255, 0.6);
}
.tira-cuotas__pie a { color: rgba(255, 255, 255, 0.85); }

@media (min-width: 720px) {
  .tira-cuotas { grid-template-columns: repeat(3, 1fr); }
  .tira-cuotas__celda { border-bottom: 0; border-right: 1px solid var(--tinta-suave); }
  .tira-cuotas__celda:last-of-type { border-right: 0; }
}

/* hero con vídeo de fondo */
.hero--video {
  position: relative;
  overflow: hidden;
  min-height: 78vh;
  display: flex;
  align-items: center;
}
.hero--video > .marco { position: relative; width: 100%; }

.hero__media {
  position: absolute;
  inset: 0;
  background: var(--tinta-honda) url("/assets/video/hero-poster.webp") center / cover no-repeat;
}
/* Los fotogramas se pintan en el lienzo. El <video> queda de 1 px: así ningún
   navegador lo trata como «el vídeo de la página» y no le encima sus propios
   controles — el botón de «pop out» de Opera, el de imagen en imagen, etc. */
.hero__lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero__pelicula {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0.01;
  pointer-events: none;
}

/* velo: más denso donde va el texto, para que el blanco siga legible */
.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(97deg,
      rgba(23, 28, 42, 0.96) 0%,
      rgba(23, 28, 42, 0.92) 28%,
      rgba(23, 28, 42, 0.74) 56%,
      rgba(23, 28, 42, 0.48) 100%),
    linear-gradient(180deg, rgba(23, 28, 42, 0.55) 0%, rgba(23, 28, 42, 0.3) 45%, rgba(23, 28, 42, 0.6) 100%);
}
@media (max-width: 860px) {
  .hero--video { min-height: 0; }
  /* El velo de móvil era plano y casi opaco (0,93–0,88–0,94): enterraba el vídeo entero.
     Ahora va en diagonal, de la esquina inferior izquierda —donde están los botones y el
     texto— a la superior derecha, que es justo donde cae el ojo en el plano corto. */
  .hero__velo {
    background: linear-gradient(118deg,
      rgba(23, 28, 42, 0.93) 0%,
      rgba(23, 28, 42, 0.88) 26%,
      rgba(23, 28, 42, 0.72) 52%,
      rgba(23, 28, 42, 0.46) 78%,
      rgba(23, 28, 42, 0.34) 100%);
  }
}

/* quien pide menos movimiento ve el fotograma fijo */
@media (prefers-reduced-motion: reduce) {
  .hero__pelicula, .hero__lienzo { display: none; }
}

/* hero compacto de páginas internas */
.hero-interno {
  background: var(--tinta-honda);
  color: #fff;
  padding-top: clamp(120px, 15vw, 164px);
  padding-bottom: clamp(44px, 5vw, 64px);
}
.hero-interno h1 {
  color: #fff;
  font-size: var(--t-titulo);
  letter-spacing: var(--ancho-letra-titulo);
  max-width: 20ch;
}
.hero-interno .hero__guia { margin-top: var(--e4); }

.miga {
  font-size: var(--t-nota);
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--e4);
}
.miga a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.miga a:hover { text-decoration: underline; }
.miga span { padding-inline: 6px; }

/* ============================================================
   6. Pasos numerados (procesos reales)
   ============================================================ */

.pasos {
  display: grid;
  gap: var(--e6);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  max-width: 980px;
  counter-reset: paso;
}
@media (min-width: 760px) { .pasos { gap: var(--e7); } }

.paso { counter-increment: paso; }
.paso__num {
  display: block;
  font-size: var(--t-nota);
  color: var(--humo);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--trazo);
  margin-bottom: var(--e4);
}
.paso__num::before { content: counter(paso, decimal-leading-zero); }
.paso h3 { margin-bottom: var(--e3); }
.paso p { color: var(--humo); font-size: var(--t-menor); }

/* lista de pasos larga (metodología) */
.pasos-largos { counter-reset: hito; list-style: none; padding: 0; margin: 0; }
.pasos-largos > li {
  counter-increment: hito;
  display: grid;
  gap: var(--e3) var(--e6);
  grid-template-columns: 1fr;
  padding-block: var(--e6);
  border-top: 1px solid var(--trazo);
  margin: 0;
}
.pasos-largos > li:last-child { border-bottom: 1px solid var(--trazo); }
.pasos-largos__num {
  font-size: var(--t-nota);
  color: var(--humo);
}
.pasos-largos__num::before { content: counter(hito, decimal-leading-zero); }
.pasos-largos h3 { margin-bottom: var(--e3); }
.pasos-largos__cuerpo { color: var(--humo); }
.pasos-largos__cuerpo p { font-size: var(--t-cuerpo); }
@media (min-width: 820px) {
  .pasos-largos > li { grid-template-columns: 90px minmax(0, 1fr); }
  .pasos-largos__num { padding-top: 6px; }
}

/* ============================================================
   7. Servicios — imagen arriba, lista debajo, sin caja
   ============================================================ */

.grupo-servicios + .grupo-servicios { margin-top: var(--aire-seccion); }
.grupo-servicios > h2 { margin-bottom: var(--e7); }

.servicios {
  display: grid;
  gap: var(--e8) var(--e6);
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .servicios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .servicios { grid-template-columns: repeat(3, 1fr); } }

.servicio__foto {
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--bruma);
  aspect-ratio: 16 / 10;
  margin-bottom: var(--e5);
}
.servicio__foto img { width: 100%; height: 100%; object-fit: cover; }
.servicio h3 { margin-bottom: var(--e3); }
.servicio__resumen { color: var(--humo); font-size: var(--t-menor); }
.servicio ul {
  margin: var(--e4) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--trazo);
}
.servicio li {
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--trazo);
  font-size: var(--t-menor);
  margin: 0;
}
.servicio .boton { margin-top: var(--e5); }

/* ============================================================
   8. Planes — tarjeta con borde y tres paquetes
   ============================================================ */

.planes {
  display: grid;
  gap: var(--e6);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .planes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .planes { grid-template-columns: repeat(3, 1fr); } }

.plan {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--trazo);
  border-radius: var(--r-tarjeta);
  background: #fff;
  overflow: hidden;
}
.plan__foto { aspect-ratio: 16 / 10; background: var(--bruma); flex: 0 0 auto; min-height: 0; overflow: hidden; }
.plan__foto img { width: 100%; height: 100%; object-fit: cover; }
.plan__cuerpo { padding: var(--e5); display: flex; flex-direction: column; flex: 1; }
.plan h3 { margin-bottom: var(--e3); }
.plan__texto { color: var(--humo); font-size: var(--t-menor); flex: 1; }
.plan__paquetes { margin-top: var(--e5); border-top: 1px solid var(--trazo); }
.plan__paquete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--trazo);
  text-decoration: none;
  font-size: var(--t-menor);
  transition: color var(--paso);
}
.plan__paquete:last-child { border-bottom: 0; }
.plan__paquete:hover { color: var(--cobre); }
.plan__paquete em {
  font-style: normal;
  font-size: var(--t-nota);
  color: var(--humo);
  flex-shrink: 0;
}
.plan__paquete:hover em { color: var(--cobre); }

/* ============================================================
   8b. Planes de acceso (Paciente / Profesional)
   ============================================================ */

.planes-acceso {
  display: grid;
  gap: var(--e6);
  grid-template-columns: 1fr;
  max-width: 900px;
  margin-inline: auto;
}
@media (min-width: 760px) { .planes-acceso { grid-template-columns: repeat(2, 1fr); } }

.plan-acceso {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--trazo);
  border-radius: var(--r-tarjeta);
  background: #fff;
  padding: var(--e6);
}
.plan-acceso__tag {
  font-size: var(--t-menor);
  color: var(--humo);
  margin-bottom: var(--e3);
}
.plan-acceso h2 {
  font-size: var(--t-bloque);
  letter-spacing: -0.014em;
  margin-bottom: var(--e4);
}
.plan-acceso__precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
}
.plan-acceso__precio strong {
  font-size: 2.75rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
}
.plan-acceso__precio span { font-size: var(--t-menor); color: var(--humo); }
.plan-acceso__rebaja {
  margin-left: var(--e2);
  font-size: var(--t-guia);
  color: var(--cobre);
}
.plan-acceso__nota {
  margin: var(--e2) 0 0;
  font-size: var(--t-nota);
  color: var(--humo);
}
.plan-acceso__items {
  list-style: none;
  margin: var(--e6) 0 0;
  padding: 0;
  border-top: 1px solid var(--trazo);
  flex: 1;
}
.plan-acceso__items li {
  position: relative;
  margin: 0;
  padding: var(--e3) 0 var(--e3) 22px;
  border-bottom: 1px solid var(--trazo);
  font-size: var(--t-menor);
}
.plan-acceso__items li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 20px;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--cobre);
  border-bottom: 1.5px solid var(--cobre);
  transform: rotate(-45deg);
}
.plan-acceso .boton { margin-top: var(--e6); justify-content: center; }

.plan-alcance {
  margin-top: var(--e8);
  max-width: 900px;
  margin-inline: auto;
  color: var(--humo);
  font-size: var(--t-menor);
  padding-top: var(--e5);
  border-top: 1px solid var(--trazo);
}

/* ============================================================
   8c. Documentos legales (lectura larga con índice)
   ============================================================ */

.legal-ficha {
  display: grid;
  gap: var(--e5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding-bottom: var(--e6);
  border-bottom: 1px solid var(--trazo);
}
@media (min-width: 760px) { .legal-ficha { grid-template-columns: repeat(4, 1fr); } }
.legal-ficha dt { font-size: var(--t-nota); color: var(--humo); margin-bottom: var(--e2); }
.legal-ficha dd { margin: 0; font-size: var(--t-menor); }

.legal {
  display: grid;
  gap: var(--e7);
  grid-template-columns: 1fr;
  padding-top: var(--e7);
}
@media (min-width: 980px) {
  .legal { grid-template-columns: 250px minmax(0, 1fr); gap: var(--e9); }
}

.legal-indice__caja {
  border: 1px solid var(--trazo);
  border-radius: var(--r-media);
  background: #fff;
  padding: var(--e4) var(--e5);
}
.legal-indice summary {
  cursor: pointer;
  font-size: var(--t-menor);
  font-weight: 600;
  padding: var(--e2) 0;
  list-style: none;
}
.legal-indice summary::-webkit-details-marker { display: none; }
.legal-indice summary::after {
  content: "+";
  float: right;
  color: var(--cobre);
  font-weight: 400;
}
.legal-indice__caja[open] summary::after { content: "–"; }
.legal-indice ol {
  list-style: none;
  margin: var(--e4) 0 var(--e2);
  padding: 0;
  counter-reset: none;
}
.legal-indice li { margin: 0; }
.legal-indice a {
  display: block;
  padding: 7px 0;
  font-size: var(--t-nota);
  line-height: 1.4;
  color: var(--humo);
  text-decoration: none;
  border-bottom: 1px solid var(--trazo);
}
.legal-indice li:last-child a { border-bottom: 0; }
.legal-indice a span { color: var(--ash, var(--humo)); }
.legal-indice a:hover { color: var(--tinta); }

@media (min-width: 980px) {
  .legal-indice { position: sticky; top: 104px; align-self: start; }
  .legal-indice summary { display: none; }
  .legal-indice__caja { border: 0; padding: 0; background: none; }
  .legal-indice ol { margin-top: 0; }
}

.legal-cuerpo { max-width: 68ch; }

.legal-intro { font-size: var(--t-guia); line-height: 1.55; letter-spacing: -0.012em; }

.legal-aviso {
  margin-top: var(--e5);
  padding: var(--e5);
  border: 1px solid var(--trazo);
  border-left: 3px solid var(--cobre);
  border-radius: var(--r-chico);
  background: var(--bruma);
  font-size: var(--t-menor);
}

.legal-seccion { scroll-margin-top: 110px; }
.legal-seccion + .legal-seccion { margin-top: var(--e8); }
.legal-seccion:first-of-type { margin-top: var(--e8); }
.legal-cuerpo .legal-seccion h2 {
  margin-top: 0;
  margin-bottom: var(--e4);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--trazo);
  font-size: var(--t-seccion);
}
.legal-num { color: var(--humo); margin-right: var(--e3); }

.legal-destacado {
  padding: var(--e4) 0 0;
  border-top: 1px solid var(--trazo);
  margin-top: var(--e4);
}

.legal-nota {
  margin-top: var(--e8);
  padding-top: var(--e5);
  border-top: 1px solid var(--trazo);
  font-size: var(--t-nota);
  line-height: 1.6;
  color: var(--humo);
}

/* tarjetas de ventajas (página para profesionales) */
.ventajas {
  display: grid;
  gap: var(--e6);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .ventajas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ventajas { grid-template-columns: repeat(3, 1fr); } }

.ventaja {
  background: #fff;
  border: 1px solid var(--trazo);
  border-radius: var(--r-tarjeta);
  padding: var(--e5);
}
.ventaja h3 {
  font-size: var(--t-guia);
  letter-spacing: -0.012em;
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--trazo);
  margin-bottom: var(--e3);
}
.ventaja ul { list-style: none; margin: 0; padding: 0; }
.ventaja li {
  position: relative;
  padding-left: 20px;
  margin-bottom: var(--e3);
  font-size: var(--t-menor);
  color: var(--humo);
}
.ventaja li:last-child { margin-bottom: 0; }
.ventaja li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 8px; height: 4px;
  border-left: 1.5px solid var(--cobre);
  border-bottom: 1.5px solid var(--cobre);
  transform: rotate(-45deg);
}

/* ============================================================
   9. Financiación — tarjetas de cuota y tabla de condiciones
   ============================================================ */

.condiciones {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-menor);
}
.condiciones th, .condiciones td {
  text-align: left;
  padding: var(--e4) 0;
  border-bottom: 1px solid var(--trazo);
  vertical-align: top;
}
.condiciones th { font-weight: 500; width: 46%; padding-right: var(--e5); }
.condiciones td { color: var(--humo); }
.condiciones tr:first-child th, .condiciones tr:first-child td { border-top: 1px solid var(--trazo); }

.cuotas {
  display: grid;
  gap: var(--e5);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .cuotas { grid-template-columns: repeat(3, 1fr); } }

.cuota {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--trazo);
  border-radius: var(--r-tarjeta);
  background: #fff;
  overflow: hidden;
}
.cuota__foto { aspect-ratio: 3 / 2; background: var(--bruma); flex: 0 0 auto; min-height: 0; overflow: hidden; }
.cuota__foto img { width: 100%; height: 100%; object-fit: cover; }
.cuota__cuerpo { padding: var(--e5); display: flex; flex-direction: column; flex: 1; }
.cuota h3 { margin-bottom: var(--e4); }
.cuota__cifra {
  font-size: 2.25rem;
  line-height: 1.05;
  letter-spacing: -0.026em;
}
.cuota__cifra span { font-size: var(--t-menor); color: var(--humo); letter-spacing: -0.006em; }
.cuota dl {
  margin: var(--e5) 0 0;
  border-top: 1px solid var(--trazo);
  font-size: var(--t-menor);
}
.cuota dl div {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--trazo);
}
.cuota dt { color: var(--humo); margin: 0; }
.cuota dd { margin: 0; }
.cuota .boton { margin-top: var(--e5); }

.nota-legal {
  font-size: var(--t-nota);
  line-height: 1.6;
  color: var(--humo);
  max-width: 78ch;
}
.nota-legal + .nota-legal { margin-top: var(--e4); }
.nota-legal a { color: var(--humo); }

/* ============================================================
   10. Especialistas — retrato y frase, sin caja
   ============================================================ */

.fichas {
  display: grid;
  gap: var(--e8) var(--e6);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .fichas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .fichas { grid-template-columns: repeat(3, 1fr); } }

.ficha__foto {
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--bruma);
  aspect-ratio: 5 / 6;
  margin-bottom: var(--e5);
}
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha h3 { margin-bottom: var(--e2); }
.ficha__rol {
  font-size: var(--t-menor);
  color: var(--humo);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--trazo);
  margin-bottom: var(--e4);
}
.ficha__frase { font-size: var(--t-menor); }

/* ============================================================
   11. Casos de éxito — la cita primero
   ============================================================ */

.casos {
  display: grid;
  gap: var(--e6);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .casos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .casos { grid-template-columns: repeat(3, 1fr); } }

.caso {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--trazo);
  border-radius: var(--r-tarjeta);
  padding: var(--e5);
}
.caso blockquote {
  margin: 0 0 var(--e5);
  font-size: var(--t-guia);
  line-height: 1.45;
  letter-spacing: -0.014em;
  flex: 1;
}
.caso__pie {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding-top: var(--e5);
  border-top: 1px solid var(--trazo);
}
.caso__retrato {
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bruma);
  flex-shrink: 0;
}
.caso__retrato img { width: 100%; height: 100%; object-fit: cover; }
.caso__nombre { font-size: var(--t-menor); font-weight: 500; }
.caso__dato { font-size: var(--t-nota); color: var(--humo); }

/* ============================================================
   12. Preguntas — acordeón
   ============================================================ */

.tema-faq + .tema-faq { margin-top: var(--e8); }
.tema-faq > h2 { margin-bottom: var(--e5); }

.acordeon { border-top: 1px solid var(--trazo); }

.acordeon__item { border-bottom: 1px solid var(--trazo); }

.acordeon__boton {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e5);
  width: 100%;
  background: none;
  border: 0;
  padding: var(--e5) 0;
  text-align: left;
  font-family: inherit;
  font-size: var(--t-guia);
  line-height: 1.4;
  letter-spacing: -0.014em;
  color: var(--tinta);
  cursor: pointer;
}
.acordeon__signo {
  position: relative;
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 6px;
}
.acordeon__signo::before,
.acordeon__signo::after {
  content: "";
  position: absolute;
  background: var(--cobre);
  transition: transform var(--paso), opacity var(--paso);
}
.acordeon__signo::before { inset: 7.5px 0 auto; height: 1.5px; }
.acordeon__signo::after { inset: 0 7.5px; width: 1.5px; }
.acordeon__boton[aria-expanded="true"] .acordeon__signo::after { transform: scaleY(0); }

.acordeon__panel { display: none; padding-bottom: var(--e5); }
.acordeon__panel.abierto { display: block; }
.acordeon__panel p { color: var(--humo); max-width: var(--ancho-texto); }

/* ============================================================
   13. Blog — lista tipográfica con filtro
   ============================================================ */

.filtro-blog {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-bottom: var(--e7);
}
.filtro-blog button {
  font-family: inherit;
  font-size: var(--t-menor);
  padding: 9px 16px;
  border: 1px solid var(--trazo);
  border-radius: var(--r-pastilla);
  background: transparent;
  color: var(--humo);
  cursor: pointer;
  transition: border-color var(--paso), color var(--paso), background var(--paso);
}
.filtro-blog button:hover { border-color: var(--tinta); color: var(--tinta); }
.filtro-blog button[aria-pressed="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
}

.buscador-blog {
  position: relative;
  margin-bottom: var(--e6);
  max-width: 420px;
  margin-inline: auto;
}
.buscador-blog input {
  width: 100%;
  font-family: inherit;
  font-size: var(--t-cuerpo);
  padding: 13px 18px;
  border: 1px solid var(--trazo);
  border-radius: var(--r-pastilla);
  background: #fff;
  color: var(--tinta);
}
.buscador-blog input::placeholder { color: var(--humo); }

.lista-articulos {
  border-top: 1px solid var(--trazo);
  max-width: 860px;
  margin-inline: auto;
}

.articulo-item { border-bottom: 1px solid var(--trazo); }
.articulo-item[hidden] { display: none; }

.articulo-item a {
  display: grid;
  gap: var(--e2) var(--e6);
  grid-template-columns: 1fr;
  padding-block: var(--e6);
  text-decoration: none;
  transition: opacity var(--paso);
}
.articulo-item a:hover h3 { text-decoration: underline; text-underline-offset: 4px; }

.articulo-item__fecha {
  font-size: var(--t-nota);
  color: var(--humo);
}
.articulo-item h3 { margin-bottom: var(--e3); max-width: 34ch; }
.articulo-item p { color: var(--humo); font-size: var(--t-menor); max-width: 62ch; margin: 0; }

@media (min-width: 860px) {
  .articulo-item a { grid-template-columns: 168px minmax(0, 1fr); }
  .articulo-item__fecha { padding-top: 7px; }
}

.sin-resultados { padding-block: var(--e7); color: var(--humo); text-align: center; }
.sin-resultados[hidden] { display: none; }

/* ============================================================
   14. Artículo y páginas de texto
   ============================================================ */

.prosa { max-width: var(--ancho-texto); overflow-wrap: break-word; }

/* el cuerpo de un artículo va en columna centrada, para leer cómodo */
.prosa--articulo {
  margin-inline: auto;
  max-width: 68ch;
  font-size: var(--t-body-articulo, 1.125rem);
  line-height: 1.75;
}
.prosa--articulo p { margin-bottom: 1.15em; }
.prosa--articulo h2 { margin-top: var(--e9); }
.prosa--articulo h3 { margin-top: var(--e8); }
.prosa--articulo h4 { margin-top: var(--e6); }
.prosa--articulo ul, .prosa--articulo ol { margin-bottom: 1.15em; }
.prosa--articulo li { margin-bottom: 0.5em; }
.prosa--articulo hr { margin: var(--e8) 0; }
.prosa a { overflow-wrap: anywhere; }
.prosa > *:first-child { margin-top: 0; }

.prosa h2 {
  font-size: var(--t-seccion);
  margin-top: var(--e8);
  margin-bottom: var(--e4);
}
.prosa h3 {
  font-size: var(--t-bloque);
  margin-top: var(--e7);
  margin-bottom: var(--e3);
}
.prosa h4 {
  font-size: var(--t-guia);
  font-weight: 600;
  letter-spacing: -0.008em;
  margin-top: var(--e5);
  margin-bottom: var(--e2);
}
.prosa h5, .prosa h6 { font-size: var(--t-cuerpo); font-weight: 600; margin-top: var(--e5); }
.prosa p { color: var(--tinta); }
.prosa ul, .prosa ol { color: var(--tinta); padding-left: 1.15em; }
.prosa li p { margin-bottom: 0.3em; }
.prosa li > p:only-child { margin: 0; }
.prosa hr { margin: var(--e6) 0; }
.prosa a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.prosa table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-menor);
  margin-bottom: var(--e5);
  display: block;
  overflow-x: auto;
}
.prosa th, .prosa td {
  border: 1px solid var(--trazo);
  padding: var(--e3);
  text-align: left;
  vertical-align: top;
}
.prosa th { font-weight: 600; background: var(--bruma); }

.meta-articulo {
  font-size: var(--t-nota);
  color: rgba(255, 255, 255, 0.55);
  margin-top: var(--e5);
}

.pie-articulo {
  max-width: 68ch;
  margin-inline: auto;
  margin-top: var(--e8);
  padding-top: var(--e6);
  border-top: 1px solid var(--trazo);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
}

.indice {
  border: 1px solid var(--trazo);
  border-radius: var(--r-media);
  padding: var(--e5);
  margin-bottom: var(--e7);
  background: #fff;
}
.indice h2 { font-size: var(--t-bloque); margin: 0 0 var(--e4); }
.indice ol { margin: 0; padding-left: 1.2em; font-size: var(--t-menor); columns: 1; }
.indice a { color: var(--humo); text-decoration: none; }
.indice a:hover { color: var(--tinta); text-decoration: underline; }
@media (min-width: 760px) { .indice ol { columns: 2; column-gap: var(--e6); } }

/* ============================================================
   15. Bloques sueltos
   ============================================================ */

.par {
  display: grid;
  gap: var(--e7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e9); }
  .par--foto-izq > :first-child { order: -1; }
}
.par__foto { border-radius: var(--r-tarjeta); overflow: hidden; background: var(--bruma); }
.par__foto img { width: 100%; height: auto; }

.cita-destacada {
  font-size: var(--t-seccion);
  line-height: 1.25;
  letter-spacing: var(--ancho-letra-seccion);
  max-width: 24ch;
  margin: 0;
}

.cifras {
  display: grid;
  gap: var(--e6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cifras { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cifras { grid-template-columns: repeat(4, 1fr); } }

.cifra { padding-top: var(--e4); border-top: 1px solid var(--trazo); }
.cifra__n {
  font-size: 2.25rem;
  line-height: 1.05;
  letter-spacing: -0.026em;
  display: block;
  margin-bottom: var(--e3);
}
.cifra p { font-size: var(--t-menor); color: var(--humo); margin: 0; }

.lista-corrientes {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--trazo);
  columns: 1;
}
.lista-corrientes li {
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--trazo);
  margin: 0;
  break-inside: avoid;
}
@media (min-width: 760px) { .lista-corrientes { columns: 2; column-gap: var(--e8); } }

/* llamada final */
.llamada { background: var(--tinta-honda); color: #fff; }
.llamada h2 { color: #fff; max-width: 20ch; }
.llamada p { color: rgba(255, 255, 255, 0.68); max-width: 56ch; margin-top: var(--e4); }
.llamada .botonera { margin-top: var(--e6); }

/* contacto */
.datos-contacto { display: grid; gap: var(--e6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .datos-contacto { grid-template-columns: repeat(3, 1fr); } }

.dato { padding-top: var(--e4); border-top: 1px solid var(--trazo); }
.dato h3 { font-size: var(--t-guia); margin-bottom: var(--e3); }
.dato p, .dato a { font-size: var(--t-menor); color: var(--humo); }
.dato ul { list-style: none; padding: 0; margin: 0; }
.dato li { margin-bottom: var(--e2); font-size: var(--t-menor); }
.dato a { text-decoration: none; }
.dato a:hover { color: var(--tinta); text-decoration: underline; }

.formulario { display: grid; gap: var(--e4); max-width: 560px; }
.campo { display: flex; flex-direction: column; gap: var(--e2); }
.campo label { font-size: var(--t-menor); }
.campo input, .campo textarea, .campo select {
  font-family: inherit;
  font-size: var(--t-cuerpo);
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--trazo);
  border-radius: var(--r-chico);
  padding: 12px 14px;
  width: 100%;
}
.campo select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--humo) 50%),
                    linear-gradient(135deg, var(--humo) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.campo textarea { min-height: 150px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--tinta); }
.formulario .boton { justify-self: start; }
.aviso-formulario { font-size: var(--t-nota); color: var(--humo); margin: 0; }

/* ============================================================
   16. Pie
   ============================================================ */

.pie { background: var(--tinta-honda); color: rgba(255, 255, 255, 0.68); padding-block: var(--e9) var(--e6); }
.pie h2 { color: #fff; }

.pie__columnas {
  display: grid;
  gap: var(--e7);
  grid-template-columns: 1fr;
  padding-bottom: var(--e8);
  border-bottom: 1px solid var(--tinta-suave);
}
@media (min-width: 560px) { .pie__columnas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .pie__columnas { grid-template-columns: repeat(4, 1fr); } }

.pie__titulo {
  font-size: var(--t-menor);
  color: #fff;
  margin-bottom: var(--e4);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--tinta-suave);
}
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: var(--e3); }
.pie a { color: rgba(255, 255, 255, 0.68); text-decoration: none; font-size: var(--t-menor); }
.pie a:hover { color: #fff; text-decoration: underline; }

.pie__contacto {
  display: grid;
  gap: var(--e6);
  grid-template-columns: 1fr;
  padding-block: var(--e7);
  border-bottom: 1px solid var(--tinta-suave);
}
@media (min-width: 760px) { .pie__contacto { grid-template-columns: repeat(3, 1fr); } }
.pie__contacto p { font-size: var(--t-menor); margin: 0 0 var(--e2); }
.pie__contacto strong { color: #fff; font-weight: 500; display: block; margin-bottom: var(--e3); }

.pie__cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding-top: var(--e6);
  font-size: var(--t-nota);
}
.pie__marca img { height: 30px; width: auto; }
.pie__redes { display: flex; flex-wrap: wrap; gap: var(--e4) var(--e5); }

/* ============================================================
   17. Impresión
   ============================================================ */

@media print {
  .cabecera, .pie, .llamada, .boton, .filtro-blog, .buscador-blog { display: none !important; }
  .hero, .hero-interno { background: #fff; color: #000; padding-top: 0; }
  .hero h1, .hero-interno h1 { color: #000; }
  body { font-size: 11pt; }
  .acordeon__panel { display: block !important; }
}

/* ---------- imágenes del blog ---------- */

/* Cabecera decorativa del artículo: no aporta información, va con alt vacío. */
.articulo-cabecera {
  /* 860 px: lo mismo que mide la lista del blog, y lo máximo que dan de sí
     los originales sin que se note la ampliación. */
  margin: 0 auto var(--e8);
  max-width: 860px;
  border-radius: var(--r-tarjeta);
  overflow: hidden;
  background: var(--bruma);
}
.articulo-cabecera img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.articulo-item a {
  grid-template-areas: "img" "fecha" "texto";
}
.articulo-item__imagen {
  grid-area: img;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-media);
  background: var(--bruma);
}
.articulo-item__fecha { grid-area: fecha; }
.articulo-item__texto { grid-area: texto; }

@media (min-width: 860px) {
  .articulo-item a {
    grid-template-columns: 148px minmax(0, 1fr) 176px;
    grid-template-areas: "fecha texto img";
    align-items: start;
    gap: var(--e2) var(--e5);
  }
  .articulo-item__imagen { margin-top: 4px; }
}

/* Imágenes dentro del cuerpo del artículo */
.prosa-figura {
  margin: var(--e7) 0;
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--bruma);
}
.prosa-figura img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- selector de idioma (GTranslate) ----------
   El widget se fija abajo a la derecha con estilos en línea. Le damos fondo propio
   para que el texto de la página no se transparente por detrás, que es lo que
   pasaba en la web anterior. */
.gt_switcher_wrapper {
  background: var(--papel);
  border: 1px solid var(--trazo);
  border-radius: var(--r-media);
  padding: 8px 10px 9px;
  box-shadow: 0 6px 24px rgba(23, 28, 42, 0.14);
  text-align: right;
  line-height: 1;
}
.gt_switcher_wrapper .glink { display: inline-block; }
.gt_switcher_wrapper .glink img { border-radius: 2px; }
.gt_switcher_wrapper select {
  display: block;
  margin-top: 7px;
  margin-left: auto;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--trazo);
  border-radius: var(--r-chico);
  padding: 4px 6px;
  max-width: 168px;
}
@media (max-width: 520px) {
  .gt_switcher_wrapper { padding: 6px 8px 7px; }
  .gt_switcher_wrapper .glink img { width: 21px; height: 21px; }
}

/* ---------- formularios ---------- */

/* Trampa para robots: fuera de la pantalla, pero no display:none, que algunos la detectan. */
.campo--trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aviso-formulario--respuesta {
  border-radius: var(--r-chico);
  padding: var(--e4) var(--e5);
  margin-top: var(--e4);
}
.aviso-formulario--respuesta[hidden] { display: none; }
.aviso-formulario--respuesta.es-exito {
  background: #eef5ef;
  border: 1px solid #c3dcc8;
  color: #2d5136;
}
.aviso-formulario--respuesta.es-error {
  background: #fbeeea;
  border: 1px solid #e8c4b8;
  color: #7d3418;
}
.formulario button[disabled] { opacity: 0.6; cursor: progress; }