/* ==========================================================================
   HOME — reconstruido contra Figma (fileKey zSxoWEYEI7GMSDFkbf3gGv, node 50:13)

   Referencia de retícula (frame "Layout" 3206:2156): 12 columnas, margen 72px,
   gutter 20px sobre 1440px. De ahí salen los anchos "mágicos" del diseño:
     1 col = 89.67 | 4 cols = 419 | 5 cols = 528 | 6 cols = 638 | 12 cols = 1296
     x de la col 2 = 182 | x de la col 8 = 840
   ========================================================================== */

/* ============================ HERO (50:39 + 3023:7210) ====================
   El hero mide 940px en Figma y el header (160px) va superpuesto, por eso el
   contenido arranca en 200px. El corazón sobresale 58px por abajo, así que la
   composición completa ocupa 998px.

   Para que en pantallas más bajas se vean a la vez el menú Y la punta del
   corazón, todo se expresa como `min(valorDeFigma, fracción de 998 en svh)`:
   en pantallas de 1060px o más se usan los valores exactos del diseño y por
   debajo el conjunto encoge en bloque, sin romper proporciones.              */
.hero {
  position: relative;
  width: 100%;
  height: min(940px, 94.19svh);
  min-height: 560px;
  padding-top: min(200px, 20.04svh);
  background-image: url('../images/desktop/home/hero/hero-bg.webp');
  background-size: cover;
  background-position: center;
}

.hero > .container {
  display: block;
  position: relative;
  height: 100%;
}

/* Bloque de texto: 528px (cols 8-12), alineado a la derecha */
.hero__content {
  width: var(--w-5col);
  max-width: 100%;
  margin-left: auto;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: min(var(--fs-h1), 4.41svh);
  color: var(--color-primario);
  line-height: var(--lh-base);
}
/* "impulsa tu negocio" va en Light y en su propia línea, como en Figma */
.hero__title em {
  font-style: normal;
  font-weight: 300;
  display: block;
}

.hero__subtitle {
  font-family: var(--font-heading);
  font-size: min(var(--fs-body-lg), 2.1svh);
  color: var(--color-secundario);
  width: 418px;
  max-width: 100%;
}

/* --------------------------- Calculadora corazón -------------------------
   En Figma es un cuadrado de 527x528 en las cols 8-12 cuyo fondo es un
   corazón. La forma es geométrica exacta: un cuadrado de 2/3 del lado abajo a
   la izquierda + dos círculos del mismo tamaño (arriba y a la derecha). Se
   construye en CSS en vez de con un PNG para que quede nítida a cualquier
   escala y tome el color del token.                                        */
.calculadora {
  /* Lado del cuadrado que contiene el corazón. Todo lo de dentro se expresa
     como fracción de este lado, así el corazón es siempre igual a sí mismo
     aunque la pantalla sea más baja. 528/998 = 52.91%. */
  --lado: min(528px, 52.91svh);

  position: absolute;
  top: min(270px, 27.05svh);  /* y=470 en Figma - los 200px de padding del hero */
  /* El bloque contenedor de un absolute es la CAJA DE RELLENO del ancestro
     posicionado, así que `right: 0` lo pegaría al borde exterior del
     .container y no al inicio de su contenido: hay que descontar el margen. */
  right: var(--grid-margin);
  width: var(--lado);
  height: var(--lado);
  /* 72 / 80 / 40 / 40 sobre 528 */
  padding: calc(var(--lado) * 0.1364) calc(var(--lado) * 0.1515)
           calc(var(--lado) * 0.0758) calc(var(--lado) * 0.0758);
  color: var(--color-blanco);
}

.calculadora__heart {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 33.3333%;
  width: 66.6667%;
  height: 66.6667%;
  background: var(--color-primario);
  border-bottom-left-radius: calc(var(--lado) * 0.0758);
}
.calculadora__heart::before,
.calculadora__heart::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--color-primario);
  border-radius: 50%;
}
.calculadora__heart::before { left: 0;   top: -50%; } /* lóbulo superior */
.calculadora__heart::after  { left: 50%; top: 0; }    /* lóbulo derecho  */

