/* ==========================================================================
   05 · SECTIONS — composición específica de la página Home
   ==========================================================================
   Acá SOLO vive lo que es propio de cómo se arma el Home: fondos de
   sección, columnas del grid, orden flex. El aspecto de cada pieza
   (botón, card, badge...) viene de 04-components.css.

   Si mañana se crea src de una página nueva (p.ej. seguros/auto.html),
   ese archivo trae su propio 05-sections-seguros.css — este no cambia.
   ========================================================================== */

/* --------------------------------------------------------------------
   HERO — "Entender antes de asegurar."
   -------------------------------------------------------------------- */
.hero {
  background: linear-gradient(180deg, var(--color-navy) 0%, var(--color-navy-2) 100%);
  color: var(--color-white);
  padding: 44px 0 40px;
}

.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 52%;
  }
  .hero-portrait {
    flex: 1 1 48%;
    min-height: 380px;
  }
}

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

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

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

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

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

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

/* Tamaño del recuadro placeholder del retrato — el estilo visual del
   recuadro en sí (borde punteado, texto) es el componente .asset-placeholder. */
.hero-portrait {
  min-height: 260px;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 6px;
}

.hero-chips span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #C9D0E4;
  font-size: .85rem;
  font-weight: 600;
}

.hero-chips svg {
  width: 16px;
  height: 16px;
  color: var(--color-green);
}


/* --------------------------------------------------------------------
   SERVICIOS — "¿Qué necesitas proteger?"
   -------------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

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

/* El aviso de licenciamiento (componente .notice) ocupa todo el ancho
   del grid, debajo de las seis cards. */
.services-grid .notice {
  grid-column: 1 / -1;
}


/* --------------------------------------------------------------------
   LA DIFERENCIA SCE — proceso en 5 pasos
   -------------------------------------------------------------------- */
.diff-section {
  background: var(--color-cloud);
}

.diff-lead {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--color-navy);
  font-size: 1.15rem;
  margin-bottom: 28px;
}

.process-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (min-width: 768px) {
  .process-steps {
    flex-direction: row;
    justify-content: space-between;
    position: relative;
  }
  /* Línea punteada que conecta los pasos — puramente decorativa. */
  .process-steps::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--color-border) 0 6px, transparent 6px 12px);
  }
  .process-step {
    flex: 1;
  }
}


/* --------------------------------------------------------------------
   SOBRE EDUARDO
   -------------------------------------------------------------------- */
.about-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .about-grid {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }
  .about-photo {
    flex: 0 0 320px;
    min-height: 340px;
  }
  .about-copy {
    flex: 1;
  }
}

.about-photo {
  min-height: 220px;
}


/* --------------------------------------------------------------------
   ECONÓMICA VS. RECOMENDADA
   -------------------------------------------------------------------- */
.quote-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

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


/* --------------------------------------------------------------------
   APRENDE CON EDUARDO
   -------------------------------------------------------------------- */
.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));
  }
}