/* =====================================================
   ROOT — Design Tokens
   Landing Page · Sora · Paleta azul / rojo / amarillo
===================================================== */
:root {
  /* ---------- Colores principales ---------- */
  --azul-oscuro: #0d2b5f; /* Fondos, texto principal */
  --azul-medio: #17387f; /* Fondos */
  --azul-intermedio: #284a99; /* Texto, fondos */
  --rojo: #d60027; /* Texto destacado, fondos */
  --amarillo: #ffc300; /* Botones, CTAs */
  --amarillo-claro: #fbb100; /* Texto, acentos */
  --blanco: #ffffff; /* Texto, fondos */
  --gris-texto: #5a6478; /* Texto secundario */
  --gris-oscuro: #757575; /* Texto terciario */
  --azul-claro-bg: #e7eefa; /* Fondos de sección */
  --gris-azulado: #f5f7fb; /* Fondos claros */
  --borde-1: #d5deed; /* Strokes, separadores */
  --borde-2: #d8dde5; /* Strokes, separadores */

  --verde: #00a855; /* Estado "buena" en Buró */
  --verde-suave: rgba(27, 160, 91, 0.12);
  --rojo-borde: #e58aa0; /* Borde suave card "mala" / NO */

  /* ---------- Variantes con opacidad ---------- */
  --azul-intermedio-70: rgba(40, 74, 153, 0.7);
  --rojo-30: rgba(171, 4, 51, 0.3);
  --gris-suave-50: rgba(34, 34, 34, 0.5); /* #222222 al 50% */

  --blanco-5: rgba(255, 255, 255, 0.05);
  --blanco-10: rgba(255, 255, 255, 0.1);
  --blanco-25: rgba(255, 255, 255, 0.25);
  --blanco-26: rgba(255, 255, 255, 0.26);
  --blanco-58: rgba(255, 255, 255, 0.58);

  /* ---------- Tipografía ---------- */
  --font-family: "Sora", system-ui, -apple-system, sans-serif;

  /* Pesos */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Escala de tamaños */
  --fs-50: 3.125rem; /* 50px — ExtraBold */
  --fs-38: 2.375rem; /* 38px — ExtraBold */
  --fs-32: 2rem; /* 32px — ExtraBold */
  --fs-25: 1.5625rem; /* 25px — ExtraBold */
  --fs-21: 1.3125rem; /* 21px — SemiBold */
  --fs-17: 1.0625rem; /* 17px — SemiBold / Bold / Regular */
  --fs-15: 0.9375rem; /* 15px — Regular */
  --fs-13: 0.8125rem; /* 13px — SemiBold / Regular */
  --fs-12: 0.75rem; /* 12px — SemiBold / Regular */

  /* ---------- Override de variables Bootstrap ---------- */
  --bs-body-font-family: var(--font-family);
  --bs-body-color: var(--azul-oscuro);
  --bs-body-bg: var(--blanco);
  --bs-primary: var(--azul-oscuro);
  --bs-border-color: var(--borde-1);
}

/* =====================================================
   BASE
===================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--fs-17);
  font-weight: var(--fw-regular);
  color: var(--azul-oscuro);
  background-color: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.25s ease;
}

ul {
  list-style: none;
}

/* =====================================================
   TIPOGRAFÍA — Clases utilitarias
===================================================== */
/* ExtraBold */
.text-xb-50 {
  font-size: var(--fs-50);
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
}
.text-xb-38 {
  font-size: var(--fs-38);
  font-weight: var(--fw-extrabold);
  line-height: 1.2;
}
.text-xb-32 {
  font-size: var(--fs-32);
  font-weight: var(--fw-extrabold);
  line-height: 1.25;
}
.text-xb-25 {
  font-size: var(--fs-25);
  font-weight: var(--fw-extrabold);
  line-height: 1.3;
}

/* SemiBold */
.text-sb-21 {
  font-size: var(--fs-21);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}
.text-sb-17 {
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
}
.text-sb-13 {
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
}
.text-sb-12 {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
}

/* Bold */
.text-b-17 {
  font-size: var(--fs-17);
  font-weight: var(--fw-bold);
  line-height: 1.5;
}

/* Regular */
.text-r-17 {
  font-size: var(--fs-17);
  font-weight: var(--fw-regular);
  line-height: 1.6;
}
.text-r-15 {
  font-size: var(--fs-15);
  font-weight: var(--fw-regular);
  line-height: 1.6;
}
.text-r-13 {
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  line-height: 1.5;
}
.text-r-12 {
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  line-height: 1.5;
}

/* =====================================================
   COLORES — Clases utilitarias
===================================================== */
/* Texto */
.tc-azul-oscuro {
  color: var(--azul-oscuro);
}
.tc-azul-medio {
  color: var(--azul-medio);
}
.tc-azul-intermedio {
  color: var(--azul-intermedio);
}
.tc-rojo {
  color: var(--rojo);
}
.tc-amarillo {
  color: var(--amarillo);
}
.tc-amarillo-claro {
  color: var(--amarillo-claro);
}
.tc-blanco {
  color: var(--blanco);
}
.tc-blanco-58 {
  color: var(--blanco-58);
}
.tc-gris-texto {
  color: var(--gris-texto);
}
.tc-gris-oscuro {
  color: var(--gris-oscuro);
}
.tc-gris-suave {
  color: var(--gris-suave-50);
}

/* Fondos */
.bg-azul-oscuro {
  background-color: var(--azul-oscuro);
}
.bg-azul-medio {
  background-color: var(--azul-medio);
}
.bg-azul-intermedio {
  background-color: var(--azul-intermedio);
}
.bg-rojo {
  background-color: var(--rojo);
}
.bg-rojo-30 {
  background-color: var(--rojo-30);
}
.bg-amarillo {
  background-color: var(--amarillo);
}
.bg-azul-claro {
  background-color: var(--azul-claro-bg);
}
.bg-gris-azulado {
  background-color: var(--gris-azulado);
}
.bg-blanco-5 {
  background-color: var(--blanco-5);
}
.bg-blanco-10 {
  background-color: var(--blanco-10);
}
.bg-blanco-25 {
  background-color: var(--blanco-25);
}

/* Bordes */
.border-1-custom {
  border: 1px solid var(--borde-1);
}
.border-2-custom {
  border: 1px solid var(--borde-2);
}

/* =====================================================
   BOTONES / CTA
===================================================== */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-family);
  font-size: var(--fs-17);
  font-weight: var(--fw-semibold) !important;
  color: var(--azul-oscuro) !important;
  background-color: var(--amarillo) !important;
  border: none;
  border-radius: 8px; /* ajustar según diseño */
  padding: 0.875rem 2rem;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    transform 0.2s ease;
}

.btn-cta:hover {
  background-color: var(--amarillo-claro) !important;
  color: var(--azul-oscuro) !important;
}

.btn-cta:active {
  transform: scale(0.98) !important;
}

.btn-cta.whatsapp

 {
    background: var(--verde) !important;
    color: #fff !important;
    margin-bottom: 28px;
}

.btn-cta.outline {
    background: var(--blanco) !important;
    border: 2px solid var(--azul-oscuro) !important;
    color: var(--azul-intermedio) !important;
    box-shadow: none !important;
      margin-bottom: 28px;
}


/* =====================================================
   SECCIONES — base
===================================================== */
section {
  position: relative;
}

/* =====================================================
   RESPONSIVE — escala tipográfica en móvil
===================================================== */
@media (max-width: 991.98px) {
  .text-xb-50 {
    font-size: var(--fs-38);
  }
  .text-xb-38 {
    font-size: var(--fs-32);
  }
}

@media (max-width: 575.98px) {
  .text-xb-50 {
    font-size: var(--fs-32);
  }
  .text-xb-38 {
    font-size: var(--fs-25);
  }
  .text-xb-32 {
    font-size: var(--fs-25);
  }
}