.calculadora__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--lado) * 0.036);   /* 19 / 528 */
  width: 100%;
}

.calculadora__titulo {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: calc(var(--lado) * 0.0758);   /* 40 / 528 */
  color: var(--color-blanco);
}

.calculadora__cifra {
  display: flex;
  align-items: center;
  gap: calc(var(--lado) * 0.0455);   /* 24 / 528 */
  width: 100%;
}
.calculadora__cifra button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(var(--lado) * 0.0303);   /* 16 / 528 */
  padding: 0;
}
.calculadora__cifra button img { display: block; width: 100%; height: auto; }

.calculadora__monto {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: calc(var(--lado) * 0.0758);
  color: var(--color-blanco);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Slider real: <input type="range"> invisible encima de la pista dibujada,
   para que sea arrastrable con ratón y teclado (accesible). */
.calculadora__slider {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(var(--lado) * 0.0606);   /* 32 / 528 */
  width: 100%;
}
.calculadora__slider-track {
  position: relative;
  width: 100%;
  height: calc(var(--lado) * 0.0152);   /* 8 / 528 */
  background: var(--color-blanco);
}
.calculadora__slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: calc(var(--lado) * 0.0152);
  width: 20%;
  background: var(--color-secundario);
}
.calculadora__slider-thumb {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
  width: calc(var(--lado) * 0.0606);
  height: auto;
  pointer-events: none;
}
.calculadora__slider input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.calculadora__pago {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--lado) * 0.0758);
  width: 100%;
  padding: calc(var(--lado) * 0.0152) 0;
  border-radius: calc(var(--lado) * 0.0758);
  background: var(--color-blanco);
}
.calculadora__pago p:first-child {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: calc(var(--lado) * 0.0303);   /* 16 / 528 */
  color: var(--color-primario);
}
.calculadora__pago p:last-child {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: calc(var(--lado) * 0.0758);
  color: var(--color-secundario);
  text-transform: uppercase;
  white-space: nowrap;
}

/* El CTA dentro del corazón escala con él para no desbordarlo */
.calculadora .cta {
  padding: calc(var(--lado) * 0.0303) calc(var(--lado) * 0.1212);
  font-size: calc(var(--lado) * 0.0379);
  border-radius: calc(var(--lado) * 0.0455);
}

.calculadora__nota {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: max(9px, calc(var(--lado) * 0.0189));   /* 10 / 528 */
  color: var(--color-blanco);
  width: calc(var(--lado) * 0.5095);   /* 269 / 528 */
  max-width: 100%;
}

/* ================= ¿POR QUÉ ELEGIR EXITUS CONTIGO? (804:1918) ============ */
.porque-elegir {
  width: 100%;
  padding: 160px 0;
  background: var(--color-blanco);
}
.porque-elegir > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.porque-elegir__titulo {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--color-primario);
  /* text-transform: uppercase; */
  text-align: center;
}

/* Panel rosa: 12 columnas completas, radio 80px, pt-80 pb-40 */
.porque-elegir__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 80px 0 40px;
  border-radius: 80px;
  background: var(--color-secundario);
}

.porque-elegir__row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

/* Cada item = 6 columnas (638px): icono 199px + gutter 20px + texto 419px */
.porque-elegir__item {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1 1 0;
  min-width: 0;
}
.porque-elegir__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 199px;
}
.porque-elegir__item-icon img { width: 125px; height: auto; }

.porque-elegir__item-txt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: var(--w-4col);
  max-width: 100%;
  min-width: 0;
}
.porque-elegir__item-txt h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-h4);
  color: var(--color-primario);
  text-transform: uppercase;
}
.porque-elegir__item-txt ul {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  color: var(--color-blanco);
  list-style: disc;
  padding-left: 24px;
}

