/* ==========================================================================
   Seguratis · COMPONENTES
   Portado 1:1 desde 03-maquetas/static/ (botones.html, menus-y-footer.html,
   formularios.html). Los estados data-hover-style / data-active-style /
   data-focus-style de la maqueta se convierten aqui en :hover, :active y
   :focus-visible, como pide el README del paquete de traspaso.

   Prioridad de verdad: la maqueta manda sobre el documento.
   ========================================================================== */

/* ==========================================================================
   1 · BOTONES · 9 variantes (06-COMPONENTES.md §1)
   Radio 999px en todas. Etiqueta coral a 19/700 minimo: es lo que hace que
   blanco sobre #E9714A cumpla AA como texto grande. No bajarla.
   ========================================================================== */

/* Valores literales de botones.dc.html. Donde la tabla de 06-COMPONENTES.md §1
   dice otra cosa (WhatsApp, neutro y secundario sobre tinte), manda la maqueta.
   gap 10px y padding 0 30px son comunes a todas las variantes. */
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:var(--h-btn);padding:0 30px;
  border-radius:var(--r-pill);border:0;
  font-size:17px;font-weight:700;line-height:1;
  text-align:center;white-space:nowrap;
  transition:var(--t-btn);
}
.btn--block{width:100%}

/* Pareja de botones: 1fr 1fr con gap 8px. Nunca dos corales juntos. */
.btn-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* --- Primario · 56px · 19/700 ------------------------------------------- */
.btn--primary{
  background:var(--c-action);color:var(--c-white);
  font-size:19px;
  box-shadow:var(--sh-cta);
}
/* --- Primario grande · 64px (CTA de hero) ------------------------------- */
/* 56 px en movil y 64 en escritorio, como las dos maquetas del hero. */
.btn--primary-lg{height:56px;font-size:19px}
@media (min-width:1024px){ .btn--primary-lg{height:64px} }
.btn--primary.btn--primary-lg{box-shadow:var(--sh-cta-lg)}

/* --- Alturas de contexto ------------------------------------------------ */
.btn--54{height:54px}
.btn--52{height:52px}
.btn--48{height:var(--h-btn-sm)}
.btn--46{height:var(--h-btn-xs)}
.btn--44{height:var(--h-tap)}

/* --- Secundario con borde · 54px · SIN sombra --------------------------- */
.btn--secondary{
  height:54px;
  background:var(--c-white);color:var(--c-ink);
  border:var(--bd-strong) solid var(--c-field-border);
}
/* --- Secundario sobre tinte · 54px · blanco, sin borde, con sombra ------
   La maqueta lo resuelve con fondo blanco y elevacion, no con borde: sobre
   #FDF1EA un boton transparente con borde apenas se separa del fondo. */
.btn--on-tint{
  height:54px;
  background:var(--c-white);color:var(--c-primary);
  box-shadow:var(--sh-on-tint);
}
/* --- Neutro · 48px · blanco con elevacion · 16/700 ---------------------- */
.btn--neutral{
  height:var(--h-btn-sm);
  background:var(--c-white);color:var(--c-ink);
  font-size:16px;
  box-shadow:var(--sh-tel);
}
/* --- WhatsApp · 56px · borde #00B67A · 17/700 · SIN mayusculas ---------- */
.btn--whatsapp{
  background:var(--c-white);color:var(--c-whatsapp-ink);
  border:var(--bd-strong) solid var(--c-whatsapp-border);
  font-size:17px;
}
/* --- Blanco sobre aviso -------------------------------------------------- */
.btn--on-note{background:var(--c-white);color:var(--c-ink);height:52px;font-size:16.5px;box-shadow:var(--sh-tel)}
/* --- Terciario de texto · 46px · 15.5/700 ------------------------------- */
.btn--text{background:transparent;color:var(--c-ink-3);height:var(--h-btn-xs);font-size:15.5px}

/* --- Enlace de accion ---------------------------------------------------- */
.link-action{
  display:inline-flex;align-items:center;gap:6px;
  font-size:15px;font-weight:700;color:var(--c-action-ink);
  transition:var(--t-soft);
}
.link-action--sm{font-size:14.5px}

/* --- Boton cuadrado de icono: se queda a 8px (no pill) ------------------ */
.btn-icon{
  display:flex;align-items:center;justify-content:center;
  width:var(--h-tap);height:var(--h-tap);flex:0 0 var(--h-tap);
  border-radius:var(--r);background:var(--c-surface-1);color:var(--c-primary);
  transition:var(--t-btn);
}
.btn-icon--nav{background:var(--c-primary);color:var(--c-white)}
/* --- Boton redondo de icono (telefono de la cabecera desktop) ----------- */
.btn-round{
  display:flex;align-items:center;justify-content:center;
  width:var(--h-tap);height:var(--h-tap);flex:0 0 var(--h-tap);
  border-radius:var(--r-pill);background:var(--c-white);color:var(--c-primary);
  box-shadow:var(--sh-tel);
  transition:transform .18s ease-out, box-shadow .18s ease-out;
}
.btn-round--48{width:48px;height:48px;flex:0 0 48px;border:var(--bd-strong) solid var(--c-field-border);box-shadow:none}

/* --- Estados: hover solo con puntero (06-COMPONENTES.md §1.1 regla 7) --- */
@media (hover:hover){
  .btn--primary:hover{background:var(--c-action-strong);transform:translateY(-2px);box-shadow:var(--sh-cta-hover)}
  .btn--secondary:hover{border-color:var(--c-action-ink);color:var(--c-action-ink);transform:translateY(-2px)}
  .btn--on-tint:hover{color:var(--c-action-ink);transform:translateY(-2px)}
  .btn--neutral:hover{color:var(--c-action-ink);transform:translateY(-2px)}
  .btn--whatsapp:hover{background:var(--c-whatsapp-hover);transform:translateY(-2px)}
  .btn--on-note:hover{color:var(--c-action-ink)}
  .btn--text:hover{color:var(--c-ink)}
  .link-action:hover{color:var(--c-action-strong)}
  .btn-round:hover,.btn-icon:hover{transform:translateY(-2px)}
}
/* IMPORTANTE · el color de la etiqueta se reafirma en :hover.
   La regla global `a:hover{color:var(--c-primary-strong)}` de base.css tiene
   especificidad (0,1,1) y gana a `.btn--primary` (0,1,0), asi que se comia el
   color y el texto blanco del boton coral se volvia azul marino al pasar el
   raton. Cada variante repite el suyo aqui.
   Va FUERA de @media (hover:hover) porque el `a:hover` global tampoco esta
   dentro: en un movil con puntero hibrido pasaba igual. */
.btn--primary:hover,.btn--primary:focus{color:var(--c-white)}
.btn--secondary:hover,.btn--secondary:focus{color:var(--c-action-ink)}
.btn--on-tint:hover,.btn--on-tint:focus{color:var(--c-action-ink)}
.btn--neutral:hover,.btn--neutral:focus{color:var(--c-action-ink)}
.btn--whatsapp:hover,.btn--whatsapp:focus{color:var(--c-whatsapp-ink)}
.btn--on-note:hover,.btn--on-note:focus{color:var(--c-action-ink)}
.btn--text:hover,.btn--text:focus{color:var(--c-ink)}
.btn-icon:hover,.btn-round:hover{color:inherit}
.btn-icon--nav:hover{color:var(--c-white)}

/* En :active el boton vuelve a su sitio (06-COMPONENTES.md §1.1 regla 4) */
.btn:active,.btn-round:active,.btn-icon:active{transform:translateY(0)}

/* ==========================================================================
   2 · CABECERA
   Cabecera y panel movil comparten UN MISMO contenedor sticky: si el panel
   queda fuera, al abrirlo desde media pagina se despliega arriba, fuera de
   la vista (06-COMPONENTES.md §5). Esto no se toca.
   ========================================================================== */

.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
}
.site-header__bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px var(--pad-x);
  border-bottom:var(--bd) solid var(--c-divider);
}
.site-header__logo{height:26px;width:auto}
.site-header__actions{display:flex;align-items:center;gap:8px}

/* Nav horizontal, CTA y boton redondo de telefono: solo desktop */
.site-nav,.site-header__cta,.site-header__tel{display:none}

/* Hamburguesa: dos barras blancas de 16x2 px con gap 4 px */
.burger-barras{display:flex;flex-direction:column;align-items:center;gap:4px}
.burger-barras span{display:block;width:16px;height:2px;border-radius:2px;background:currentColor}

@media (min-width:1024px){
  .site-nav,.site-header__cta{display:flex}
  .site-header .site-header__tel{display:flex}
  .site-header__actions{display:none}

  /* El logo empuja al resto a la derecha aunque el nav no exista todavia:
     sin esto, con el menu vacio se amontonan los tres a la izquierda. */
  .site-header__logo{margin-right:auto}

  /* Medidas de `sistema-menus-y-footer.html`: gap 40 entre bloques, padding
     18/32, nav con gap 28. `flex-wrap` con `row-gap` es del diseno, no un
     parche: a 1024 la fila baja a dos lineas a proposito en vez de apretarse. */
  .site-header__bar{
    justify-content:flex-start;gap:40px;flex-wrap:wrap;row-gap:12px;
    max-width:calc(var(--container-header) + 32px * 2);
    margin-inline:auto;
    padding:18px 32px;
  }
  .site-header__logo{height:30px}
  .site-nav{
    display:flex;align-items:center;gap:28px;
    flex:1 1 auto;min-width:0;flex-wrap:wrap;row-gap:8px;
  }
  .site-nav a{
    display:flex;align-items:center;gap:6px;white-space:nowrap;
    font-size:15.5px;font-weight:600;color:var(--c-ink-article);
  }
  .site-nav a:hover{color:var(--c-primary)}
  .site-nav .is-current{
    color:var(--c-primary);font-weight:700;
    padding-bottom:4px;border-bottom:2px solid var(--c-action);
  }
  .site-nav__caret{font-size:10px;color:var(--c-ink-3)}
}

/* Telefono de la cabecera en escritorio: pastilla CON el numero, no un boton
   redondo con solo el icono. Un telefono que no se lee no se marca, y en una
   correduria la llamada es la segunda conversion. La maqueta lo pone asi y la
   fila ya sabe bajar a dos lineas si no cabe. */
.site-header__tel{
  display:none;flex:0 0 auto;align-items:center;gap:8px;white-space:nowrap;
  height:var(--h-tap);padding:0 16px;border-radius:var(--r-pill);
  background:var(--c-white);color:var(--c-ink);
  font-size:15.5px;font-weight:700;
  box-shadow:0 6px 16px -8px rgba(16,24,32,.22);
  transition:var(--t-soft);
}
.site-header__tel:hover{color:var(--c-ink);transform:translateY(-2px)}

/* ==========================================================================
   3 · MEGAMENU (06-COMPONENTES.md §3)
   ========================================================================== */

.mega{display:none}
@media (min-width:1024px){
  .mega{
    display:block;
    border-bottom:var(--bd) solid var(--c-divider);
    background:var(--c-white);
    box-shadow:var(--sh-mega);
  }
  .mega[hidden]{display:none}
  .mega__inner{
    display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;
    max-width:calc(var(--container-header) + var(--pad-x-d) * 2);
    margin-inline:auto;
    padding:34px var(--pad-x-d) 38px;
  }
  .mega__grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;
    margin-top:18px;
  }
  .mega__item{
    display:flex;align-items:flex-start;gap:14px;
    padding:18px;border-radius:var(--r);
    border:var(--bd) solid var(--c-border-soft);
    transition:var(--t-soft);
  }
  .mega__item:hover{border-color:var(--c-action);background:var(--c-row-alt)}
  .mega__icon{
    flex:0 0 42px;display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:50%;
    background:var(--c-cta-bg);color:var(--c-action-ink);
  }
  .mega__name{display:block;font-size:16.5px;font-weight:700;color:var(--c-ink)}
  .mega__price{display:block;margin-top:3px;font-size:13.5px;font-weight:700;color:var(--c-primary)}
  .mega__claim{display:block;margin-top:6px;font-size:14px;line-height:1.45;color:var(--c-ink-2)}
  /* Tarjeta de captacion de la derecha */
  .mega__aside{
    background:var(--c-surface-2);border-radius:var(--r);padding:24px;
    align-self:start;
  }
  .mega__aside h2{font-size:21px;line-height:1.15;letter-spacing:-.02em;font-weight:800;color:var(--c-primary);margin-top:10px}
}