/* =====================================================
   ACCESIBILIDAD
===================================================== */
:focus-visible {
  outline: 2px solid var(--amarillo);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================
   HEADER
===================================================== */
.site-header {
  background-color: #f6f7fb;
  padding: 5px 0;
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: box-shadow 0.25s ease;
  border-bottom: 1px solid #e5eaf4;
}

.site-header.is-scrolled {
  box-shadow: 0 2px 12px rgba(13, 43, 95, 0.08);
}

.site-header .container {
  display: flex;
  justify-content: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.brand__icon {
  width: 34px;
  height: 34px;
}

.brand__name {
  font-size: var(--fs-17);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.01em;
}

.brand__name--azul {
  color: var(--azul-oscuro);
}
.brand__name--rojo {
  color: var(--rojo);
}

/* =====================================================
   HERO / VSL
===================================================== */
.section-hero {
  background-color: var(--gris-azulado);
  padding: 1.5rem 0 2.5rem;
}

.hero__title {
  margin-bottom: 1rem;
}

/* Segunda línea: texto rojo con subrayado tipo marcador (rojo al 30%) */
.hero__highlight {
  color: var(--rojo);
  background-image: linear-gradient(var(--rojo-30), var(--rojo-30));
  background-repeat: no-repeat;
  background-size: 100% 0.22em;
  background-position: 0 100%;
  padding: 0 0.1em;
}

.hero__subtitle {
  margin-bottom: 1rem;
}

/* ---------- Video ---------- */
.hero__video {
  position: relative;
  max-width: 550px;
  margin: 0 auto;
  aspect-ratio: 16 / 9.2;

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__video-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  padding: 0.45rem 0.9rem;
  border-radius: 50rem;
  white-space: nowrap;
}

.badge-pill--light {
  background-color: var(--blanco);
  color: var(--azul-oscuro);
}

.badge-pill--dark {
  background-color: var(--blanco-10);
  color: var(--blanco);
  border: 1px solid var(--blanco-25);
}

.hero__play {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: none;
  background-color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 6px; /* centrado óptico del triángulo */
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(13, 43, 95, 0.35);
  transition: transform 0.2s ease;
}

.hero__play:hover {
  transform: scale(1.06);
}

/* ---------- CTA + microcopy ---------- */
.hero__cta,
.form-card__cta {
  margin-top: 1.5rem;
  border-radius: 0.75rem;
  padding: 0.9rem 1.75rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(255, 195, 0, 0.35);
}

.hero__note {
  margin-top: 0.9rem;
}

.hero__chevron {
  display: inline-block;
  margin-top: 1.25rem;
  animation: chevron-bounce 1.8s ease-in-out infinite;
}

@keyframes chevron-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* ---------- Responsive hero ---------- */
@media (max-width: 575.98px) {
  .section-hero {
    padding: 2.5rem 0 2rem;
  }

  .hero__video {
    border-radius: 12px;
  }

  .hero__video-badges {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .badge-pill {
    font-size: 0.6875rem;
    padding: 0.35rem 0.7rem;
  }

  .hero__play {
    width: 60px;
    height: 60px;
  }

  .hero__cta {
    width: 100%;
  }
}

/* =====================================================
   SECCIÓN: PROBLEMA / AGOTAMIENTO
===================================================== */
.section-problema {
  background-color: var(--azul-oscuro);
  padding: 5rem 0;
  overflow: hidden;
}

/* Líneas curvas decorativas de fondo */
.section-problema::before,
.section-problema::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--blanco-5);
  pointer-events: none;
}

.section-problema::before {
  width: 900px;
  height: 900px;
  top: -55%;
  left: -20%;
}

.section-problema::after {
  width: 1100px;
  height: 1100px;
  bottom: -65%;
  right: -25%;
}

.problema__title {
  margin-bottom: 1.25rem;
}

.problema__subtitle {
  color: var(--blanco-58);
  margin-bottom: 3rem;
}

.problema__subtitle strong {
  color: var(--blanco);
  font-weight: var(--fw-bold);
}

/* ---------- Cards de dolores ---------- */
.problema__cards {
  margin-bottom: 3.5rem;
}

.pain-card {
  height: 100%;
  background-color: var(--blanco-5);
  border: 1px solid var(--blanco-10);
  border-radius: 12px;
  padding: 1.5rem;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.pain-card:hover {
  background-color: var(--blanco-10);
  border-color: var(--blanco-25);
}

.pain-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background-color: rgb(255 255 255 / 25%);
  border: 1px solid rgba(255, 197, 61, 0.25);
  margin-bottom: 1.5rem;
  padding: 7px;
}

.pain-card__text {
  color: var(--blanco-58);
  margin: 0;
}

.pain-card__text strong {
  color: var(--blanco);
  font-weight: var(--fw-bold);
}

/* ---------- Frase de cierre ---------- */
.problema__quote {
  margin: 0;
  line-height: 1.4;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-problema {
    padding: 3.5rem 0;
  }
  .problema__cards {
    margin-bottom: 2.5rem;
  }
}

/* =====================================================
   SECCIÓN: SOLUCIÓN / TU PROPIEDAD
===================================================== */
.section-solucion {
  background-color: var(--blanco);
  padding: 5rem 0;
}

.solucion__title {
  margin-bottom: 1.25rem;
}

.solucion__subtitle,
.buro__subtitle {
  margin-bottom: 3.5rem;
  padding: 0 186px;
}

/* ---------- Diagrama ---------- */
.solucion__diagrama {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 720px;
  margin: 0 auto 4rem;
}

.deudas-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
}

.deuda-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--gris-azulado);
  border: 1px solid var(--borde-2);
  border-radius: 50rem;
  padding: 0.45rem 1rem;
  color: var(--gris-texto);
  white-space: nowrap;
}

.deuda-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--rojo);
  flex-shrink: 0;
}

.solucion__conectores {
  width: 130px;
  height: 250px;
  flex-shrink: 0;
}

.mensualidad-card {
  background: linear-gradient(
    135deg,
    var(--azul-medio) 0%,
    var(--azul-oscuro) 100%
  );
  border-radius: 14px;
  padding: 1.75rem 2.25rem;
  text-align: center;
  box-shadow: 0 16px 35px rgba(13, 43, 95, 0.25);
}

.mensualidad-card__title {
  margin-bottom: 0.4rem;
}

.mensualidad-card__sub {
  color: var(--blanco-58);
  letter-spacing: 0.08em;
  margin: 0;
}

/* ---------- Cards de beneficios ---------- */
.benefit-card {
  height: 100%;
  background-color: var(--blanco);
  border: 1px solid var(--borde-1);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 4px 18px rgba(13, 43, 95, 0.05);
}

.benefit-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background-color: var(--azul-claro-bg);
  margin-bottom: 1.25rem;
  padding: 5px;
}

.benefit-card__title {
  margin-bottom: 0.5rem;
}

.benefit-card__text {
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-solucion {
    padding: 3.5rem 0;
  }

  .solucion__subtitle,
  .buro__subtitle {
    padding: 0;
  }

  /* En móvil el diagrama pasa a vertical y se ocultan los conectores */
  .solucion__diagrama {
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
  }

  .solucion__conectores {
    display: none;
  }

  .deudas-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* =====================================================
   SECCIÓN: SITUACIÓN EN BURÓ DE CRÉDITO
===================================================== */
.section-buro {
  background-color: var(--gris-azulado);
  padding: 5rem 0 3.5rem;
}

.buro__title {
  margin-bottom: 1.25rem;
}

.buro__subtitle {
  margin-bottom: 3rem;
}

/* ---------- Cards de estado ---------- */
.buro__cards {
  margin-bottom: 2.5rem;
}

.buro-card {
  height: 100%;
  background-color: var(--blanco);
  border: 1px solid var(--borde-1);
  border-top: 4px solid transparent;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 18px rgba(13, 43, 95, 0.05);
}

.buro-card--verde {
  border-top-color: var(--verde);
}
.buro-card--amarillo {
  border-top-color: var(--amarillo);
}
.buro-card--rojo {
  border-top-color: var(--rojo-borde);
}

.buro-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.buro-card__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.buro-card__dot--verde {
  background-color: var(--verde);
}
.buro-card__dot--amarillo {
  background-color: var(--amarillo);
}
.buro-card__dot--rojo {
  background-color: var(--rojo);
}

/* Mini reporte */
.buro-report {
  background-color: var(--gris-azulado);
  border: 1px solid var(--borde-2);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
}

.buro-report__label {
  color: var(--gris-oscuro);
  letter-spacing: 0.08em;
  margin-bottom: 0.65rem;
}

.buro-report__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.buro-report__row + .buro-report__row {
  margin-top: 0.45rem;
}

.buro-report__squares {
  display: inline-flex;
  gap: 3px;
}

.sq {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
}

.sq--v {
  background-color: var(--verde);
}
.sq--a {
  background-color: var(--amarillo);
}
.sq--r {
  background-color: var(--rojo);
}

.buro-card__text {
  margin-bottom: 1.25rem;
}

.buro-card__note {
  margin-top: auto; /* empuja la nota al fondo para alinear las 3 cards */
  margin-bottom: 0;
  background-color: var(--azul-claro-bg);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: var(--azul-intermedio);
}

.buro-card__note strong {
  font-weight: var(--fw-bold);
}

/* ---------- Cierre de sección ---------- */
.buro__footer-note {
  margin-bottom: 1.5rem;
}

.buro__footer-note strong {
  color: var(--azul-oscuro);
  font-weight: var(--fw-bold);
}

.buro__footer-cta {
  margin: 0;
}

/* =====================================================
   SECCIÓN: ¿ESTA ESTRATEGIA ES PARA TI?
===================================================== */
.section-para-ti {
  background-color: var(--gris-azulado);
  padding: 3.5rem 0 5rem;
}

.para-ti__title {
  margin-bottom: 1.25rem;
}

.para-ti__subtitle {
  margin-bottom: 3rem;
}

.fit-card {
  height: 100%;
  background-color: var(--blanco);
  border: 1px solid var(--borde-1);
  border-top: 4px solid transparent;
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: 0 4px 18px rgba(13, 43, 95, 0.05);
}

.fit-card--si {
  border-top-color: var(--azul-medio);
}
.fit-card--no {
  border-top-color: var(--rojo-borde);
}

.fit-card__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.fit-card__list {
  margin: 0;
  padding: 0;
}

.fit-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 0;
}

.fit-card__list li + li {
  border-top: 1px solid var(--borde-2);
}

/* Iconos circulares check / x */
.fit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  margin-top: 1px;
}

.fit-icon--check {
  background-color: var(--azul-claro-bg);
  color: var(--azul-intermedio);
}

.fit-icon--x {
  background-color: var(--rojo-30);
  color: var(--rojo);
}

.para-ti__footer {
  margin: 3rem 0 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-buro {
    padding: 3.5rem 0 2.5rem;
  }
  .section-para-ti {
    padding: 2.5rem 0 3.5rem;
  }
}

/* =====================================================
   SECCIÓN: PROCESO EN 5 PASOS
===================================================== */
.section-proceso {
  background-color: var(--blanco);
  padding: 5rem 0;
}

.proceso__title {
  margin-bottom: 1rem;
}

.proceso__subtitle {
  margin-bottom: 3.5rem;
}

/* ---------- Timeline ---------- */
.steps {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 3rem;
  padding: 0;
  counter-reset: paso;
  list-style: none;
}

.step {
  position: relative;
  flex: 1;
  text-align: center;
  padding: 0 0.5rem;
}

/* Línea conectora entre círculos */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px; /* mitad del círculo de 34px */
  left: calc(50% + 26px);
  width: calc(100% - 52px);
  height: 1px;
  background-color: var(--borde-1);
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--azul-intermedio);
  background-color: var(--blanco);
  color: var(--azul-intermedio);
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  margin-bottom: 1rem;
}

/* Paso activo: círculo amarillo relleno */
.step--activo .step__num {
  background-color: var(--amarillo);
  border-color: var(--amarillo);
  color: var(--azul-oscuro);
  box-shadow: 0 0 0 5px rgba(255, 195, 0, 0.2);
}