.porque-elegir__quote {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-lg);
  color: var(--color-blanco);
  text-align: center;
  width: 100%;
}

/* =================== ¿CÓMO FUNCIONA EL CRÉDITO GRUPAL? (3116:1693) =======
   Título en cols 2-11; los pasos en cols 2-5 y 8-11 (los 240px de separación
   del Figma son exactamente las columnas 6-7 con sus gutters).             */
.como-funciona {
  width: 100%;
  padding: 160px 0;
  background: var(--color-bg);
}
.como-funciona > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.como-funciona__titulo {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--color-primario);
  text-transform: uppercase;
  text-align: center;
  grid-column: 2 / span 10;
}

.como-funciona__lista {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: 40px;
  width: 100%;
}
.como-funciona__item {
  display: flex;
  align-items: center;
  gap: 20px;
}
.como-funciona__item:nth-child(odd)  { grid-column: 2 / span 4; }
.como-funciona__item:nth-child(even) { grid-column: 8 / span 4; }

.como-funciona__item-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 89px;
}
.como-funciona__item-num img { width: 100%; height: auto; }

.como-funciona__item p {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  color: var(--color-primario);
}

/* ============ EN UN CRÉDITO GRUPAL, EL RESPALDO ES TU GRUPO (3115:1589) ===
   La onda rosa del pie es un SVG de 1440x64 que va PEGADO al borde inferior:
   funciona porque la sección siguiente es rosa y ambas se funden. Antes tenía
   margin-top + padding-bottom y por eso se veía como una "media luna" suelta
   sobre un rectángulo.                                                      */
.credito-grupal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background-image: url('../images/desktop/home/credito-grupal/bg.webp');
  background-size: cover;
  background-position: center;
}

.credito-grupal__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  padding: 240px 182px;
}

.credito-grupal__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  color: var(--color-primario);
  width: var(--w-5col);
  max-width: 100%;
  line-height: var(--lh-base);
}
.credito-grupal__title em {
  font-style: normal;
  font-weight: 300;
  color: var(--color-secundario);
}

.credito-grupal__wave {
  display: block;
  width: 100%;
  height: 64px;
  /* -1px evita la línea de subpíxel entre la onda y la sección rosa siguiente */
  margin: 0 0 -1px;
}

/* ================= TU MEJOR OPCIÓN EN CRÉDITOS GRUPALES (3036:2768) ======= */
.mejor-opcion-1 {
  width: 100%;
  min-height: 100vh;
  padding: 60px 0;
  background: var(--color-secundario);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mejor-opcion-1 > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.mejor-opcion-1__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 2.5vw, 36px);
  color: var(--color-blanco);
  text-align: center;
  width: 100%;
}
.mejor-opcion-1__titulo em { font-style: normal; font-weight: 300; }

.mejor-opcion-1__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 60px 80px;
  border-radius: 40px;
  background: var(--color-blanco);
}

/* Bloque de texto: ajustado según captura de pantalla */
.mejor-opcion-1__txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  flex-shrink: 0;
  width: var(--w-5col);
  max-width: 100%;
  height: auto;
}
.mejor-opcion-1__txt h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1.2;
  color: var(--color-primario);
  text-transform: uppercase;
}
.mejor-opcion-1__txt p {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-secundario);
  width: 380px;
  max-width: 100%;
}

/* Imagen: escalada y posicionada idéntica a la captura */
.mejor-opcion-1__img {
  position: relative;
  width: 420px;
  height: 420px;
  flex-shrink: 0;
}
/* Ojo: reglas por clase, no `.mejor-opcion-1__img img`, porque el blob también
   es un <img> y heredaba el recorte circular de la foto. */
.mejor-opcion-1__img-blob {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 400px;
  max-width: none;
}
.mejor-opcion-1__img-foto {
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 90%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
}

