/* ==========================================================================
   05 · SECTIONS (HOGAR) — composición específica de /seguros/hogar.html
   ==========================================================================
   Igual que 05-sections-auto.css y 05-sections-vida.css, este archivo es
   solo para la página de Hogar. El aspecto de cada pieza (card, badge,
   botón...) viene de 04-components.css, que se comparte entre Home,
   Auto, Vida y Hogar.

   Esta es la tercera vez que se duplica prácticamente todo este archivo
   (hero, grids de comparación, chip-grid, etc.) — el propio
   05-sections-vida.css ya advertía que la 3ª repetición era el momento
   de considerar extraer este layout a una capa compartida en
   04-components.css en vez de seguir copiando el archivo completo.
   No se hizo en esta página para no introducir un cambio de arquitectura
   sin aprobación explícita, pero queda como la recomendación más
   concreta antes de construir Comercial, Motocicletas o SR-22.
   ========================================================================== */

/* --------------------------------------------------------------------
   BREADCRUMB — separación respecto al header sticky y al hero.
   -------------------------------------------------------------------- */
.breadcrumb .container {
  padding-top: 0;
  padding-bottom: 0;
}

/* --------------------------------------------------------------------
   HERO — "Tu casa es una de tus inversiones más grandes."
   -------------------------------------------------------------------- */
.hero {
  background: linear-gradient(180deg, var(--color-navy) 0%, var(--color-navy-2) 100%);
  color: var(--color-white);
  padding: 40px 0;
}

.hero .container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

@media (min-width: 768px) {
  .hero .container {
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .hero-copy {
    flex: 1 1 54%;
  }
  .hero-illustration {
    flex: 1 1 46%;
  }
}

.hero h1 {
  color: var(--color-white);
  font-size: 2rem;
  font-weight: 800;
}

@media (min-width: 768px) {
  .hero h1 { font-size: 2.6rem; }
}
@media (min-width: 1024px) {
  .hero h1 { font-size: 2.9rem; }
}

.hero .lede {
  color: #D7DCEA;
  font-size: 1.02rem;
  max-width: 48ch;
}

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}

@media (min-width: 768px) {
  .hero-ctas {
    flex-direction: row;
  }
}

.hero-ctas .btn {
  font-size: 1rem;
  padding: 16px 22px;
}


/* --------------------------------------------------------------------
   INTRODUCCIÓN
   -------------------------------------------------------------------- */
.intro-copy {
  max-width: 72ch;
}


/* --------------------------------------------------------------------
   PRINCIPALES COBERTURAS
   -------------------------------------------------------------------- */
.coverage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 768px) {
  .coverage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .coverage-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.coverage-grid .notice {
  grid-column: 1 / -1;
}


/* --------------------------------------------------------------------
   COMPARADORES — usado tanto por "Valor Real vs. Costo de Reemplazo"
   (04) como por "Económica vs. Recomendada" (09). Mismo grid, distinto
   contenido.
   -------------------------------------------------------------------- */
.compare-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .compare-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

/* Callout "Costo de Reemplazo ≠ Sin límite de pago" — reutiliza el
   mismo componente .fullcover-callout de Auto/Vida (ver nota en
   05-sections-vida.css sobre el nombre heredado, pendiente de un
   posible rename futuro). */
.fullcover-callout {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--color-cloud);
  border-left: 4px solid var(--color-green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--color-navy);
  font-size: .95rem;
}

.fullcover-callout--neutral {
  background: var(--color-white);
  border-left-color: var(--color-border);
  color: var(--color-graphite-soft);
  font-family: var(--font-body);
  font-weight: 600;
}


/* --------------------------------------------------------------------
   QUÉ CAMBIA EL PRECIO
   -------------------------------------------------------------------- */
.factors-intro {
  max-width: 70ch;
  margin: 0 auto 24px;
}

.chip-grid {
  max-width: 900px;
  margin: 0 auto;
}


/* --------------------------------------------------------------------
   ANTES DE COTIZAR
   -------------------------------------------------------------------- */
.prep-checklist {
  margin-bottom: 26px;
}


/* --------------------------------------------------------------------
   VIDEOS — mismo grid que "Aprende con Eduardo" en 05-sections.css
   del Home y que las secciones equivalentes en 05-sections-auto.css
   y 05-sections-vida.css.
   -------------------------------------------------------------------- */
.learn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .learn-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}