/* ==========================================================================
   Seguratis · BASE
   Fuente: 01-diseno/05-IMPLEMENTACION.md §2 + 00-SISTEMA.md §3 y §8
   ========================================================================== */

/* --- Reset -------------------------------------------------------------- */
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--font);
  color:var(--c-ink);
  background:var(--c-white);
  /* nunca overflow:hidden aqui: rompe position:sticky (00-SISTEMA.md §4.1) */
  overflow-x:clip;
}

a{color:var(--c-primary);text-decoration:none;transition:var(--t-soft)}
a:hover{color:var(--c-primary-strong)}

::selection{background:var(--c-selection)}
:focus-visible{outline:2px solid var(--c-action);outline-offset:1px}

h1,h2,h3,h4,p,figure,blockquote{margin:0;text-align:left;hyphens:none}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}

/* Prohibido justificar: crea rios a 350px (00-SISTEMA.md §3.3) */
[style*="justify"],.justify{text-align:left !important}

/* --- Contenedores ------------------------------------------------------- */
.wrap{width:100%;max-width:calc(var(--container) + var(--pad-x-d) * 2);margin:0 auto;padding-inline:var(--pad-x)}
.wrap--header{max-width:calc(var(--container-header) + var(--pad-x-d) * 2)}
.wrap--narrow{max-width:calc(720px + var(--pad-x-d) * 2)}

@media (min-width:481px){ .wrap{max-width:480px} .wrap--header{max-width:480px} }
@media (min-width:768px){
  .wrap{max-width:calc(720px + var(--pad-x-d) * 2);padding-inline:var(--pad-x-d)}
  .wrap--header{max-width:calc(720px + var(--pad-x-d) * 2)}
}
@media (min-width:1024px){
  .wrap{max-width:calc(var(--container) + var(--pad-x-d) * 2)}
  .wrap--header{max-width:calc(var(--container-header) + var(--pad-x-d) * 2)}
}

/* --- Ritmo vertical de seccion (00-SISTEMA.md §4.2 y §8.2) -------------- */
.section{padding-block:28px}
.section--plain{background:var(--c-white)}
.section--soft{background:var(--c-surface-2);padding:26px var(--pad-x)}
/* Banda crema con filo arriba y abajo: la usa la tira de aseguradoras, que en
   escritorio va a ancho completo y sin las lineas se funde con lo de al lado. */
.section--franjeada{
  border-top:var(--bd) solid var(--c-divider);
  border-bottom:var(--bd) solid var(--c-divider);
}
@media (min-width:1024px){
  .section{padding-block:72px}
  .section--soft{padding:64px var(--pad-x-d)}
  /* Crema SOLO de 1024 para arriba. Lo usa «3 pasos», que la maqueta movil
     deja en blanco y la de escritorio pinta en crema. */
  .section--soft-d{background:var(--c-surface-2)}
  .section--last{padding-bottom:80px}
}
/* Y por lo mismo, la franja de filos tampoco existe en movil cuando el fondo
   no esta: dos lineas sueltas sobre blanco no dicen nada. */
@media (max-width:1023px){
  .section--soft-d.section--franjeada{border-top:0;border-bottom:0}
}

/* --- Escala tipografica -------------------------------------------------
   Valores tomados de 03-maquetas/static/, NO de la tabla de 00-SISTEMA.md
   §8.3: la maqueta manda sobre el documento (README del paquete).
   Donde no coinciden, el H1 de home en desktop es el caso claro:
   el documento dice 62 px y la maqueta clamp(42px, 5.4vw, 76px).

   Tres tramos, como las propias maquetas: movil fijo, intermedio 768-1023
   (escala de §8.3) y desktop con el clamp literal de cada maqueta.
   ------------------------------------------------------------------------ */

/* Movil · valores literales de mobile-*.dc.html a 390 px */
/*
 * Escala de titulares, sacada de los <h1>/<h2>/<h3> de las 30 maquetas.
 * Cada clase es un tamano REAL de la entrega, no una interpolacion:
 *
 *   t-h1-home       34  home
 *   t-h1-contacto   34  contacto
 *   t-h1-destacado  34  glosario (termino) y autor
 *   t-h1-landing    32  ficha, madre de ramo, perfil, directorio, indices,
 *                       pagina flexible y resultados
 *   t-h1-post       30  articulo y gracias
 */