.step__name {
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.step__badge {
  display: inline-block;
  background-color: var(--amarillo);
  color: var(--azul-oscuro);
  border-radius: 50rem;
  padding: 0.15rem 0.7rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.step__desc {
  margin: 0;
}

.proceso__cta {
  border-radius: 12px;
  padding: 0.9rem 6rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(255, 195, 0, 0.35);
}

/* =====================================================
   SECCIÓN: AUTORIDAD / ADRIANA
===================================================== */
.section-aliada {
  background-color: var(--blanco);
  padding: 4rem 0 5rem;
}

/* Foto con esquina decorativa azul */
.aliada__foto-wrap {
  position: relative;
  padding: 14px 0 0 14px;
}

.aliada__foto-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 40%;
  border-top: 3px solid var(--azul-medio);
  border-left: 3px solid var(--azul-medio);
}

.aliada__foto {
  width: 100%;
  border-radius: 12 px;
  position: relative;
  z-index: 1;
}

.aliada__title {
  margin-bottom: 1.25rem;
}

.aliada__intro {
  margin-bottom: 1.75rem;
}

.aliada__intro strong {
  color: var(--azul-oscuro);
  font-weight: var(--fw-bold);
}

/* Quote con barra roja */
.aliada__quote {
  border-left: 4px solid var(--rojo);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 0 0 1.75rem;
}

.aliada__quote p {
  margin: 0;
  line-height: 1.55;
}

/* Tags */
.aliada__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.tag-pill {
  background-color: var(--gris-azulado);
  border: 1px solid var(--borde-2);
  border-radius: 50rem;
  padding: 0.5rem 1.1rem;
  color: var(--azul-intermedio);
  white-space: nowrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  /* Timeline en 2 columnas (tablet) */
  .steps {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2rem;
  }

  .step {
    flex: 0 0 45%;
  }

  .step:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .section-proceso {
    padding: 3.5rem 0;
  }
  .section-aliada {
    padding: 3rem 0 3.5rem;
  }

  /* Timeline vertical en móvil */
  .steps {
    flex-direction: column;
    align-items: stretch;
    row-gap: 0;
  }

  .step {
    flex: 1;
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 1rem;
    text-align: left;
    padding: 0 0 1.75rem;
  }

  .step__num {
    grid-row: 1 / span 3;
    margin-bottom: 0;
  }

  /* Línea vertical entre pasos */
  .step:not(:last-child)::after {
    display: block;
    top: 40px;
    left: 16px;
    width: 1px;
    height: calc(100% - 46px);
  }

  .step__badge {
    justify-self: start;
  }

  .proceso__cta {
    width: 100%;
    padding: 0.9rem 1.5rem;
  }

  .tag-pill {
    white-space: normal;
  }
}

/* =====================================================
   SECCIÓN: FORMULARIO / VALIDACIÓN DE PERFIL
===================================================== */
.section-validar {
  background-color: var(--azul-claro-bg);
  padding: 6rem 0;
}

.form-card {
  background-color: var(--blanco);
  border-radius: 24px;
  padding: 3rem 3.25rem;
  box-shadow: 0 25px 60px rgba(13, 43, 95, 0.1);
}

.form-card__title {
  margin-bottom: 1rem;
}

.form-card__subtitle {
  margin-bottom: 2rem;
}

/* ---------- Barra de progreso ---------- */
.form-progress {
  margin-bottom: 2rem;
}

.form-progress__bar {
  height: 5px;
  border-radius: 50rem;
  background-color: var(--azul-claro-bg);
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.form-progress__fill {
  display: block;
  height: 100%;
  border-radius: 50rem;
  background-color: var(--azul-medio);
  transition: width 0.4s ease;
}

.form-progress__label {
  letter-spacing: 0.06em;
  margin: 0;
}

/* ---------- Paso / pregunta ---------- */
.form-step__question {
  margin-bottom: 0.4rem;
}

/* 21px ExtraBold no estaba en las utilidades; se define aquí */
.text-xb-21 {
  font-size: var(--fs-21);
  font-weight: var(--fw-extrabold);
  line-height: 1.35;
}

.form-step__hint {
  margin-bottom: 1.75rem;
}

/* ---------- Campos ---------- */
.form-field {
  margin-bottom: 1.5rem;
}

.form-field__label {
  display: block;
  margin-bottom: 0.6rem;
}

.form-field__input {
  width: 100% !important;
  font-family: var(--font-family) !important;
  font-size: var(--fs-15) !important;
  font-weight: var(--fw-regular) !important;
  color: var(--azul-oscuro) !important;
  background-color: var(--blanco) !important;
  border: 1px solid var(--borde-2) !important;
  border-radius: 10px !important;
      padding: 0 16px 0 30px !important;
  transition :
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;

}

.form-field__input::placeholder {
  color: var(--gris-oscuro);
}

.form-field__input:focus {
  outline: none;
  border-color: var(--azul-intermedio);
  box-shadow: 0 0 0 3px rgba(40, 74, 153, 0.12);
}

/* Estado de error (lo activa el JS) */
.form-field--error .form-field__input {
  border-color: var(--rojo);
  box-shadow: 0 0 0 3px var(--rojo-30);
}

.form-field__error-msg {
  display: none;
  font-size: var(--fs-12);
  color: var(--rojo);
  margin-top: 0.4rem;
}

.form-field--error .form-field__error-msg {
  display: block;
}

/* ---------- CTA y legales ---------- */
.form-card__cta {
  width: 100%;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  letter-spacing: 0.03em;
  margin-top: 0.5rem;
}

.form-card__legal {
  margin: 1.5rem 0 0;
  line-height: 1.7;
}

.form-card__link {
  color: var(--gris-oscuro);
  text-decoration: underline;
}

.form-card__link:hover {
  color: var(--azul-intermedio);
}

/* ---------- Responsive ---------- */
@media (max-width: 575.98px) {
  .section-validar {
    padding: 3rem 0;
  }

  .form-card {
    border-radius: 16px;
    padding: 2rem 1.5rem;
  }
}

.form-recaptcha {
  display: flex;

  margin: 1.5rem 0;
}

.form-msg {
  margin-top: 1rem;
  line-height: 1.6;
}

/* El widget de Google mide 304px fijo; en pantallas muy angostas puede
   desbordar, así que lo escalamos ligeramente hacia abajo */
@media (max-width: 340px) {
  .form-recaptcha {
    transform: scale(0.9);
    transform-origin: center;
  }
}
/* =====================================================
   CUESTIONARIO — Wizard multi-paso
===================================================== */

/* Botones de radio ocultos (el estilo lo lleva la card) */
.option-card {
  display: block;
  cursor: pointer;
  border: 1px solid var(--borde-2);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  background-color: var(--blanco);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  margin-bottom: 0.75rem;
}

.option-card:hover {
  border-color: var(--azul-intermedio);
}

.option-card__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option-card__body {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.option-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.option-card__title {
  line-height: 1.3;
}

.option-card__desc {
  line-height: 1.4;
}

.option-card__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.option-card__dot--verde {
  background-color: var(--verde);
}
.option-card__dot--amarillo {
  background-color: var(--amarillo);
}
.option-card__dot--rojo {
  background-color: var(--rojo);
}

/* Estado seleccionado */
.option-card:has(.option-card__input:checked) {
  border-color: var(--azul-medio);
  border-width: 2px;
  padding: calc(1rem - 1px) calc(1.25rem - 1px);
  background-color: var(--azul-claro-bg);
  box-shadow: 0 4px 14px rgba(13, 43, 95, 0.08);
}

/* Variante simple (paso 3, sin punto ni descripción) */
.option-card--simple .option-card__body {
  justify-content: flex-start;
}

/* Foco por teclado */
.option-card__input:focus-visible + .option-card__body {
  outline: 2px solid var(--amarillo);
  outline-offset: 4px;
  border-radius: 8px;
}

/* ---------- Navegación paso a paso ---------- */
.form-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.form-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-direction: column;
  background: none;
  border: none;
  color: var(--gris-texto);
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  transition: color 0.2s ease;
}

.form-back:hover {
  color: var(--azul-oscuro);
}

.form-card__cta--nav {
  flex: 1;
  margin-top: 0;
}

/* ---------- Loader ---------- */
.form-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  gap: 1.25rem;
}

.form-loader__spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--azul-claro-bg);
  border-top-color: var(--azul-medio);
  animation: spinner-rotate 0.9s linear infinite;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-loader__spinner {
    animation-duration: 3s;
  }
}

/* ---------- Resultado ---------- */
.form-result {
  text-align: center;
  padding: 1.5rem 0.5rem 0.5rem;
}

.form-result__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background-color: var(--azul-claro-bg);
  margin-bottom: 1.25rem;
}

.form-result__title {
  margin-bottom: 0.75rem;
}

.form-result__text {
  line-height: 1.65;
  margin-bottom: 1.75rem;
}

.form-result__text em {
  color: var(--gris-oscuro);
}

.form-result__cta {
  border-radius: 12px;
  padding: 0.9rem 1.75rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(255, 195, 0, 0.35);
}

/* =====================================================
   SECCIÓN: CTA FINAL
===================================================== */
.section-cta-final {
  background-color: var(--azul-oscuro);
  padding: 6rem 0 5rem;
}

.cta-final__title {
  line-height: 1.45;
  margin-bottom: 2.5rem;
}

.cta-final__btn {
  border-radius: 12px;
  padding: 0.95rem 2.5rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(255, 195, 0, 0.25);
}

/* Línea amarilla decorativa bajo el botón */
.cta-final__divider {
  display: block;
  width: 140px;
  height: 2px;
  background-color: var(--amarillo);
  margin: 3.5rem auto 0;
}

/* =====================================================z
   FOOTER
===================================================== */
.site-footer {
  background-color: var(--azul-oscuro);
  border-top: 1px solid var(--blanco-10);
  padding: 3.5rem 0 1rem;
  text-align: center;
}

.site-footer__brand {
  margin-bottom: 1.5rem;
}

/* Rosa/rojo claro del logo sobre fondo oscuro */
.footer-brand--rojo {
  color: #e85d7f;
}

