/* ============================================================================
   SEGURATIS · HOME
   static/mobile-home.html (390 px) + static/desktop-home.html (1280 px)
   Movil primero. El corte del sistema es 1024 px.
   Requiere: tokens.css -> componentes.css -> plantillas.css
   ============================================================================ */

/* Orden de secciones: en movil el formulario sube justo detras de las
   companias, como en la maqueta. En desktop va entre opiniones y FAQ. */
.home { display: flex; flex-direction: column; }
.home-hero      { order: 1; }
.home-prensa    { order: 2; }
.home-seguros   { order: 3; }
.home-cias      { order: 4; }
.home-form      { order: 5; }
.home-motivos   { order: 6; }
.home-pasos     { order: 7; }
.home-opiniones { order: 8; }
.home-faq       { order: 9; }
.home-blog      { order: 10; }
@media (min-width: 1024px) {
  .home-opiniones { order: 7; }
  .home-form      { order: 8; }
}

/* ---- 1 · Hero ------------------------------------------------------------ */
.home-hero { padding: 26px 0; border-bottom: var(--bd) solid var(--c-divider); }

/* El recorte va en el contenedor de las manchas, NO en la sección.
   La franja de cifras monta 52 px sobre el borde inferior del hero; con
   `overflow: hidden` heredado de .hero se le cortaban las etiquetas. */
.home-hero { overflow: visible; }
.home-hero__bg {
  background: radial-gradient(115% 95% at 100% -5%,
    var(--c-hero-1) 0%, var(--c-hero-2) 42%, var(--c-hero-3) 100%);
}
.home-hero__inner { position: relative; z-index: 1; }

.home-hero__motas { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mota { position: absolute; border-radius: 50%; }
.mota--1 { top: 34px; right: 42px; width: 13px; height: 13px; background: var(--c-blob-warm); animation: drift 9s ease-in-out infinite; }
.mota--2 { top: 58%;  right: 76px; width: 10px; height: 10px; background: var(--c-blob-cool); animation: drift 11s ease-in-out infinite 1s; }
.mota--3 { top: 42%;  left: 26px;  width: 7px;  height: 7px;  background: var(--c-blob-soft); animation: floaty 7.5s ease-in-out infinite .4s; }
.mota--4 { display: none; }

.aurora { position: absolute; border-radius: 50%; filter: blur(40px); }
.aurora--calida {
  top: -120px; right: -110px; width: 264px; height: 264px;
  background: radial-gradient(circle at 35% 35%, rgba(232,110,77,.20), rgba(233,113,74,0) 100%);
  animation: aurora 18s ease-in-out infinite;
}
.aurora--fria {
  bottom: -90px; left: -120px; width: 279px; height: 279px;
  background: radial-gradient(circle at 60% 40%, rgba(0,182,122,.13), rgba(30,122,79,0) 100%);
  animation: aurora 24s ease-in-out infinite reverse;
}
@keyframes drift  { 0% { transform: translate(0,0); } 50% { transform: translate(14px,-18px); } 100% { transform: translate(0,0); } }
@keyframes aurora { 0% { transform: translate(0,0) scale(1); } 33% { transform: translate(40px,-26px) scale(1.12); } 66% { transform: translate(-26px,24px) scale(.92); } 100% { transform: translate(0,0) scale(1); } }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(30,122,79,.5); } 70% { box-shadow: 0 0 0 7px rgba(30,122,79,0); } 100% { box-shadow: 0 0 0 0 rgba(30,122,79,0); } }

.pill--vivo { color: var(--c-positive); font-size: 13px; padding: 7px 12px; }
.pill--vivo .pill__dot { width: 6px; height: 6px; background: var(--c-positive); }
.pill__dot--latido { animation: latido 2.4s ease-out infinite; }

