/* ============================================================
   HERO — imagen 1440 × 869 px, diseño base 1440 × 968 px
   Estrategia: background centrado + content alineado a 1440px
   ============================================================ */
.ce-hero {
  /* Unidad de escala del banner: 1 = 1px del diseño (lienzo 1440 x 940).
     Hace que el título y su caja crezcan y encojan JUNTO con el banner. Antes
     el banner pasaba de 752px a 940px al alejar el zoom mientras el título
     seguía clavado en 44px, y la composición perdía la proporción. */
  --u: min(1px, 0.06944vw, 0.10638svh);
  position: relative;
  display: flex;
  align-items: center;          /* texto centrado vert. */
  overflow: hidden;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  max-height: 940px;
  padding: clamp(60px, 8vw, 120px) var(--grid-margin);
  background-color: var(--color-secundario);
  box-sizing: border-box;
}

.ce-hero__bg {
  position: absolute;
  top: calc(var(--header-h) / 2);
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - (var(--header-h) / 2));
  pointer-events: none;
  z-index: 0;
}

.ce-hero__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.ce-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ce-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  box-sizing: border-box;
}
.ce-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: calc(var(--u) * 44);
  color: var(--color-blanco);
  line-height: 1.2;
  margin: 0;
  max-width: calc(var(--u) * 549);
}

.ce-conoces {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
  padding: clamp(60px, 10vw, 160px) var(--grid-margin);
  background-image: url('../images/desktop/credito-express/conoces-bg.webp');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-blanco);
  box-sizing: border-box;
}
.ce-conoces__img { flex: 1 1 350px; max-width: var(--w-5col); border-radius: 24px; overflow: hidden; display: flex; }
.ce-conoces__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ce-conoces__txt { display: flex; flex-direction: column; gap: 40px; flex: 1 1 400px; max-width: var(--w-5col); }
.ce-conoces__txt h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 3vw, var(--fs-h2));
  color: var(--color-primario);
  margin: 0;
}
.ce-conoces__txt p {
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  color: var(--color-secundario);
  margin: 0;
}

.ce-pasos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
  padding: clamp(60px, 10vw, 160px) var(--grid-margin);
  background: var(--color-secundario);
  box-sizing: border-box;
}
.ce-pasos > * {
  max-width: var(--container-max);
  box-sizing: border-box;
}
.ce-pasos__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 3vw, var(--fs-h2));
  color: var(--color-primario);
  text-align: center;
  margin: 0;
}
/* ── Row: 3 columnas × 3 filas implícitas (ícono / título / texto)
   subgrid hace que cada fila se ajuste al hijo más alto entre las 3 cols ── */
.ce-pasos__row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 60px);
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.ce-paso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
  gap: 16px;
}

.ce-paso__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(140px, 14vw, 200px);
  margin-bottom: 8px;
}

.ce-paso__icon img,
.ce-paso img {
  max-width: min(
    199px,
    calc((100vw - 2 * var(--grid-margin) - 11 * var(--grid-gutter)) / 12 * 2 + var(--grid-gutter))
  );
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}
.ce-paso h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heavy);
  font-size: clamp(20px, 2.4vw, var(--fs-h4));
  color: var(--color-primario);
  margin: 0;
  min-height: clamp(52px, 5.5vw, 64px);
  display: flex;
  align-items: flex-start;
}
.ce-paso p, .ce-paso ul {
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  color: var(--color-blanco);
  margin: 0;
  align-self: start;      /* siempre pegado al tope de su fila */
}
.ce-paso ul { list-style: disc; padding-left: 24px; text-align: left; }