/* ============== FINANCIAMIENTO QUE SE ADAPTA A TI (3042:3345) ============= */
.financiamiento {
  width: 100%;
  padding: 80px 0;
  background: var(--color-bg);
}
.financiamiento > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.financiamiento__titulo {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 2.5vw, 36px);
  color: var(--color-primario);
  text-align: center;
  width: 100%;
  text-transform: uppercase;
}
.financiamiento__titulo em {
  font-style: normal;
  font-weight: 300;
  display: block;
  font-size: 0.8em;
  margin-top: 8px;
}

.financiamiento__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 32px;
  width: 100%;
}

.financiamiento__card {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px 40px;
  border-radius: 48px;
  background: var(--color-blanco);
}
.financiamiento__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 120px;
}
.financiamiento__card-icon img { width: auto; max-width: 100%; height: auto; }

.financiamiento__card-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
}
.financiamiento__card--lista .financiamiento__card-txt { gap: 16px; }

.financiamiento__card-txt h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-body-lg-bold);
  color: var(--color-secundario);
  text-transform: uppercase;
  width: 100%;
}
.financiamiento__card-txt ul {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  color: var(--color-primario);
  list-style: disc;
  padding-left: 20px;
  width: 100%;
}

/* ================ HAZ LAS CUENTAS PARA TU CRÉDITO (3042:5026) ============= */
.simulador-demo {
  position: relative;
  width: 100%;
  padding: 160px 0;
  background-image: url('../images/desktop/home/simulador-demo/bg.webp');
  background-size: cover;
  background-position: center;
}
.simulador-demo > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.simulador-demo__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  color: var(--color-primario);
  text-align: center;
  width: 100%;
}

/* La tarjeta en sí vive en simulador-card.css (compartida con /simulador) */

/* ====================== TESTIMONIOS — CARRUSEL (3046:6020) ================ */
.testimonios {
  width: 100%;
  padding: 120px 0 80px;
  background: var(--color-bg);
}
.testimonios > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.testimonios__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 2.5vw, 36px);
  color: var(--color-primario);
  text-align: center;
  width: 100%;
}
.testimonios__titulo em { font-style: normal; font-weight: 300; }

/* El bloque del carrusel conserva el gap de 160px respecto al título y al CTA,
   así que agrupa pista + controles con su propio espaciado. */
.testimonios__carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.testimonios__viewport {
  width: 100%;
  overflow: hidden;
  /* espacio para el avatar que sobresale por arriba y para la sombra */
  padding: 64px 6px 24px;
  margin: -64px -6px -24px;
}

.testimonios__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
  padding: 90px 30px 40px;
  border-radius: 48px;
  background: var(--color-blanco);
  color: var(--color-primario);
  box-shadow: var(--shadow-morada);
}

.testimonio-card--dark {
  background: var(--color-primario);
  color: var(--color-blanco);
}

/* Avatar: escalado y montado a caballo del borde superior */
.testimonio-card__avatar {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonio-card__estrellas { width: 200px; height: auto; }
.testimonio-card__quote-mark { width: 41px; height: auto; }

.testimonio-card__nombre {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.testimonio-card__nombre strong {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h5);
  text-transform: uppercase;
}
.testimonio-card__nombre span {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
}

.testimonio-card__texto {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  text-align: center;
  width: 100%;
}

/* Tarjeta de video: la imagen ocupa el alto disponible con overlay oscuro */
.testimonio-card--video {
  padding: 0 0 24px;
  overflow: hidden;
  justify-content: flex-end;
}
.testimonio-card__video-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}
.testimonio-card__video-frame img.testimonio-card__video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonio-card__video-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.testimonio-card__play {
  position: relative;
  z-index: 1;
  width: 70px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.testimonio-card__play img { width: 100%; height: auto; display: block; }
.testimonio-card__play:hover { transform: scale(1.08); }

/* Reproductor incrustado en la tarjeta */
.testimonio-card__video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.testimonio-card__video-frame.is-reproduciendo .testimonio-card__play { display: none; }
.testimonio-card__video-frame.is-reproduciendo::after { display: none; }

/* Si el archivo de video no existe, se avisa en vez de dejar un hueco negro */
.testimonio-card__video-frame.is-no-disponible::before {
  content: 'Video no disponible por ahora.';
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  color: var(--color-blanco);
  text-align: center;
}

/* Controles del carrusel */
.testimonios__controls {
  display: flex;
  align-items: center;
  gap: 24px;
}
.testimonios__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primario);
  color: var(--color-blanco);
  font-size: 22px;
  line-height: 1;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.testimonios__arrow:hover { background: var(--color-secundario); }