.site-footer__disclaimer {
  color: var(--blanco-58);
 
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.site-footer__link {
  color: var(--blanco-58);
  text-decoration: underline;
}

.site-footer__link:hover {
  color: var(--blanco);
}

/* ---------- Responsive ---------- */
@media (max-width: 575.98px) {
  .section-cta-final {
    padding: 4rem 0 3.5rem;
  }

  .cta-final__btn {
    width: 100%;
  }

  .site-footer {
    padding: 2.5rem 0 3rem;
  }
}

/* =====================================================
   LP ARQUITECTURA CSS
===================================================== */

/* =====================================================
   LP 2: ARQUITECTURA FINANCIERA
===================================================== */

/* ---------- Header: breadcrumb de pasos ---------- */
.checkout-steps {
  width: 100%;
  display: flex;
  justify-content: center;
}

.checkout-steps__list {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checkout-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checkout-step__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.checkout-steps__line {
  width: 34px;
  height: 1px;
  background-color: var(--borde-2);
}

/* Paso completado */
.checkout-step--done .checkout-step__circle {
  background-color: var(--azul-medio);
  color: var(--blanco);
}
.checkout-step--done .checkout-step__name {
  color: var(--azul-medio);
}

/* Paso activo */
.checkout-step--activo .checkout-step__circle {
  background-color: var(--amarillo);
  color: var(--azul-oscuro);
}
.checkout-step--activo .checkout-step__name {
  color: var(--azul-oscuro);
}

/* Paso pendiente */
.checkout-step:not(.checkout-step--done):not(.checkout-step--activo)
  .checkout-step__circle {
  background-color: var(--gris-azulado);
  border: 1px solid var(--borde-2);
  color: var(--gris-oscuro);
}
.checkout-step:not(.checkout-step--done):not(.checkout-step--activo)
  .checkout-step__name {
  color: var(--gris-oscuro);
}

/* ---------- Sección oferta ---------- */
.section-oferta {
  background-color: #f3f5fd;
  padding: 1.5rem 0 5rem;
}

.oferta__badge {
  display: inline-block;
  background-color: var(--azul-claro-bg);
  color: var(--azul-intermedio);
  border-radius: 50rem;
  padding: 0.45rem 1.1rem;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.oferta__title {
  margin-bottom: 1.5rem;
}

.oferta__desc {
  margin-bottom: 1.5rem;
}

.oferta__note {
  margin: 0;
}

/* ---------- Card de precio ---------- */
.price-card {
  background-color: var(--blanco);
  border-radius: 20px;
  padding: 2.25rem 2rem;
  box-shadow: 0 25px 60px rgba(13, 43, 95, 0.12);
}

.price-card__product {
  margin-bottom: 0.5rem;
}

.price-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.price-card__amount {
  font-size: var(--fs-38);
  font-weight: var(--fw-extrabold);
  color: var(--azul-oscuro);
  line-height: 1.1;
}

.price-card__terms {
  margin-bottom: 1.5rem;
}

/* Lista de beneficios con separadores */
.price-card__features {
  margin: 0 0 1.75rem;
  padding: 0;
}

.price-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 0;
}

.price-card__features li + li {
  border-top: 1px solid var(--borde-2);
}

.price-check {
  color: var(--azul-intermedio);
  font-weight: var(--fw-bold);
  font-size: var(--fs-13);
  flex-shrink: 0;
  margin-top: 1px;
}

.price-card__cta {
  width: 100%;
  border-radius: 12px;
  padding: 0.95rem 1.25rem;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 8px 20px rgba(255, 195, 0, 0.35);
}

.price-card__secure {
  margin: 1.1rem 0 0.9rem;
}

/* Chips de tarjetas */
.price-card__brands {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.brand-chip {
  background-color: var(--blanco);
  border: 1px solid var(--borde-2);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  color: var(--gris-texto);
  letter-spacing: 0.04em;
}

.price-card__legal {
  margin: 0;
  line-height: 1.7;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .section-oferta .row {
    text-align: center;
  }

  .oferta__note {
    max-width: 560px;
    margin: 0 auto;
  }
}

@media (max-width: 575.98px) {
  .section-oferta {
    padding: 2.5rem 0 3rem;
  }

  .price-card {
    padding: 1.75rem 1.25rem;
  }

  /* Breadcrumb compacto: solo círculos y el nombre del paso activo */
  .checkout-steps__list {
    gap: 0.6rem;
  }
  .checkout-steps__line {
    width: 18px;
  }

  .checkout-step__name {
    display: none;
  }
  .checkout-step--activo .checkout-step__name {
    display: inline;
  }
}

/* =====================================================
   SECCIÓN: QUÉ ES / PLANO DE RESCATE (LP 2)
===================================================== */
.section-plano {
  background-color: var(--azul-oscuro);
  padding: 5rem 0;
}

.plano__title {
  margin-bottom: 1.5rem;
}

.plano__desc {
  color: var(--blanco-58);
  line-height: 1.8;
  margin-bottom: 3rem;
}

/* Box destacado */
.plano__box {
  background-color: var(--blanco-5);
  border: 1px solid var(--blanco-10);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
}

.plano__box p {
  color: var(--blanco-58);
  line-height: 1.75;
  margin: 0;
}

.plano__box strong {
  color: var(--blanco);
  font-weight: var(--fw-bold);
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-plano {
    padding: 3.5rem 0;
  }
  .plano__desc {
    margin-bottom: 2rem;
  }
}

/* =====================================================
   SECCIÓN: ENTREGABLES (LP 2)
===================================================== */
.section-entregables {
  background-color: var(--blanco);
  padding: 5rem 0;
}

.entregables__title {
  margin-bottom: 1rem;
}

.entregables__subtitle {
  margin-bottom: 3.5rem;
}

/* ---------- Lista numerada vertical ---------- */
.deliverables {
  margin: 0 0 4.5rem;
  padding: 0;
}

.deliverable {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding-bottom: 2.25rem;
}

.deliverable:last-child {
  padding-bottom: 0;
}

/* Línea punteada vertical entre números */
.deliverable:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 19px; /* centro del círculo de 38px */
  bottom: 4px;
  border-left: 2px dotted var(--borde-1);
}

.deliverable__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--azul-intermedio);
  background-color: var(--blanco);
  color: var(--azul-intermedio);
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.deliverable__name {
  margin-bottom: 0.4rem;
}

.deliverable__desc {
  margin: 0;
}

/* Frase clave en rojo bold */
.deliverable__desc strong {
  color: var(--rojo);
  font-weight: var(--fw-bold);
}

/* ---------- Box de garantía ---------- */
.garantia-box {
  position: relative;
  background-color: var(--azul-claro-bg);
  border-radius: 16px;
  padding: 3.25rem 2rem 2rem;
  text-align: center;
  margin-top: 5rem;
}

/* Sello circular */
.garantia-box__seal {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--blanco);
  border: 2px solid var(--rojo);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(13, 43, 95, 0.12);
}

.garantia-box__seal-inner {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1.5px solid var(--azul-medio);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.garantia-box__seal-pct {
  font-size: 16px;
  font-weight: var(--fw-extrabold);
  color: var(--azul-oscuro);
  line-height: 1;
}

.garantia-box__seal-txt {
  font-size: 6.5px;
  font-weight: var(--fw-bold);
  color: var(--rojo);
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-align: center;
}

.garantia-box__title {
  margin-bottom: 0.4rem;
}

.garantia-box__sub {
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-entregables {
    padding: 3.5rem 0;
  }
  .deliverables {
    margin-bottom: 3.5rem;
  }
}

/* =====================================================
   SECCIÓN: QUÉ LOGRAS (LP 2)
===================================================== */
.section-logros {
  background-color: var(--gris-azulado);
  padding: 5rem 0;
}

.logros__title {
  margin-bottom: 0.9rem;
}

.logros__subtitle {
  margin-bottom: 2.5rem;
}

/* ---------- Card de logros ---------- */
.logros-card {
  background-color: var(--blanco);
  border-radius: 16px;
  padding: 2rem 2.25rem;
  box-shadow: 0 15px 40px rgba(13, 43, 95, 0.08);
  margin-bottom: 1.5rem;
}

.logros-list {
  margin: 0;
  padding: 0;
}

.logros-list li + li {
  margin-top: 1.4rem;
}

.logros-list strong {
  color: var(--azul-intermedio);
  font-weight: var(--fw-bold);
}

/* Check circular azul con palomita amarilla */
.logro-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--azul-oscuro);
  flex-shrink: 0;
  margin-right: 10px;
}

/* ---------- Banner 25 días ---------- */
.plazo-banner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background-color: var(--azul-oscuro);
  border-radius: 16px;
  padding: 1.75rem 2rem;
  margin-bottom: 2.5rem;
}

/* Icono calendario en CSS */
.plazo-banner__icon {
  flex-shrink: 0;
  display: inline-flex;
  background-color: var(--blanco);
  border-radius: 10px;
  padding: 8px;
}

.plazo-cal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 2px solid var(--rojo);
  border-radius: 6px;
  padding-top: 6px;
}

/* Anillas del calendario */
.plazo-cal__rings {
  position: absolute;
  top: -5px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-evenly;
}

.plazo-cal__rings::before,
.plazo-cal__rings::after {
  content: "";
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background-color: var(--rojo);
}

.plazo-cal__num {
  font-size: 17px;
  font-weight: var(--fw-extrabold);
  color: var(--rojo);
  line-height: 1;
}

.plazo-cal__txt {
  font-size: 7px;
  font-weight: var(--fw-bold);
  color: var(--rojo);
  line-height: 1.2;
  text-align: center;
}

/* Separador vertical */
.plazo-banner__divider {
  align-self: stretch;
  width: 1px;
  background-color: var(--blanco-25);
  flex-shrink: 0;
}

.plazo-banner__title {
  margin-bottom: 0.4rem;
}

.plazo-banner__desc {
  color: var(--blanco-58);
  line-height: 1.7;
  margin: 0;
}

/* ---------- Cierre + CTA ---------- */
.logros__closer-sub {
  margin-bottom: 0.5rem;
}

.logros__closer {
  margin-bottom: 2rem;
}

.logros__cta {
  border-radius: 12px;
  padding: 0.95rem 2.5rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(255, 195, 0, 0.35);
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-logros {
    padding: 3.5rem 0;
  }

  .logros-card {
    padding: 1.5rem 1.25rem;
  }

  /* Banner apilado en móvil */
  .plazo-banner {
    flex-direction: column;
    text-align: center;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
  }

  .plazo-banner__divider {
    display: none;
  }

  .logros__cta {
    width: 100%;
  }
}

/* =====================================================
   SECCIÓN: DOCUMENTACIÓN (LP 2)
===================================================== */
.section-docs {
  background-color: var(--azul-claro-bg);
  padding: 5rem 0;
}

.docs__title {
  margin-bottom: 1rem;
}

.docs__subtitle {
  margin-bottom: 3rem;
}

/* ---------- Aviso indispensable ---------- */
.docs-alert {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background-color: var(--blanco);
  border: 1.5px solid var(--azul-intermedio);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 2rem;
}

.docs-alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: var(--azul-claro-bg);
  flex-shrink: 0;
}

.docs-alert__text {
  margin: 0;
  line-height: 1.7;
}

.docs-alert__text strong {
  font-weight: var(--fw-bold);
}

/* ---------- Cards de documentos ---------- */
.docs-card {
  background-color: var(--blanco);
  border-radius: 16px;
  padding: 2rem 2.25rem;
  box-shadow: 0 15px 40px rgba(13, 43, 95, 0.06);
}

.docs-card + .docs-card {
  margin-top: 2rem;
}

/* Tags de encabezado */
.docs-tag {
  display: inline-block;
  border-radius: 50rem;
  padding: 0.45rem 1.1rem;
  letter-spacing: 0.06em;
  margin-bottom: 1.75rem;
}

.docs-tag--azul {
  background-color: var(--azul-oscuro);
  color: var(--amarillo-claro);
}

.docs-tag--amarillo {
  background-color: var(--amarillo);
  color: var(--azul-oscuro);
}