/* ==========================================================================
   4 · PANEL DE MENU MOVIL (06-COMPONENTES.md §5)
   ========================================================================== */

.menu-movil{
  display:grid;gap:6px;
  padding:16px var(--pad-x) 22px;
  background:var(--c-surface-2);
  border-bottom:var(--bd) solid var(--c-divider);
  max-height:calc(100vh - var(--header-h));
  overflow-y:auto;
  box-shadow:var(--sh-panel);
}
.menu-movil[hidden]{display:none}
.menu-movil__overline{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-ink-3);padding:4px 0;
}
.menu-movil__overline + .menu-movil__overline,
.menu-movil__grid + .menu-movil__overline{padding-top:10px}
.menu-movil__item{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;border-radius:var(--r);
  background:var(--c-white);border:var(--bd) solid var(--c-border-soft);
  transition:var(--t-soft);
}
.menu-movil__item:hover{border-color:var(--c-action);background:var(--c-row-alt)}
.menu-movil__icon{
  flex:0 0 32px;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--c-cta-bg);color:var(--c-action-ink);
}
.menu-movil__body{flex:1 1 auto;min-width:0}
.menu-movil__name{display:block;font-size:16px;font-weight:600;color:var(--c-ink)}
.menu-movil__price{display:block;margin-top:2px;font-size:13px;font-weight:700;color:var(--c-primary)}
.menu-movil__chevron{flex:0 0 auto;color:var(--c-ink-4)}
.menu-movil__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.menu-movil__link{
  padding:13px;text-align:center;border-radius:var(--r);
  background:var(--c-white);border:var(--bd) solid var(--c-border-soft);
  font-size:15px;font-weight:600;color:var(--c-ink);
  min-height:var(--h-tap);display:flex;align-items:center;justify-content:center;
}
.menu-movil__cta{margin-top:12px}

@media (min-width:1024px){ .menu-movil{display:none} }

/* ==========================================================================
   5 · BARRA FIJA INFERIOR (solo movil) · 06-COMPONENTES.md §6
   ========================================================================== */

.barra-fija{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:390px;z-index:50;
  display:flex;align-items:center;gap:10px;
  padding:12px 16px calc(16px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
  border-top:var(--bd) solid var(--c-border);
}
.barra-fija__claim{flex:1 1 auto;min-width:0;font-size:13.5px;line-height:1.3;color:var(--c-ink-3)}
.barra-fija__claim strong{display:block;font-size:15px;font-weight:800;color:var(--c-ink)}
.barra-fija__cta{flex:0 0 auto;height:var(--h-btn-sm);padding:0 20px}
/* Variante de contacto: dos botones al 50% */
.barra-fija--doble{display:grid;grid-template-columns:1fr 1fr}

/* La pagina reserva el hueco de la barra */
.has-barra-fija{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}

@media (min-width:1024px){
  .barra-fija{display:none}
  .has-barra-fija{padding-bottom:0}
}

/* ==========================================================================
   6 · FOOTER (06-COMPONENTES.md §7)
   Siempre background blanco explicito: sin el hereda el crema de la seccion
   anterior y se tine entero.
   ========================================================================== */

.site-footer{background:var(--c-white);margin-top:34px}

/* --- 7.1 Banda de contacto ---------------------------------------------- */
.footer-contacto{
  padding:26px var(--pad-x);
  background:var(--c-surface-2);
  border-top:var(--bd) solid var(--c-divider);
  border-bottom:var(--bd) solid var(--c-divider);
}
.footer-contacto__titulo{font-size:21px;line-height:1.2;font-weight:800;letter-spacing:-.025em;color:var(--c-primary)}
.footer-contacto__texto{margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--c-ink-2)}
.footer-contacto__acciones{margin-top:16px;display:grid;gap:10px}
/* Movil: el telefono es el primario. Desktop: secundario + CTA coral.
   Un solo CTA coral en todo el pie (06-COMPONENTES.md §7.4). */
.footer-contacto__tel-desktop,.footer-contacto__cta{display:none}

/* --- 7.2 Columnas -------------------------------------------------------- */
.footer-marca{padding:26px var(--pad-x) 0}
.footer-marca__logo{height:26px;width:auto}
.footer-marca__texto{margin-top:14px;font-size:15px;line-height:1.55;color:var(--c-ink-2);max-width:40ch}
.footer-social{display:flex;gap:10px;margin-top:18px}
.footer-social a{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--c-surface-1);color:var(--c-primary);
  transition:var(--t-soft);
}
.footer-social a:hover{background:var(--c-cta-bg);color:var(--c-action-ink)}

.footer-trust{display:flex;align-items:center;gap:12px;margin-top:20px}
.footer-trust__nota{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--c-primary)}
.footer-trust__estrellas{display:block;color:var(--c-star);letter-spacing:1px;font-size:13px}
.footer-trust__opiniones{display:block;font-size:13.5px;color:var(--c-ink-3)}

/* Movil: las tres columnas se pliegan en acordeon */
.footer-cols{margin-top:22px;padding:0 var(--pad-x)}
.footer-col__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:16px 0;border-top:var(--bd) solid var(--c-divider);
  font-size:16px;font-weight:700;color:var(--c-ink);text-align:left;
}
.footer-col__signo{font-size:20px;font-weight:700;color:var(--c-action);line-height:1}
.footer-col__body{display:grid;gap:12px;padding:0 0 16px}
.footer-col__body[hidden]{display:none}
.footer-col__body a{font-size:15.5px;color:var(--c-ink);min-height:var(--h-tap);display:flex;align-items:center}
.footer-col__body a:hover{color:var(--c-action-ink)}
.footer-col__overline{display:none}

/* --- 7.3 Barra legal ----------------------------------------------------- */
.footer-legal{
  padding:22px var(--pad-x) 28px;margin-top:6px;
  border-top:var(--bd) solid var(--c-divider);
}
.footer-legal__texto{font-size:12.5px;line-height:1.6;color:var(--c-ink-3);max-width:110ch}
/* En movil rejilla de 2 columnas, no flex-wrap (06-COMPONENTES.md §7.3) */
.footer-legal__enlaces{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;
  margin-top:14px;font-size:13.5px;
}
.footer-legal__enlaces a{color:var(--c-ink-3)}
.footer-legal__enlaces a:hover{color:var(--c-ink)}
.footer-legal__copy{margin-top:16px;font-size:13px;color:var(--c-ink-3)}

@media (min-width:1024px){
  .site-footer__inner,
  .footer-contacto__inner,
  .footer-legal__inner{
    max-width:calc(var(--container) + var(--pad-x-d) * 2);
    margin-inline:auto;
  }
  .footer-contacto{padding:44px var(--pad-x-d)}
  .footer-contacto__inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;row-gap:20px}
  .footer-contacto__titulo{font-size:24px;letter-spacing:-.025em}
  .footer-contacto__texto{font-size:16px;line-height:1.55}
  .footer-contacto__acciones{margin-top:0;display:flex;gap:12px}
  .footer-contacto__tel-movil{display:none}
  .footer-contacto__tel-desktop,.footer-contacto__cta{display:flex;height:56px}

  .footer-cols{
    display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px;
    max-width:calc(var(--container) + var(--pad-x-d) * 2);
    margin:0 auto;padding:48px var(--pad-x-d) 36px;
  }
  .footer-marca{padding:0;grid-column:1}
  .footer-marca__logo{height:28px}
  .footer-marca__texto{font-size:15.5px;line-height:1.6}
  .footer-col{display:grid;gap:12px;align-content:start}
  .footer-col__head{display:none}
  .footer-col__overline{
    display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--c-ink-3);
  }
  .footer-col__body{display:grid !important;gap:12px;padding:0}
  .footer-col__body a{min-height:0}

  .footer-legal{padding:24px var(--pad-x-d) 28px;margin-top:0}
  .footer-legal__bottom{
    display:flex;align-items:center;justify-content:space-between;
    gap:24px;flex-wrap:wrap;row-gap:12px;margin-top:16px;font-size:13.5px;color:var(--c-ink-3);
  }
  .footer-legal__enlaces{display:flex;gap:20px;flex-wrap:wrap;margin-top:0}
  .footer-legal__copy{margin-top:0}
}

/* ==========================================================================
   7 · CAMPOS DE FORMULARIO (00-SISTEMA.md §5.4, 07-FORMULARIOS.md §5)
   ========================================================================== */

.campo{display:block;margin-bottom:14px}
.campo__label{
  display:block;margin-bottom:9px;
  font-size:16px;font-weight:600;line-height:1.3;color:var(--c-ink-article);
}
.campo__label .opcional{font-size:12.5px;font-weight:700;color:var(--c-ink-3);text-transform:uppercase;letter-spacing:.04em;margin-left:6px}

/* Fondo BLANCO, no --c-field. 00-SISTEMA.md §5.4 dice crema, pero la maqueta
   formularios.dc.html y 07-FORMULARIOS.md §5 coinciden en blanco. Manda la maqueta. */
.input,.select,.textarea{
  width:100%;height:var(--h-field);padding:0 14px;
  border:var(--bd) solid var(--c-field-border);border-radius:var(--r);
  background:var(--c-white);
  font-size:16px;font-weight:600;color:var(--c-ink);
  box-shadow:0 1px 2px rgba(16,24,32,.04);
  transition:var(--t-soft);
}
.input::placeholder{color:var(--c-ink-3);font-weight:400}
.select{padding:0 12px;appearance:none;background-image:none}
.textarea{height:auto;padding:14px;line-height:1.5;resize:vertical}

.input:focus-visible,.select:focus-visible,.textarea:focus-visible{
  outline:2px solid var(--c-action);outline-offset:1px;
}
/* Error: borde rojo + mensaje asociado con aria-describedby */
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--c-negative)}
.campo__error{display:block;margin-top:6px;font-size:13px;font-weight:600;color:var(--c-negative)}
.campo__error[hidden]{display:none}

/* Selectores de fecha: dia / mes / ano */
.campo-fecha{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px}

/* Checkbox de consentimiento */
.check{display:flex;align-items:flex-start;gap:10px;margin-top:4px}
.check input[type="checkbox"]{
  flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;
  accent-color:var(--c-action);
}
.check label{font-size:13.5px;line-height:1.45;color:var(--c-ink-2)}
.check a{text-decoration:underline}

@media (min-width:1024px){
  .input,.select{height:var(--h-field-d)}
}

/* Migas de paso del multipaso (07-FORMULARIOS.md §2.1) */
.pasos{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:16px;
  font-size:13.5px;font-weight:700;color:var(--c-ink-3);
}
.pasos .is-active{color:var(--c-action-ink)}
.pasos__sep{color:var(--c-step-sep)}

/* ==========================================================================
   8 · CHIPS DE SELECCION · radiogroup (00-SISTEMA.md §5.5)
   Radio 8px, NO pill.
   ========================================================================== */

.chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chip{
  display:flex;align-items:center;justify-content:flex-start;
  min-height:var(--h-chip);padding:0 14px;
  border-radius:var(--r);
  border:var(--bd-strong) solid var(--c-field-border);
  background:var(--c-white);
  font-size:16px;font-weight:700;color:var(--c-ink-article);
  text-align:left;
  transition:var(--t-soft);
}
.chip[aria-checked="true"],.chip.is-active{
  background:var(--c-cta-bg);border-color:var(--c-action);color:var(--c-action-ink);
}
.chip:focus-visible{outline:2px solid var(--c-action);outline-offset:1px}
@media (min-width:1024px){ .chip{min-height:var(--h-chip-d)} }

/* Chips de nav de anclas (00-SISTEMA.md §5.15) */
.chip--anchor{
  flex:0 0 auto;min-height:0;padding:9px 14px;border:0;
  border-radius:var(--r-pill);background:var(--c-surface-1);
  font-size:14px;font-weight:700;color:var(--c-ink-article);
}

