/* ==========================================================================
   SEGURIDAD FINANCIERA PARA ELLAS — Figma node 3054:422
   ========================================================================== */

/* ------------------------------ HERO (3054:424) --------------------------
   1440x900 a sangre. En Figma el bloque del título ocupa el ANCHO COMPLETO
   (w-full con px-72) y arranca a 420px; la onda queda pegada abajo por el
   justify-between. Antes el título iba en una caja estrecha y alineado al
   fondo, y por eso se veía angosto y descolocado.                          */
.seg-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  min-height: 900px;
  padding-top: 420px;
  background-image: url('../images/desktop/seguridad/hero-bg.webp');
  background-size: cover;
  background-position: center;
}

.seg-hero__content {
  width: 100%;
  padding: 0 var(--grid-margin);
}

.seg-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: 100%;
}
/* "Tu Tranquilidad" en Light y morado, en su propia línea */
.seg-hero__title em {
  font-style: normal;
  font-weight: 300;
  display: block;
}
/* "es Nuestra Prioridad." en Bold y rosa */
.seg-hero__title-accent {
  display: block;
  color: var(--color-secundario);
}

.seg-hero__wave {
  display: block;
  width: 100%;
  height: 64px;
  margin-bottom: -1px;
}

/* ------------------------- CUERPO (3054:464 / 3054:467) ------------------ */
.seg-body {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 160px var(--grid-margin);
  background: var(--color-bg);
}

.seg-body__card {
  width: var(--w-8col);
  max-width: 100%;
  padding: 40px;
  border-radius: 80px;
  border: 2px solid var(--color-secundario);
  background: var(--color-blanco);
  color: var(--color-primario);
}

.seg-body__card p,
.seg-body__card ul {
  font-family: var(--font-heading);
  font-size: var(--fs-body);   /* 16px en Figma, no 20 */
  color: var(--color-primario);
  margin: 0 0 16px;
}
.seg-body__card p:last-child { margin-bottom: 0; }
.seg-body__card strong { font-weight: var(--fw-bold); }

.seg-body__card ul {
  list-style: disc;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (max-width: 1023px) {
  .seg-hero { min-height: 620px; padding-top: 280px; }
  .seg-hero__title { font-size: clamp(28px, 4.4vw, 44px); }
  .seg-body { padding: 100px var(--grid-margin); }
  .seg-body__card { padding: 32px; border-radius: 48px; }
}

@media (max-width: 767px) {
  .seg-hero { min-height: 480px; padding-top: 200px; }
  .seg-body { padding: 64px var(--grid-margin); }
  .seg-body__card { padding: 24px; border-radius: 32px; }
}