.t-h1-home     {font-size:34px;line-height:1.07;letter-spacing:-.030em;font-weight:800;color:var(--c-ink)}
.t-h1-contacto {font-size:34px;line-height:1.07;letter-spacing:-.030em;font-weight:800;color:var(--c-ink)}
.t-h1-destacado{font-size:34px;line-height:1.06;letter-spacing:-.035em;font-weight:800;color:var(--c-ink)}
.t-h1-landing  {font-size:32px;line-height:1.07;letter-spacing:-.032em;font-weight:800;color:var(--c-ink)}
.t-h1-post     {font-size:30px;line-height:1.10;letter-spacing:-.030em;font-weight:800;color:var(--c-ink)}
.t-h2          {font-size:25px;line-height:1.14;letter-spacing:-.028em;font-weight:800;color:var(--c-ink)}
.t-h2-block    {font-size:22px;line-height:1.16;letter-spacing:-.020em;font-weight:800;color:var(--c-ink)}
/*
 * DOS h3 distintos, y confundirlos se nota:
 *   t-h3-block · subtitular DENTRO del texto que se lee. 20 px en movil y
 *                26 en escritorio, como en las maquetas de ficha, ramo y
 *                perfil. Antes usaba el tamano de tarjeta y los apartados de
 *                «Quien es Mapfre» salian mas pequenos que el cuerpo.
 *   t-h3       · titulo de TARJETA. Es una etiqueta, no un titular.
 */
.t-h3-block    {font-size:20px;line-height:1.22;letter-spacing:-.022em;font-weight:800;color:var(--c-ink)}
.t-h3          {font-size:16.5px;line-height:1.30;font-weight:700;color:var(--c-ink)}

.t-body       {font-size:16.5px;line-height:1.5;font-weight:400;color:var(--c-ink-2)}
.t-body-hero  {font-size:16.5px;line-height:1.5;font-weight:400;color:var(--c-ink-2)}
.t-body-post  {font-size:16.5px;line-height:1.65;font-weight:400;color:var(--c-ink-article)}
.t-small      {font-size:15.5px;line-height:1.5;font-weight:400;color:var(--c-ink-2)}
.t-meta       {font-size:13.5px;line-height:1.4;font-weight:400;color:var(--c-ink-3)}
.t-overline   {font-size:13px;line-height:1.2;letter-spacing:.08em;font-weight:700;color:var(--c-ink-3);text-transform:uppercase}
.t-overline-sm{font-size:12.5px;line-height:1.2;letter-spacing:.06em;font-weight:700;color:var(--c-ink-3);text-transform:uppercase}
.t-legal      {font-size:12.5px;line-height:1.5;font-weight:400;color:var(--c-ink-4)}
.t-price      {font-size:28px;line-height:1.05;letter-spacing:-.03em;font-weight:800;color:var(--c-primary)}
.t-price-row  {font-size:21px;line-height:1.1;letter-spacing:-.03em;font-weight:800;color:var(--c-primary)}
.t-quote      {font-family:var(--font-quote);font-style:italic;font-size:16.5px;line-height:1.5;color:var(--c-quote-ink)}
.t-mono       {font-family:var(--font-mono);font-size:12.5px;line-height:1.4;color:var(--c-ink-3)}

/* Medida: ningun parrafo por encima de 70 caracteres (00-SISTEMA.md §8.3) */
.t-body,.t-body-hero{max-width:48ch}
.t-body-post,.t-body-post p{max-width:44ch}
/*
 * Los titulares NO llevan medida en movil. Ninguna de las 14 maquetas de movil
 * pone `max-width` a un h1 ni a un h2: a 390 px el ancho del contenedor ya la
 * impone, y limitarla ademas parte titulares que caben de sobra («Periodo de
 * carencia» salia en dos lineas). En escritorio SI la llevan, y esta puesta en
 * el bloque de ≥1024 con el valor de cada maqueta.
 *
 * 22ch en un h2 de 25 px son unos 275 px: menos que los 350 de contenedor a
 * 390, asi que partia titulares que cabian enteros.
 */