.home-hero__h1    { margin-top: 14px; }
.home-hero__lead  { margin-top: 12px; }
.home-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.home-hero__quote {
  margin-top: 20px; padding: 18px 20px 20px;
  background: var(--c-white); border: var(--bd) solid #F3E7DE;
  box-shadow: var(--sh-float);
}
.home-hero__quote-pie   { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.home-hero__quote-quien { flex: 1 1 auto; display: block; line-height: 1.3; }
.home-hero__quote-quien strong { display: block; font-size: 15.5px; font-weight: 800; }
.home-hero__quote-quien .meta  { display: block; }
.home-hero__quote .avatar { width: 40px; height: 40px; flex-basis: 40px; font-size: 13px; }

.home-hero__acciones { display: grid; gap: 10px; margin-top: 20px; }
.home-hero__wa       { height: var(--h-btn-hero-m); }
.home-hero__rating   { margin-top: 16px; }

.home-hero__aside, .home-stats { display: none; }

@media (min-width: 1024px) {
  .home-hero { padding: 56px 0 0; }
  .home-hero__inner {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: 80px; align-items: center; padding-bottom: 56px;
  }
  .mota--1 { top: 12%; right: 9%;  width: 16px; height: 16px; }
  .mota--2 { top: 64%; right: 20%; width: 12px; height: 12px; }
  .mota--3 { top: 36%; left: 5%;   width: 9px;  height: 9px; }
  .mota--4 { display: block; bottom: 16%; right: 6%; width: 8px; height: 8px;
             background: #C9DED0; animation: floaty 8.5s ease-in-out infinite 1.4s; }
  .aurora--calida { top: -160px; right: -120px; width: 403px; height: 403px;
    background: radial-gradient(circle at 30% 30%, rgba(233,113,74,.16), rgba(233,113,74,0) 100%); }
  .aurora--fria { bottom: -90px; left: -140px; width: 347px; height: 347px; }

  .pill--vivo { font-size: 14px; padding: 9px 15px; gap: 9px; }
  .pill--vivo .pill__dot { width: 7px; height: 7px; }

  .home-hero__h1    { margin-top: 26px; max-width: 13ch; }
  .home-hero__lead  { margin-top: 30px; max-width: 46ch; }
  .home-hero__chips { display: none; }
  .home-hero__quote { display: none; }
  .home-hero__acciones { display: flex; gap: 12px; margin-top: 38px; }
  .home-hero__cta   { height: 64px; padding: 0 36px; }
  .home-hero__wa    { height: 64px; padding: 0 34px; font-size: 17px; text-transform: none; letter-spacing: 0; }
  .home-hero__rating { margin-top: 32px; gap: 14px; }
  .home-hero__rating .rating__num { font-size: 40px; letter-spacing: -.035em; }
  .home-hero__rating .rating__stars { font-size: 15px; }
  .home-hero__rating .meta { font-size: 14.5px; color: var(--c-ink-2); }

  /* Tarjeta de comparativa */
  .home-hero__aside { display: block; position: relative; }
  .home-hero__sello {
    position: absolute; bottom: -20px; right: -18px; z-index: 2;
    padding: 12px 20px; border-radius: var(--r-pill);
    background: var(--c-ink); color: var(--c-white);
    font-size: 15px; font-weight: 700;
    box-shadow: 0 18px 34px -22px rgba(16,24,32,.6);
  }
  .home-hero__card { position: relative; z-index: 1; }
  .home-hero__card-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .home-hero__card-titulo { display: block; margin-top: 4px; font-size: 21px; font-weight: 800; letter-spacing: -.025em; }

  .home-hero__filas { display: grid; gap: 8px; margin-top: 18px; }
  .home-hero__fila {
    position: relative; display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: var(--r);
    background: var(--c-surface-2); border: var(--bd) solid var(--c-divider);
  }
  .home-hero__fila--mejor { background: var(--c-white); border: var(--bd-strong) solid var(--c-positive); }
  .home-hero__badge {
    position: absolute; top: -11px; left: 14px;
    padding: 3px 10px; border-radius: var(--r-pill);
    background: var(--c-positive); color: var(--c-white);
    font-size: 11px; font-weight: 700; letter-spacing: .03em;
  }
  .home-hero__logo { flex: 0 0 30px; width: 30px; height: 30px; border-radius: var(--r); background: var(--c-border); }
  .home-hero__logo--navy { background: var(--c-primary); }
  .home-hero__cia { flex: 1 1 auto; font-size: 15.5px; font-weight: 600; color: var(--c-ink-2); }
  .home-hero__cia--fuerte { font-weight: 800; color: var(--c-ink); }
  .home-hero__precio { flex: 0 0 auto; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--c-ink); }
  .home-hero__precio span { font-size: 13px; font-weight: 600; color: var(--c-ink-3); }
  .home-hero__precio--mejor { color: var(--c-positive); }

  .home-hero__ahorro {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 14px; padding: 14px 16px; border-radius: var(--r);
    background: var(--c-cta-bg); color: var(--c-action-ink);
    font-size: 15px; font-weight: 700;
  }
  .home-hero__ahorro-num { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
  .home-hero__ahorro-num span { font-size: 14px; font-weight: 600; }

  /* Franja de cifras · monta sobre el borde inferior del hero */
  .home-stats { display: flex; justify-content: center; position: relative; z-index: 1; margin-bottom: -52px; }
  .home-stats .stats {
    width: 100%; max-width: 1232px; margin: 0 var(--pad-x-d);
    box-shadow: 0 18px 34px -26px rgba(16,24,32,.45);
  }
  .home-stats .stats__num   { font-size: 30px; letter-spacing: -.032em; white-space: nowrap; }
  .home-stats .stats__label { margin-top: 6px; font-size: 14.5px; }
}

/* ---- 2 · Prensa ---------------------------------------------------------- */
.home-prensa {
  padding: 16px 0 22px;
  border-top: var(--bd) solid var(--c-divider);
  border-bottom: var(--bd) solid var(--c-divider);
}
/* auto-fit y no un número fijo de columnas: ahora los medios salen de un
   repetidor, así que pueden ser tres o seis y la franja tiene que aguantarlo
   sin dejar huecos ni romper a otra fila con celdas vacías. */
.home-prensa__logos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 10px; margin-top: 12px; align-items: center;
}
.home-prensa__logo  { align-items: center; justify-content: center; height: 30px; padding: 0; border-radius: var(--r-mark); }
.home-prensa__logo .ph__label { font-size: 8.5px; }

/* Logos reales de prensa.
   Llegan en colores de marca y con proporciones muy distintas, y así compiten
   con el contenido y entre ellos. Se igualan por ALTURA —no por ancho— porque
   es lo que da peso óptico parecido a logos de formas distintas, y se pasan a
   gris para que la franja se lea como una sola cosa y no como cinco marcas.

   `object-fit: contain` es lo que impide que se deformen: cada uno conserva su
   proporción dentro del hueco que le toca. */
.home-prensa__logo--img {
  display: block; justify-self: center;
  max-height: 17px; max-width: 100%; width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
}

@media (min-width: 1024px) {
  /* La franja es una nota al pie, no una sección: los logos van pequeños a
     propósito, para que se lean sin robarle peso al titular ni a las cifras.
     `max-width` además evita que un logotipo muy apaisado —europapress— ocupe
     el doble que uno compacto solo por su forma. */
  .home-prensa__logo--img { max-height: 21px; max-width: 132px; }
}

@media (min-width: 1024px) {
  .home-prensa { padding: 116px 0 0; border: 0; }
  .home-prensa__logos { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  .home-prensa__inner {
    display: flex; align-items: center; gap: 40px;
    padding-bottom: 30px; border-bottom: var(--bd) solid var(--c-divider);
  }
  .home-prensa__titulo { flex: 0 0 auto; }
  .home-prensa__logos  { flex: 1 1 auto; gap: 24px; margin-top: 0; }
  .home-prensa__logo   { height: 34px; }
  .home-prensa__logo .ph__label { font-size: 9.5px; }
}

/* ---- 3 · Seguros --------------------------------------------------------- */
.home-seguros        { padding: 28px 0 0; }
.home-seguros__h2    { margin-top: 10px; }
.home-seguros__intro { display: none; }
.home-seguros .eyebrow__bar { display: none; }

.home-destacados { display: grid; gap: 12px; margin-top: 18px; }

/* En móvil la tarjeta es una rejilla de dos columnas: a la izquierda el
   titular y la frase, a la derecha el precio ocupando las dos filas. Sin esto
   el precio cae debajo de la frase, porque en el HTML va después.
   En escritorio vuelve a ser una columna y el precio pasa a su caja crema. */
.home-destacado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 14px;
  align-content: start;
  padding: 20px; border-color: var(--c-border); box-shadow: var(--sh-neutral);
}
.home-destacado__cab    { grid-column: 1; grid-row: 1; }
.home-destacado__claim  { grid-column: 1; grid-row: 2; }
.home-destacado__precio { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.home-destacado__checks,
.home-destacado__link   { grid-column: 1 / -1; }

.home-destacado__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.home-destacado__cab .icon-box,
.home-destacado__cab .pill { display: none; }
.home-destacado__titulo { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--c-ink); }
.home-destacado__claim  { display: block; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--c-ink-2); }