.testimonios__arrow[disabled] { opacity: 0.35; cursor: default; }
.testimonios__arrow[disabled]:hover { background: var(--color-primario); }

.testimonios__dots { display: flex; gap: 10px; }
.testimonios__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-secundario);
  opacity: 0.4;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.testimonios__dot.is-active { opacity: 1; transform: scale(1.3); }

/* =========== CONTIGO, HACEMOS DE LA SEGURIDAD UNA REALIDAD (3048:268) =====
   Es un hero a sangre: imagen de fondo a todo el ancho, 160px arriba y 560px
   abajo (el aire inferior forma parte del encuadre de la foto).            */
.seguridad {
  position: relative;
  width: 100%;
  padding: 120px 0 500px;
  background-image: url('../images/desktop/home/seguridad/bg.webp');
  background-size: 100% auto;
  background-position: center -140px;
  color: var(--color-blanco);
}
.seguridad > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.seguridad__titulo {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 2.8vw, 36px);
  color: var(--color-blanco);
  text-align: center;
  width: 100%;
  text-transform: uppercase;
  line-height: 1.2;
}
/* La primera línea va en Light y la segunda en Bold */
.seguridad__titulo span { display: block; font-weight: 300; }

.seguridad__texto {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-blanco);
  text-align: center;
  width: var(--w-6col);
  max-width: 100%;
}

/* ============ APRENDE A CUIDAR TU DINERO Y TU INFORMACIÓN (3048:333) ====== */
.blog-home {
  width: 100%;
  min-height: 100vh;
  padding: 60px 0;
  background: var(--color-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-home > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.blog-home__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  color: var(--color-primario);
  text-align: center;
  width: 100%;
}
.blog-home__titulo span { display: block; font-weight: 300; }

/* Grid de 3 columnas: los 3 posts SIEMPRE en la misma fila (antes eran flex
   con wrap y 3x419+40 se pasaba 1px del ancho útil, así que saltaban). */
.blog-home__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  align-items: start;
}

.blog-home-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.blog-home-card__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  border-radius: 40px;
  background: var(--color-bg);
  overflow: hidden;
}
.blog-home-card__thumb img { max-height: 150px; width: auto; }

.blog-home-card__txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding-right: 16px;
}
.blog-home-card__txt h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h5);
  color: var(--color-secundario);
  text-transform: uppercase;
  width: 100%;
}
.blog-home-card__txt p {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  color: var(--color-gris-oscuro);
  width: 100%;
}
.blog-home-card__meta {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  color: var(--color-gris-oscuro);
}

/* ==========================================================================
   RESPONSIVE — el diseño de Figma sólo existe a 1440px; por debajo se
   conserva la jerarquía y las formas, ajustando anchos fijos a fluidos.
   ========================================================================== */