/* ── Tablet (769px - 1023px): 2 columnas ── */
@media (min-width: 769px) and (max-width: 1023px) {
  .ce-pasos {
    gap: 60px;
    padding: 80px var(--grid-margin);
  }
  .ce-pasos__row {
    /* La regla base es `display: flex`, asi que todo el bloque de
       `grid-template-*` de aqui abajo se ignoraba en silencio y los 3 pasos
       se quedaban en fila incluso a 390px: columnas de ~110px, palabras
       partidas y el tercer paso cortado por el borde. Hay que declarar el
       grid explicitamente. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 40px;
    width: 100%;
    max-width: 740px;
    margin: 0 auto;
  }
  .ce-paso {
    grid-row: span 1;
    grid-template-rows: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 16px;
  }
  .ce-paso:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
  }
  .ce-paso__icon img,
  .ce-paso img {
    width: 110px;
    height: 110px;
    max-width: 110px;
    max-height: 110px;
    align-self: center;
    margin-bottom: 8px;
  }
  .ce-paso h3 {
    font-size: 20px;
    line-height: 1.25;
    text-align: left;
  }
  .ce-paso p,
  .ce-paso ul {
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
  }
  .ce-paso ul {
    padding-left: 20px;
  }
}

/* ── Mobile (≤ 768px): 1 columna ── */
@media (max-width: 768px) {
  .ce-pasos {
    gap: 48px;
    padding: 60px var(--grid-margin);
  }
  .ce-pasos__row {
    /* La regla base es `display: flex`, asi que todo el bloque de
       `grid-template-*` de aqui abajo se ignoraba en silencio y los 3 pasos
       se quedaban en fila incluso a 390px: columnas de ~110px, palabras
       partidas y el tercer paso cortado por el borde. Hay que declarar el
       grid explicitamente. */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 40px;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
  }
  .ce-paso {
    grid-row: span 1;
    grid-template-rows: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
    width: 100%;
  }
  .ce-paso__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    width: 100%;
    margin-bottom: 8px;
  }
  .ce-paso__icon img,
  .ce-paso img {
    width: 160px;
    height: 160px;
    max-width: 160px;
    max-height: 160px;
    object-fit: contain;
    align-self: center;
    margin: 0 auto;
    display: block;
  }
  .ce-paso h3 {
    font-size: 20px;
    line-height: 1.25;
    text-align: left;
    width: 100%;
  }
  .ce-paso p,
  .ce-paso ul {
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
    width: 100%;
  }
  .ce-paso ul {
    padding-left: 20px;
  }
}

.ce-productos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
  padding: clamp(60px, 10vw, 160px) var(--grid-margin);
  background: var(--color-blanco);
  box-sizing: border-box;
}
.ce-productos__titulo {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 3vw, var(--fs-h2));
  color: var(--color-primario);
  text-align: center;
  margin: 0;
}
.ce-productos__wrap {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Row: CSS Grid de 12 columnas, gutter del sistema ── */
.ce-productos__row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);   /* = 20px desktop */
  width: 100%;
}

/* ── Cada card: span 4 de 12 ──────────────────────────
   El círculo debe ser 2/4 col de la card.
   Ancho de la card (sin bordes) = 4fr en el grid.
   Definimos --icon-d como variable local calculada
   a partir del ancho total disponible:
     disponible = 100vw - 2×margin - 11×gutter
     1 col       = disponible / 12
     2 col       = (disponible / 12) × 2 + 1 gutter
   A 1440 px: 2 col ≈ 199 px  ✓
   ─────────────────────────────────────────────────── */
.ce-producto {
  grid-column: span 4;
  --icon-d: min(
    199px,
    calc((100vw - 2 * var(--grid-margin) - 11 * var(--grid-gutter)) / 12 * 2 + var(--grid-gutter))
  );
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  /* padding-top = mitad del círculo + espacio interior */
  padding: calc(var(--icon-d) / 2 + 24px) clamp(20px, 2.8vw, 40px) 80px;
  border-radius: 80px;
  background: var(--color-secundario);
  /* espacio para que el círculo sobresalga arriba sin solapar la sección anterior */
  margin-top: calc(var(--icon-d) / 2);
}

/* ── Círculo: 2 col del grid (mitad de la card de 4 col)
   5 px stroke blanco ─────────────────────────────────── */
.ce-producto__icon {
  position: absolute;
  top: calc(var(--icon-d) / -2);
  left: 50%;
  transform: translateX(-50%);
  width: var(--icon-d);
  height: var(--icon-d);
  border-radius: 50%;
  background: var(--color-primario);
  border: 5px solid var(--color-blanco);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Ícono SVG: 45 % del diámetro */
.ce-producto__icon img {
  width: 45%;
  height: auto;
}

.ce-producto h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heavy);
  font-size: clamp(18px, 2vw, var(--fs-h4));
  color: var(--color-blanco);
  text-align: center;
  margin: 0;
}
.ce-producto p {
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.4vw, var(--fs-body-lg));
  color: var(--color-blanco);
  text-align: center;
  margin: 0;
}
.ce-producto strong { font-weight: var(--fw-bold); }
.ce-productos__nota {
  font-family: var(--font-heading);
  font-weight: var(--fw-heavy);
  font-size: clamp(16px, 1.8vw, var(--fs-h4));
  color: var(--color-primario);
  text-align: center;
  margin: 0;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1023px) {
  .ce-productos__row {
    grid-template-columns: repeat(8, 1fr);
  }
  .ce-producto {
    grid-column: span 4;   /* 2 cards por fila en tablet */
  }
  /* El último card se centra si queda solo */
  .ce-producto:last-child:nth-child(odd) {
    grid-column: 3 / span 4;
  }
}
@media (max-width: 767px) {
  .ce-productos__row {
    grid-template-columns: 1fr;
  }
  .ce-producto {
    grid-column: span 1;
  }
  .ce-producto:last-child:nth-child(odd) {
    grid-column: span 1;
  }
}

