/* ==========================================================================
   SEGUROS — Figma node 3124:2384
   ========================================================================== */

/* ------------------------------ HERO (3124:2385) ------------------------- */
.sg-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
  min-height: 976px;
  padding: 200px var(--grid-margin) 100px;
  background-image: url('../images/desktop/seguros/hero-bg.webp');
  background-size: cover;
  background-position: center;
}
.sg-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  color: var(--color-primario);
  line-height: var(--lh-base);
  width: var(--w-5col);
  max-width: 100%;
  text-align: right;
}
.sg-hero__title em { font-style: normal; font-weight: 300; }

/* ------------------------------ PASOS (3124:2395) ------------------------
   Intro y cierre ocupan las 12 columnas; los 5 pasos van dentro de las
   columnas 2-11 (1076px) con una subretícula de 10 columnas:
     impares -> texto en 1-5,  icono en 9-10
     pares   -> icono en 1-2,  texto en 6-10                                */
.sg-pasos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
  padding: 160px var(--grid-margin);
  background: var(--color-blanco);
}

.sg-pasos__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  text-align: center;
}
.sg-pasos__intro h1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--color-primario);
  /* text-transform: uppercase; */
}
.sg-pasos__intro p {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  color: var(--color-gris-oscuro);
}

.sg-paso {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  align-items: center;
  width: var(--w-10col);
  max-width: 100%;
}

.sg-paso__txt {
  grid-column: 1 / span 5;
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}
.sg-paso__icon { grid-column: 9 / span 2; }

/* Filas pares: icono a la izquierda, texto a la derecha */
.sg-paso--reverse .sg-paso__icon { grid-column: 1 / span 2; }
.sg-paso--reverse .sg-paso__txt  { grid-column: 6 / span 5; }

.sg-paso__num {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: min(230px, 16vw);
  line-height: 0.75;
  color: #c4c4c4;
}
.sg-paso__body { min-width: 0; }
.sg-paso__body h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-h4);
  color: var(--color-secundario);
  /* text-transform: uppercase; */
  margin: 0 0 20px;
}
.sg-paso__body p {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  color: var(--color-gris-oscuro);
}

.sg-paso__icon {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--color-secundario);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sg-paso__icon img { width: 55%; height: 55%; object-fit: contain; }
/* Variante cuyo SVG ya trae el círculo rosa dibujado */
.sg-paso__icon--solo { background: none; }
.sg-paso__icon--solo img { width: 100%; height: 100%; }

.sg-pasos__cierre {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  text-align: center;
}
.sg-pasos__cierre p:first-child {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--color-secundario);
  /* text-transform: uppercase; */
}
.sg-pasos__cierre p:last-child {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  color: var(--color-gris-oscuro);
}

/* ------------------------------ VIDALUZ (3124:2477) ----------------------
   Imagen a sangre; el bloque de texto son 4 columnas empezando en la col 2
   (de ahí el padding de 182px), no pegado al margen de la página.          */
.sg-vidaluz {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 911px;
  padding: 240px calc(var(--grid-margin) * 2.528);   /* 182 = 72 * 2.528 */
  background-image: url('../images/desktop/seguros/vidaluz-bg.webp');
  background-size: cover;
  background-position: center;
}
.sg-vidaluz__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: var(--w-4col);
  max-width: 100%;
}
.sg-vidaluz__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  color: var(--color-primario);
  line-height: var(--lh-base);
  width: 100%;
}
.sg-vidaluz__title em { font-style: normal; font-weight: 300; }
.sg-vidaluz__content > p {
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  color: var(--color-primario);
}
.sg-vidaluz__logo { width: 235px; height: auto; }

@media (max-width: 1023px) {
  .sg-hero { min-height: 620px; padding: 200px var(--grid-margin) 64px; }
  .sg-hero__title { font-size: clamp(28px, 4.4vw, 44px); }

  .sg-pasos { padding: 100px var(--grid-margin); gap: 56px; }
  .sg-paso { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sg-paso__txt,
  .sg-paso--reverse .sg-paso__txt { grid-column: 1 / span 4; }
  .sg-paso__icon,
  .sg-paso--reverse .sg-paso__icon { grid-column: 5 / span 2; }
  .sg-paso__num { font-size: clamp(80px, 14vw, 160px); }

  .sg-vidaluz { min-height: 560px; padding: 140px var(--grid-margin); }
  .sg-vidaluz__title { font-size: clamp(24px, 3.6vw, 40px); }
  .sg-vidaluz__content { max-width: 460px; }
}

@media (max-width: 767px) {
  .sg-pasos { padding: 64px var(--grid-margin); }
  .sg-paso { grid-template-columns: 1fr; row-gap: 24px; justify-items: center; text-align: center; }
  .sg-paso__txt,
  .sg-paso--reverse .sg-paso__txt { grid-column: 1; flex-direction: column; }
  .sg-paso__icon,
  .sg-paso--reverse .sg-paso__icon { grid-column: 1; width: 140px; order: -1; }
  .sg-vidaluz { padding: 100px var(--grid-margin); }
}