/* ==========================================================================
   Seguratis · LAYOUT
   Rejillas y breakpoints (00-SISTEMA.md §4.4 y §8)

   ≤480    fluido, margen 20px            · diseno de referencia
   481-767 max 480px centrado             · se mantienen las rejillas de 2col
   768-1023 720px, margen 24px            · hero 2col, productos 3col, carruseles a rejilla
   ≥1024   1280px, margen 24px            · escala completa, lateral sticky 380px
   ≥1440   1280px centrado                · solo crecen los margenes
   ========================================================================== */

/* --- Rejillas basicas --------------------------------------------------- */
.grid-1{display:grid;gap:12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid-lista{display:grid;gap:10px}      /* entre tarjetas de una lista: 10-12px */
.grid-items{display:grid;gap:8px}       /* entre items de lista textual: 8-9px */

/* Logos de aseguradoras: 3 columnas en movil, 6 en desktop.
   La celda es BLANCA con borde y sombra, no gris: va sobre la banda crema de
   la seccion y con fondo gris no se despega del fondo. */
.logos-cias{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.logos-cias__celda{
  display:flex;align-items:center;justify-content:center;
  height:54px;padding:0 6px;
  border-radius:var(--r);background:var(--c-white);
  border:var(--bd) solid var(--c-border-soft);
  box-shadow:0 10px 22px -18px rgba(16,24,32,.35);
  font-size:11.5px;font-weight:700;text-align:center;color:var(--c-ink-3);
}
.logos-cias__celda img{max-height:34px;width:auto;object-fit:contain}

/* Logos de prensa: 4 columnas, celda de 30px de alto (01-HOME.md §2.4).
   Altura fija, no aspect-ratio: con proporcion las celdas crecen con el ancho
   de columna y en desktop se convierten en bandas de 70px. */
.logos-prensa{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:center}
.logos-prensa img{max-height:20px;width:auto;object-fit:contain;margin-inline:auto}
.logos-prensa .ph{height:30px;aspect-ratio:auto;border-radius:var(--r-mark)}
.franja-prensa{
  padding:16px var(--pad-x) 22px;
  border-top:var(--bd) solid var(--c-divider);
  border-bottom:var(--bd) solid var(--c-divider);
}
.franja-prensa__fila{margin-top:12px}

/* --- Bloques de contenido ----------------------------------------------- */
.bloque + .bloque{margin-top:20px}
.overline + h2,.overline + .t-h2{margin-top:10px}
.t-h1-home + p,.t-h1-landing + p,.t-h1-post + p{margin-top:13px}
.t-h2 + p,.t-h2-block + p{margin-top:11px}
p + p{margin-top:14px}
.t-h2 + .grid-lista,.t-h2 + .grid-1,p + .grid-lista,p + .grid-1{margin-top:16px}
.bloque__cta{margin-top:17px}

/* --- 768-1023 ------------------------------------------------------------ */
@media (min-width:768px){
  .grid-2{gap:12px}
  .grid-productos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .logos-cias{grid-template-columns:repeat(6,1fr);gap:12px}
}

/* --- ≥1024 --------------------------------------------------------------- */
@media (min-width:1024px){
  .grid-productos{grid-template-columns:repeat(2,1fr);gap:20px}
  .grid-productos--3{grid-template-columns:repeat(3,1fr);gap:20px}
  .grid-productos--4{grid-template-columns:repeat(4,1fr);gap:16px}
  .logos-cias{grid-template-columns:repeat(6,1fr);gap:16px}
  .logos-cias__celda{height:76px;font-size:10px}

  /* Hero a dos columnas */
  .hero__grid{display:grid;gap:64px;align-items:center}
  /* La home tiene tres piezas en la rejilla —texto, acciones y comparativa—
     porque en movil el testimonio se cuela entre las dos primeras. Aqui las
     dos de la izquierda vuelven a apilarse en la misma columna. */
  .hero__grid--home{
    grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
    grid-template-areas:"texto comparativa" "acciones comparativa";
    align-content:center;gap:0 80px;
  }
  .hero__grid--home > .hero__texto{grid-area:texto}
  .hero__grid--home > .hero__acciones{grid-area:acciones}
  .hero__grid--home > .comparativa-hero{grid-area:comparativa;align-self:center}
  .hero__grid--landing{grid-template-columns:minmax(0,1fr) 420px;gap:56px}
  .hero__grid--contacto{grid-template-columns:minmax(0,1fr) 460px;gap:56px}

  /* Contenido + lateral sticky. `minmax(300px,380px)` y gap 64, como la
     maqueta: con 380px fijos el lateral no cede a 1024 y la columna de texto
     se queda sin sitio. */
  .con-lateral{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:64px;align-items:start}
  .lateral{position:sticky;top:calc(var(--header-h-d) + 15px);display:grid;gap:20px}

  /* FAQ: titular a la izquierda, acordeones a la derecha */
  .faq-grid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:56px;align-items:start}
  /* La home lo pone al reves (desktop-home.html: 1fr + 380 px, gap 72). En el
     marcado el titular sigue yendo primero; aqui se manda al final. */
  .faq-grid--home{grid-template-columns:minmax(0,1fr) 380px;gap:72px}
  .faq-grid--home .faq-grid__titulo{order:2}

  /* Bloques con fondo */
  .bloque-fondo{padding:48px;border-radius:var(--r)}
  .bloque + .bloque{margin-top:32px}
  /* En escritorio la franja no es una banda: es una fila con la etiqueta a la
     izquierda, los logos a la derecha y solo un filo abajo. */
  .franja-prensa{padding:0 var(--pad-x-d);border-top:0;border-bottom:0}
  .franja-prensa .wrap{display:flex;align-items:center;gap:40px;padding-bottom:30px;border-bottom:var(--bd) solid var(--c-divider)}
  .franja-prensa__etiqueta{flex:0 0 auto;margin:0}
  .franja-prensa__fila{flex:1 1 auto;margin-top:0}
  .logos-prensa{gap:24px}
  .logos-prensa .ph{height:34px}
}

/* --- ≥1440 ---------------------------------------------------------------
   No hace falta regla: .wrap ya lleva max-width + margin auto, asi que el
   contenido deja de crecer en 1160px y solo aumentan los margenes laterales.
   ------------------------------------------------------------------------ */