.ce-socio {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  padding: clamp(80px, 14vw, 320px) var(--grid-margin) clamp(100px, 20vw, 420px);
  background-color: var(--color-blanco);
  overflow: hidden;
  box-sizing: border-box;
}

.ce-socio__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.ce-socio__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.ce-socio__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.ce-socio__content {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}
.ce-socio__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 3vw, var(--fs-h2));
  color: var(--color-primario);
  line-height: 1.3;
  margin: 0 0 24px;
  max-width: var(--w-5col);
}
.ce-socio__title em { font-style: normal; font-weight: 300; }
.ce-socio ul {
  font-family: var(--font-heading);
  font-size: var(--fs-body-lg);
  color: var(--color-secundario);
  list-style: disc;
  padding-left: 30px;
  margin: 0;
  max-width: var(--w-5col);
}
.ce-socio__wave {
  display: block;
  width: 100%;
  height: clamp(40px, 6vw, 64px);
  position: absolute;
  left: 0;
  bottom: -1px;
  pointer-events: none;
}

.ce-solicita {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  width: 100%;
  padding: clamp(60px, 10vw, 160px) var(--grid-margin);
  background: var(--color-blanco);
  overflow: visible;
  box-sizing: border-box;
}
.ce-solicita > * {
  max-width: var(--container-max);
  box-sizing: border-box;
}
.ce-solicita__squiggle {
  position: absolute;
  top: 190px;
  left: 50%;
  transform: translateX(-50%);
  width: 964px;
  max-width: 130%;
  z-index: 0;
}
.ce-solicita__titulo {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 3vw, var(--fs-h2));
  color: var(--color-primario);
  text-align: center;
  margin: 0;
}
.ce-solicita .simulador-demo__card { position: relative; z-index: 1; }

.ce-mediospago {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 80px clamp(24px, 8vw, 110px);
  border-radius: 80px;
  background: var(--color-primario);
  /* Sin overflow:hidden para que la foto sobresalga por arriba */
  overflow: visible;
  box-sizing: border-box;
}
.ce-mediospago h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 3vw, var(--fs-h2));
  color: var(--color-blanco);
  margin: 0;
}
.ce-mediospago h2 em { font-style: normal; font-weight: 300; display: block; }
.ce-mediospago .cta {
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ce-mediospago .cta:hover,
.ce-mediospago .cta:focus-visible {
  background-color: var(--color-blanco);
  color: var(--color-primario);
}
.ce-mediospago__photo {
  position: absolute;
  right: clamp(20px, 5vw, 80px);
  bottom: 0;              /* pies al ras del fondo de la card */
  height: 130%;           /* sobresale ~30 % arriba = cabeza completa visible */
  width: auto;
  max-height: 520px;
  pointer-events: none;
}
@media (max-width: 767px) {
  .ce-mediospago {
    padding: 48px 24px clamp(180px, 45vw, 240px);
    border-radius: 40px;
    align-items: center;
    text-align: center;
    overflow: hidden;
  }
  .ce-mediospago h2 {
    text-align: center;
    font-size: clamp(22px, 5.5vw, 28px);
  }
  .ce-mediospago .cta {
    align-self: center;
  }
  .ce-mediospago__photo {
    display: block;
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    bottom: 0;
    height: clamp(180px, 45vw, 240px);
    width: auto;
    max-height: none;
    pointer-events: none;
  }
}

/* ============================================================
   HERO responsive — breakpoints
   ============================================================ */

/* Tablet / pantallas ≤ 1024 px:
   la imagen (1440px nativa) empieza a dejar ver el lado izquierdo
   menos, pero la mujer sigue centrada a la derecha. Sin cambios
   porque object-position:right center lo maneja automáticamente. */

/* Mobile ≤ 768 px:
   Imagen centrada en pantalla, texto se mueve abajo con overlay  */
@media (max-width: 868px) {
  .ce-conoces {
    flex-direction: column;
    gap: 32px;
    padding: 60px var(--grid-margin);
  }
  .ce-conoces__txt {
    order: 1;
    flex: 1 1 100%;
    max-width: 100%;
    text-align: center;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
  }
  .ce-conoces__img {
    order: 2;
    flex: 0 1 auto;
    width: min(100%, 320px);
    max-width: 320px;
    height: auto;
    border-radius: 0;
    overflow: visible;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  .ce-conoces__img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
}

@media (max-width: 1023px) {
  .ce-hero {
    height: auto;
    min-height: 560px;
    padding: 160px var(--grid-margin) 100px;
  }
  .ce-hero__title {
    font-size: clamp(22px, 3.2vw, 32px);
    max-width: 440px;
  }
}

@media (max-width: 768px) {
  .ce-hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
    align-items: flex-start;
    justify-content: flex-start;
    padding: calc(var(--header-h) + 24px) var(--grid-margin) clamp(220px, 60vw, 300px);
    box-sizing: border-box;
  }
  .ce-hero__bg {
    top: 0;
    height: 100%;
    inset: 0;
  }
  .ce-hero__bg img {
    object-position: center bottom;
  }
  .ce-hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 300px;
    align-items: flex-start;
    text-align: left;
    padding: 0;
    background: none;
    gap: 16px;
  }
  .ce-hero__title {
    font-size: clamp(17px, 4.6vw, 22px);
    line-height: 1.2;
  }
}