/* En movil el precio va arriba a la derecha, dentro de la cabecera */
.home-destacado__precio { display: block; text-align: right; }
.home-destacado__precio .btn-circle { display: none; }
.home-destacado__precio .price      { display: block; }
.home-destacado__precio .price__num { font-size: 26px; letter-spacing: -.03em; line-height: 1.05; }
.home-destacado__precio .price__per { display: block; font-size: 12.5px; }

/* Ramo sin tarifa citable: ocupa el mismo sitio que el precio, con el peso
   tipográfico bajado para que no compita con los que sí tienen cifra. */
.home-destacado__sin-precio {
  display: block; margin-top: 2px;
  font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  color: var(--c-primary);
}
.home-destacado__nota { display: block; margin-top: 3px; font-size: 12.5px; color: var(--c-ink-3); }

.home-destacado__checks {
  display: grid; gap: 7px; margin-top: 14px; padding-top: 14px;
  border-top: var(--bd) solid var(--c-divider);
}
.home-destacado__check { display: flex; align-items: center; gap: 9px; font-size: 14.5px; line-height: 1.4; color: var(--c-ink-article); }
.home-destacado__check .check { width: 18px; height: 18px; flex-basis: 18px; }
.home-destacado__link { display: inline-flex; margin-top: 14px; }