/* ==========================================================================
   9 · PILLS Y ETIQUETAS (00-SISTEMA.md §5.6)
   ========================================================================== */

.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;line-height:1.2;
}
.pill--info{background:var(--c-surface-1);color:var(--c-ink)}
.pill--info-on-soft{background:var(--c-white);color:var(--c-primary)}
.pill--trust{background:var(--c-tag-soft);color:var(--c-positive);font-size:12.5px}
.pill--trust::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
/* Misma pastilla verde pero SIN punto: conteos y etiquetas de dato, donde el
   punto sugeriria un estado y aqui solo hay una cifra. */
.pill--conteo{background:var(--c-tag-soft);color:var(--c-positive);font-size:13px}
.pill--destacada{
  background:var(--c-action-deep);color:var(--c-white);
  font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;padding:5px 10px;
}
.pill--principal{background:var(--c-tag-soft);color:var(--c-positive);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;padding:5px 10px}
.pill--opcional{background:var(--c-surface-1);color:var(--c-ink-3);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;padding:5px 10px}
.pill--ahorro{background:var(--c-tag-soft);color:var(--c-positive);font-size:12px;font-weight:800;padding:5px 10px}

/* Sello de confianza del hero, con punto verde que late */
.sello{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:var(--r-pill);
  background:var(--c-white);color:var(--c-positive);
  font-size:14px;font-weight:700;
}
.sello__punto{width:7px;height:7px;border-radius:50%;background:var(--c-positive);animation:pulseRing 2.4s ease-out infinite}
/* La cifra solo cabe en una linea de 390 px si se queda fuera */
.sello__cifra{display:none}
@media (min-width:1024px){ .sello__cifra{display:inline} }

/* ==========================================================================
   10 · TARJETAS (00-SISTEMA.md §5.7)
   Sin box-shadow en tarjetas de contenido: se separan por borde y fondo.
   ========================================================================== */

.card{
  background:var(--c-white);
  border:var(--bd) solid var(--c-border);
  border-radius:var(--r);
  padding:16px;
}
.card--20{padding:20px}
/* Hover de tarjeta enlazada: solo color, sin desplazamiento */
a.card,.card--link{transition:var(--t-soft)}
@media (hover:hover){
  a.card:hover,.card--link:hover{border-color:var(--c-action);background:var(--c-row-alt)}
}

/* ==========================================================================
   COMPAÑIAS CON LAS QUE TRABAJAMOS (home)
   Movil: H2 + parrafo. Escritorio: una linea con la cifra y el enlace a la
   derecha, y el H2 solo para lectores de pantalla —sigue nombrando la seccion,
   que es de lo que tira el aria-labelledby—.
   ========================================================================== */
.cabecera-cias__linea,
.cabecera-cias__enlace{display:none}
.cabecera-cias__intro{margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--c-ink-2)}
.cabecera-cias + .logos-cias{margin-top:18px}

/* ==========================================================================
   PRODUCTOS DE LA HOME
   Las dos maquetas de la entrega final no comparten composicion, asi que el
   mismo marcado se recoloca con `grid-template-areas` (ver el comentario de
   template-parts/home/card-nivel1.php). Aqui va primero el movil, que es la
   base, y a 1024 se rehace la rejilla entera.
   ========================================================================== */

/* --- Cabecera de bloque: la entradilla de la derecha es solo de escritorio - */
.cabecera-bloque__entradilla{display:none}

/* --- Nivel 1 · movil: nombre y claim a la izquierda, precio a la derecha --- */
.grid-productos{display:grid;gap:12px;margin-top:18px}

.card-nivel1{
  padding:20px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "nombre precio"
    "claim  precio"
    "checks checks"
    "enlace enlace";
  align-items:start;
  column-gap:14px;
}
.card-nivel1__icono,
.card-nivel1__etiqueta{display:none}

.card-nivel1__nombre{grid-area:nombre;font-size:19px;line-height:1.2;letter-spacing:-.02em;font-weight:800;color:var(--c-ink)}
.card-nivel1__claim{grid-area:claim;margin-top:4px;font-size:15px;line-height:1.45;color:var(--c-ink-2)}

.card-nivel1__precio{grid-area:precio;text-align:right}
.card-nivel1__desde{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c-ink-3)}
.card-nivel1__importe{display:block;font-size:26px;line-height:1.05;letter-spacing:-.03em;font-weight:800;color:var(--c-primary)}
.card-nivel1__periodo{display:block;font-size:12.5px;color:var(--c-ink-3)}
.card-nivel1__ir{display:none}

.card-nivel1__checks{
  grid-area:checks;
  margin-top:14px;padding-top:14px;border-top:var(--bd) solid var(--c-divider);
  display:grid;gap:7px;
}
.card-nivel1__check{display:flex;align-items:center;gap:9px;font-size:14.5px;line-height:1.4;color:var(--c-ink-article)}
/* En movil la maqueta lleva un ✓ suelto: el circulo se desactiva y queda el
   icono verde a palo seco, que es lo mismo que se ve. */
.card-nivel1__tic{flex:0 0 auto;display:inline-flex;color:var(--c-positive)}

.card-nivel1__enlace{grid-area:enlace;margin-top:14px;font-size:15px;font-weight:700;color:var(--c-action-ink)}

/* --- Nivel 2 · movil: lista de filas con chevron ------------------------- */
.grid-ramos{display:grid;gap:0;margin-top:14px}

.card-nivel2{display:block;border-bottom:var(--bd) solid var(--c-divider)}
.card-nivel2__foto{display:none}
.card-nivel2__pie{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"nombre precio chevron";
  align-items:center;gap:12px;
  padding:15px 2px;
}
.card-nivel2__nombre{grid-area:nombre;font-size:16.5px;font-weight:700;color:var(--c-ink)}
.card-nivel2__precio{grid-area:precio;font-size:14.5px;font-weight:700;color:var(--c-primary)}
.card-nivel2__chevron{grid-area:chevron;color:var(--c-ink-3)}
.card-nivel2__chevron::before{content:"\203A"}

@media (min-width:1024px){
  /* --- Cabecera a dos columnas, con la entradilla alineada al pie del H2 -- */
  .cabecera-bloque{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
  .cabecera-bloque__entradilla{
    display:block;flex:0 0 380px;margin:0;
    font-size:17px;line-height:1.65;color:var(--c-ink-2);text-wrap:pretty;
  }

  /* --- Nivel 1 · tarjeta rica ------------------------------------------- */
  .grid-productos{grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}

  .card-nivel1{
    padding:30px;
    grid-template-columns:46px minmax(0,1fr) auto;
    grid-template-areas:
      "icono  nombre   etiqueta"
      "claim  claim    claim"
      "precio precio   precio"
      "checks checks   checks";
    align-items:center;
    column-gap:14px;
    box-shadow:0 2px 3px -2px rgba(16,24,32,.06), 0 18px 36px -28px rgba(16,24,32,.45);
    transition:transform .18s ease-out, box-shadow .18s ease-out, border-color .16s ease-out;
  }
  .card-nivel1__icono{
    grid-area:icono;
    display:flex;align-items:center;justify-content:center;
    width:46px;height:46px;border-radius:50%;
    background:var(--c-cta-bg);color:var(--c-action-ink);
  }
  .card-nivel1__nombre{font-size:25px;line-height:1.15;letter-spacing:-.03em}
  .card-nivel1__etiqueta{
    grid-area:etiqueta;display:block;
    padding:6px 12px;border-radius:var(--r-pill);
    background:var(--c-tag-soft);color:var(--c-positive);
    font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  }
  .card-nivel1__claim{margin-top:16px;font-size:17px;line-height:1.55;text-wrap:pretty}

  /* La caja de precio es la llamada a la accion de esta tarjeta */
  .card-nivel1__precio{
    margin-top:22px;text-align:left;
    display:flex;align-items:center;gap:16px;
    padding:16px 18px 16px 20px;border-radius:var(--r);
    background:var(--c-surface-2);
  }
  .card-nivel1__precio-texto{flex:1 1 auto}
  .card-nivel1__desde{font-size:11.5px;letter-spacing:.08em}
  .card-nivel1__cifra{display:flex;align-items:baseline;gap:7px;margin-top:3px}
  .card-nivel1__importe{display:inline;font-size:36px;line-height:1;letter-spacing:-.04em}
  .card-nivel1__periodo{display:inline;font-size:14px;font-weight:600}
  .card-nivel1__ir{
    flex:0 0 48px;display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;border-radius:50%;
    background:var(--c-action);color:var(--c-white);
    box-shadow:0 12px 22px -14px rgba(233,113,74,.85);
  }

  .card-nivel1__checks{margin-top:22px;padding-top:0;border-top:0;gap:12px}
  .card-nivel1__check{gap:11px;font-size:16px}
  .card-nivel1__tic{
    flex:0 0 22px;align-items:center;justify-content:center;
    width:22px;height:22px;border-radius:50%;background:var(--c-tag-soft);
  }
  .card-nivel1__enlace{display:none}

  /* --- Nivel 2 · tarjeta con foto --------------------------------------- */
  .grid-ramos{grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px}

  .card-nivel2{
    border:var(--bd) solid var(--c-border-soft);border-radius:var(--r);
    background:var(--c-white);overflow:hidden;
    box-shadow:0 12px 26px -24px rgba(16,24,32,.4);
    transition:var(--t-soft);
  }
  .card-nivel2__foto{display:block;height:132px}
  .card-nivel2__foto img,
  .card-nivel2__foto .ph{display:block;width:100%;height:100%;object-fit:cover}
  .card-nivel2__pie{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "nombre chevron"
      "precio chevron";
    gap:4px 12px;padding:20px 22px;
  }
  .card-nivel2__nombre{font-size:18.5px}
  .card-nivel2__precio{font-size:14px}
  .card-nivel2__chevron{
    align-self:center;
    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;
  }
  .card-nivel2__chevron::before{content:"\2192"}
}

/* ==========================================================================
   NO SOMOS UN COMPARADOR (home)
   Movil: titular arriba, cuatro tarjetas crema debajo.
   Escritorio: las razones a la izquierda en columna ancha, sin tarjeta y
   separadas por lineas; el titular en una columna fija de 420 px a la derecha.
   ========================================================================== */
.bloque-correduria__intro{margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--c-ink-2)}
.bloque-correduria__cta{display:none}
.bloque-correduria__lista{display:grid;gap:10px;margin-top:18px}

.razon{display:flex;gap:12px;padding:16px;border-radius:var(--r);background:var(--c-surface-2)}
.razon__icono{
  flex:0 0 40px;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--c-white);color:var(--c-action-ink);
}
.razon__texto{display:block;min-width:0}
.razon__titulo{display:block;font-size:16.5px;font-weight:700;color:var(--c-ink)}
.razon__desc{display:block;margin-top:3px;font-size:15px;line-height:1.5;color:var(--c-ink-2)}

@media (min-width:1024px){
  .cabecera-cias__h2{
    /* Se mantiene en el arbol de accesibilidad, fuera de la vista. */
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .cabecera-cias__intro{display:none}
  .cabecera-cias{display:flex;align-items:center;justify-content:space-between;gap:40px}
  .cabecera-cias__linea{display:flex;align-items:baseline;gap:14px;margin:0}
  .cabecera-cias__cifra{font-size:17px;font-weight:700;color:var(--c-ink)}
  .cabecera-cias__enlace{display:inline;font-size:16.5px;font-weight:700;color:var(--c-action-ink)}
  .cabecera-cias + .logos-cias{margin-top:32px}

  .bloque-correduria{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:72px;align-items:start}
  .bloque-correduria__texto{order:2;padding-top:8px}
  .bloque-correduria__lista{order:1;gap:0;margin-top:0}
  .bloque-correduria__intro{margin-top:22px;font-size:17.5px;line-height:1.65}
  .bloque-correduria__cta{display:inline-flex;margin-top:30px;height:58px;padding:0 28px;font-size:17px;background:var(--c-surface-1);box-shadow:none}

  .razon{
    gap:22px;padding:28px 0;border-radius:0;background:transparent;
    border-bottom:var(--bd) solid var(--c-divider);
  }
  .razon__icono{flex:0 0 44px;width:44px;height:44px;margin-top:2px;background:var(--c-cta-bg)}
  .razon__titulo{font-size:21px;letter-spacing:-.015em}
  .razon__desc{margin-top:8px;max-width:56ch;font-size:16.5px;line-height:1.6}
}

@media (hover:hover) and (min-width:1024px){
  a.card-nivel1:hover{
    transform:translateY(-3px);border-color:var(--c-action);background:var(--c-white);
    box-shadow:0 4px 6px -3px rgba(16,24,32,.08), 0 28px 48px -26px rgba(16,24,32,.5);
  }
  .card-nivel2:hover{border-color:var(--c-action);box-shadow:0 22px 42px -26px rgba(16,24,32,.5)}
}

/* Cobertura */
.card-cobertura__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card-cobertura__titulo{font-size:16.5px;font-weight:700;color:var(--c-ink)}
.card-cobertura__desc{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--c-ink-2)}