/* Intermedio 768-1023 · escala de 00-SISTEMA.md §8.3 */
@media (min-width:768px){
  .t-h1-home,.t-h1-contacto,.t-h1-destacado{font-size:46px}
  .t-h1-landing{font-size:44px}
  .t-h1-post{font-size:40px}
  .t-h2{font-size:32px}
  .t-h2-block{font-size:28px}
  .t-h3-block{font-size:23px}
  .t-h3{font-size:18px}
  .t-body{font-size:17px}
  .t-body-hero{font-size:18px}
  .t-body-post{font-size:17.5px}
  .t-meta,.t-overline{font-size:14px}
  .t-price{font-size:32px}
  .t-quote{font-size:18px}
}

/* Desktop ≥1024 · clamps literales de desktop-*.dc.html */
@media (min-width:1024px){
  .t-h1-home     {font-size:clamp(42px,5.4vw,76px);line-height:.98;letter-spacing:-.045em;max-width:13ch}
  .t-h1-contacto {font-size:clamp(40px,4.6vw,64px);line-height:1.02;letter-spacing:-.040em;max-width:14ch}
  .t-h1-destacado{font-size:clamp(40px,4.4vw,60px);line-height:1.02;letter-spacing:-.040em;max-width:15ch}
  .t-h1-landing  {font-size:clamp(38px,4.2vw,58px);line-height:1.03;letter-spacing:-.038em;max-width:16ch}
  .t-h1-post     {font-size:clamp(34px,3.6vw,48px);line-height:1.08;letter-spacing:-.032em;max-width:18ch}
  /* Clamps, no tamano fijo: la maqueta los escribe asi y a 1440 la diferencia
     entre 40 fijo y el clamp son 2 px que se notan al lado del H1. */
  .t-h2          {font-size:clamp(30px,3.1vw,42px);line-height:1.08;letter-spacing:-.032em;max-width:20ch}
  /* La home sube de escalon: sus H2 van a clamp(32,3.4vw,46) y a 22ch, no a
     20ch. Con 20ch «Los seguros que más contratan» parte en dos lineas y en la
     maqueta va en una. Es la unica plantilla que se sale de .t-h2. */
  .t-h2--home    {font-size:clamp(32px,3.4vw,46px);line-height:1.05;letter-spacing:-.038em;max-width:22ch}
  .t-h2--ancho   {max-width:none}
  .t-h2-block    {font-size:clamp(28px,2.8vw,36px);line-height:1.10}
  .t-h3-block    {font-size:26px;line-height:1.20}
  .t-h3          {font-size:19px}
  .t-body       {font-size:17.5px;line-height:1.6;max-width:56ch}
  .t-body-hero  {font-size:clamp(17px,1.5vw,20px);line-height:1.55;max-width:46ch}
  .t-body-post  {font-size:18px;line-height:1.7}
  .t-meta,.t-overline{font-size:14px}
  .t-overline   {font-size:13.5px}
  .t-price      {font-size:38px}
  .t-quote      {font-size:19px}
}

/* Marcador melocoton del titular (00-SISTEMA.md §3.4). Solo una palabra, solo en H1 de home y contacto. */
.hl{
  background:linear-gradient(180deg,rgba(247,185,143,0) 52%,rgba(247,185,143,.75) 52%);
  padding:0 4px;
  border-radius:var(--r-mark);
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}

/* --- Utilidades --------------------------------------------------------- */
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.u-stack{display:grid}
.u-row{display:flex;align-items:center}
.u-strong{font-weight:700;color:var(--c-ink)}

/* Skip link (QA §3) */
.skip-link{
  position:absolute;left:var(--pad-x);top:-100px;z-index:100;
  background:var(--c-white);color:var(--c-primary);font-size:15px;font-weight:700;
  padding:12px 18px;border-radius:var(--r-pill);box-shadow:var(--sh-panel);
}
.skip-link:focus{top:12px}