.home-secundarios { display: grid; margin-top: 14px; }
.home-secundario {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 2px; border-bottom: var(--bd) solid var(--c-divider);
}
.home-secundario__foto { display: none; }
.home-secundario__pie  { display: contents; }
.home-secundario__pie > span:first-child { display: contents; }
.home-secundario__nombre { flex: 1 1 auto; font-size: 16.5px; font-weight: 700; color: var(--c-ink); }
.home-secundario__precio { flex: 0 0 auto; font-size: 14.5px; font-weight: 700; color: var(--c-primary); }
.home-secundario__flecha { flex: 0 0 auto; color: var(--c-ink-3); }

@media (min-width: 1024px) {
  .home-seguros { padding: 72px 0 96px; }
  .home-seguros .eyebrow__bar { display: block; }
  .home-seguros__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
  .home-seguros__h2  { margin-top: 16px; max-width: 22ch; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.038em; }
  .home-seguros__intro { display: block; flex: 0 0 380px; margin: 0; font-size: 17px; line-height: 1.65; }

  .home-destacados { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
  .home-destacado  { display: flex; flex-direction: column; padding: 30px; }
  .home-destacado__cab { align-items: center; }
  .home-destacado__cab .icon-box { display: flex; }
  .home-destacado__cab .pill     { display: inline-flex; }
  .home-destacado__titulo { flex: 1 1 auto; font-size: 25px; letter-spacing: -.03em; }
  .home-destacado__claim  { margin-top: 16px; font-size: 17px; line-height: 1.55; }

  .home-destacado__precio {
    display: flex; align-items: center; gap: 16px; text-align: left;
    margin-top: 22px; padding: 16px 18px 16px 20px;
    border-radius: var(--r); background: var(--c-surface-2);

    /* En móvil esto va colocado en la rejilla con `align-self: start`. Al pasar
       a columna flex esa declaración sigue viva y encoge la caja al ancho de su
       contenido, en vez de ocupar la tarjeta entera. Hay que devolverla a
       stretch, y limpiar la colocación de rejilla para que no estorbe. */
    align-self: stretch;
    grid-column: auto; grid-row: auto;
  }
  .home-destacado__precio-txt { flex: 1 1 auto; display: block; }
  .home-destacado__precio .price      { display: flex; gap: 7px; margin-top: 3px; }
  .home-destacado__precio .price__num { font-size: 36px; letter-spacing: -.04em; line-height: 1; }
  .home-destacado__precio .price__per { display: inline; font-size: 14px; }
  .home-destacado__precio .btn-circle { display: flex; }

  .home-destacado__checks { gap: 12px; margin-top: 22px; padding-top: 0; border-top: 0; }
  .home-destacado__check  { gap: 11px; font-size: 16px; }
  .home-destacado__check .check { width: 22px; height: 22px; flex-basis: 22px; }
  .home-destacado__link { display: none; }

  .home-secundarios { grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
  .home-secundario {
    display: block; padding: 0; border-radius: var(--r);
    background: var(--c-white); border: var(--bd) solid var(--c-border-soft);
    overflow: hidden; box-shadow: 0 12px 26px -24px rgba(16,24,32,.4);
    transition: var(--t-lift), border-color .16s ease-out;
  }
  .home-secundario:hover { border-color: var(--c-action); transform: var(--lift); }
  .home-secundario__foto { display: flex; align-items: flex-end; height: 132px; padding: 10px; border-radius: 0; }
  .home-secundario__pie  { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; }
  .home-secundario__pie > span:first-child { display: block; }
  .home-secundario__nombre { display: block; font-size: 18.5px; }
  .home-secundario__precio { display: block; margin-top: 4px; font-size: 14px; }
  .home-secundario__flecha {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--c-cta-bg); color: var(--c-action-ink);
    font-size: 15px; font-weight: 800;
  }
}

/* ---- 4 · Compañías ------------------------------------------------------- */
.home-cias        { margin-top: 28px; }
.home-cias__cab   { display: none; }
.home-cias__intro { margin-top: 10px; }
.home-cias__grid  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 18px; }
.home-cias__logo {
  display: flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 6px; border-radius: var(--r);
  background: var(--c-white); border: var(--bd) solid var(--c-border-soft);
  box-shadow: 0 10px 22px -18px rgba(16,24,32,.35);
}
.home-cias__logo-txt { font-size: 11.5px; font-weight: 700; text-align: center; color: var(--c-ink-3); }
.home-cias__nota { margin-top: 12px; }