/* Plan (carrusel) */
.card-plan{
  flex:0 0 272px;padding:20px;border-radius:var(--r);
  border:var(--bd-strong) solid var(--c-border);background:var(--c-white);
}
.card-plan--destacado{border-color:var(--c-action-ink)}
.card-plan__nombre{margin-top:10px;font-size:20px;line-height:1.15;letter-spacing:-.02em;font-weight:800;color:var(--c-ink)}
.card-plan__desc{margin-top:6px;font-size:15.5px;line-height:1.5;color:var(--c-ink-2)}

/* Opinion */
/* --- Opiniones de la home ---------------------------------------------- */
.opiniones,.opiniones__resto{display:grid;gap:12px}
.opiniones{margin-top:18px}

.card-opinion{background:var(--c-surface-2);border:0;padding:20px;border-radius:var(--r);margin:0}
.card-opinion__comilla{display:none}
.card-opinion__estrellas{color:var(--c-star);font-size:13px;letter-spacing:1px}
.card-opinion__cita{margin:12px 0 0;font-family:var(--font-quote);font-style:italic;font-size:17px;line-height:1.5;color:var(--c-quote-ink)}
.card-opinion__pie{display:flex;align-items:center;gap:12px;margin-top:18px}
.card-opinion__avatar{flex:0 0 44px;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--ph-sm)}
.card-opinion__ident{flex:1 1 auto;display:block;min-width:0;line-height:1.3}
.card-opinion__nombre{display:block;font-size:15.5px;font-weight:800;color:var(--c-ink)}
.card-opinion__contexto{display:block;font-size:13.5px;color:var(--c-ink-3)}
.card-opinion__ahorro{flex:0 0 auto;margin-left:auto}

/* --- Ultimas publicaciones (home) --------------------------------------- */
.grid-posts{display:grid;gap:10px;margin-top:18px}
.card-post{
  display:block;padding:16px;
  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);
  transition:var(--t-soft);
}
.card-post__foto{display:none}
.card-post__cuerpo{display:block}
/* En movil la categoria es una pastilla gris; en escritorio, un overline coral */
.card-post__categoria{
  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);
}
.card-post__titulo{display:block;margin-top:10px;font-size:16.5px;line-height:1.3;font-weight:700;color:var(--c-ink)}
.card-post__meta{display:block;margin-top:6px;font-size:13.5px;color:var(--c-ink-3)}

.cabecera-bloque__link{display:none}

@media (min-width:1024px){
  .cabecera-bloque__link{display:inline;flex:0 0 auto;font-size:16.5px;font-weight:700;color:var(--c-action-ink)}

  .grid-posts{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
  .card-post{padding:0;overflow:hidden;border-color:var(--c-border-soft);box-shadow:0 14px 30px -26px rgba(16,24,32,.45)}
  .card-post__foto{display:block;height:200px}
  .card-post__foto img,
  .card-post__foto .ph{display:block;width:100%;height:100%;object-fit:cover}
  .card-post__cuerpo{padding:28px}
  .card-post__categoria{
    display:block;padding:0;border-radius:0;background:transparent;
    font-size:12px;letter-spacing:.06em;color:var(--c-action-ink);
  }
  .card-post__titulo{margin-top:14px;font-size:21px;letter-spacing:-.02em}
  .card-post__meta{margin-top:12px}
}
@media (hover:hover){
  .card-post:hover{border-color:var(--c-action)}
}

/* --- Los 3 pasos -------------------------------------------------------- */
.pasos{display:grid;gap:12px;margin-top:18px;padding:0;list-style:none}
.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:0 10px 22px -18px rgba(16,24,32,.35);
}
.paso__num{
  flex:0 0 30px;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--c-primary);color:var(--c-white);font-size:15px;font-weight:800;
}
.paso__texto{display:block;min-width:0}
.paso__titulo{display:block;font-size:17px;font-weight:700;color:var(--c-ink)}
.paso__desc{display:block;margin-top:4px;font-size:15px;line-height:1.5;color:var(--c-ink-2)}

/* --- Cabecera de bloque con boton a la derecha -------------------------- */
.cabecera-bloque__cta{display:none}

@media (min-width:1024px){
  .cabecera-bloque__cta{
    display:inline-flex;flex:0 0 auto;align-self:center;
    height:60px;padding:0 30px;font-size:19px;
  }
  /* Cuando la cabecera lleva boton, se alinea al centro y no al pie. */
  .cabecera-bloque--cta{align-items:center}

  .pasos{grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px}
  .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;
  }
  .paso__num{display:none}
  .paso__titulo{margin-top:20px;font-size:24px;letter-spacing:-.025em;font-weight:800}
  .paso__desc{margin-top:12px;max-width:32ch;font-size:16.5px;line-height:1.6}

  /* Opiniones: la destacada a la izquierda, el resto apilado a la derecha */
  .opiniones{grid-template-columns:1.25fr 1fr;gap:20px;margin-top:44px;align-items:stretch}
  .opiniones__resto{gap:20px;align-content:start}

  /* Ojo: TODO lo de aqui abajo va colgado de .opiniones. Sin ese ancla se
     llevaria por delante el bloque de testimonio de los articulos, que usa
     .card-opinion y tiene que seguir siendo una cita en Georgia. */
  .opiniones .card-opinion{padding:30px;background:var(--c-white);border:var(--bd) solid var(--c-border);box-shadow:0 14px 30px -26px rgba(16,24,32,.45)}
  .opiniones .card-opinion__cita{margin-top:16px;font-family:var(--font);font-style:normal;font-size:17.5px;line-height:1.6;color:var(--c-ink-article)}
  .opiniones .card-opinion__pie{margin-top:20px}

  .opiniones .card-opinion--destacada{
    display:flex;flex-direction:column;justify-content:space-between;
    padding:48px;background:var(--c-surface-2);
    border-color:var(--c-border-soft);
    box-shadow:0 20px 40px -30px rgba(16,24,32,.5);
  }
  .opiniones .card-opinion--destacada .card-opinion__comilla{
    display:block;margin:0;
    font-family:var(--font-quote);font-size:52px;line-height:.6;color:var(--c-quote);
  }
  .opiniones .card-opinion--destacada .card-opinion__estrellas{display:none}
  .opiniones .card-opinion--destacada .card-opinion__cita{
    margin-top:24px;max-width:34ch;
    font-family:var(--font-quote);font-style:italic;font-size:30px;line-height:1.35;
    color:var(--c-quote-ink);
  }
  .opiniones .card-opinion--destacada .card-opinion__pie{
    gap:16px;margin-top:40px;padding-top:28px;
    border-top:var(--bd) solid var(--c-border-soft);
  }
  .opiniones .card-opinion--destacada .card-opinion__avatar{flex:0 0 56px;width:56px;height:56px}
  .opiniones .card-opinion--destacada .card-opinion__nombre{font-size:18px}
  .opiniones .card-opinion--destacada .card-opinion__contexto{font-size:14.5px}
}

/* Testimonio del hero */
.card-testimonio{
  background:var(--c-white);border:var(--bd) solid var(--c-note-border);
  border-radius:var(--r);padding:18px 20px 20px;
}
.card-testimonio__comilla{font-family:var(--font-quote);font-size:30px;line-height:.7;color:var(--c-quote)}
.card-testimonio__cita{margin-top:8px;font-family:var(--font-quote);font-style:italic;font-size:16.5px;line-height:1.5;color:var(--c-quote-ink)}
.card-testimonio__pie{display:flex;align-items:center;gap:10px;margin-top:14px}
.card-testimonio__avatar{
  flex:0 0 40px;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--c-primary);color:var(--c-white);font-size:13px;font-weight:800;
}
.card-testimonio__estrellas{color:var(--c-positive);font-size:15px;letter-spacing:2px}

/* Formulario */
.card-form{
  background:var(--c-white);border:var(--bd) solid var(--c-border);
  border-radius:var(--r);padding:20px 18px 22px;
  box-shadow:var(--sh-form-3);
}

/* Autor */
.card-autor{background:var(--c-surface-2);border:0;padding:18px;border-radius:var(--r)}
.card-autor__avatar{flex:0 0 52px;width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--ph-sm)}
.card-autor__nombre{font-size:16.5px;font-weight:800;color:var(--c-ink)}
.card-autor__rol{font-size:13.5px;color:var(--c-ink-3)}
.card-autor__bio{margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--c-ink-2)}

/* Circulo numerado de «Cómo funciona» (01-HOME.md §2.8) */
.paso-num{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--c-primary);color:var(--c-white);
  font-size:15px;font-weight:800;
}

/* ==========================================================================
   FORMULARIO CORTO DE LA HOME
   Movil: una tarjeta crema con las pastillas y el boton.
   Escritorio: texto a la izquierda y una TARJETA BLANCA a la derecha (480 px)
   con las pastillas en 2x2, el telefono, el boton y el sello de Trustpilot.
   El telefono, la nota verde y el sello son de escritorio; la maqueta movil no
   los lleva y por eso se ocultan, no se dejan de imprimir: el <form> tiene que
   seguir siendo valido y enviable en los dos tramos.
   ========================================================================== */
.bloque-encuentra{
  padding:22px 20px 24px;
  background:var(--c-surface-2);
  border:var(--bd) solid var(--c-border);
  border-radius:var(--r);
}
.bloque-encuentra__intro{margin-top:12px;font-size:15px;line-height:1.5;color:var(--c-ink-3)}
.bloque-encuentra__nota,
.bloque-encuentra__tel,
.bloque-encuentra__pie{display:none}
.bloque-encuentra__label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.chips-ramo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.chip-ramo{
  display:flex;align-items:center;gap:8px;
  min-height:52px;padding:0 14px;
  border-radius:var(--r);border:var(--bd-strong) solid var(--c-field-border);
  background:var(--c-white);color:var(--c-ink);
  font-family:inherit;font-size:16px;font-weight:700;text-align:left;cursor:pointer;
  transition:var(--t-soft);
}
.chip-ramo[aria-checked="true"]{background:var(--c-cta-bg);border-color:var(--c-ink)}

.bloque-encuentra__enviar{margin-top:16px;height:56px;font-size:19px}
.bloque-encuentra__legal{margin-top:12px;text-align:center}

@media (min-width:1024px){
  .bloque-encuentra{
    display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:80px;align-items:center;
    padding:0;background:transparent;border:0;border-radius:0;
  }
  .bloque-encuentra__intro{margin-top:22px;max-width:42ch;font-size:18px;line-height:1.65;color:var(--c-cta-ink)}
  .bloque-encuentra__nota{
    display:flex;align-items:center;gap:10px;margin-top:28px;
    font-size:15.5px;font-weight:700;color:var(--c-positive);
  }
  .bloque-encuentra__punto{width:8px;height:8px;border-radius:50%;background:var(--c-positive)}

  .bloque-encuentra__form{
    padding:36px;border-radius:var(--r);background:var(--c-white);
    box-shadow:0 22px 44px -30px rgba(16,24,32,.55);
  }
  .chips-ramo{gap:12px;margin-top:0}
  .chip-ramo{min-height:54px;padding:0 16px;font-size:16.5px;color:var(--c-ink-article)}
  .chip-ramo[aria-checked="true"]{background:var(--c-cta-bg);border-color:var(--c-action);color:var(--c-action-ink)}

  .bloque-encuentra__tel{display:block;margin:12px 0 0}
  .bloque-encuentra__tel .input{height:56px;font-size:16.5px;font-weight:600}
  .bloque-encuentra__enviar{margin-top:12px;height:62px}
  .bloque-encuentra__pie{
    display:flex;align-items:center;justify-content:center;gap:10px;
    margin-top:18px;padding-top:16px;border-top:var(--bd) solid var(--c-divider);
  }
}