.docs-tag--outline {
  background-color: var(--blanco);
  border: 1.5px solid var(--rojo);
  color: var(--rojo);
}

.docs-card__col-title {
  margin-bottom: 1.25rem;
}

.docs-card__intro {
  margin-bottom: 1.5rem;
}

.docs-card__intro strong {
  font-weight: var(--fw-bold);
}

/* Listas con checkboxes */
.docs-list {
  margin: 0;
  padding: 0;
}

.docs-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.5;
}

.docs-list li + li {
  margin-top: 1rem;
}

.docs-list strong {
  font-weight: var(--fw-bold);
}

.docs-checkbox {
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--azul-intermedio);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Nota y "¿Por qué?" */
.docs-card__note {
  margin: 1.75rem 0 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--borde-2);
}

.docs-card__why {
  margin: 1.25rem 0 0;
  padding-top: 0.25rem;
  color: var(--azul-oscuro);
}

/* Separador arriba del ¿Por qué? cuando no hay nota previa */
.docs-card > .docs-card__why:not(.docs-card__note + .docs-card__why) {
  border-top: 1px solid var(--borde-2);
  padding-top: 1.5rem;
  margin-top: 1.75rem;
}

/* ---------- Card de cierre ---------- */
.docs-footer-card {
  background-color: var(--blanco);
  border-radius: 16px;
  padding: 1.75rem 2rem;
  text-align: center;
  margin-top: 2rem;
  box-shadow: 0 15px 40px rgba(13, 43, 95, 0.06);
}

.docs-footer-card__title {
  margin-bottom: 0.6rem;
}

.docs-footer-card__sub {
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-docs {
    padding: 3.5rem 0;
  }

  .docs-card {
    padding: 1.5rem 1.25rem;
  }

  .docs-alert {
    flex-direction: column;
    padding: 1.25rem;
  }

  .docs-tag {
    white-space: normal;
    text-align: center;
  }
}

/* =====================================================
   SECCIÓN: QUIÉN ESTÁ DETRÁS / BIO (LP 2)
===================================================== */
.section-quien {
  background-color: var(--blanco);
  padding: 5rem 0;
}

.quien__title {
  margin-bottom: 1rem;
}

.quien__subtitle {
  margin-bottom: 3rem;
}

/* ---------- Foto con placa ---------- */
.quien__figure {
  margin: 0;
}

.quien__foto {
  border-radius: 4px 4px 0 0;
}

.quien__placa {
  background-color: var(--rojo);
  text-align: center;
  padding: 1rem 1.25rem;
  border-radius: 0 0 4px 4px;
  margin-left: 14px; /* alinea con la foto desplazada por la esquina decorativa */
}

.quien__placa p {
  margin: 0;
}

.quien__placa p:last-child {
  color: var(--blanco-58);
  margin-top: 0.2rem;
}

/* ---------- Bio ---------- */
.quien__name {
  margin-bottom: 0.35rem;
}

.quien__role {
  margin-bottom: 1.25rem;
}

.quien__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.75rem;
  padding: 0;
}

.quien__bio {
  margin-bottom: 1.25rem;
}

.quien__bio strong {
  color: var(--azul-intermedio);
  font-weight: var(--fw-bold);
}

/* Quote amarilla */
.quien__quote {
  background-color: #fff8e1;
  border-left: 4px solid var(--amarillo);
  border-radius: 0 10px 10px 0;
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0 0;
}

.quien__quote p {
  font-style: italic;
  line-height: 1.7;
  margin: 0;
}

/* ---------- Stats ---------- */
.quien__stats {
  margin-top: 3rem;
  margin-bottom: 2.5rem;
}

.stat-card {
  height: 100%;
  background-color: var(--gris-azulado);
  border: 1px solid var(--borde-2);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.stat-card__num {
  margin-bottom: 0.5rem;
}

.stat-card__desc {
  line-height: 1.6;
  margin: 0;
}

/* ---------- Banner de redes ---------- */
.quien__redes {
  background-color: var(--azul-oscuro);
  border-radius: 14px;
  padding: 1.5rem 2rem;
  text-align: center;
}

.quien__redes-title {
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

.quien__redes-list {
  color: var(--blanco);
  line-height: 1.9;
  margin: 0;
}

.red-link {
  color: var(--blanco);
}

.red-link strong {
  color: var(--amarillo-claro);
  font-weight: var(--fw-bold);
}

.red-link:hover {
  color: var(--amarillo-claro);
}

.quien__redes-sep {
  color: var(--blanco-58);
  margin: 0 0.5rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-quien {
    padding: 3.5rem 0;
  }

  .quien__stats {
    margin-top: 2rem;
  }

  .quien__redes {
    padding: 1.25rem 1.25rem;
  }
}

/* =====================================================
   SECCIÓN: GARANTÍA DE DEVOLUCIÓN (LP 2)
===================================================== */
.section-garantia {
  background-color: var(--gris-azulado);
  padding: 5rem 0;
}

/* ---------- Sello grande ---------- */
.garantia__seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: var(--blanco);
  border: 2.5px solid var(--rojo);
  box-shadow: 0 6px 18px rgba(13, 43, 95, 0.12);
  margin-bottom: 1.25rem;
}

.garantia__seal-inner {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1.5px solid var(--azul-medio);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.garantia__seal-pct {
  font-size: var(--fs-15);
  font-weight: var(--fw-extrabold);
  color: var(--rojo);
  line-height: 1;
  margin-bottom: 2px;
}

.garantia__seal-txt {
  font-size: 7px;
  font-weight: var(--fw-bold);
  color: var(--azul-oscuro);
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-align: center;
}

.garantia__tagline {
  margin-bottom: 1rem;
}

.garantia__title {
  margin-bottom: 1rem;
}

.garantia__subtitle {
  margin-bottom: 2.5rem;
}

/* ---------- Banner principal ---------- */
.garantia__banner {
  background-color: var(--azul-oscuro);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  text-align: center;
  margin-bottom: 2rem;
}

.garantia__banner p {
  line-height: 1.8;
  margin: 0;
}

.garantia__banner .tc-amarillo {
  font-weight: var(--fw-bold);
}

.garantia__reassure {
  margin-bottom: 3rem;
}

/* ---------- Cards de info ---------- */
.garantia__info-cards {
  margin-top: 0.5rem;
}

.info-card {
  height: 100%;
  background-color: var(--blanco);
  border: 1px solid var(--borde-1);
  border-radius: 12px;
  padding: 1.75rem;
}

.info-card__title {
  margin-bottom: 1rem;
}

.info-card__text {
  line-height: 1.75;
  margin: 0;
}

/* ---------- Doble beneficio ---------- */
.garantia__bonus {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background-color: var(--azul-claro-bg);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin-top: 2.5rem;
}

.garantia__bonus-plus {
  color: var(--azul-intermedio);
  font-size: var(--fs-17);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  flex-shrink: 0;
}

.garantia__bonus p {
  line-height: 1.75;
  margin: 0;
}

.garantia__bonus strong {
  font-weight: var(--fw-bold);
}

/* ---------- Quote de cierre ---------- */
.garantia__quote {
  border-left: 4px solid var(--rojo);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 3rem auto 0;
  max-width: 560px;
}

.garantia__quote p {
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-garantia {
    padding: 3.5rem 0;
  }

  .garantia__banner {
    padding: 1.5rem 1.25rem;
  }

  .garantia__bonus {
    padding: 1.25rem;
  }
}

/* =====================================================
   SECCIÓN: PREGUNTAS FRECUENTES (LP 2)
===================================================== */
.section-faq {
  background-color: var(--gris-azulado);
  padding: 5rem 0;
}

.faq__title {
  margin-bottom: 3rem;
}

/* Reset del look default de Bootstrap → cards separadas */
.faq-accordion {
  --bs-accordion-border-width: 0;
  --bs-accordion-bg: transparent;
}

.faq-item {
  background-color: var(--blanco);
  border: 1px solid var(--borde-1);
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(13, 43, 95, 0.04);
}

.faq-item + .faq-item {
  margin-top: 1rem;
}

/* Botón de la pregunta */
.faq-item__btn {
  color: var(--azul-oscuro);
  background-color: var(--blanco);
  padding: 1.25rem 1.5rem;
  box-shadow: none;
  border-radius: 12px !important;
}

.faq-item__btn:focus {
  box-shadow: none;
}

.faq-item__btn:not(.collapsed) {
  color: var(--azul-oscuro);
  background-color: var(--blanco);
  box-shadow: none;
}

/* Icono: + que rota a × al abrir */
.faq-item__btn::after {
  content: "";
  background-image: none;
  width: 14px;
  height: 14px;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq-item__btn::before,
.faq-item__btn::after {
  /* se dibuja el + con dos barras dentro del ::after */
}

.faq-item__btn::after {
  background:
    linear-gradient(var(--azul-medio), var(--azul-medio)) center / 14px 2px
      no-repeat,
    linear-gradient(var(--azul-medio), var(--azul-medio)) center / 2px 14px
      no-repeat;
}

.faq-item__btn:not(.collapsed)::after {
  transform: rotate(45deg);
}

/* Cuerpo de la respuesta */
.faq-item__body {
  padding: 0 1.5rem 1.25rem;
  line-height: 1.75;
}

/* ---------- Responsive ---------- */
@media (max-width: 575.98px) {
  .section-faq {
    padding: 3.5rem 0;
  }

  .faq-item__btn {
    padding: 1.1rem 1.15rem;
  }
  .faq-item__body {
    padding: 0 1.15rem 1.1rem;
  }
}

/* =====================================================
   CTA FINAL + FOOTER (LP 2)
===================================================== */

/* Elementos nuevos del CTA final */
.cta-final__desc {
  color: var(--blanco-58);
  line-height: 1.8;
  margin: -1rem 0 2.25rem; /* compensa el margin-bottom grande del title */
}

.cta-final__badges {
  color: var(--blanco-58);
  margin: 1.5rem 0 1.25rem;
}

.cta-final__legal {
  color: var(--blanco-58);
  line-height: 1.8;
  max-width: 620px;
  margin: 0 auto;
}

.cta-final__link {
  color: var(--blanco-58);
  text-decoration: underline;
}

.cta-final__link:hover {
  color: var(--blanco);
}

/* Footer compacto y centrado (LP 2) */
.site-footer--compact {
  text-align: center;
  padding: 1rem 0;
}

.site-footer--compact .site-footer__brand {
  margin-bottom: 1rem;
}

.site-footer__links {
  margin: 0;
}

.site-footer__sep {
  color: var(--blanco-58);
  margin: 0 0.5rem;
}

/* =====================================================
   LP 3: VIDEO Y CALCULADORA
===================================================== */

/* Badge "ESTÁS AQUÍ" en el breadcrumb */
.checkout-step__here {
  background-color: var(--amarillo);
  color: var(--azul-oscuro);
  border-radius: 50rem;
  padding: 0.15rem 0.6rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ---------- Hero video ---------- */
.section-hero-video {
  padding-bottom: 4rem;
}

/* Video más grande que el de la LP 1 */
.hero__video--lg {
  max-width: 560px;
  aspect-ratio: 17.5 / 9.4;
}

/* Fila CTA + teléfono */
.hero-video__cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}

.hero-video__cta {
  border-radius: 12px;
  padding: 0.95rem 1.5rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(255, 195, 0, 0.35);
  margin-top: 0; /* anula el margin-top de .hero__cta si se hereda */
}

.hero-video__phone {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
}

/* ---------- Mini pasos ---------- */
.hero-video__ministeps {
  display: inline-flex;
  align-items: center;
  gap: 1.75rem;
  background-color: var(--blanco);
  border: 1px solid var(--borde-1);
  border-radius: 50rem;
  padding: 0.7rem 1.5rem;
  margin-top: 2rem;
}

.ministep {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}

.ministep__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--azul-claro-bg);
  color: var(--azul-intermedio);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 575.98px) {
  .checkout-step__here {
    display: none;
  } /* en móvil basta el círculo amarillo activo */

  .hero-video__cta-row {
    flex-direction: column;
    gap: 1rem;
  }

  .hero-video__cta {
    width: 100%;
  }

  .hero-video__phone {
    display: none;
  }

  .hero-video__ministeps {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 16px;
    width: 100%;
  }

  .ministep {
    white-space: normal;
  }
}

/* =====================================================
   SECCIÓN: CALCULADORA (LP 3)
===================================================== */
.section-calc {
  background-color: var(--azul-claro-bg);
  padding: 5rem 0;
}

.calc__title {
  margin-bottom: 2.5rem;
}

.calc-card {
  background-color: var(--blanco);
  border-radius: 24px;
  padding: 2.75rem 3rem;
  box-shadow: 0 25px 60px rgba(13, 43, 95, 0.1);
}

.calc-card__title {
  margin-bottom: 0.75rem;
}

.calc-card__subtitle {
  margin-bottom: 2rem;
}

/* Input con prefijo $ */
.calc-input {
  position: relative;
}


.calc-input::before {
    content: "$";
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #7A8499;
    font-weight: 600;
}

.calc-input__field {
  padding-left: 2.1rem;
}

/* Quitar flechas del input number */
.calc-input__field::-webkit-outer-spin-button,
.calc-input__field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calc-input__field {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Botón calcular (azul, no amarillo) */
.calc-card__btn {
  width: 100%;
  font-family: var(--font-family);
  font-weight: var(--fw-semibold);
  color: var(--blanco);
  background-color: var(--azul-medio);
  border: none;
  border-radius: 10px;
  padding: 0.95rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.calc-card__btn:hover {
  background-color: var(--azul-intermedio);
}

/* ---------- Resultados ---------- */
.calc-results {
  margin-top: 2.5rem;
}

.calc-results__title {
  margin-bottom: 1.5rem;
}

/* Banner de flujo recuperado */
.calc-banner {
  background: linear-gradient(
    135deg,
    var(--azul-intermedio) 0%,
    var(--azul-medio) 45%,
    var(--azul-oscuro) 100%
  );
  border-radius: 16px;
  padding: 2.25rem 2rem;
  text-align: center;
  margin-bottom: 2.25rem;
}

.calc-banner__label {
  color: var(--blanco-58);
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
}

.calc-banner__amount {
  font-size: var(--fs-50);
  font-weight: var(--fw-extrabold);
  color: var(--amarillo-claro);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.calc-banner__sub {
  margin-bottom: 1rem;
}

.calc-banner__note {
  color: var(--blanco-58);
  margin: 0;
}

/* Filas de comparación */
.calc-row + .calc-row {
  margin-top: 1.75rem;
}

.calc-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}

.calc-row__values {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.calc-row__badge {
  background-color: var(--azul-claro-bg);
  color: var(--azul-intermedio);
  border-radius: 50rem;
  padding: 0.3rem 0.9rem;
  white-space: nowrap;
}

/* Barras */
.calc-bar {
  height: 16px;
  border-radius: 50rem;
  background-color: var(--gris-azulado);
  overflow: hidden;
}

.calc-bar__fill {
  display: block;
  height: 100%;
  border-radius: 50rem;
  background-color: var(--azul-intermedio);
  transition: width 0.8s ease;
}

.calc-bar__fill--gris {
  background-color: #9aa3b5;
}

/* Cierre */
.calc-results__closer {
  margin: 2.5rem 0 1.75rem;
  line-height: 1.65;
}

.calc-results__closer strong {
  font-weight: var(--fw-bold);
}

.calc-results__cta {
  width: 100%;
  border-radius: 14px;
  padding: 1.1rem 1.5rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(255, 195, 0, 0.35);
}

.calc-results__disclaimer {
  margin: 1.25rem 0 0;
  line-height: 1.7;
}

/* ---------- Responsive ---------- */
@media (max-width: 575.98px) {
  .section-calc {
    padding: 3rem 0;
  }

  .calc-card {
    border-radius: 16px;
    padding: 1.75rem 1.25rem;
  }

  .calc-banner__amount {
    font-size: var(--fs-38);
  }
}

/* =====================================================
   SECCIÓN: ALIANZAS / MARQUEE DE LOGOS (LP 3)
===================================================== */
.section-alianzas {
  background-color: var(--blanco);
  padding: 3rem 0 2.5rem;
  overflow: hidden;
}

.alianzas__title {
  margin-bottom: 1.75rem;
}

/* Marquee con desvanecido en los bordes */
.logos-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 12%,
    black 88%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    black 12%,
    black 88%,
    transparent
  );
}

.logos-marquee__track {
  display: flex;
  align-items: center;
  gap: 5rem;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}

/* Pausa al pasar el mouse */
.logos-marquee:hover .logos-marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  } /* la mitad = un grupo completo */
}