@media (min-width: 1024px) {
  .home-cias { margin-top: 0; }
  .home-cias__cab { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
  .home-cias__cab-txt { display: flex; align-items: baseline; gap: 14px; }
  .home-cias__cifra { font-size: 17px; font-weight: 700; color: var(--c-ink); }
  .home-cias__h2, .home-cias__intro, .home-cias__nota { display: none; }
  .home-cias__grid { grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 32px; }
  .home-cias__logo { height: 76px; }
  .home-cias__logo-txt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 400; }
}

/* ---- 5 · Formulario ------------------------------------------------------ */
.home-form { margin-top: 30px; }
.home-form__h2      { margin-top: 12px; font-size: 23px; line-height: 1.16; letter-spacing: -.02em; }
.home-form__lead    { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--c-ink-3); }
.home-form__promesa { display: none; }

@media (min-width: 1024px) {
  .home-form { margin-top: 0; }
  .home-form__inner { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 80px; align-items: center; }
  .home-form__h2   { margin-top: 18px; max-width: 16ch; font-size: clamp(34px, 3.8vw, 52px); line-height: 1.04; letter-spacing: -.04em; }
  .home-form__lead { margin-top: 22px; max-width: 42ch; font-size: 18px; line-height: 1.65; color: var(--c-cta-ink); }
  .home-form__promesa {
    display: flex; align-items: center; gap: 10px; margin-top: 28px;
    font-size: 15.5px; font-weight: 700; color: var(--c-positive);
  }
  .home-form__promesa .pill__dot { background: var(--c-positive); }
}

/* ---- 6 · Motivos --------------------------------------------------------- */
.home-motivos { padding: 30px 0 0; }
.home-motivos__inner { display: flex; flex-direction: column-reverse; }
.home-motivos__lista { display: grid; gap: 10px; margin-top: 18px; }
.home-motivo { display: flex; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--c-surface-2); }
.home-motivo__ico    { width: 40px; height: 40px; flex-basis: 40px; background: var(--c-white); }
.home-motivo__txt    { display: block; }
.home-motivo__titulo { display: block; font-size: 16.5px; font-weight: 700; }
.home-motivo__cuerpo { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--c-ink-2); }
.home-motivos__h2    { font-size: 25px; line-height: 1.14; letter-spacing: -.025em; }
.home-motivos__lead  { margin-top: 10px; font-size: 15.5px; line-height: 1.5; }
.home-motivos__aside .eyebrow { display: none; }
.home-motivos__cta { display: none; }

