/* ==========================================================================
   05 · SECTIONS (AUTO) — composición específica de /seguros/auto.html
   ==========================================================================
   Igual que 05-sections.css es solo para el Home, este archivo es solo
   para la página de Auto: fondos de sección, columnas de grid, layout de
   hero. El aspecto de cada pieza (card, badge, botón...) viene de
   04-components.css, que SÍ se comparte entre ambas páginas.

   Nota sobre duplicación intencional: algunas reglas de acá (.hero,
   .hero-copy, .hero-ctas...) son visualmente idénticas a las de
   05-sections.css del Home. Es a propósito — cada página trae su propia
   hoja de composición (ver README, sección "Estructura"), así que no hay
   una sola fuente para ".hero" compartida entre páginas. Si en el futuro
   esto se siente repetitivo al construir la 3ª o 4ª categoría, vale la
   pena revisar si conviene moverlo a 04-components.css como una
   variante reusable de hero — no se hizo ahora para no tocar el Home.
   ========================================================================== */

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

/* --------------------------------------------------------------------
   HERO — "Tu auto necesita protección. Tú necesitas entenderla."
   -------------------------------------------------------------------- */
.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 "Liability vs. Full Cover" (04) como
   por "Económica vs. Recomendada" (08). 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 "Full Cover ≠ Todo está cubierto" — debe permanecer visible
   dentro de la card, con el mismo peso visual que un pull-quote pero
   más compacto. */
.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;
}

/* Variante neutra para el cierre de la card de Liability — mismo
   componente visual (misma caja destacada), pero sin el acento verde,
   para no leerse como "ganador/destacado" — es una nota informativa,
   no un elogio. Refuerza el ajuste aprobado: ninguna de las dos cards
   de esta sección se presenta como la "buena" opción. */
.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. Se duplica acá siguiendo el mismo criterio documentado en
   el encabezado de este archivo: cada página trae su propia hoja de
   composición.
   -------------------------------------------------------------------- */
.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));
  }
}