/* Placeholder rayado mientras no hay fotografia real (00-SISTEMA.md §2.4).
   Siempre con altura reservada: CLS 0. */
/*
 * `min-width:0` aqui mismo: el placeholder es hijo de rejillas estrechas (la
 * franja de prensa son 4 columnas de ~72 px a 360) y su etiqueta —«logo Europa
 * Press»— mide mas que la celda. Sin esto, el ancho minimo del texto empuja la
 * rejilla y la home se sale 6 px por la derecha.
 */
.ph{
  position:relative;background:var(--ph);border-radius:var(--r);overflow:hidden;
  display:flex;align-items:flex-end;min-width:0;
}
.ph--sm{background:var(--ph-sm)}
.ph__label{
  font-family:var(--font-mono);font-size:10px;line-height:1.4;color:var(--c-ink-4);
  padding:8px 10px;
  /* Que el rotulo no imponga su ancho: se corta, no empuja. */
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ph--sm .ph__label{font-size:8.5px;padding:6px}

/* --- Animaciones del hero (00-SISTEMA.md §5.18) ------------------------- */
@keyframes fadeUp   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes aurora   { 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-26px) scale(1.12)}
                      66%{transform:translate(-26px,24px) scale(.92)} 100%{transform:translate(0,0) scale(1)} }
@keyframes drift    { 0%{transform:translate(0,0)} 50%{transform:translate(14px,-18px)} 100%{transform:translate(0,0)} }
@keyframes floaty   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes popIn    { 0%{opacity:0;transform:scale(.6)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} }
@keyframes pulseRing{ 0%{box-shadow:0 0 0 0 rgba(30,122,79,.5)} 70%{box-shadow:0 0 0 7px rgba(30,122,79,0)}
                      100%{box-shadow:0 0 0 0 rgba(30,122,79,0)} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   BLINDAJE ANTI-DESBORDAMIENTO
   Un hijo de grid o de flex NO encoge por debajo de su contenido: su
   min-width/min-height es `auto`. Con un <select> que contiene «Septiembre»,
   o un precio largo, eso empuja la rejilla mas alla del viewport y a 360 px
   la pagina se corta por la derecha.

   La regla es siempre la misma: min-width:0 en los hijos que deben ceder.
   No se aplica en global porque romperia los carruseles, que SI deben
   mantener su ancho y desplazarse.
   ========================================================================== */

.campo-fecha > *,
.chips > *,
.datos__celda,
.hero__datos-celda,
.grid-2 > *,
.grid-productos > *,
.grid-ramos > *,
.grid-lista > *,
.res-card__ident,
.res-card__acciones > *,
.barra-fija__claim,
.menu-movil__body,
.card-nivel1__nombre,
.card-nivel1__precio-texto,
.card-nivel2__pie,
.cabecera-bloque > *,
.card-post__cuerpo,
.razon__texto,
.paso__texto,
.bloque-encuentra > *,
.opiniones > *,
.card-opinion__ident,
.comparativa-hero__nombre,
.logos-cias__celda > *,
.logos-prensa > *,
.card-cia__ident,
.autor-cifras__celda,
.linea-pasos__texto,
.perfil-nota__texto,
.firma-linea__texto,
.res-cuerpo > *{min-width:0}

/*
 * El carrusel es la excepcion de arriba: sus hijos MANTIENEN el ancho y se
 * desplazan. Pero a partir de 768 deja de ser carrusel y pasa a rejilla, y
 * entonces sus hijos si tienen que ceder. Sin esto, tres tarjetas de 272 px no
 * caben en los 720 px de contenedor y la pagina se sale por la derecha.
 */
@media (min-width:768px){
  .carrusel > *{min-width:0}
}

/* Los selectores de fecha ademas recortan el texto si aun asi no cabe */
.campo-fecha .select{text-overflow:ellipsis}

/* Ninguna tabla ni carrusel puede sacar la pagina de su sitio: se desplazan
   ellos por dentro, no el documento. */
.tabla-scroll,.carrusel{max-width:100%}