@media (min-width: 1024px) {
  .home-motivos { padding: 96px 0; }
  .home-motivos__inner { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 72px; align-items: start; }
  .home-motivos__lista { gap: 0; margin-top: 0; }
  .home-motivo {
    gap: 22px; padding: 28px 0; border-radius: 0; background: transparent;
    border-bottom: var(--bd) solid var(--c-divider);
  }
  .home-motivo__ico    { width: 44px; height: 44px; flex-basis: 44px; margin-top: 2px; background: var(--c-cta-bg); }
  .home-motivo__titulo { font-size: 21px; letter-spacing: -.015em; }
  .home-motivo__cuerpo { margin-top: 8px; max-width: 56ch; font-size: 16.5px; line-height: 1.6; }

  .home-motivos__aside { padding-top: 8px; }
  .home-motivos__aside .eyebrow { display: block; }
  .home-motivos__h2   { margin-top: 16px; font-size: clamp(31px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -.038em; }
  .home-motivos__lead { margin-top: 22px; font-size: 17.5px; line-height: 1.65; }
  .home-motivos__cta  { display: inline-flex; height: 58px; padding: 0 28px; margin-top: 30px; font-size: 17px; }
}

/* ---- 7 · Cómo funciona --------------------------------------------------- */
.home-pasos     { padding: 28px 0; }
.home-pasos__h2 { margin-top: 10px; font-size: 25px; line-height: 1.14; letter-spacing: -.025em; }
.home-pasos .eyebrow__bar { display: none; }
.home-pasos__cta  { display: none; }
.home-pasos__grid { display: grid; gap: 12px; margin-top: 18px; }
.home-paso {
  display: flex; gap: 14px; padding: 18px; border-radius: var(--r);
  background: var(--c-white); border: var(--bd) solid var(--c-border-soft);
  box-shadow: var(--sh-neutral);
}
.home-paso__num    { width: 30px; height: 30px; flex-basis: 30px; background: var(--c-primary); color: var(--c-white); font-size: 15px; }
.home-paso__txt    { display: block; }
.home-paso__titulo { display: block; font-size: 17px; font-weight: 700; }
.home-paso__cuerpo { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--c-ink-2); }

@media (min-width: 1024px) {
  .home-pasos { padding: 96px 0; }
  .home-pasos .eyebrow__bar { display: block; }
  .home-pasos__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
  .home-pasos__h2  { margin-top: 16px; max-width: 20ch; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.038em; }
  .home-pasos__cta { display: flex; flex: 0 0 auto; height: 60px; padding: 0 30px; }

  .home-pasos__grid { grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 56px; }
  .home-paso {
    display: block; padding: 36px 40px 0 0; border: 0;
    border-top: var(--bd) solid var(--c-border-soft);
    border-radius: 0; background: transparent; box-shadow: none;
  }
  .home-paso__num    { display: none; }
  .home-paso__titulo { margin-top: 20px; font-size: 24px; font-weight: 800; letter-spacing: -.025em; }
  .home-paso__cuerpo { margin-top: 12px; max-width: 32ch; font-size: 16.5px; line-height: 1.6; }
}

/* ---- 8 · Opiniones ------------------------------------------------------- */
.home-opiniones { padding: 30px 0 0; }
.home-opiniones .eyebrow__bar { display: none; }
.home-opiniones__h2   { margin-top: 10px; font-size: 26px; line-height: 1.12; letter-spacing: -.028em; }
.home-opiniones__grid { display: grid; gap: 12px; margin-top: 18px; }