@media (max-width: 1023px) {
  .hero {
    height: auto;
    min-height: 0;
    padding-top: 160px;
    padding-bottom: 60px;
  }
  .hero__title { font-size: clamp(28px, 4.4vw, 44px); }
  .hero__subtitle { font-size: var(--fs-body-lg); }
  .hero__content { width: 100%; margin-left: 0; }
  .hero__title { font-size: clamp(28px, 4.4vw, 44px); }

  .calculadora {
    /* Debajo de 1280px el corazón se convierte en tarjeta: se fija --lado al
       valor de diseño para que los tamaños interiores no sigan la altura del
       viewport (en móvil quedarían diminutos). */
    --lado: 528px;
    position: static;
    width: 100%;
    max-width: var(--w-5col);
    height: auto;
    margin: 48px auto 0;
    padding: 48px 40px 40px;
    border-radius: 40px;
    background: var(--color-primario);
  }
  .calculadora__heart { display: none; }
  .calculadora__titulo,
  .calculadora__monto,
  .calculadora__pago p:last-child { font-size: clamp(24px, 4vw, 40px); }
  .calculadora .cta { padding: 16px 32px; font-size: var(--fs-body-lg); border-radius: var(--radius-cta); }
  .calculadora__nota { width: 100%; font-size: var(--fs-small); }

  .porque-elegir,
  .como-funciona,
  .financiamiento,
  .simulador-demo,
  .testimonios,
  .blog-home { padding: 100px 0; }
  .porque-elegir > .container,
  .como-funciona > .container,
  .financiamiento > .container,
  .simulador-demo > .container,
  .testimonios > .container,
  .blog-home > .container { gap: 48px; }

  .porque-elegir__panel { padding: 56px 32px 32px; border-radius: 48px; }
  .porque-elegir__row { flex-wrap: wrap; gap: 32px; }
  .porque-elegir__item { flex: 1 1 320px; }
  .porque-elegir__item-icon { width: 120px; }
  .porque-elegir__item-icon img { width: 100%; }
  .porque-elegir__item-txt { width: auto; flex: 1 1 0; }

  .como-funciona__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .como-funciona__item:nth-child(odd),
  .como-funciona__item:nth-child(even) { grid-column: auto; }
  .como-funciona__item-num { width: 64px; }

  .credito-grupal__content { padding: 140px var(--grid-margin); }
  .credito-grupal__title { font-size: clamp(24px, 3.6vw, 40px); }

  .mejor-opcion-1__card { flex-wrap: wrap; justify-content: center; padding: 48px 40px; gap: 32px; }
  .mejor-opcion-1__txt { width: 100%; height: auto; gap: 32px; }
  .mejor-opcion-1__img { width: 280px; height: 280px; flex: 0 0 auto; aspect-ratio: auto; margin: 0 auto; }

  .financiamiento__grid { grid-template-columns: 1fr; row-gap: 32px; }
  .financiamiento__card { border-radius: 48px; }
  .financiamiento__card-icon { width: 120px; }

  .testimonios__track { grid-auto-columns: calc((100% - 20px) / 2); }
  .testimonios__viewport { padding-top: 70px; margin-top: -70px; }
  .testimonio-card { padding: 100px 32px 56px; border-radius: 48px; }
  .testimonio-card__avatar { width: 130px; height: 130px; top: -65px; }

  .seguridad { padding: 100px 0 240px; }

  .blog-home__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
  .blog-home-card__txt { padding-right: 0; }
}

@media (max-width: 767px) {
  .hero { padding-top: 140px; }
  .hero__subtitle { width: 100%; }

  .porque-elegir,
  .como-funciona,
  .financiamiento,
  .simulador-demo,
  .testimonios,
  .blog-home { padding: 64px 0; }

  .porque-elegir__item { flex-direction: column; text-align: center; }
  .porque-elegir__item-txt { align-items: center; }
  .porque-elegir__item-txt ul { text-align: left; }

  .como-funciona__lista { grid-template-columns: 1fr; }

  .credito-grupal__content { padding: 100px var(--grid-margin); }

  .financiamiento__card { flex-direction: column; text-align: center; }
  .financiamiento__card-txt { align-items: center; }
  .financiamiento__card-txt ul { text-align: left; }

  .testimonios__track { grid-auto-columns: 100%; }

  .seguridad { padding: 64px 0 140px; }

  .blog-home__grid { grid-template-columns: 1fr; }
}