/* Pareja de CTAs del hero. En desktop la maqueta usa 64px de alto con
   padding 0 36px (coral) y 0 34px (WhatsApp), y 38px de separacion arriba. */
.hero__ctas{display:grid;gap:10px;margin-top:20px}
@media (min-width:768px){
  .hero__ctas{display:flex;gap:12px;margin-top:38px}
  .hero__ctas .btn--primary{padding:0 36px}
  .hero__ctas .btn--whatsapp{padding:0 34px}
}

/* --- Tarjeta «Tu comparativa» · columna derecha del hero de la home -------
   Valores literales de desktop-home.dc.html. Ojo: el documento 01-HOME.md
   §2.3 describe aqui una tarjeta de testimonio; la maqueta pone la
   comparativa. Manda la maqueta. */
.comparativa-hero{position:relative}
.comparativa-hero__card{
  position:relative;z-index:1;
  padding:26px 28px 28px;border-radius:var(--r);
  background:var(--c-white);border:var(--bd) solid var(--c-note-border);
  box-shadow:0 24px 48px -32px rgba(16,24,32,.55);
}
.comparativa-hero__head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.comparativa-hero__ramo{display:block;margin-top:4px;font-size:21px;font-weight:800;letter-spacing:-.025em;color:var(--c-ink)}
.comparativa-hero__lista{display:grid;gap:8px;margin-top:18px}

.comparativa-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);
}
.comparativa-hero__fila--mejor{
  background:var(--c-white);border:var(--bd-strong) solid var(--c-positive);
}
.comparativa-hero__logo{flex:0 0 30px;width:30px;height:30px;border-radius:var(--r);background:var(--c-border)}
.comparativa-hero__fila--mejor .comparativa-hero__logo{background:var(--c-primary)}
.comparativa-hero__nombre{flex:1 1 auto;font-size:15.5px;font-weight:600;color:var(--c-ink-2)}
.comparativa-hero__fila--mejor .comparativa-hero__nombre{font-weight:800;color:var(--c-ink)}
.comparativa-hero__precio{flex:0 0 auto;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--c-ink)}
.comparativa-hero__fila--mejor .comparativa-hero__precio{color:var(--c-positive)}
.comparativa-hero__precio small{font-size:13px;font-weight:600;color:var(--c-ink-3)}
.comparativa-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;
}
.comparativa-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);
  font-size:15px;font-weight:700;color:var(--c-action-ink);
}
.comparativa-hero__ahorro b{font-size:22px;font-weight:800;letter-spacing:-.03em}
.comparativa-hero__ahorro small{font-size:14px;font-weight:600}
/* El sello sobresale 18px de la tarjeta. En desktop hay hueco en la rejilla;
   en movil la tarjeta ocupa todo el ancho util y ese saliente saca la pagina
   de su sitio (18 px de desbordamiento a 360). Debajo de 1024 se mete dentro. */
.comparativa-hero__sello{
  position:absolute;bottom:-16px;right:10px;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);
}

/* En desktop si hay hueco en la rejilla para el saliente de la maqueta */
@media (min-width:1024px){
  .comparativa-hero__sello{bottom:-20px;right:-18px}
}

/* --- Franja de datos del hero, montada sobre la seccion siguiente -------- */
/* El aire lateral lo pone el CONTENEDOR, no la rejilla. Con width:100% mas
   margin-inline en la propia rejilla, el ancho total era 100% + 40px y la
   pagina desbordaba 18 px a 360 px. */
.hero__datos{
  position:relative;z-index:1;display:flex;justify-content:center;
  margin-bottom:-52px;padding-inline:var(--pad-x);
}
.hero__datos-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  width:100%;max-width:var(--container);
  border-radius:var(--r);background:var(--c-border-soft);overflow:hidden;
  box-shadow:0 18px 34px -26px rgba(16,24,32,.45);
}
.hero__datos-celda{padding:18px 20px;background:var(--c-white)}
.hero__datos-cifra{white-space:nowrap;font-size:24px;font-weight:800;letter-spacing:-.032em;color:var(--c-primary)}
.hero__datos-etiqueta{margin-top:6px;font-size:14px;line-height:1.4;color:var(--c-ink-2)}
@media (min-width:768px){
  .hero__datos{padding-inline:var(--pad-x-d)}
  .hero__datos-grid{grid-template-columns:repeat(4,1fr)}
  .hero__datos-celda{padding:26px 28px}
  .hero__datos-cifra{font-size:30px}
  .hero__datos-etiqueta{font-size:14.5px}
}
/* Lo que va debajo tiene que dejar hueco para el solapamiento de 52px.
   Incluye .franja-prensa, que es lo que sigue al hero en la home: si solo se
   contempla .section, la franja se cuela por debajo de las celdas. */
/* Los 52 px extra compensan lo que la franja de datos se monta encima de la
   seccion siguiente. Solo los lleva la HOME y solo en escritorio: la franja no
   existe en ninguna otra plantilla ni por debajo de 1024, y aplicarlos a todo
   `.hero +` dejaba un hueco de 52 px sin motivo en landings, ramo y contacto. */
@media (min-width:1024px){
  .hero--home + .section{padding-top:calc(72px + 52px)}
  .hero--home + .franja-prensa{padding-top:calc(24px + 52px)}
}

/* Prueba social bajo los CTAs del hero: nota grande + estrellas + opiniones */
/* En movil el testimonio va ENTRE el texto y los botones (mobile-home.html) */
@media (max-width:1023px){
  .hero__grid--home{display:grid;gap:0}
  .hero__grid--home > .hero__texto{order:1}
  .hero__grid--home > .card-testimonio{order:2}
  .hero__grid--home > .hero__acciones{order:3}
  /* La banda de 4 datos es solo de escritorio: la maqueta movil pasa del hero
     directo a la franja de prensa. */
  .hero__datos{display:none}
}

/* Pastillas del hero: solo movil (mobile-home.html las tiene, desktop-home no) */
.hero__pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
@media (min-width:1024px){ .hero__pills{display:none} }

/* Prueba social del hero.
   Movil: una linea de 13 px, «★★★★★ 4,8/5 en Trustpilot · 474 opiniones».
   Escritorio: el 4,8 a 40 px con las estrellas y el conteo a su derecha. */
.hero__social{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13px;color:var(--c-ink-2)}
.hero__social-estrellas{color:var(--c-star);font-size:14px;letter-spacing:1px}
.hero__social-nota{font-weight:800;color:var(--c-ink)}
.hero__social-nota::after{content:"/5"}
/* «en Trustpilot» cambia de sitio segun el tramo, asi que el texto va suelto en
   el PHP («474 opiniones») y la coletilla la pone el CSS donde toca. */
.hero__social-texto::before{content:"en Trustpilot · "}
@media (min-width:1024px){
  .hero__social{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 14px;margin-top:32px;font-size:inherit}
  .hero__social-nota{
    grid-column:1;grid-row:1 / span 2;align-self:center;
    font-size:40px;line-height:1;letter-spacing:-.035em;color:var(--c-primary);
  }
  .hero__social-nota::after{content:none}
  .hero__social-estrellas{grid-column:2;grid-row:1;align-self:end}
  .hero__social-texto{grid-column:2;grid-row:2}
  .hero__social-texto{font-size:14px;color:var(--c-ink-3)}
  .hero__social-texto::before{content:none}
  .hero__social-texto::after{content:" en Trustpilot"}
}

/* Margenes internos del hero. Van en CSS y NO en style inline: con inline
   ganarian sobre la media query y en desktop el marcador melocoton del H1
   se comeria la primera linea del parrafo. */
.hero h1{margin-top:14px}
.hero .t-body-hero{margin-top:12px}
@media (min-width:1024px){
  .hero h1{margin-top:26px}
  .hero .t-body-hero{margin-top:30px}
}

/* Aire del hero. Valores de las maquetas: 26px en movil (home/contacto),
   22px 0 24px en landing, y 92px 0 56px en desktop. */
.hero__wrap{padding-block:26px}
.hero__wrap--landing{padding-block:22px 24px}
.hero__wrap--post{padding-block:8px 24px}
@media (min-width:1024px){
  .hero__wrap{padding-block:92px 56px}
  .hero__wrap--landing{padding-block:64px 56px}
  .hero__wrap--post{padding-block:32px 40px}
}

/* ==========================================================================
   11 · LISTA DE CHECKS Y ASPAS
   ========================================================================== */

.lista-check li,.lista-aspa li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:14.5px;line-height:1.45;color:var(--c-ink-2);
}
.lista-check li + li,.lista-aspa li + li{margin-top:8px}
.lista-check li::before{content:"✓";flex:0 0 auto;color:var(--c-positive);font-weight:700}
.lista-aspa li::before{content:"✕";flex:0 0 auto;color:var(--c-negative);font-weight:700}

/* ==========================================================================
   11 bis · BLOQUES DE LA LANDING
   ========================================================================== */

/* Caja del logo de la aseguradora: 72×34, radio 4 (00-SISTEMA.md §4.5) */
.caja-logo{
  display:flex;align-items:center;justify-content:center;
  width:72px;height:34px;padding:2px;
  border-radius:var(--r-mark);background:var(--c-surface-1);
}
.caja-logo img{max-height:30px;width:auto;object-fit:contain}

/* Bloque de precio del hero de landing (02-LANDING.md §4.1) */
.bloque-precio{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:16px;padding:14px 16px;
  background:var(--c-surface-2);border-radius:var(--r);
}

/* Nota media grande de opiniones: 34/800 en coral de TEXTO, no en #E9714A */
.t-nota-media{font-size:34px;line-height:1;letter-spacing:-.03em;font-weight:800;color:var(--c-action-ink)}

/* Barras de distribucion de estrellas */
.barras{display:grid;gap:8px}
.barra{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.barra__label{font-size:13px;font-weight:700;color:var(--c-ink-2);white-space:nowrap}
.barra__pista{height:8px;border-radius:var(--r-pill);background:var(--c-surface-1);overflow:hidden}
.barra__relleno{display:block;height:100%;background:var(--c-star)}
.barra__pct{font-size:13px;color:var(--c-ink-3);white-space:nowrap}

@media (min-width:1024px){
  .opiniones-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:44px;align-items:center;margin-top:20px}
  .opiniones-grid .barras{margin-top:0}
}
@media (max-width:1023px){ .opiniones-grid{margin-top:16px} }

/* ==========================================================================
   12 · TABLA COMPARATIVA (00-SISTEMA.md §5.8)
   ========================================================================== */

.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla{
  min-width:430px;
  border:var(--bd) solid var(--c-border);border-radius:var(--r);overflow:hidden;
}
.tabla--2col{min-width:330px}
.tabla thead th{
  background:var(--c-primary);color:var(--c-white);
  font-size:13.5px;font-weight:700;text-align:left;
  padding:11px 14px;
}
.tabla tbody tr{border-top:var(--bd) solid var(--c-divider)}
.tabla tbody tr:nth-child(even){background:var(--c-row-alt)}
.tabla td,.tabla th[scope="row"]{padding:12px 14px;font-size:13.5px;color:var(--c-ink-2);text-align:left}
.tabla th[scope="row"]{font-size:14.5px;font-weight:600;color:var(--c-ink)}
.tabla .es-propio{font-weight:700;color:var(--c-positive)}
.tabla__fuente{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--c-ink-4)}

@media (min-width:1024px){
  /* Sin scroll ni min-width en desktop (00-SISTEMA.md §8.5) */
  .tabla-scroll{overflow-x:visible}
  .tabla,.tabla--2col{min-width:0;width:100%}
}

/* ==========================================================================
   13 · ACORDEON (00-SISTEMA.md §5.9)
   El contenido va en el HTML, no cargado por JS: tiene que indexarlo Google.
   ========================================================================== */