.home-opinion { margin: 0; padding: 20px; border-radius: var(--r); background: var(--c-surface-2); }
.home-opinion__texto,
.home-opinion__texto-corto {
  margin: 12px 0 0; padding: 0; border: 0;
  font-family: Georgia, serif; font-style: italic;
  font-size: 17px; line-height: 1.5; color: var(--c-quote-ink); text-wrap: pretty;
}
.home-opinion--grande .quote__mark { display: none; }
.home-opinion__pie, .home-opinion__pie-corto { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.home-opinion__foto {
  width: 44px; height: 44px; flex: 0 0 44px; padding: 0;
  border-radius: 50%; align-items: center; justify-content: center;
}
.home-opinion__foto .ph__label { font-size: 8px; }
.home-opinion__quien { flex: 1 1 auto; display: block; line-height: 1.3; }
.home-opinion__quien strong { display: block; font-size: 15.5px; font-weight: 800; }
.home-opinion__quien .meta  { display: block; }
.home-opinion--corta { background: var(--c-surface-2); border: 0; box-shadow: none; }
.home-opinion__pie-corto strong { flex: 1 1 auto; font-size: 15.5px; font-weight: 800; }

@media (min-width: 1024px) {
  .home-opiniones { padding: 96px 0; }
  .home-opiniones .eyebrow__bar { display: block; }
  .home-opiniones__h2   { margin-top: 16px; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.038em; }
  .home-opiniones__grid { grid-template-columns: 1.25fr 1fr; gap: 20px; margin-top: 44px; align-items: stretch; }

  .home-opinion--grande {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 48px; border: var(--bd) solid var(--c-border-soft);
    box-shadow: 0 20px 40px -30px rgba(16,24,32,.5);
  }
  .home-opinion--grande .quote__mark { display: block; font-size: 52px; line-height: .6; }
  .home-opinion--grande .home-opinion__texto { margin-top: 24px; max-width: 34ch; font-size: 30px; line-height: 1.35; }
  .home-opinion__pie  { gap: 16px; margin-top: 40px; padding-top: 28px; border-top: var(--bd) solid var(--c-border-soft); }
  .home-opinion__foto { width: 56px; height: 56px; flex-basis: 56px; }
  .home-opinion__quien strong { font-size: 18px; }

  .home-opiniones__cortas { display: grid; gap: 20px; }
  .home-opinion--corta {
    padding: 30px; background: var(--c-white);
    border: var(--bd) solid var(--c-border);
    box-shadow: 0 14px 30px -26px rgba(16,24,32,.45);
  }
  .home-opinion__texto-corto {
    margin-top: 16px; font-family: Manrope, "Helvetica Neue", Helvetica, sans-serif;
    font-style: normal; font-size: 17.5px; line-height: 1.6; color: var(--c-ink-article);
  }
  .home-opinion__pie-corto { margin-top: 20px; }
}

/* ---- 9 · FAQ ------------------------------------------------------------- */
.home-faq { padding: 30px 0 0; }

/* En escritorio el titular vive en la columna de la derecha, así que en el HTML
   va DESPUÉS del acordeón. En móvil eso lo dejaba debajo de las preguntas, y
   como además estaba oculto la sección se quedaba sin H2: contra la regla de
   que la jerarquía de encabezados sea la misma en los dos anchos.

   `display: contents` disuelve el aside para poder ordenar sus piezas sueltas:
   el titular arriba, el acordeón, y la línea del teléfono al final. */
.home-faq__inner { display: flex; flex-direction: column; }
.home-faq__aside { display: contents; }
.home-faq__aside .eyebrow { display: none; }
.home-faq__h2   { order: -1; font-size: 25px; line-height: 1.14; letter-spacing: -.025em; }
.home-faq__acc  { order: 0; margin-top: 18px; }
.home-faq__lead { order: 1; margin-top: 16px; }
.home-faq__btn .acc__sign { color: var(--c-action-ink); }

@media (min-width: 1024px) {
  .home-faq { padding: 96px 0; }
  .home-faq__inner { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 72px; align-items: start; }

  /* Se deshace lo de móvil: el aside vuelve a ser una caja y el orden, el del
     HTML. `order` también afecta a la colocación en rejilla, así que hay que
     devolverlo a cero o el acordeón y el titular cambian de columna. */
  .home-faq__aside { display: block; }
  .home-faq__h2, .home-faq__acc, .home-faq__lead { order: 0; }

  .home-faq__acc   { gap: 0; margin-top: 0; }
  .home-faq__item  { border-radius: 0; background: transparent; border-bottom: var(--bd) solid var(--c-divider); }
  .home-faq__btn   { min-height: 78px; padding: 26px 0; font-size: 21px; letter-spacing: -.015em; }
  .home-faq__btn .acc__sign { font-size: 26px; color: var(--c-action); }
  .home-faq__body  { padding: 0 60px 28px 0; max-width: 70ch; font-size: 17.5px; line-height: 1.7; }

  .home-faq__aside { padding-top: 8px; }
  .home-faq__aside .eyebrow { display: block; }
  .home-faq__h2    { display: block; margin-top: 16px; font-size: 42px; line-height: 1.04; letter-spacing: -.038em; }
  .home-faq__lead  { margin-top: 20px; font-size: 16.5px; line-height: 1.65; }
}

/* ---- 10 · Blog ----------------------------------------------------------- */
.home-blog { padding: 30px 0 0; }
.home-blog .eyebrow__bar { display: none; }
.home-blog__cab .link-action { display: none; }
.home-blog__h2   { margin-top: 10px; font-size: 25px; line-height: 1.14; letter-spacing: -.025em; }
.home-blog__grid { display: grid; gap: 10px; margin-top: 18px; }
.home-post {
  display: block; padding: 16px; border-radius: var(--r);
  background: var(--c-white); border: var(--bd) solid var(--c-border-soft);
  transition: var(--t-lift), border-color .16s ease-out;
}
.home-post:hover { border-color: var(--c-action); transform: var(--lift); }
.home-post--vacio { pointer-events: none; }
.home-post__foto { display: none; }
.home-post__cat {
  display: inline-block; padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--c-surface-1);
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--c-ink-3);
}
.home-post__titulo { display: block; margin-top: 10px; font-size: 16.5px; line-height: 1.3; font-weight: 700; color: var(--c-ink); }
.home-post__meta   { display: block; margin-top: 6px; }