/* Logos placeholder en texto */
.logo-item {
  font-size: var(--fs-21);
  font-weight: var(--fw-bold);
  color: var(--gris-oscuro);
  opacity: 0.45;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Cuando sean <img>: */
.logo-item img,
img.logo-item {
  height: 30px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .logos-marquee__track {
    animation: none;
  }
}

/* =====================================================
   SECCIÓN: TESTIMONIOS (LP 3)
===================================================== */
.section-testimonios {
  background-color: var(--blanco);
  padding: 3rem 0 5rem;
}

.testimonios__title {
  margin-bottom: 3rem;
}

.testi-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--blanco);
  border: 1px solid var(--borde-1);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(13, 43, 95, 0.06);
}

.testi-card__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.testi-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem 1.5rem 1.75rem;
}

.testi-card__name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.testi-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--azul-claro-bg);
  color: var(--azul-intermedio);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.testi-card__tagline {
  margin-bottom: 1.25rem;
}

/* Comparativa antes/después */
.testi-card__compare {
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--borde-2);
}

.testi-card__compare-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.testi-card__compare-row + .testi-card__compare-row {
  margin-top: 0.6rem;
}

.testi-card__compare-row dt {
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.testi-card__compare-row dd {
  margin: 0;
  text-align: right;
}

/* Resultado */
.testi-card__result {
  margin-bottom: 1.25rem;
}

.testi-card__result-label {
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}

.testi-card__result-amount {
  margin-bottom: 0.6rem;
}

.testi-card__result-badge {
  display: inline-block;
  background-color: var(--azul-claro-bg);
  color: var(--azul-intermedio);
  border-radius: 50rem;
  padding: 0.35rem 0.9rem;
}

.testi-card__quote {
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

/* Link al fondo para alinear las 3 cards */
.testi-card__link {
  margin-top: auto;
  color: var(--azul-intermedio);
  letter-spacing: 0.03em;
}

.testi-card__link:hover {
  color: var(--azul-medio);
  text-decoration: underline;
}

.testimonios__cta-wrap {
  margin-top: 3rem;
}

.testimonios__cta {
  border-radius: 12px;
  padding: 0.95rem 2.5rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(255, 195, 0, 0.35);
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-testimonios {
    padding: 2.5rem 0 3.5rem;
  }

  .logos-marquee__track {
    gap: 3rem;
  }

  .testimonios__cta {
    width: 100%;
  }
}

/* =====================================================
   SECCIÓN: EL MÉTODO (LP 3)
===================================================== */
.section-metodo {
  background-color: var(--azul-oscuro);
  padding: 5rem 0;
}

.metodo__title {
  margin-bottom: 1.5rem;
}

.metodo__subtitle {
  color: var(--blanco-58);
  line-height: 1.8;
  margin-bottom: 3rem;
}

/* ---------- Cards NO soy / SÍ soy ---------- */
.metodo-card {
  height: 100%;
  background-color: var(--blanco-5);
  border: 1px solid var(--blanco-10);
  border-radius: 14px;
  padding: 1.75rem;
}

.metodo-card__head {
  margin-bottom: 1.5rem;
}

.metodo-card__list {
  margin: 0;
  padding: 0;
}

.metodo-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--blanco-58);
  line-height: 1.6;
}

.metodo-card__list li + li {
  margin-top: 1.1rem;
}

/* Iconos circulares sobre fondo oscuro */
.metodo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  margin-top: 1px;
}

.metodo-icon--x {
  background-color: var(--rojo-30);
  color: #f08ca4;
}

.metodo-icon--check {
  background-color: rgba(255, 197, 61, 0.15);
  color: var(--amarillo-claro);
}

/* ---------- CTA ---------- */
.metodo__cta-wrap {
  margin-top: 3rem;
}

.metodo__cta {
  border-radius: 12px;
  padding: 0.95rem 2.25rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(255, 195, 0, 0.25);
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-metodo {
    padding: 3.5rem 0;
  }

  .metodo__cta {
    width: 100%;
  }
}

/* =====================================================
   SECCIÓN: CAMINO PASO A PASO (LP 3)
===================================================== */
.section-camino {
  background-color: var(--gris-azulado);
  padding: 5rem 0;
}

.camino__title {
  margin-bottom: 3rem;
}