.acordeon{display:grid;gap:8px}
.acordeon__item{background:var(--c-surface-2);border-radius:var(--r);overflow:hidden}
.acordeon__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:56px;padding:15px 16px;
  font-size:16.5px;font-weight:700;line-height:1.3;color:var(--c-ink);text-align:left;
}
.acordeon__signo{flex:0 0 auto;font-size:20px;font-weight:700;color:var(--c-action);line-height:1}
.acordeon__body{padding:0 16px 18px;font-size:15.5px;line-height:1.55;color:var(--c-ink-2)}
.acordeon__body[hidden]{display:none}

/* En la home el acordeon no lleva tarjeta: filas separadas por una linea, con
   la pregunta a 21 px. Es la unica plantilla que lo pinta asi (desktop-home);
   en las landings sigue siendo la tarjeta crema de arriba. */
@media (min-width:1024px){
  .faq-grid--home .acordeon{gap:0}
  .faq-grid--home .acordeon__item{
    background:transparent;border-radius:0;
    border-bottom:var(--bd) solid var(--c-divider);
  }
  .faq-grid--home .acordeon__head{
    gap:20px;min-height:78px;padding:26px 0;
    font-size:21px;letter-spacing:-.015em;
  }
  .faq-grid--home .acordeon__signo{font-size:26px}
  .faq-grid--home .acordeon__body{
    padding:0 60px 28px 0;max-width:70ch;
    font-size:17.5px;line-height:1.7;
  }
  .faq-grid__ayuda{margin-top:20px;font-size:16px;line-height:1.6;color:var(--c-ink-2)}
  .faq-grid__ayuda a{font-weight:700}
}
@media (max-width:1023px){ .faq-grid__ayuda{display:none} }

/* ==========================================================================
   14 · BLOQUES DE AVISO (00-SISTEMA.md §5.10)
   ========================================================================== */

.aviso{border-radius:var(--r);padding:18px}
.aviso__titulo{font-size:15.5px;font-weight:800;line-height:1.3}
.aviso__texto{margin-top:8px;font-size:15px;line-height:1.5}

.aviso--resumen{background:var(--c-summary-bg);border:var(--bd) solid var(--c-summary-border)}
.aviso--resumen .aviso__titulo{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--c-positive)}
.aviso--resumen .aviso__texto{color:var(--c-summary-body)}
.aviso--resumen li{display:flex;gap:9px;font-size:15.5px;line-height:1.5;color:var(--c-summary-body)}
.aviso--resumen li + li{margin-top:8px}
.aviso--resumen li::before{content:"•";color:var(--c-positive);font-weight:700}

.aviso--consejo{background:var(--c-cta-bg)}
.aviso--consejo .aviso__titulo{color:var(--c-primary)}
.aviso--consejo .aviso__texto{color:var(--c-cta-ink)}

.aviso--recuerda{background:var(--c-warn-bg);border:var(--bd) solid var(--c-warn-border)}
.aviso--recuerda .aviso__titulo{color:var(--c-warn-ink)}
.aviso--recuerda .aviso__texto{color:var(--c-warn-body);line-height:1.55}

.aviso--calido{background:var(--c-note-bg);border:var(--bd) solid var(--c-note-border)}
.aviso--calido .aviso__titulo{color:var(--c-action-ink)}
.aviso--calido .aviso__texto{color:var(--c-cta-ink);font-size:14.5px}

.aviso--enviado{background:var(--c-cta-bg);border:var(--bd) solid var(--c-cta-border)}
.aviso--enviado .aviso__titulo{font-size:20px;color:var(--c-primary)}
.aviso--enviado .aviso__texto{color:var(--c-cta-ink)}

/* --- Caja de definicion inline (bloque 5 de 09-BLOQUES-NUEVOS) -----------
   Interrumpe la lectura lo justo: filete a la izquierda en vez de tarjeta,
   para que no compita con las cajas de consejo y de recuerda, que si son
   llamadas de atencion. */
.caja-definicion{
  padding:14px 16px;border-radius:var(--r-sm);
  background:var(--c-surface-2);border-left:3px solid var(--c-action);
}
.caja-definicion__termino{font-size:14px;font-weight:800;color:var(--c-ink);letter-spacing:-.01em}
.caja-definicion__termino dfn{font-style:normal}
.caja-definicion__texto{margin-top:5px;font-size:14.5px;line-height:1.55;color:var(--c-ink-2);text-wrap:pretty}
.caja-definicion__enlace{
  display:inline-flex;align-items:center;gap:5px;margin-left:6px;
  font-weight:700;color:var(--c-action-ink);white-space:nowrap;
}

.fuentes__origen{color:var(--c-ink-3)}

/* ==========================================================================
   GLOSARIO
   ========================================================================== */

/* Marca del glosario: circulo azul con una «i» en serif cursiva. Es el unico
   sitio del sistema donde entra una serif, y es a proposito: distingue el
   diccionario del resto del contenido de un vistazo. */
.glosario__marca{display:flex;align-items:center;gap:10px}
.glosario__glifo{
  display:flex;align-items:center;justify-content:center;flex:0 0 36px;
  width:36px;height:36px;border-radius:50%;
  background:var(--c-primary);color:var(--c-white);
  font-family:Georgia,"Times New Roman",serif;font-size:20px;font-style:italic;font-weight:700;
}

/* La definicion va en tarjeta con filete azul: es la respuesta a la consulta,
   y tiene que leerse antes que nada. */
.glosario-def{
  margin-top:18px;padding:20px;border-radius:var(--r);
  background:var(--c-white);border-left:3px solid var(--c-primary);
  box-shadow:0 2px 4px -2px rgba(16,24,32,.08), 0 16px 30px -22px rgba(16,24,32,.35);
}
.glosario-def__etiqueta{
  font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-ink-3);
}
.glosario-def__texto{
  margin-top:10px;font-size:17.5px;line-height:1.55;font-weight:600;
  color:var(--c-ink);text-wrap:pretty;
}

.glosario-ejemplo{padding:18px;border-radius:var(--r);background:var(--c-surface-2)}
.glosario-ejemplo__etiqueta{
  font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-action-ink);
}
.glosario-ejemplo__texto{margin-top:10px;font-size:16px;line-height:1.6;color:var(--c-ink-article);text-wrap:pretty}

/* Navegacion por letra: pegada bajo la cabecera y desplazable en movil. */
.glosario-letras{
  position:sticky;top:var(--header-h);z-index:30;
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:var(--bd) solid var(--c-divider);
  border-bottom:var(--bd) solid var(--c-divider);
}
.glosario-letras__inner{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-block:8px}
.glosario-letras__inner::-webkit-scrollbar{display:none}
.glosario-letras__letra{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  min-width:var(--h-tap);min-height:var(--h-tap);
  border-radius:var(--r-mark);
  font-size:14px;font-weight:800;color:var(--c-ink-2);
}
.glosario-letras__letra:hover{background:var(--c-surface-1);color:var(--c-action-ink)}

.glosario-grupo + .glosario-grupo{margin-top:26px}
.glosario-grupo__letra{
  font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-ink-3);padding-bottom:8px;margin-bottom:12px;
  border-bottom:var(--bd) solid var(--c-divider);
}

.card-termino{display:block;padding:16px}
.card-termino__nombre{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.02em;color:var(--c-ink)}
.card-termino__def{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--c-ink-2)}
.card-termino__ramos{display:block;margin-top:10px;font-size:12.5px;font-weight:700;color:var(--c-ink-3)}

/* --- Pastillas de enlace (terminos vecinos, destacados del indice) -------- */
.pastillas-enlace{display:flex;flex-wrap:wrap;gap:8px}
.pastilla-enlace{
  display:flex;align-items:center;gap:8px;
  min-height:var(--h-tap);padding:11px 15px;border-radius:var(--r-pill);
  background:var(--c-white);border:var(--bd) solid var(--c-field-border);
  font-size:14.5px;font-weight:700;color:var(--c-ink);
  transition:transform .18s ease-out, border-color .16s ease-out, color .16s ease-out;
}
.pastilla-enlace span{color:var(--c-ink-4)}
.pastilla-enlace:hover{border-color:var(--c-action);color:var(--c-action-ink);transform:translateY(-2px)}

/* --- Linea de firma con avatares solapados ------------------------------- */
.firma-linea{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:13px;color:var(--c-ink-3)}
.firma-linea__avatares{display:flex;flex:0 0 auto}
.firma-linea__avatar{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--c-primary);border:2px solid var(--c-white);
  color:var(--c-white);font-size:10px;font-weight:800;
}
/* El revisor monta sobre el autor y va en verde: es la senal de que alguien
   con credencial ha validado el contenido, no solo redactado. */
.firma-linea__avatar--revisor{margin-left:-9px;background:var(--c-positive)}
.firma-linea__texto{flex:1 1 auto;min-width:0;line-height:1.45}
.firma-linea__texto strong{color:var(--c-ink)}

.card-nivel2--plano{cursor:default}

/* ==========================================================================
   DIRECTORIO DE COMPAÑÍAS
   ========================================================================== */

.dir-filtros{padding-top:14px}
.dir-filtros__fila{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none}
.dir-filtros__fila::-webkit-scrollbar{display:none}
.dir-filtros__fila--estado{margin-top:14px}
.dir-contador{font-size:14px;font-weight:700;color:var(--c-ink-3)}

.card-cia{padding:16px}
/* El filete verde separa de un vistazo lo que se puede contratar de lo que
   solo se compara. Es la distincion que da sentido a esta pagina. */
.card-cia--autorizada{border:var(--bd-strong) solid var(--c-summary-border)}
.card-cia__cabecera{display:flex;align-items:center;gap:12px}
.card-cia__logo{
  flex:0 0 62px;display:flex;align-items:center;justify-content:center;
  width:62px;height:34px;border-radius:var(--r-mark);background:var(--ph-sm);
}
.card-cia__logo img{max-height:30px;width:auto;object-fit:contain}
.card-cia__ident{flex:1 1 auto;min-width:0}
.card-cia__nombre{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--c-ink)}
.card-cia__estado{
  display:flex;align-items:center;gap:6px;margin-top:4px;
  font-size:12px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--c-ink-3);
}
.card-cia__estado--ok{color:var(--c-positive)}
.card-cia__chevron{flex:0 0 auto;color:var(--c-ink-4);font-size:17px}
.card-cia__ramos{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:14px;padding-top:14px;
  border-top:var(--bd) solid var(--c-divider);
}
.card-cia__ramo{
  padding:6px 11px;border-radius:var(--r-pill);background:var(--c-surface-2);
  font-size:12.5px;font-weight:700;color:var(--c-ink-article);
  transition:background-color .16s ease-out, color .16s ease-out;
}
a.card-cia__ramo:hover{background:var(--c-cta-bg);color:var(--c-action-ink)}

/* Chip pequeño de los filtros de estado */
.chip--sm{min-height:38px;padding:0 14px;font-size:13.5px}

/* ==========================================================================
   PERFIL DE COMPAÑÍA
   ========================================================================== */

.perfil-hero__marca{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Ficha registral. Lista, no tabla: el valor tiene que poder ocupar varias
   lineas. La razon social de una aseguradora pasa de 50 caracteres y en una
   tabla de dos columnas obliga a desplazar en horizontal. */
.ficha-entidad{
  margin-top:16px;border-radius:var(--r);overflow:hidden;
  background:var(--c-white);border:var(--bd) solid var(--c-border);
}
.ficha-entidad__fila{
  display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr);
  gap:14px;padding:13px 16px;
}
.ficha-entidad__fila + .ficha-entidad__fila{border-top:var(--bd) solid var(--c-divider)}
.ficha-entidad__etiqueta{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-ink-3);line-height:1.35;
}
.ficha-entidad__valor{margin:0;font-size:15px;line-height:1.45;font-weight:600;color:var(--c-ink);min-width:0}

/* Caja «Qué significa»: mismo lenguaje que la definición del glosario, porque
   es lo mismo — explicar un tecnicismo donde aparece. */