@media (min-width: 1024px) {
  .home-blog { padding: 96px 0; border-top: var(--bd) solid var(--c-divider); }
  .home-blog .eyebrow__bar { display: block; }
  .home-blog__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
  .home-blog__cab .link-action { display: inline-flex; flex: 0 0 auto; font-size: 16.5px; }
  .home-blog__h2   { margin-top: 16px; font-size: 42px; line-height: 1.04; letter-spacing: -.038em; }
  .home-blog__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
  .home-post       { padding: 0; overflow: hidden; box-shadow: 0 14px 30px -26px rgba(16,24,32,.45); }
  .home-post__foto {
    display: flex; align-items: flex-end; width: 100%; height: 200px;
    padding: 12px; border-radius: 0; object-fit: cover;
  }
  .home-post__txt  { display: block; padding: 28px; }
  .home-post__cat  {
    display: block; padding: 0; background: transparent;
    font-size: 12px; letter-spacing: .06em; color: var(--c-action-ink);
  }
  .home-post__titulo { margin-top: 14px; font-size: 21px; letter-spacing: -.02em; }
  .home-post__meta   { margin-top: 12px; }
}

/* El «precio a medida» de las tarjetas secundarias: mismo sitio que el precio,
   en gris, para que se vea que ahí no hay cifra y no que falta un dato. */
.home-secundario__precio--neutro { color: var(--c-ink-3); font-weight: 600; }

/* Logo real en las filas de la tarjeta de comparativa.
   El hueco es el mismo cuadrado de 30 px que ocupa el marcador de color, así
   que al poner un logo la fila no se mueve ni un píxel. `contain` para que no
   se deforme y fondo blanco porque los logos suelen venir pensados sobre él. */
@media (min-width: 1024px) {
  .home-hero__logo--img {
    display: flex; align-items: center; justify-content: center;
    background: var(--c-white);
    border: var(--bd) solid var(--c-border-soft);
    overflow: hidden;
  }
  .home-hero__logo--img img {
    max-width: 84%; max-height: 84%;
    width: auto; height: auto;
    object-fit: contain;
  }
}

/* ============================================================================
   FOTOS REALES EN LOS HUECOS DE PLACEHOLDER

   Los huecos de imagen están maquetados como cajas rayadas: un <span> con
   padding, para que la etiqueta «foto · Salud» quede abajo a la izquierda. Una
   <img> con ese mismo padding se metería hacia dentro y, sin `object-fit`,
   saldría estirada o desbordando.

   Estas reglas usan `img.clase` (elemento + clase) a propósito: pesan más que
   la clase sola, así que ganan sin depender del orden del fichero.
   ============================================================================ */

/* Opinión destacada · retrato redondo */
img.home-opinion__foto { padding: 0; object-fit: cover; }

@media (min-width: 1024px) {
  /* Tarjetas de ramo secundario · foto apaisada de cabecera */
  img.home-secundario__foto {
    display: block; width: 100%; height: 132px;
    padding: 0; object-fit: cover;
  }

  /* Tarjetas del blog · portada 16:10 */
  img.home-post__foto {
    display: block; width: 100%; height: 200px;
    padding: 0; object-fit: cover;
  }
}

/* Logos de compañía · todos con la MISMA caja.
   Topar con `max-width` y `max-height` en porcentaje no iguala nada: un logo
   apaisado toca el tope de ancho y uno compacto el de alto, y acaban con pesos
   muy distintos. La forma de igualarlos es darles a todos exactamente la misma
   caja —el hueco de la celda menos su relleno— y dejar que `contain` encaje
   cada uno dentro conservando su proporción.

   A partir de ahí, lo que quede desigual es aire dentro del propio SVG, y eso
   solo se arregla recortando el fichero. */
.home-cias__logo     { padding: 11px 14px; }
.home-cias__logo img { width: 100%; height: 100%; object-fit: contain; }

@media (min-width: 1024px) {
  .home-cias__logo { padding: 15px 20px; }
}