/* ---------- Cards de pasos ---------- */
.camino-card {
  position: relative;
  height: 100%;
  background-color: var(--blanco);
  border: 1px solid var(--borde-1);
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 6px 22px rgba(13, 43, 95, 0.05);
}

/* Paso 1 destacado con borde amarillo */
.camino-card--activo {
  border: 2px solid var(--amarillo);
}

/* Flag "EMPIEZA AQUÍ" montado en el borde superior */
.camino-card__flag {
  position: absolute;
  top: -12px;
  left: 1.25rem;
  background-color: var(--amarillo);
  color: var(--azul-oscuro);
  border-radius: 50rem;
  padding: 0.2rem 0.8rem;
  letter-spacing: 0.05em;
}

.camino-card__step {
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.camino-card__name {
  margin-bottom: 0.9rem;
}

/* Badges */
.camino-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 50rem;
  padding: 0.35rem 0.9rem;
  margin: 0 0.4rem 0.6rem 0;
}

.camino-badge--amarillo {
  background-color: rgba(255, 197, 61, 0.25);
  color: #8a6400;
}

.camino-badge--azul {
  background-color: var(--azul-claro-bg);
  color: var(--azul-intermedio);
}

.camino-badge--garantia {
  background-color: var(--blanco);
  border: 1px solid var(--azul-intermedio);
  color: var(--azul-intermedio);
}

/* Mini sello del badge de garantía */
.camino-badge__seal {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--rojo);
  box-shadow:
    inset 0 0 0 1.5px var(--blanco),
    inset 0 0 0 2.5px var(--azul-medio);
  flex-shrink: 0;
}

/* Bloques QUÉ ES / POR QUÉ ES CLAVE */
.camino-card__label {
  color: var(--azul-oscuro);
  letter-spacing: 0.08em;
  margin: 1.1rem 0 0.4rem;
}

.camino-card__text {
  line-height: 1.65;
  margin: 0;
}

.camino-card__footnote {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--borde-2);
  line-height: 1.6;
}

/* ---------- CTA ---------- */
.camino__cta-wrap {
  margin-top: 3rem;
}

.camino__cta {
  border-radius: 12px;
  padding: 0.95rem 2.25rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(255, 195, 0, 0.35);
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-camino {
    padding: 3.5rem 0;
  }

  .camino__cta {
    width: 100%;
  }
}

/* =====================================================
   SECCIÓN: GARANTÍA (LP 3)
===================================================== */
.section-garantia-video {
  background-color: var(--blanco);
  padding: 5rem 0;
}

.garantia-video__title {
  margin-bottom: 1.25rem;
}

.garantia-video__subtitle {
  line-height: 1.8;
  margin-bottom: 2.75rem;
}

/* Quote centrada y más compacta que la de la LP 2 */
.garantia-video__quote {
  margin: 2.75rem auto 0;
  max-width: 480px;
}

.garantia-video__cta-wrap {
  margin-top: 2.75rem;
}

.garantia-video__cta {
  border-radius: 12px;
  padding: 0.95rem 2.25rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(255, 195, 0, 0.35);
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-garantia-video {
    padding: 3.5rem 0;
  }

  .garantia-video__cta {
    width: 100%;
  }
}

/* =====================================================
   SECCIÓN: PERFIL IDEAL (LP 3)
===================================================== */
.section-perfil {
  background-color: var(--gris-azulado);
  padding: 5rem 0;
}

.perfil__title {
  margin-bottom: 3rem;
}

.perfil__cta-wrap {
  margin-top: 3rem;
}

.perfil__cta {
  border-radius: 12px;
  padding: 0.95rem 2.5rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(255, 195, 0, 0.35);
}

@media (max-width: 767.98px) {
  .section-perfil {
    padding: 3.5rem 0;
  }

  .perfil__cta {
    width: 100%;
  }
}

/* =====================================================
   SECCIÓN: EXPERIENCIA DE CLIENTES (LP 3)
===================================================== */
.section-experiencia {
  background-color: var(--blanco);
  padding: 5rem 0 4rem;
}

.experiencia__title {
  margin-bottom: 3rem;
}

.quote-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--blanco);
  border: 1px solid var(--borde-1);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 6px 22px rgba(13, 43, 95, 0.06);
}

.quote-card__foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
}

.quote-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem 0.5rem 0.75rem;
}

/* Comillas decorativas */
.quote-card__mark {
  font-size: var(--fs-32);
  font-weight: var(--fw-extrabold);
  color: var(--borde-1);
  line-height: 0.5;
  margin-bottom: 0.75rem;
}

.quote-card__text {
  line-height: 1.7;
  margin-bottom: 1rem;
}

.quote-card__author {
  margin-bottom: 1.5rem;
}

/* =====================================================
   SECCIÓN: MINI BIO FUNDADORA (LP 3)
===================================================== */
.section-fundadora {
  background-color: var(--blanco);
  padding: 3rem 0 5rem;
}

.fundadora__bio {
  line-height: 1.8;
  margin-bottom: 1rem;
}

.fundadora__bio strong {
  color: var(--azul-oscuro);
  font-weight: var(--fw-bold);
}

.fundadora__meta {
  margin-bottom: 2rem;
}

.fundadora__cta {
  border-radius: 12px;
  padding: 0.95rem 2rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(255, 195, 0, 0.35);
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-experiencia {
    padding: 3.5rem 0 2.5rem;
  }
  .section-fundadora {
    padding: 2rem 0 3.5rem;
  }

  .fundadora__cta {
    width: 100%;
  }
}

/* =====================================================
   CTA FINAL (LP 3): pills y horario
===================================================== */
.cta-final__pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 2.25rem;
  padding: 0;
}

.cta-pill {
  background-color: var(--blanco-10);
  border: 1px solid var(--blanco-25);
  border-radius: 50rem;
  padding: 0.5rem 1.25rem;
  color: var(--blanco);
  white-space: nowrap;
}

.cta-final__schedule {
  color: var(--blanco-58);
  line-height: 1.7;
  margin: 1.25rem 0 0;
}

@media (max-width: 575.98px) {
  .cta-final__pills {
    gap: 0.5rem;
  }
}

/* =====================================================
   LP 4: PREPARA TU DIAGNÓSTICO
===================================================== */

/* ---------- Hero / Confirmación ---------- */
.section-confirmacion {
  background-color: var(--blanco);
  padding: 4rem 0 3.5rem;
}

.confirm-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--azul-claro-bg);
  margin-bottom: 1.5rem;
}

.confirm__title {
  margin-bottom: 1.5rem;
}

.confirm__subtitle {
  line-height: 1.8;
  margin-bottom: 2rem;
}

.deadline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px auto 0;
  max-width: 560px;
  background: var(--azul-claro-bg);
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
}

/* Pill de tarea */
.confirm-task {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--blanco);
  border: 1.5px solid var(--amarillo);
  border-radius: 50rem;
  padding: 0.6rem 1.5rem 0.6rem 0.6rem;
}

.confirm-task__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--amarillo);
  color: var(--azul-oscuro);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.confirm-task__text {
  margin: 0;
  text-align: left;
}

/* ---------- Card de importancia ---------- */
.section-importancia {
  background-color: var(--blanco);
  padding: 2.5rem 0 5rem;
}

.guarantee {
  background: #fff8e8;
  border: 1.5px solid #ffc53d;
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 15px;
  color: var(--navy);
  font-weight: 500;
  margin-bottom: 12px;
}

.importancia-card {
  background-color: var(--blanco);
  border: 1px solid var(--borde-1);
  border-top: 4px solid var(--azul-medio);
  border-radius: 14px;
  padding: 2rem 2.25rem;
  box-shadow: 0 15px 40px rgba(13, 43, 95, 0.06);
}

.importancia-card__title {
  margin-bottom: 1.25rem;
}

.importancia-card__text {
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

.importancia-card__text:last-of-type {
  margin-bottom: 1.5rem;
}

/* Tip con estrella */
.importancia-card__tip {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background-color: var(--azul-claro-bg);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
}

.importancia-card__tip-icon {
  color: var(--azul-intermedio);
  font-size: var(--fs-13);
  flex-shrink: 0;
  margin-top: 2px;
}

.importancia-card__tip p {
  margin: 0;
  line-height: 1.6;
}

.importancia-card__tip strong {
  font-weight: var(--fw-bold);
}

.send-section {
  background: linear-gradient(180deg, #ffffff 0%, #eff3fb 100%);
}

.send-card {
  background: var(--blanco);
  border: 2px solid var(--amarillo);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(22, 41, 92, .08);
  padding: 34px 30px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-confirmacion {
    padding: 3rem 0 2.5rem;
  }
  .section-importancia {
    padding: 2rem 0 3.5rem;
  }

  .importancia-card {
    padding: 1.5rem 1.25rem;
  }

  .confirm-task {
    border-radius: 16px;
    padding: 0.75rem 1.25rem;
  }
}

/* =====================================================
   SECCIÓN: TUTORIAL EN VIDEO (LP 4)
===================================================== */
.section-tutorial {
  background-color: var(--gris-azulado);
  padding: 3.5rem 0 5rem;
}

.tutorial__title {
  margin-bottom: 1.25rem;
}

.tutorial__subtitle {
  margin-bottom: 2.5rem;
}

/* Caption inferior dentro del video */
.tutorial__video-caption {
  position: absolute;
  bottom: 16px;
  left: 20px;
  right: 20px;
  color: var(--blanco-58);
  letter-spacing: 0.03em;
  margin: 0;
  text-align: left;
}

@media (max-width: 575.98px) {
  .section-tutorial {
    padding: 2.5rem 0 3.5rem;
  }
}

/* =====================================================
   SECCIÓN: ANTES DE INICIAR / CHECKLIST (LP 4)
===================================================== */
.section-checklist {
  background-color: var(--blanco);
  padding: 4rem 0 3rem;
}

.checklist__title {
  margin-bottom: 2rem;
}

.checklist-box {
  background-color: var(--gris-azulado);
  border-radius: 14px;
  padding: 2rem 2.25rem;
}

.checklist-list {
  margin: 0;
  padding: 0;
}

.checklist-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  line-height: 1.6;
}

.checklist-list li + li {
  margin-top: 1.1rem;
}

/* Checkbox con palomita (estado "marcado") */
.checklist-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--azul-intermedio);
  border-radius: 5px;
  background-color: var(--blanco);
  flex-shrink: 0;
  margin-top: 2px;
}

.checklist-check--sm {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  margin-top: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 575.98px) {
  .section-checklist {
    padding: 3rem 0 2rem;
  }
  .checklist-box {
    padding: 1.5rem 1.25rem;
  }
}