.nota-glosario{
  display:flex;gap:12px;margin-top:16px;padding:16px;
  border-radius:var(--r);background:var(--c-white);
  border-left:3px solid var(--c-primary);
}
.nota-glosario .glosario__glifo{flex:0 0 30px;width:30px;height:30px;font-size:17px}
.nota-glosario__etiqueta{
  display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-ink-3);
}
.nota-glosario__termino{display:block;margin-top:5px;font-size:16px;font-weight:800;color:var(--c-ink)}
.nota-glosario__texto{display:block;margin-top:6px;font-size:15px;line-height:1.55;color:var(--c-ink-article)}

/* Nota media de portales ajenos. El texto de al lado no es decoración: es lo
   que impide que se lea como una valoración de Seguratis. */
.perfil-nota{
  display:flex;align-items:center;gap:18px;margin-top:16px;padding:20px;
  border-radius:var(--r);background:var(--c-white);
  border:var(--bd) solid var(--c-border);
}
.perfil-nota__cifra{flex:0 0 auto;text-align:center}
.perfil-nota__valor{display:block;font-size:38px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--c-primary)}
.perfil-nota__estrellas{display:block;margin-top:6px;color:var(--c-star);font-size:13px;letter-spacing:1px}
.perfil-nota__texto{flex:1 1 auto;min-width:0;font-size:14.5px;line-height:1.5;color:var(--c-ink-2)}
.perfil-nota__texto strong{color:var(--c-ink)}

.card-cobertura__chevron{flex:0 0 auto;color:var(--c-ink-4);font-size:17px}

/* ==========================================================================
   LATERAL STICKY · tarjeta de CTA
   ========================================================================== */

.lateral-cta{padding:26px 28px 28px;border-radius:var(--r);background:var(--c-cta-bg)}
.lateral-cta__titulo{
  margin-top:12px;max-width:22ch;
  font-size:24px;line-height:1.18;font-weight:800;letter-spacing:-.028em;
  color:var(--c-primary);text-wrap:balance;
}
.lateral-cta__texto{margin-top:12px;font-size:16px;line-height:1.6;color:var(--c-cta-ink);text-wrap:pretty}

/* ==========================================================================
   AUTOR
   ========================================================================== */

.autor-cab{display:flex;align-items:center;gap:14px}
.autor-cab__foto{
  flex:0 0 64px;display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;overflow:hidden;
  background:var(--c-primary);color:var(--c-white);
  font-size:20px;font-weight:800;
}
.autor-cab__foto img{width:100%;height:100%;object-fit:cover}
.autor-cab__sello{
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--c-positive);
}
.autor-cab__cargo{display:block;margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--c-ink-3)}

/* Dos celdas separadas por un filete de 1px hecho con el gap del grid: asi el
   borde no se dobla en el centro. */
.autor-cifras{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:20px;
  border-radius:var(--r);background:var(--c-border);overflow:hidden;
}
.autor-cifras__celda{padding:16px 14px;background:var(--c-white)}
.autor-cifras__valor{display:block;font-size:24px;font-weight:800;letter-spacing:-.035em;color:var(--c-primary)}
.autor-cifras__etiqueta{display:block;margin-top:4px;font-size:13px;line-height:1.35;color:var(--c-ink-2)}

.pastilla-enlace--plana{border-color:transparent;background:var(--c-white);cursor:default}
.pastilla-enlace--plana:hover{border-color:transparent;color:var(--c-ink);transform:none}

/* ==========================================================================
   ÍNDICE DE BLOG
   ========================================================================== */

.card-guia{display:block;padding:18px}
.card-guia__titulo{display:block;margin-top:12px;font-size:18px;line-height:1.25;font-weight:800;letter-spacing:-.022em;color:var(--c-ink)}
.card-guia__resumen{display:block;margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--c-ink-2)}
.card-guia__meta{display:block;margin-top:12px;font-size:12.5px;color:var(--c-ink-3)}

.paginacion{margin-top:24px}
.paginacion .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.paginacion .page-numbers{
  display:flex;align-items:center;justify-content:center;
  min-width:var(--h-tap);min-height:var(--h-tap);padding:0 12px;
  border-radius:var(--r-pill);border:var(--bd) solid var(--c-field-border);
  font-size:15px;font-weight:700;color:var(--c-ink-article);background:var(--c-white);
}
.paginacion .page-numbers.current{background:var(--c-cta-bg);border-color:var(--c-action);color:var(--c-action-ink)}
.paginacion .page-numbers.dots{border-color:transparent;background:transparent}

/* ==========================================================================
   GRACIAS
   ========================================================================== */

/* Degradado propio, sin manchas ni puntos: la maqueta de gracias es casi
   blanca con un toque cálido arriba. */
.hero--gracias{background:var(--hero-bg-gracias)}

/* La confirmación va centrada: es un acuse de recibo, no una portada.
   `text-align` hay que forzarlo en los hijos porque base.css alinea a la
   izquierda todos los h1/h2/h3/p del sitio. */
.gracias-confirma{display:flex;flex-direction:column;align-items:center;text-align:center}
.gracias-confirma > *{text-align:center}
.gracias-confirma .t-h1-post,.gracias-confirma .t-body-hero{max-width:26ch}

/* Con la cabecera reducida el logo va centrado: es lo único que queda. */
.site-header--minima .site-header__bar{justify-content:center}
.site-header--minima .site-header__logo{margin-right:0}
.gracias-check{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:var(--c-positive);color:var(--c-white);
  margin-bottom:18px;
}
.gracias-sello{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  padding:10px 16px;border-radius:var(--r-pill);
  background:var(--c-white);border:var(--bd) solid var(--c-border);
  color:var(--c-ink);font-size:14px;font-weight:700;
  box-shadow:var(--sh-card);
}

/* Razones de correduría (gracias) */
.razon-correduria{display:flex;gap:12px;padding:16px}
.razon-correduria__icono{
  flex:0 0 34px;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);
}
.razon-correduria__titulo{display:block;font-size:16px;font-weight:800;color:var(--c-ink);letter-spacing:-.015em}
.razon-correduria__texto{display:block;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--c-ink-2)}

/* Línea de tiempo: el hilo vertical es un hijo del marcador, no un ::before,
   para que crezca con la altura real del texto de cada paso. */
.linea-pasos{margin-top:14px;display:grid;gap:0;list-style:none;padding:0}
.linea-pasos__paso{display:flex;gap:14px}
.linea-pasos__marca{flex:0 0 34px;display:flex;flex-direction:column;align-items:center}
.linea-pasos__punto{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;
  background:var(--c-surface-1);color:var(--c-ink-2);
  font-size:14px;font-weight:800;
}
.linea-pasos__punto--hecho{background:var(--c-positive);color:var(--c-white)}
.linea-pasos__hilo{flex:1 1 auto;width:2px;min-height:22px;margin:6px 0;border-radius:2px;background:var(--c-border)}
.linea-pasos__texto{flex:1 1 auto;min-width:0;padding-bottom:18px}
.linea-pasos__titulo{display:block;font-size:16.5px;font-weight:700;color:var(--c-ink)}
.linea-pasos__titulo--hecho{color:var(--c-positive)}
.linea-pasos__desc{display:block;margin-top:4px;font-size:15px;line-height:1.5;color:var(--c-ink-2)}

.caja-crema{padding:18px;border-radius:var(--r);background:var(--c-surface-2)}
.lista-check--compacta li{font-size:15.5px;line-height:1.5}

.gracias-asesor{display:flex;align-items:center;gap:14px;margin-top:12px}
.gracias-asesor__foto{
  flex:0 0 52px;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;overflow:hidden;
  background:var(--c-primary);color:var(--c-white);font-size:16px;font-weight:800;
}
.gracias-asesor__foto img{width:100%;height:100%;object-fit:cover}
.gracias-asesor__nombre{display:block;font-size:16.5px;font-weight:800;color:var(--c-ink)}
.gracias-asesor__nombre:hover{color:var(--c-action-ink)}
.gracias-asesor__cargo{display:block;margin-top:4px;font-size:13.5px;color:var(--c-ink-3)}

/* ==========================================================================
   MODALIDADES DEL RAMO
   ========================================================================== */

.card-modalidad{
  flex:0 0 288px;display:flex;flex-direction:column;scroll-snap-align:start;
  border-radius:var(--r);background:var(--c-white);
  border:var(--bd) solid var(--c-border);overflow:hidden;
  box-shadow:var(--sh-card);
}
/* La recomendada lleva cinta azul y sombra más profunda: es criterio de la
   casa, y va firmada para que se lea como recomendación, no como dato. */
.card-modalidad--recomendada{
  border:var(--bd-strong) solid var(--c-destacada-border);
  box-shadow:0 4px 8px -3px rgba(16,24,32,.1), 0 26px 50px -30px rgba(16,24,32,.55);
}
.card-modalidad__cinta{
  display:flex;align-items:center;gap:9px;padding:11px 18px;
  background:var(--c-primary);color:var(--c-white);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.card-modalidad__estrella{
  display:flex;align-items:center;justify-content:center;flex:0 0 20px;
  width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.2);font-size:11px;
}
.card-modalidad__cuerpo{flex:1 1 auto;display:flex;flex-direction:column;padding:18px}

.aviso__nota{
  margin-top:14px;padding-top:14px;
  border-top:var(--bd) solid var(--c-warn-border);
  font-size:14px;line-height:1.5;color:var(--c-warn-body);
}

@media (min-width:1024px){
  /* En escritorio el carrusel de modalidades pasa a rejilla completa. */
  .carrusel--planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;overflow:visible}
  .card-modalidad{flex:1 1 auto}
}

/* ==========================================================================
   TABLA COMPARATIVA AMPLIA (madre de ramo y ficha)
   ========================================================================== */

.tabla-cia{display:flex;align-items:center;gap:10px;text-align:left}
.tabla-cia__logo{
  flex:0 0 46px;display:flex;align-items:center;justify-content:center;
  width:46px;height:26px;border-radius:var(--r-mark);background:var(--ph-sm);
}
.tabla-cia__logo img{max-height:22px;width:auto;object-fit:contain}
.tabla-cia__sello{
  display:block;margin-top:3px;
  font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--c-positive);
}
.tabla--comparativa .es-destacada{background:var(--c-row-alt)}
.tabla--comparativa .es-propio{background:var(--c-cta-bg)}

/* Columnas que solo caben en escritorio. Se ocultan, no se eliminan: el dato
   sigue en el HTML y por tanto es indexable y accesible al lector de pantalla
   cuando se ensancha la ventana. */
.solo-desktop{display:none}
@media (min-width:768px){
  .solo-desktop{display:table-cell}
}

/* --- Aviso de compania que Seguratis no distribuye ----------------------
   Ocupa el hueco del formulario en el hero de esas fichas, asi que necesita
   el mismo peso visual que la tarjeta del formulario. */
.aviso-independiente{padding:22px}
.aviso-independiente .aviso__titulo{font-size:19px;letter-spacing:-.02em}

/* ==========================================================================
   15 · BLOQUE CTA DE CIERRE (00-SISTEMA.md §5.11)
   Siempre sobre fondo blanco, nunca a ancho completo.
   ========================================================================== */

.cta-cierre{
  margin:28px var(--pad-x) 0;
  padding:24px 20px;
  background:var(--c-cta-bg);border-radius:var(--r);
}
.cta-cierre__titulo{font-size:22px;line-height:1.15;letter-spacing:-.025em;font-weight:800;color:var(--c-primary);text-wrap:balance}
.cta-cierre__texto{margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--c-cta-ink)}
.cta-cierre__acciones{margin-top:18px;display:grid;gap:10px}

@media (min-width:1024px){
  .cta-cierre{
    max-width:var(--container);margin-inline:auto;
    padding:48px;
  }
  .cta-cierre__titulo{font-size:34px;line-height:1.1}
  .cta-cierre__acciones{display:flex;gap:12px}
}

/* ==========================================================================
   16 · FRANJA TRUSTPILOT (00-SISTEMA.md §5.13)
   ========================================================================== */

.trustpilot{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:13px;
  font-size:13px;font-weight:700;color:var(--c-ink-article);
}
.trustpilot__estrellas{display:flex;gap:2px}
.trustpilot__estrella{
  display:flex;align-items:center;justify-content:center;
  width:17px;height:17px;background:var(--c-trustpilot);color:var(--c-white);font-size:11px;
}