/* Sobrescribir botones cta--2 en esta página (Hero y Pasos) */
.ce-hero .cta--2,
.ce-pasos .cta--2 {
  background-color: var(--color-primario);
  color: var(--color-blanco);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ce-hero .cta--2:hover,
.ce-hero .cta--2:focus-visible,
.ce-pasos .cta--2:hover,
.ce-pasos .cta--2:focus-visible {
  background-color: var(--color-blanco);
  color: var(--color-primario);
}

/* ==========================================================================
   TABLET EN VERTICAL — ALTO COMPLETO DEL HERO

   A partir de 768px el <picture> sirve el banner VERTICAL (1440 x 2480,
   proporcion 0.58) porque la pantalla esta en retrato. Pero el bloque de
   tablet deja el hero en `height: auto; min-height: 560px`: una caja de
   768x560 (proporcion 1.37) contra una imagen de 0.58 obliga a `cover` a
   recortar mas del 50% de la foto, y la composicion se pierde (se veia un
   primer plano gigante).

   Con el alto completo de pantalla la caja queda en 0.75 y solo se recorta
   unbuen 23%. Solo aplica en retrato: la tablet apaisada sigue recibiendo el
   banner de escritorio y conserva su alto de 560px.
   ========================================================================== */
@media (max-width: 1023px) and (max-aspect-ratio: 1/1) {
  .ce-hero {
    height: auto;
    min-height: 100svh;
    box-sizing: border-box;
    /* Los banners verticales dejan el aire arriba y colocan a las personas en
       la mitad inferior. Centrado en vertical, el texto (y sobre todo el
       boton rosa) caia justo encima de la foto y dejaba de leerse. Anclado
       arriba cae sobre la zona limpia, que es para lo que se diseno. */
    align-items: flex-start;
  }
}

/* Fondo de ".ce-conoces" en pantalla vertical: la version de escritorio es
   apaisada y con `background-size: 100% 100%` se deformaba. Esta es su
   variante vertical (el mismo interior, encuadrado para movil). */
@media (max-width: 767px), (max-aspect-ratio: 1/1) {
  .ce-conoces {
    background-image: url('../images/responsive/Responsive%20Credito%20Express/BannerResponsive_PagWeb_Contigo_CreditoExpress_2.webp');
    background-size: cover;
    background-position: center;
  }
}

@media (max-width: 767px) {
  .ce-socio {
    min-height: 100svh;
    padding: 48px var(--grid-margin) clamp(260px, 70vw, 360px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  .ce-socio__bg img {
    object-position: center bottom;
  }
  .ce-socio__title {
    font-size: clamp(20px, 5.2vw, 26px);
    max-width: 320px;
    line-height: 1.25;
    margin-bottom: 16px;
  }
  .ce-socio ul {
    font-size: 14px;
    line-height: 1.4;
    padding-left: 20px;
    max-width: 320px;
  }
}