/* =====================================================
   SECCIÓN: PASOS PARA OBTENER TU REPORTE (LP 4)
===================================================== */
.section-pasos-reporte {
  background-color: var(--blanco);
  padding: 3rem 0 5rem;
}

.pasos-reporte__title {
  margin-bottom: 1rem;
}

.pasos-reporte__subtitle {
  margin-bottom: 3rem;
}

.pasos-reporte__list {
  margin-bottom: 3rem;
}

.pasos-reporte__link {
  color: var(--azul-intermedio);
  text-decoration: underline;
}

.pasos-reporte__link:hover {
  color: var(--azul-medio);
}

/* Chip tipo "botón de referencia" (ej. "Continuar") */
.pasos-reporte__chip {
  display: inline-block;
  background-color: var(--azul-claro-bg);
  color: var(--azul-intermedio);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  margin-top: 0.75rem;
}

/* Chips tipo checkbox (paso 3) */
.pasos-reporte__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.pasos-reporte__chip--check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--azul-oscuro);
  color: var(--blanco);
}

.pasos-reporte__chip--check .checklist-check {
  border-color: var(--blanco);
  background-color: var(--blanco);
}

.pasos-reporte__note {
  margin: 0.75rem 0 0;
}

/* Box gris con bullets (paso 5) */
.pasos-reporte__box {
  background-color: var(--gris-azulado);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-top: 0.75rem;
}

.pasos-reporte__bullets {
  margin: 0;
  padding-left: 1.1rem;
  list-style-type: disc;
}

.pasos-reporte__bullets li {
  line-height: 1.6;
}

.pasos-reporte__bullets li + li {
  margin-top: 0.5rem;
}

/* Bullets planos (paso 6, sin box) */
.pasos-reporte__bullets--plain {
  margin-top: 0.5rem;
}

/* ---------- CTA ---------- */
.pasos-reporte__cta {
  border-radius: 12px;
  padding: 0.95rem 2.5rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(255, 195, 0, 0.35);
}

.pasos-reporte__cta-note {
  margin: 1rem 0 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-pasos-reporte {
    padding: 2.5rem 0 3.5rem;
  }

  .pasos-reporte__cta {
    width: 100%;
  }
}

/* =====================================================
   SECCIÓN: SOPORTE (LP 4)
===================================================== */
.section-soporte {
  background-color: var(--gris-azulado);
  padding: 4rem 0;
}

.soporte__title {
  margin-bottom: 0.75rem;
}

.soporte__subtitle {
  margin-bottom: 2.5rem;
}

.soporte-card {
  height: 100%;
  background-color: var(--blanco);
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 6px 20px rgba(13, 43, 95, 0.05);
}

.soporte-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background-color: var(--azul-claro-bg);
  margin-bottom: 1rem;
}

.soporte-card__title {
  margin-bottom: 1rem;
}

.soporte-card__text {
  line-height: 1.6;
  margin-bottom: 0.6rem;
}

.soporte-card__text:last-child {
  margin-bottom: 0;
}

.soporte-card__bullets {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
}

.soporte-card__bullets li {
  line-height: 1.6;
}

.soporte-card__bullets li + li {
  margin-top: 0.4rem;
}

/* =====================================================
   SECCIÓN: RESPETO Y COMPROMISO (LP 4)
===================================================== */
.section-compromiso {
  background-color: var(--blanco);
  padding: 4rem 0;
}

.compromiso__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background-color: var(--gris-azulado);
  border: 1px solid var(--borde-2);
  border-radius: 50rem;
  padding: 0.6rem 1.1rem;
  color: var(--azul-oscuro);
}

.contact-chip:hover {
  background-color: var(--azul-claro-bg);
  border-color: var(--azul-intermedio);
}

/* =====================================================
   SECCIÓN: MENSAJE DE CIERRE (LP 4)
===================================================== */
.section-cierre-diagnostico {
  background-color: var(--azul-oscuro);
  padding: 4rem 0;
}

.cierre__title {
  line-height: 1.4;
  margin-bottom: 1.25rem;
}

.cierre__subtitle {
  color: var(--blanco-58);
  line-height: 1.8;
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-soporte {
    padding: 3rem 0;
  }
  .section-compromiso {
    padding: 3rem 0;
  }
  .section-cierre-diagnostico {
    padding: 3rem 0;
  }

  .soporte-card {
    padding: 1.5rem 1.25rem;
  }
}

/* =====================================================
   LP 5: NO CALIFICAS / EXPLICACIÓN
===================================================== */

/* ---------- Mensaje + video ---------- */
.section-no-calificas {
  background-color: var(--azul-claro-bg);
  padding: 1.5rem 0 5rem;
}

.no-calificas__title {
  line-height: 1.35;
  margin-bottom: 1rem;
}

.no-calificas__subtitle {
  margin-bottom: 1.5rem;
}

.no-calificas__video {
  max-width: 640px;
}

.no-calificas__video-caption {
  position: absolute;
  bottom: 16px;
  left: 20px;
  right: 20px;
  color: var(--blanco-58);
  letter-spacing: 0.03em;
  margin: 0;
}

/* ---------- Por qué llegaste ---------- */
.section-por-que {
  background-color: var(--blanco);
  padding: 4rem 0;
}

.por-que__title {
  margin-bottom: 1rem;
}

.por-que__subtitle {
  margin-bottom: 3rem;
}

.razon-card {
  height: 100%;
  background-color: var(--blanco);
  border: 1px solid var(--borde-1);
  border-top: 3px solid var(--azul-medio);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: 0 6px 20px rgba(13, 43, 95, 0.05);
}

.razon-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background-color: var(--azul-claro-bg);
  margin-bottom: 1.1rem;
}

.razon-card__title {
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

.razon-card__text {
  line-height: 1.65;
  margin: 0;
}

/* ---------- Link de regreso ---------- */
.por-que__back {
  margin-top: 2.5rem;
  line-height: 1.7;
}

.por-que__back-link {
  color: var(--azul-intermedio);
  white-space: nowrap;
}

.por-que__back-link:hover {
  color: var(--azul-medio);
  text-decoration: underline;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-no-calificas {
    padding: 3rem 0 3.5rem;
  }
  .section-por-que {
    padding: 3rem 0;
  }
}

/* =====================================================
   SECCIÓN: QUOTE DE VALIDACIÓN (LP 5)
===================================================== */
.section-validacion {
  background-color: var(--blanco);
  padding: 4rem 0 3.5rem;
}

.validacion__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--azul-claro-bg);
  color: var(--azul-intermedio);
  font-size: var(--fs-21);
  font-weight: var(--fw-extrabold);
  margin-bottom: 1.5rem;
}

.validacion__text {
  line-height: 1.55;
  margin: 0;
}

/* =====================================================
   SECCIÓN: MIS REQUISITOS (LP 5)
===================================================== */
.section-requisitos {
  background-color: var(--azul-claro-bg);
  padding: 4rem 0;
}

.requisitos__title {
  margin-bottom: 1.25rem;
}

.requisitos__text {
  line-height: 1.8;
  margin: 0;
}

/* =====================================================
   SECCIÓN: LAS TRES LLAVES (LP 5)
===================================================== */
.section-llaves {
  background-color: var(--blanco);
  padding: 4rem 0 5rem;
}

.llaves__title {
  margin-bottom: 2.5rem;
}

.llave-card {
  height: 100%;
  background-color: var(--blanco);
  border: 1px solid var(--borde-1);
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 6px 20px rgba(13, 43, 95, 0.05);
  text-align: left;
}

.llave-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background-color: var(--azul-claro-bg);
  margin-bottom: 1rem;
}

.llave-card__tag {
  display: block;
  background-color: var(--azul-claro-bg);
  color: var(--azul-intermedio);
  border-radius: 50rem;
  padding: 0.25rem 0.75rem;
  width: fit-content;
  letter-spacing: 0.05em;
  margin-bottom: 0.85rem;
}

.llave-card__title {
  margin-bottom: 0.6rem;
}

.llave-card__text {
  line-height: 1.6;
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-validacion {
    padding: 3rem 0 2.5rem;
  }
  .section-requisitos {
    padding: 3rem 0;
  }
  .section-llaves {
    padding: 3rem 0 3.5rem;
  }
}

/* =====================================================
   SECCIÓN: PLAN DE ACCIÓN (LP 5)
===================================================== */
.section-plan-accion {
  background-color: var(--gris-azulado);
  padding: 4rem 0 5rem;
}

.plan-accion__title {
  margin-bottom: 0.75rem;
}

.plan-accion__subtitle {
  margin-bottom: 2.5rem;
}

.plan-accion__list {
  margin-bottom: 3rem;
}

/* Card de reporte gratuito */
.plan-accion__card {
  background-color: var(--blanco);
  border-radius: 16px;
  padding: 2.25rem 2rem;
  box-shadow: 0 15px 40px rgba(13, 43, 95, 0.06);
}

.plan-accion__card h3 {
  margin-bottom: 0.75rem;
}

.plan-accion__card p {
  line-height: 1.65;
}

.plan-accion__cta {
  border-radius: 12px;
  padding: 0.95rem 2rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(255, 195, 0, 0.35);
  margin: 1.5rem 0;
}

.plan-accion__card-note {
  margin: 0;
}

/* =====================================================
   SECCIÓN: DESPEDIDA (LP 5)
===================================================== */
.section-despedida {
  background-color: var(--blanco);
  padding: 4rem 0 3rem;
}

.despedida__quote {
  border-left: 4px solid var(--rojo);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 0 0 1.25rem;
}

.despedida__quote p {
  line-height: 1.55;
  margin: 0;
}

.despedida__author {
  margin-bottom: 1.5rem;
}

/* Botón outline (distinto al CTA amarillo: aquí es una acción secundaria) */
.despedida__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--blanco);
  border: 1.5px solid var(--azul-intermedio);
  color: var(--azul-intermedio);
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  transition: background-color 0.2s ease;
}

.despedida__btn:hover {
  background-color: var(--azul-claro-bg);
}

.despedida__note {
  margin: 0.75rem 0 0;
}

.despedida__reminder {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px dashed var(--borde-2);
  line-height: 1.7;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
  .section-plan-accion {
    padding: 3rem 0 3.5rem;
  }
  .section-despedida {
    padding: 3rem 0 2rem;
  }

  .plan-accion__card {
    padding: 1.75rem 1.25rem;
  }
  .plan-accion__cta {
    width: 100%;
  }
  .despedida__btn {
    width: 100%;
    justify-content: center;
  }
}