/* ==========================================================================
   17 · FRANJA DE DATOS 2x2 (00-SISTEMA.md §5.14)
   Las lineas son el gap sobre el fondo del contenedor.
   ========================================================================== */

.datos{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--c-border-soft);
  border-radius:var(--r);overflow:hidden;
}
.datos__celda{background:var(--c-white);padding:15px 14px}
.datos__cifra{display:block;font-size:20px;line-height:1.1;letter-spacing:-.025em;font-weight:800;color:var(--c-primary)}
.datos__etiqueta{display:block;margin-top:4px;font-size:13px;line-height:1.35;color:var(--c-ink-2)}

/* En desktop pasa a una fila de 4 SOLO si el contenedor da de si. Con
   repeat(4,1fr) fijo, dentro de una columna estrecha (lateral sticky de 380px)
   las etiquetas se parten a media palabra. */
@media (min-width:1024px){ .datos{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} }

/* ==========================================================================
   18 · NAV DE ANCLAS STICKY (00-SISTEMA.md §5.15) · solo SEO
   ========================================================================== */

.anclas{
  position:sticky;top:var(--header-h);z-index:30;
  display:flex;gap:8px;overflow-x:auto;
  padding:12px var(--pad-x);
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  border-top:var(--bd) solid var(--c-divider);
  border-bottom:var(--bd) solid var(--c-divider);
  scrollbar-width:none;
}
.anclas::-webkit-scrollbar{display:none}

/* scroll-margin-top: 68px movil / 113px con nav de anclas (QA §4) */
[id]{scroll-margin-top:var(--header-h)}
.tiene-anclas [id]{scroll-margin-top:113px}
@media (min-width:1024px){
  .anclas{display:none}
  [id]{scroll-margin-top:96px}
  .tiene-anclas [id]{scroll-margin-top:96px}
}

/* ==========================================================================
   19 · MIGAS DE PAN (00-SISTEMA.md §5.16)
   ========================================================================== */

.migas{display:flex;flex-wrap:wrap;gap:8px;padding:12px var(--pad-x);font-size:13px;color:var(--c-ink-3)}
.migas a{color:var(--c-ink-3)}
.migas a:hover{color:var(--c-ink)}
.migas__sep{color:var(--c-ink-4)}
.migas [aria-current="page"]{font-weight:600;color:var(--c-ink)}
@media (min-width:1024px){
  .migas{max-width:calc(var(--container) + var(--pad-x-d) * 2);margin-inline:auto;padding-inline:var(--pad-x-d)}
}

/* ==========================================================================
   20 · CARRUSEL (00-SISTEMA.md §4.4) · desaparece en desktop
   ========================================================================== */

.carrusel{
  display:flex;gap:12px;overflow-x:auto;
  scroll-snap-type:x proximity;
  margin-inline:calc(var(--pad-x) * -1);
  padding-inline:var(--pad-x);
  scrollbar-width:none;
}
.carrusel::-webkit-scrollbar{display:none}
.carrusel > *{scroll-snap-align:start}
.carrusel--opiniones > *{flex:0 0 264px}
.carrusel--planes > *{flex:0 0 272px}

@media (min-width:768px){
  .carrusel{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
    overflow:visible;margin-inline:0;padding-inline:0;
  }
  .carrusel--opiniones > *,.carrusel--planes > *{flex:none}
}

/* ==========================================================================
   21 · CAJAS DE ICONO (00-SISTEMA.md §5.17)
   ========================================================================== */

.caja-icono{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:0 0 42px;
  border-radius:var(--r);background:var(--c-surface-1);color:var(--c-primary);
}
.caja-icono--redonda{border-radius:50%}
.caja-icono--funcional{background:var(--c-cta-bg);color:var(--c-action-ink)}
.caja-icono--destacada{background:var(--c-action);color:var(--c-white)}
.caja-icono--38{width:38px;height:38px;flex:0 0 38px}
.caja-icono--32{width:32px;height:32px;flex:0 0 32px}

/* ==========================================================================
   22 · HERO (00-SISTEMA.md §5.18)
   Las manchas y los puntos son elementos posicionados: pintan por encima de
   cualquier hermano en flujo normal. TODO hijo del hero lleva z-index 1.
   ========================================================================== */

/* El degradado por defecto es el de las secciones, que es el que usan 8 de las
   14 maquetas. Las cuatro que tienen el suyo lo piden con su modificador. */
.hero{position:relative;isolation:isolate;background:var(--hero-bg)}
.hero--home{background:var(--hero-bg-home)}
.hero--ficha{background:var(--hero-bg-ficha)}
.hero--contacto{background:var(--hero-bg-contacto)}
.hero--a-blanco{background:var(--hero-bg-blanco)}
.hero__capa{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero > *:not(.hero__capa){position:relative;z-index:1}

/* Manchas: width y height IDENTICOS. Un valor distinto las vuelve elipses y
   en movil producen una banda horizontal (05-IMPLEMENTACION.md §6). */
.hero__mancha{position:absolute;border-radius:50%;filter:blur(40px)}
.hero__mancha--coral{
  top:-170px;right:-130px;width:335px;height:335px;
  background:var(--hero-blob-coral);
  animation:aurora 18s ease-in-out infinite;
}
.hero__mancha--verde{
  bottom:-90px;left:-150px;width:360px;height:360px;
  background:var(--hero-blob-verde);
  animation:aurora 24s ease-in-out infinite reverse;
}
@media (min-width:1024px){
  .hero__mancha--coral{width:419px;height:419px}
  .hero__mancha--verde{width:450px;height:450px}
}

.hero__punto{position:absolute;border-radius:50%}
.hero__punto--1{top:12%;right:9%;width:16px;height:16px;background:var(--hero-dot-1);animation:drift 9s ease-in-out infinite}
.hero__punto--2{top:64%;right:20%;width:12px;height:12px;background:var(--hero-dot-2);animation:drift 11s ease-in-out infinite 1s}
.hero__punto--3{top:36%;left:5%;width:9px;height:9px;background:var(--hero-dot-3);animation:floaty 7.5s ease-in-out infinite .4s}
.hero__punto--4{bottom:16%;right:6%;width:8px;height:8px;background:var(--hero-dot-4);animation:floaty 8.5s ease-in-out infinite 1.4s}

/* Entrada escalonada: sello → H1 → parrafo → pills → CTAs → prueba social */
.fx{animation:fadeUp .7s ease-out both}
.fx-1{animation-delay:.05s}
.fx-2{animation-delay:.16s}
.fx-3{animation-delay:.28s}
.fx-4{animation-delay:.40s}
.fx-5{animation-delay:.52s}
.fx-6{animation-delay:.64s}

/* El formulario del hero vive DENTRO de la seccion del hero: si se saca a una
   seccion hermana, el degradado se corta por encima de la tarjeta y se ve un
   escalon (00-SISTEMA.md §5.18 «Donde termina el hero»). */
.hero__form{position:relative;z-index:1;scroll-margin-top:var(--header-h);padding-bottom:28px}
@media (min-width:1024px){ .hero__form{scroll-margin-top:96px;padding-bottom:0} }

/* Datos de la correduria (contacto). Filas etiqueta/valor, no tabla: no hay
   relacion tabular, solo pares de dato. */
.datos-correduria{margin-top:16px;display:grid;gap:0}
.datos-correduria__fila{padding:14px 0;border-bottom:var(--bd) solid var(--c-divider)}
.datos-correduria__fila dd{margin:6px 0 0;font-size:16px;line-height:1.5;color:var(--c-ink)}
@media (min-width:768px){
  .datos-correduria__fila{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:baseline}
  .datos-correduria__fila dd{margin:0}
}

/* Indice de contenidos del articulo (03-BLOG.md §1, bloque 5) */
.indice{margin-top:18px;padding:18px;border-radius:var(--r);background:var(--c-surface-2)}
.indice__lista{margin-top:12px;display:grid;gap:2px;counter-reset:none}
.indice__lista a{
  display:flex;align-items:flex-start;gap:11px;
  min-height:var(--h-tap);padding:7px 0;
  font-size:15.5px;line-height:1.45;color:var(--c-ink-article);
}
.indice__lista a:hover{color:var(--c-action-ink)}
.indice__num{
  flex:0 0 22px;display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:var(--c-white);color:var(--c-primary);
  font-size:12px;font-weight:800;
}

/* ==========================================================================
   24 · MODALES DE CAPTACION (07-FORMULARIOS.md §2.3 y §2.4)
   Sin JS son una seccion mas al final de la pagina y el formulario funciona
   igual: el href apunta al ancla del propio modal. Ningun CTA queda muerto.
   ========================================================================== */
.modal{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(16,24,32,.45);
}
.modal[hidden]{display:none}
.modal__panel{
  display:flex;flex-direction:column;
  width:100%;max-height:92vh;
  background:var(--c-white);
  border-radius:var(--r) var(--r) 0 0;
}
.modal--full .modal__panel{max-height:100vh;height:100vh;border-radius:0}
.modal__head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px var(--pad-x);border-bottom:var(--bd) solid var(--c-divider);
}
.modal__titulo{display:block;margin-top:2px;font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--c-ink)}
.modal__body{flex:1 1 auto;overflow-y:auto;padding:var(--pad-x)}
.modal__pie{
  position:sticky;bottom:0;
  margin:16px calc(var(--pad-x) * -1) calc(var(--pad-x) * -1);
  padding:14px var(--pad-x) 18px;
  background:var(--c-white);border-top:var(--bd) solid var(--c-divider);
}

@media (min-width:768px){
  .modal{align-items:center}
  .modal__panel{max-width:520px;border-radius:var(--r)}
  .modal--full .modal__panel{height:auto;max-height:88vh;border-radius:var(--r)}
}

/* Sin JS el modal no se puede cerrar, asi que no puede taparlo todo:
   se muestra como bloque normal al final de la pagina. */
.no-js .modal{position:static;display:block;background:none;padding:0 var(--pad-x) 28px}
.no-js .modal__panel{max-height:none;height:auto;border:var(--bd) solid var(--c-border);border-radius:var(--r)}
.no-js [data-modal-cerrar]{display:none}

/* --- La columna derecha del hero de la home cambia con el ancho -----------
   mobile-home.dc.html pone un TESTIMONIO; desktop-home.dc.html pone la
   tarjeta «Tu comparativa». No es una alternativa segun los datos: son dos
   piezas distintas del diseno, una por tramo. Se pintan las dos y aqui se
   ensena la que toca. */
.hero__solo-desktop{display:none}
@media (min-width:1024px){
  .hero__solo-desktop{display:block}
  .hero__solo-movil{display:none}
}


/* --- Tarjetas de producto genericas (madre de ramo, cuerpo de articulo) ----
   OJO: son las de ANTES de la home nueva. La home usa .card-nivel1 y
   .card-nivel2, que son otra cosa: alli las dos maquetas piden composiciones
   distintas y hay que recolocarlas con grid. Aqui basta con la version plana,
   y son diez plantillas las que dependen de ella. */
.card-producto{padding:20px}
.card-producto__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.card-producto__nombre{font-size:19px;line-height:1.2;letter-spacing:-.02em;font-weight:800;color:var(--c-ink)}
.card-producto__claim{margin-top:4px;font-size:15px;line-height:1.45;color:var(--c-ink-2)}
.card-producto__precio{text-align:right;flex:0 0 auto}
.card-producto__desde{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c-ink-4)}
.card-producto__importe{display:block;font-size:26px;line-height:1.05;letter-spacing:-.03em;font-weight:800;color:var(--c-primary)}
.card-producto__periodo{display:block;font-size:12.5px;color:var(--c-ink-3)}
.card-producto__checks{margin-top:14px;padding-top:14px;border-top:var(--bd) solid var(--c-divider);display:grid;gap:8px}

.row-producto{
  display:flex;align-items:center;gap:12px;
  padding:15px 2px;border-bottom:var(--bd) solid var(--c-divider);
}
.row-producto__nombre{flex:1 1 auto;font-size:16.5px;font-weight:700;color:var(--c-ink)}
.row-producto__precio{font-size:14.5px;font-weight:700;color:var(--c-primary)}
.row-producto__chevron{color:var(--c-ink-4)}
.row-producto--plano{cursor:default}