/* =======================================
   PÁGINA: ¿Qué es Te Conviene?
   ======================================= */

/* ---------- HERO: fondo blanco, corte limpio ---------- */
.page-que-es .qe-hero{
  background: var(--white);
  padding: 28px 0 32px;
  border-bottom: 1px solid #eee;
  box-shadow: none;
  position: relative;
}
/* Si algún theme agrega un glow al hero, lo anulamos acá */
.page-que-es .qe-hero::before,
.page-que-es .qe-hero::after{
  content: none !important;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
}

/* ---------- Forzamos lectura a la izquierda en DESKTOP ---------- */
@media (min-width: 992px){
  /* pisa el text-align:center global del hero */
  .page-que-es .qe-hero .hero-content{
    text-align: left !important;
    display: flex;                 /* por si el global no lo trae */
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }

  /* pisa align-items:center; text-align:center del global */
  .page-que-es .qe-hero .hero-text{
    flex: 1 1 55%;
    max-width: 700px;
    align-items: flex-start !important;
    text-align: left !important;
  }
  /* por si hay herencia de centrado en títulos/párrafos */
  .page-que-es .qe-hero .hero-text > *{
    text-align: left !important;
  }

  .page-que-es .qe-hero .hero-image{
    flex: 1 1 45%;
    display: flex;
    justify-content: center;
  }
  .page-que-es .qe-hero .hero-logo-big{
    max-width: 360px;
  }

  .page-que-es .qe-hero .hero-title-desktop{
    font-size: 2.4rem;
    line-height: 1.15;
    margin-bottom: 10px;
  }
  .page-que-es .qe-hero .hero-text-desktop{
    font-size: 1.12rem;
    line-height: 1.45;
    margin-bottom: 8px !important;   /* junta las dos frases */
  }
  .page-que-es .qe-hero .hero-cta-desktop{
    align-self: flex-start !important;
    margin-top: 14px;
  }
}

/* ---------- MOBILE: compacto ---------- */
@media (max-width: 991.98px){
  .page-que-es .qe-hero{ padding: 22px 0 26px; border-bottom:1px solid #eee; }
  .page-que-es .qe-hero .hero-text-mobile{ margin-bottom: 10px; }
  .page-que-es .qe-hero .hero-logo-mobile{ max-width: 220px; }
}

/* ---------- BLOQUE SIGUIENTE (gris claro) ---------- */
.page-que-es .qe-essence{
  background: var(--gray-light);
  padding: 40px 0;
  position: relative;
}
/* Si en algún punto usaste <section class="section">, matamos el glow aquí */
.page-que-es .section,
.page-que-es .section::before,
.page-que-es .section::after{
  content: none !important;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
}

.page-que-es .qe-essence .grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 992px){
  .page-que-es .qe-essence .grid{ grid-template-columns: 1fr; }
}
.page-que-es .qe-essence h2{ color: var(--blue); margin: 0 0 10px; }
.page-que-es .qe-essence p,
.page-que-es .qe-essence li{ color: var(--gray-dark); }
.page-que-es .qe-essence ul{ margin: 8px 0 0; padding-left: 18px; }

/* Escala consistente con el home (desktop) */
@media (min-width: 992px){
  .page-que-es .qe-hero .hero-title-desktop{
    font-size: 2.8rem;        /* igual que home */
    line-height: 1.15;
    margin-bottom: 12px;
    font-weight: 800;
  }
  .page-que-es .qe-hero .hero-text-desktop{
    font-size: 1.2rem;        /* igual que home */
    line-height: 1.45;
    margin-bottom: 10px !important;
  }
  /* Opción A (recomendada): mantener izquierda */
  .page-que-es .qe-hero .hero-text{ 
    text-align: left !important; 
    align-items: flex-start !important; 
  }
  /* Si preferís matching total con home, cambialo a center:
  .page-que-es .qe-hero .hero-text{
    text-align: center !important;
    align-items: center !important;
  } */
}
/* Resaltado naranja de marca, consistente con el home */
.hl-orange{
  color: var(--orange);
  font-weight: 800;
}
/* ===== Lo que nos hace distintos (scope) ===== */

.page-que-es .qe-benefits .grid{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;               /* mobile */
}

@media (min-width: 640px){
  .page-que-es .qe-benefits .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px){
  .page-que-es .qe-benefits .grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px){
  .page-que-es .qe-benefits .grid{ grid-template-columns: repeat(5, 1fr); } /* 5 en fila */
}

/* Tarjetas base (compatibles con tu estilo actual) */
.page-que-es .qe-benefits .card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  border-top: 4px solid var(--orange);
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.page-que-es .qe-benefits .card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  border-top-color: var(--orange-light);
}
.page-que-es .qe-benefits .card-icon{ font-size: 1.2rem; }
.page-que-es .qe-benefits .card-title{ margin: 0; color: var(--blue); font-size: 1.05rem; }
.page-que-es .qe-benefits .card-text{ margin: 0; color: var(--gray-dark); }

/* Quinta tarjeta (promo cuotas) */
.page-que-es .qe-benefits .card--promo{
  border-top-color: var(--blue);
}
.page-que-es .qe-benefits .card--promo .card-list{
  margin: 0; padding-left: 18px; color: var(--gray-dark);
}
.page-que-es .qe-benefits .card--promo .btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:8px; border:2px solid var(--blue);
  color: var(--blue); font-weight:700; text-decoration:none; margin-top: 4px;
}
.page-que-es .qe-benefits .card--promo .btn-outline:hover{
  background: var(--blue); color:#fff; border-color: var(--blue);
}
.page-que-es .qe-benefits .micro-note{
  margin: 2px 0 0; font-size: .85rem; color: var(--gray-dark); opacity: .8;
}

/* Píldoras/estadísticas ya existentes: centradas y compactas */
.page-que-es .qe-benefits .stats{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin: 8px 0 16px; padding:0;
}
.page-que-es .qe-benefits .stats li{
  list-style:none; background:#fff; border:1px solid #eee; border-radius:999px;
  padding:8px 12px; color: var(--gray-dark);
}
.page-que-es .qe-benefits .stats strong{ color: var(--blue); }

/* ===========================
   QE BENEFITS — FIX DURO
   =========================== */

/* 1) La grilla: 5 columnas en desktop, responsivo debajo */
.page-que-es .qe-benefits .container .grid{
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: 1fr !important;    /* mobile default */
  align-items: stretch;
}

@media (min-width: 640px){
  .page-que-es .qe-benefits .container .grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
@media (min-width: 900px){
  .page-que-es .qe-benefits .container .grid{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}
@media (min-width: 1200px){
  .page-que-es .qe-benefits .container .grid{
    grid-template-columns: repeat(5, minmax(0,1fr)) !important; /* 5 en fila */
  }
}

/* 2) Cards: asegurar el estilo de tarjeta aunque haya reglas globales */
.page-que-es .qe-benefits .container .grid .card{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 12px !important;
  border-top: 4px solid var(--orange) !important;
  padding: 16px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 100% !important;
  transition: transform .18s, box-shadow .18s, border-color .18s !important;
}
.page-que-es .qe-benefits .container .grid .card:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.12) !important;
  border-top-color: var(--orange-light) !important;
}

/* Tipografía interior */
.page-que-es .qe-benefits .card .card-icon{ font-size: 1.2rem; }
.page-que-es .qe-benefits .card .card-title{
  margin: 0 !important; color: var(--blue) !important; font-size: 1.05rem !important;
}
.page-que-es .qe-benefits .card .card-text{ margin: 0 !important; color: var(--gray-dark) !important; }

/* 5ª tarjeta (cuotas) con pequeño acento en azul */
.page-que-es .qe-benefits .card.card--promo{ border-top-color: var(--blue) !important; }
.page-que-es .qe-benefits .card.card--promo .card-list{
  margin: 0 !important; padding-left: 18px !important; color: var(--gray-dark) !important;
}
.page-que-es .qe-benefits .card.card--promo .btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:8px; border:2px solid var(--blue);
  color: var(--blue); font-weight:700; text-decoration:none; margin-top: 4px;
}
.page-que-es .qe-benefits .card.card--promo .btn-outline:hover{
  background: var(--blue); color:#fff; border-color: var(--blue);
}
.page-que-es .qe-benefits .card.card--promo .micro-note{
  margin: 4px 0 0; font-size: .85rem; color: var(--gray-dark); opacity: .8;
}

/* Píldoras/estadísticas arriba (por si también se “aplanaron”) */
.page-que-es .qe-benefits .stats{
  display:flex !important; flex-wrap:wrap !important; gap:10px !important; justify-content:center !important;
  margin: 8px 0 16px !important; padding:0 !important;
}
.page-que-es .qe-benefits .stats li{
  list-style:none !important; background:#fff !important; border:1px solid #eee !important; border-radius:999px !important;
  padding:8px 12px !important; color: var(--gray-dark) !important;
}
.page-que-es .qe-benefits .stats strong{ color: var(--blue) !important; }

/* ====== QE BENEFITS: 5 tarjetas en fila ====== */
.qe-benefits .cards-5{
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: 1fr !important; /* mobile */
  align-items: stretch;
}

/* 2 → 3 → 5 columnas por breakpoints */
@media (min-width: 640px){
  .qe-benefits .cards-5{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (min-width: 900px){
  .qe-benefits .cards-5{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (min-width: 1200px){
  .qe-benefits .cards-5{ grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
}

/* Estilo de tarjeta (por si lo pisa algo global) */
.qe-benefits .cards-5 > .card{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 12px !important;
  border-top: 4px solid var(--orange) !important;
  padding: 16px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 100% !important;
  transition: transform .18s, box-shadow .18s, border-color .18s !important;
}
.qe-benefits .cards-5 > .card:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.12) !important;
  border-top-color: var(--orange-light) !important;
}

/* Quinta tarjeta (cuotas) con acento azul */
.qe-benefits .cards-5 > .card.card--promo{ border-top-color: var(--blue) !important; }
.qe-benefits .cards-5 > .card.card--promo .card-list{
  margin: 0 !important; padding-left: 18px !important; color: var(--gray-dark) !important;
}
.qe-benefits .cards-5 > .card.card--promo .btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:8px; border:2px solid var(--blue);
  color: var(--blue); font-weight:700; text-decoration:none; margin-top: 4px;
}
.qe-benefits .cards-5 > .card.card--promo .btn-outline:hover{
  background: var(--blue); color:#fff; border-color: var(--blue);
}
.qe-benefits .cards-5 > .card.card--promo .micro-note{
  margin: 4px 0 0; font-size: .85rem; color: var(--gray-dark); opacity: .8;
}
.qe-benefits .cards-5{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px){ .qe-benefits .cards-5{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .qe-benefits .cards-5{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1200px){ .qe-benefits .cards-5{ grid-template-columns:repeat(5,1fr); } }

.qe-benefits .cards-5 > .card{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:12px; border-top:4px solid var(--orange);
  padding:16px; box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.qe-benefits .cards-5 > .card.card--promo{ border-top-color: var(--blue); }

/* ----- Promo cuotas: badge + compresión tipográfica ----- */
.page-que-es .qe-benefits .card--promo.is-soon { 
  position: relative; 
  border-top-color: var(--blue); 
}

/* Badge “Próximamente” */
.page-que-es .qe-benefits .card--promo .badge-soon{
  position: absolute;
  top: 10px; 
  right: 10px;
  background: #eef3ff;
  color: var(--blue);
  border: 1px solid rgba(0,64,255,.15);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
}

/* Texto más compacto para que todo entre sin forzar */
.page-que-es .qe-benefits .card--promo .card-text.compact{
  font-size: .95rem;
  line-height: 1.35;
  margin-top: 2px;
  margin-bottom: 8px;
}

/* Botón más pequeño */
.page-que-es .qe-benefits .card--promo .btn-outline.btn-sm{
  padding: 8px 12px;
  font-size: .95rem;
}
/* Tarjeta de cuotas minimal */
.page-que-es .qe-benefits .card--promo.is-soon{
  border-top-color: var(--blue);
}

/* Texto compactado para que todo entre cómodo */
.page-que-es .qe-benefits .card--promo .card-text.compact{
  font-size: .97rem;
  line-height: 1.35;
  margin-top: 2px;
  margin-bottom: 12px;
}

/* Chip “Próximamente” al fondo de la tarjeta */
.page-que-es .qe-benefits .card--promo .badge-soon{
  display: inline-block;
  background: #eef3ff;
  color: var(--blue);
  border: 1px solid rgba(0,64,255,.15);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
}

.page-que-es .qe-benefits .card--promo .badge-soon--bottom{
  margin-top: auto;            /* se pega al final del card */
  align-self: center;          /* centrado */
}
/* =========================
   CÓMO COMPRAR (mini strip)
========================= */
.page-que-es .qe-steps-mini{
  background: var(--white);
  padding: 36px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.page-que-es .qe-steps-mini h2{
  color: var(--blue);
  text-align: center;
  margin: 0 0 14px;
}

/* Layout en línea, con conectores */
.page-que-es .steps-mini{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 auto 14px;
  max-width: 980px;
  counter-reset: stepi;
  position: relative;
}
@media (min-width: 900px){
  .page-que-es .steps-mini{
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

/* Tarjetitas livianas */
.page-que-es .steps-mini .step{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 14px 12px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

/* Icono y contenido */
.page-que-es .steps-mini .step-icon{
  width: 42px; height: 42px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: #f3f6ff;
  color: var(--blue);
  font-size: 20px;
  line-height: 1;
}
.page-que-es .steps-mini .step-body h3{
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: var(--blue);
}
.page-que-es .steps-mini .step-body p{
  margin: 0;
  color: var(--gray-dark);
  font-size: .98rem;
}

/* CTA */
.page-que-es .steps-mini-cta{
  display: flex;
  justify-content: center;
  gap: 10px;
}
.page-que-es .steps-mini-cta .btn-primary{
  min-width: 210px;
}
.page-que-es .steps-mini-cta .btn-outline{
  display: inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px; border-radius: 8px;
  border: 2px solid var(--blue); color: var(--blue);
  font-weight: 700; text-decoration: none;
}
.page-que-es .steps-mini-cta .btn-outline:hover{
  background: var(--blue); color: #fff;
}
/* =========================================
   ¿CÓMO COMPRAR? (mini) — versión gris + limpio
   Solo estilos: no hace falta cambiar el HTML
========================================= */

/* Fondo gris (para alternar con el bloque anterior blanco) */
.page-que-es .qe-steps-mini{
  background: var(--white);
  padding: 42px 0 40px;
  border: 0;                 /* sin bordes blancos entre secciones */
}

/* Título centrado */
.page-que-es .qe-steps-mini h2{
  color: var(--blue);
  text-align: center;
  margin: 0 0 18px;
}

/* Tarjetas: más planas, sin sombra fuerte */
.page-que-es .steps-mini{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 auto 16px;
  max-width: 980px;
}
@media (min-width: 900px){
  .page-que-es .steps-mini{
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

.page-que-es .steps-mini .step{
  background: #fff;
  border: 1px solid #e9edf3;
  border-radius: 14px;
  box-shadow: none;
  padding: 16px 14px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  position: relative; /* para los conectores */
}

/* Conectores entre tarjetas en desktop */
@media (min-width: 900px){
  .page-que-es .steps-mini .step::after{
    content: "";
    position: absolute;
    top: 50%;
    right: -9px;
    transform: translateY(-50%);
    width: 18px;
    height: 2px;
    background: #e6e9f2;
    border-radius: 2px;
  }
  .page-que-es .steps-mini .step:last-child::after{ display: none; }
}

/* Iconitos en pastilla suave */
.page-que-es .steps-mini .step-icon{
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: #f3f6ff;        /* celeste suave */
  color: var(--blue);
  font-size: 20px; line-height: 1;
}

/* Texto compacto y claro */
.page-que-es .steps-mini .step-body h3{
  margin: 0 0 4px;
  font-size: 1.06rem;
  color: var(--blue);
  font-weight: 800;
}
.page-que-es .steps-mini .step-body p{
  margin: 0;
  font-size: .98rem;
  color: var(--gray-dark);
}

/* CTAs centradas con jerarquía */
.page-que-es .steps-mini-cta{
  display: flex;
  justify-content: center;
  gap: 10px;
}
.page-que-es .steps-mini-cta .btn-primary{
  min-width: 210px;
}
.page-que-es .steps-mini-cta .btn-outline{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 8px;
  border: 2px solid var(--blue); color: var(--blue);
  font-weight: 800; text-decoration: none;
  background: #fff;
}
.page-que-es .steps-mini-cta .btn-outline:hover{
  background: var(--blue); color: #fff;
}
/* === ¿CÓMO COMPRAR? — compact+alto === */

/* Más aire arriba/abajo del bloque */
.page-que-es .qe-steps-mini{
  padding: 54px 0 52px;
}

/* Tarjetas un poquito más altas y anchas */
.page-que-es .steps-mini{
  max-width: 1040px;
  gap: 18px;
}

/* Altura/espaciado de cada tarjeta */
.page-que-es .steps-mini .step{
  padding: 20px 18px;                 /* antes ~16px */
  grid-template-columns: 52px 1fr;    /* icono más grande */
  min-height: 140px;                  /* fuerza altura agradable */
  border-radius: 16px;                /* curvas un pelo más suaves */
}

/* Icono en pastilla, más grande */
.page-que-es .steps-mini .step-icon{
  width: 52px; height: 52px;          /* antes 44 */
  border-radius: 14px;
  font-size: 22px;                    /* antes 20 */
}

/* Tipografía un pelito más grande */
.page-que-es .steps-mini .step-body h3{
  margin: 0 0 6px;
  font-size: 1.12rem;                 /* antes 1.06 */
}
.page-que-es .steps-mini .step-body p{
  font-size: 1.02rem;                 /* antes .98 */
  line-height: 1.45;
}

/* Conectores ajustados a la nueva altura */
@media (min-width: 900px){
  .page-que-es .steps-mini .step::after{
    right: -12px;                     /* separador un poco más largo */
    width: 24px; height: 2px;
  }
}

/* Separación de CTAs */
.page-que-es .steps-mini-cta{
  margin-top: 6px;
}
/* Título con mejor ritmo (opcional) */
.page-que-es .qe-steps-mini h2{
  margin-bottom: 18px;
  font-weight: 800;
}

/* CTAs — jerarquía y estilos */
.page-que-es .qe-steps-mini .steps-mini-cta{
  display:flex; gap:12px; justify-content:center; margin-top:12px;
  flex-wrap: wrap;
}

/* Primario naranja: consistente con marca */
.page-que-es .qe-steps-mini .btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px;
  border-radius:12px;
  font-weight:800;
  font-size:16px;
  background: var(--orange);
  border:2px solid var(--orange);
  color:#fff;
  box-shadow: 0 6px 16px rgba(255,124,32,.18);
  text-decoration:none;
  transition: transform .06s, background .2s, border-color .2s, box-shadow .2s;
}
.page-que-es .qe-steps-mini .btn-primary:hover{
  background: var(--orange-light);
  border-color: var(--orange-light);
  box-shadow: 0 8px 20px rgba(255,124,32,.26);
}
.page-que-es .qe-steps-mini .btn-primary:active{
  transform: translateY(1px);
}
.page-que-es .qe-steps-mini .btn-primary:focus-visible{
  outline: 2px solid #fff;
  box-shadow: 0 0 0 3px var(--orange);
}

/* Secundario outline (azul) */
.page-que-es .qe-steps-mini .btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px;
  border-radius:12px;
  font-weight:800;
  font-size:16px;
  background: #fff;
  border:2px solid var(--blue);
  color: var(--blue);
  text-decoration:none;
  transition: background .2s, color .2s, border-color .2s, transform .06s;
}
.page-que-es .qe-steps-mini .btn-outline:hover{
  background: var(--blue);
  color:#fff;
}
.page-que-es .qe-steps-mini .btn-outline:active{
  transform: translateY(1px);
}
.page-que-es .qe-steps-mini .btn-outline:focus-visible{
  outline: 2px solid #fff;
  box-shadow: 0 0 0 3px var(--blue);
}

/* Mobile: que no se junten demasiado */
@media (max-width: 480px){
  .page-que-es .qe-steps-mini .btn-primary,
  .page-que-es .qe-steps-mini .btn-outline{
    width:100%;
    max-width:320px;
  }
}
/* QE – ¿Cómo comprar? con fondo gris */
.page-que-es .qe-steps-mini{
  background: var(--white);
  border-top: 1px solid #eee;     /* corte limpio con la sección anterior */
  border-bottom: 1px solid #eee;  /* y con la siguiente */
}

.page-que-es .qe-steps-mini .container{
  padding-top: 32px;
  padding-bottom: 36px;
}

@media (min-width: 992px){
  .page-que-es .qe-steps-mini .container{
    padding-top: 40px;
    padding-bottom: 44px;
  }
}

/* Aseguramos que las tarjetas internas sigan blancas */
.page-que-es .qe-steps-mini .step-card{
  background:#fff;
}
/* Forzar gris en el bloque mini de pasos */
.page-que-es .qe-steps-mini{
  background: var(--white) !important;
  border-top: 1px solid #eee !important;
  border-bottom: 1px solid #eee !important;
}
/* === ¿Cómo comprar? — compactar espacio vertical === */
.page-que-es .qe-steps-mini{
  padding: 28px 0 !important;                 /* antes ~54px/52px */
}

.page-que-es .qe-steps-mini .container{
  padding-top: 16px !important;               /* antes 32–40px */
  padding-bottom: 18px !important;            /* antes 36–44px */
}

.page-que-es .qe-steps-mini h2{
  margin-bottom: 12px !important;             /* antes 18px */
}

.page-que-es .steps-mini{
  margin: 0 auto 10px !important;             /* antes 14–16px */
}

.page-que-es .qe-steps-mini .steps-mini-cta{
  margin-top: 4px !important;                 /* antes 6–12px */
}

/* Opcional: bajar un pelo la altura de cada tarjeta */
.page-que-es .steps-mini .step{
  min-height: 128px !important;               /* antes 140px */
  padding: 18px 16px !important;              /* era 20px 18px */
}
/* ===========================
   QE — ORIGINS (La Plata)
   =========================== */
.page-que-es .qe-origins{
  background: var(--white);
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 36px 0 40px;
}

.page-que-es .qe-origins .origins-wrap{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
}
@media (min-width: 960px){
  .page-que-es .qe-origins .origins-wrap{
    grid-template-columns: 420px 1fr;
    gap: 28px;
  }
}

/* Col A: marca La Plata en grande */
.page-que-es .qe-origins .origins-brand{
  background: #f7f9ff;
  border: 1px solid #e9edf3;
  border-radius: 16px;
  padding: 18px 18px 16px;
  text-align: center;
}
.page-que-es .qe-origins .badge{
  display: inline-block;
  background: #eef3ff;
  color: var(--blue);
  border: 1px solid rgba(0,64,255,.14);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.page-que-es .qe-origins .lp-link{ display:inline-block; }
.page-que-es .qe-origins .lp-logo{
  width: min(260px, 68%);
  height: auto;
  display: inline-block;
  filter: none;
}
.page-que-es .qe-origins .proofs{
  list-style: none; padding: 0; margin: 12px 0 0;
  display: grid; gap: 6px;
}
.page-que-es .qe-origins .proofs li{
  color: var(--gray-dark);
  font-size: .98rem;
}

/* Col B: copy */
.page-que-es .qe-origins .origins-copy h2{
  color: var(--blue);
  margin: 0 0 8px;
  font-weight: 800;
}
.page-que-es .qe-origins .origins-copy .lead{
  margin: 0 0 10px;
  color: var(--gray-dark);
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 680px;
}

.page-que-es .qe-origins .micro-list{
  display: flex; flex-wrap: wrap; gap: 8px 12px;
  margin: 8px 0 12px;
}
.page-que-es .qe-origins .micro-list span{
  background: #fff;
  border: 1px solid #e9edf3;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .92rem;
  color: var(--blue);
  font-weight: 700;
}

/* CTAs */
.page-que-es .qe-origins .cta-row{
  display: flex; gap: 10px; flex-wrap: wrap;
}
.page-que-es .qe-origins .btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px; border-radius: 10px;
  background: var(--orange); color:#fff;
  border: 2px solid var(--orange);
  font-weight: 800; text-decoration: none;
}
.page-que-es .qe-origins .btn-primary:hover{
  background: var(--orange-light); border-color: var(--orange-light);
}
.page-que-es .qe-origins .btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px; border-radius: 10px;
  background:#fff; color: var(--blue);
  border: 2px solid var(--blue); font-weight: 800; text-decoration:none;
}
.page-que-es .qe-origins .btn-outline:hover{ background: var(--blue); color:#fff; }
/* ===========================
   QE — ORIGINS (más protagonista)
   =========================== */

/* Sección con más presencia */
.page-que-es .qe-origins{
  background: var(--white);
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 56px 0 60px;             /* ↑ más alto */
}
@media (min-width: 1200px){
  .page-que-es .qe-origins{ padding: 64px 0 70px; }
}

/* Grid más aireado */
.page-que-es .qe-origins .origins-wrap{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
@media (min-width: 992px){
  .page-que-es .qe-origins .origins-wrap{
    grid-template-columns: 460px 1fr; /* ↑ panel de marca */
    gap: 36px;
  }
}

/* Panel de marca: SIN fondo azulado, más limpio y con marco */
.page-que-es .qe-origins .origins-brand{
  background: #fff;                     /* ← sin celeste */
  border: 2px solid #eef1f6;            /* marco sutil pero firme */
  border-radius: 18px;
  padding: 22px 22px 18px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.04); /* apenas para destacarlo */
}

/* Badge “Respaldado por” MUY visible */
.page-que-es .qe-origins .badge.badge-xl{
  display: inline-block;
  background: #eef3ff;
  color: var(--blue);
  border: 1px solid rgba(0,64,255,.18);
  padding: 8px 14px;                 /* ↑ */
  border-radius: 999px;
  font-size: .9rem;                  /* ↑ */
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: 12px;
}

/* Logo con más tamaño y respiro */
.page-que-es .qe-origins .lp-link{ display:inline-block; }
.page-que-es .qe-origins .lp-logo{
  width: min(340px, 80%);            /* ↑ tamaño del logo */
  height: auto;
}

/* Lista de pruebas (solo 1 ítem ahora) */
.page-que-es .qe-origins .proofs{
  list-style: none; padding: 0; margin: 14px 0 0;
  display: grid; gap: 6px;
}
.page-que-es .qe-origins .proofs li{
  color: var(--gray-dark);
  font-size: 1rem;                   /* un poco más grande */
}

/* Título/copy con jerarquía mayor */
.page-que-es .qe-origins .origins-copy h2{
  color: var(--blue);
  margin: 0 0 10px;
  font-weight: 900;                  /* más contundente */
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.2;
}
.page-que-es .qe-origins .origins-copy .lead{
  margin: 0 0 14px;
  color: var(--gray-dark);
  font-size: 1.06rem;                /* ↑ */
  line-height: 1.6;
  max-width: 720px;
}

/* Chips */
.page-que-es .qe-origins .micro-list{
  display: flex; flex-wrap: wrap; gap: 10px 12px;
  margin: 10px 0 14px;
}
.page-que-es .qe-origins .micro-list span{
  background: #fff;
  border: 1px solid #e9edf3;
  border-radius: 999px;
  padding: 8px 12px;                 /* ↑ */
  font-size: .95rem;
  color: var(--blue);
  font-weight: 800;
}

/* CTAs */
.page-que-es .qe-origins .cta-row{
  display: flex; gap: 12px; flex-wrap: wrap;
}
.page-que-es .qe-origins .btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px; border-radius: 12px;
  background: var(--orange); color:#fff;
  border: 2px solid var(--orange);
  font-weight: 800; text-decoration: none;
  box-shadow: 0 6px 16px rgba(255,124,32,.18);
}
.page-que-es .qe-origins .btn-primary:hover{
  background: var(--orange-light); border-color: var(--orange-light);
}
.page-que-es .qe-origins .btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px; border-radius: 12px;
  background:#fff; color: var(--blue);
  border: 2px solid var(--blue); font-weight: 800; text-decoration:none;
}
.page-que-es .qe-origins .btn-outline:hover{ background: var(--blue); color:#fff; }
/* ===== Respaldo La Plata — versión inline, minimal ===== */
.page-que-es .origins-inline{
  background: var(--white);
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 48px 0;
}

.page-que-es .origins-inline .inline-wrap{
  display: grid;
  grid-template-columns: auto 1fr;     /* logo auto, texto ocupa resto */
  align-items: center;
  gap: 28px;
}
@media (max-width: 900px){
  .page-que-es .origins-inline .inline-wrap{
    grid-template-columns: 1fr;        /* stack en mobile */
    justify-items: center;
    text-align: center;
    gap: 18px;
  }
}

/* Solo logo, sin caja ni fondo */
.page-que-es .origins-inline .lp-inline{ display: inline-block; }
.page-que-es .origins-inline .lp-logo-inline{
  display: block;
  height: clamp(72px, 12vw, 140px);    /* “simula” misma altura que el bloque de texto */
  width: auto;
}

/* Texto */
.page-que-es .origins-inline .inline-copy h2{
  margin: 0 0 8px;
  color: var(--blue);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.2;
}
.page-que-es .origins-inline .inline-copy .lead{
  margin: 0 0 14px;
  color: var(--gray-dark);
  font-size: 1.06rem;
  line-height: 1.6;
  max-width: 760px;
}

/* Único CTA: outline azul (coherente con marca) */
.page-que-es .origins-inline .btn-outline{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; border-radius: 12px;
  background: #fff; color: var(--blue);
  border: 2px solid var(--blue);
  font-weight: 800; text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .06s;
}
.page-que-es .origins-inline .btn-outline:hover{
  background: var(--blue); color:#fff;
}
.page-que-es .origins-inline .btn-outline:active{
  transform: translateY(1px);
}
/* ===== Cierre / Final CTA ===== */
.page-que-es .qe-final-cta{
  background: linear-gradient(180deg, var(--white) 0%, var(--gray-light) 100%);
  padding: 56px 0 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #eee;
}

/* headline */
.page-que-es .qe-final-cta #qe-final-title{
  margin: 0 0 10px;
  color: var(--blue);
  font-weight: 900;
  line-height: 1.1;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
}

/* resaltado de marca Te Conviene */
.page-que-es .qe-final-cta .te-conviene{ white-space: nowrap; }
.page-que-es .qe-final-cta .te-conviene .te{
  color: var(--orange);
  font-weight: 900;
  margin-right: 4px;
}
.page-que-es .qe-final-cta .te-conviene .conviene{
  color: var(--blue);
  font-weight: 900;
}

/* subcopy */
.page-que-es .qe-final-cta .cta-sub{
  margin: 0 0 18px;
  color: var(--gray-dark);
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  opacity: .95;
}

/* CTAs */
.page-que-es .qe-final-cta .cta-row{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* primario naranja */
.page-que-es .qe-final-cta .btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 800; font-size: 16px;
  background: var(--orange);
  border: 2px solid var(--orange);
  color:#fff; text-decoration: none;
  box-shadow: 0 8px 20px rgba(255,124,32,.22);
  transition: transform .06s, background .2s, border-color .2s, box-shadow .2s;
}
.page-que-es .qe-final-cta .btn-primary:hover{
  background: var(--orange-light);
  border-color: var(--orange-light);
  box-shadow: 0 10px 26px rgba(255,124,32,.28);
}
.page-que-es .qe-final-cta .btn-primary:active{ transform: translateY(1px); }

/* secundario outline (solo mobile) */
.page-que-es .qe-final-cta .btn-outline{
  display: none; /* desktop */
  align-items:center; justify-content:center;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 800; font-size: 16px;
  background: #fff;
  border: 2px solid var(--blue);
  color: var(--blue); text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, transform .06s;
}
.page-que-es .qe-final-cta .btn-outline:hover{
  background: var(--blue); color:#fff;
}
.page-que-es .qe-final-cta .btn-outline:active{ transform: translateY(1px); }

/* pill-benefits */
.page-que-es .qe-final-cta .cta-micro{
  list-style: none;
  padding: 0; margin: 8px 0 0;
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.page-que-es .qe-final-cta .cta-micro li{
  background: #fff;
  border: 1px solid #e8ecf3;
  color: var(--gray-dark);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: .95rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

/* responsive finos */
@media (max-width: 560px){
  .page-que-es .qe-final-cta{ padding: 48px 0 56px; }
  .page-que-es .qe-final-cta .btn-outline{ display: inline-flex; } /* solo mobile */
  /* en móvil, “Te / Conviene” puede apilarse para más punch */
  .page-que-es .qe-final-cta .te-conviene .te,
  .page-que-es .qe-final-cta .te-conviene .conviene{
    display:block; line-height: 1.04;
  }
}
/* === QE Final CTA — ajustes pedidos === */
.page-que-es .qe-final-cta{
  background: var(--gray-light) !important;   /* fondo gris claro */
  /* si querés sin degradado, aseguramos que no haya */
  background-image: none !important;
}

.page-que-es .qe-final-cta #qe-final-title{
  /* título bastante más chico */
  font-size: clamp(1.3rem, 2.2vw, 1.8rem) !important;
  line-height: 1.15;
  margin-bottom: 8px; /* un pelín más compacto */
}

/* opcional: subcopy un poco más discreta */
.page-que-es .qe-final-cta .cta-sub{
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  margin-bottom: 14px;
}

/* ===== FIX HERO EN "¿QUÉ ES TC?" — AÍSLA DEL HOME ===== */

/* 1) Ocultar siempre lo mobile del home en esta página */
.page-que-es .qe-hero .hero-title-mobile,
.page-que-es .qe-hero .hero-logo-mobile,
.page-que-es .qe-hero .hero-text-mobile {
  display: none !important;
}

/* 2) Mostrar SIEMPRE nuestro título y copy de esta página */
.page-que-es .qe-hero .hero-title-desktop,
.page-que-es .qe-hero .hero-text-desktop {
  display: block !important;
}

/* 3) CTAs: solo uno activo por breakpoint */
@media (min-width: 769px){
  /* Desktop: solo CTA desktop visible */
  .page-que-es .qe-hero .hero-cta-desktop { display: inline-flex !important; }
  .page-que-es .qe-hero .hero-cta-mobile  { display: none !important; }
}

@media (max-width: 768px){
  /* Mobile: solo CTA mobile visible */
  .page-que-es .qe-hero .hero-cta-desktop { display: none !important; }
  .page-que-es .qe-hero .hero-cta-mobile  { display: inline-flex !important; }
}

/* 4) Por si algún rule global fuerza centrado/columnas del home */
.page-que-es .qe-hero .hero-content{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
}
.page-que-es .qe-hero .hero-text{
  align-items: flex-start !important;
  text-align: left !important;
}
@media (max-width: 768px){
  .page-que-es .qe-hero .hero-content{
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
  }
  .page-que-es .qe-hero .hero-text{
    align-items: center !important;
    text-align: center !important;
  }
}
/* ===== FIX HERO EN "¿QUÉ ES TC?" — AÍSLA DEL HOME ===== */

/* 1) Ocultar siempre lo mobile del home en esta página */
.page-que-es .qe-hero .hero-title-mobile,
.page-que-es .qe-hero .hero-logo-mobile,
.page-que-es .qe-hero .hero-text-mobile {
  display: none !important;
}

/* 2) Mostrar SIEMPRE nuestro título y copy de esta página */
.page-que-es .qe-hero .hero-title-desktop,
.page-que-es .qe-hero .hero-text-desktop {
  display: block !important;
}

/* 3) CTAs: solo uno activo por breakpoint */
@media (min-width: 769px){
  /* Desktop: solo CTA desktop visible */
  .page-que-es .qe-hero .hero-cta-desktop { display: inline-flex !important; }
  .page-que-es .qe-hero .hero-cta-mobile  { display: none !important; }
}

@media (max-width: 768px){
  /* Mobile: solo CTA mobile visible */
  .page-que-es .qe-hero .hero-cta-desktop { display: none !important; }
  .page-que-es .qe-hero .hero-cta-mobile  { display: inline-flex !important; }
}

/* 4) Por si algún rule global fuerza centrado/columnas del home */
.page-que-es .qe-hero .hero-content{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
}
.page-que-es .qe-hero .hero-text{
  align-items: flex-start !important;
  text-align: left !important;
}
@media (max-width: 768px){
  .page-que-es .qe-hero .hero-content{
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
  }
  .page-que-es .qe-hero .hero-text{
    align-items: center !important;
    text-align: center !important;
  }
}
/* ================================
   HERO (MOBILE) — ¿Qué es Te Conviene?
   Forzamos la versión correcta en mobile
=================================== */
@media (max-width: 768px){
  /* Fondo y respiración del hero */
  .page-que-es .qe-hero{
    padding: 24px 16px 26px !important;
    border-bottom: 1px solid #eee;
  }

  /* Solo logo horizontal (mobile), sin isologo grande */
  .page-que-es .qe-hero .hero-logo-desktop{ display: none !important; }
  .page-que-es .qe-hero .hero-logo-mobile{
    display: block !important;
    width: min(72vw, 220px);
    max-width: 100%;
    margin: 0 auto 10px !important;
  }

  /* Título mobile: centrado y legible */
  .page-que-es .qe-hero .hero-title-desktop{
    font-size: 1.9rem !important;   /* 30–31px aprox */
    line-height: 1.2 !important;
    text-align: center !important;
    margin-bottom: 10px !important;
  }

  /* Texto: usamos el copy de ESTA página (desktop) también en mobile */
  .page-que-es .qe-hero .hero-text-desktop{
    display: block !important;      /* lo mostramos en mobile */
    font-size: 1.02rem !important;
    line-height: 1.45 !important;
    margin: 4px 0 0 !important;
    text-align: center !important;
  }
  /* Ocultamos los párrafos mobile (traían el copy del home) */
  .page-que-es .qe-hero .hero-text-mobile{ display: none !important; }

  /* CTA: solo “Conocé cómo funciona” en mobile */
  .page-que-es .qe-hero .hero-cta-desktop{ display: none !important; } /* por si aparece */
  .page-que-es .qe-hero .hero-cta-mobile{
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 100%; max-width: 320px;
    margin: 14px auto 0 !important;
  }

  /* Aseguramos layout en columna */
  .page-que-es .qe-hero .hero-content{
    display: block !important;
    text-align: center !important;
  }
}
/* === QE — Cards en mobile: carrusel horizontal con scroll-snap === */
@media (max-width: 768px){
  .page-que-es .qe-benefits .cards-5 {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding: 4px 12px 12px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .page-que-es .qe-benefits .cards-5 > .card {
    min-width: 78% !important; /* 1 tarjeta bien visible */
    scroll-snap-align: start;
    flex: 0 0 auto;
  }
  .page-que-es .qe-benefits .cards-5 > .card:last-child {
    margin-right: 6px;
  }
  .page-que-es .qe-benefits .cards-5::-webkit-scrollbar { height: 0; }
}

/* Banda gris + padding para la sección de beneficios */
.page-que-es .qe-benefits {
  background: var(--gray-light) !important;
  border: 0 !important;
  padding: 36px 0; /* aire vertical */
  position: relative;
  z-index: 0;
}

/* Mata cualquier overlay/halo del theme */
.page-que-es .qe-benefits::before,
.page-que-es .qe-benefits::after {
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Contenedor */
.page-que-es .qe-benefits .container {
  padding-top: 28px;
  padding-bottom: 32px;
  background: transparent !important;
  overflow: visible !important; /* importante para scroll horizontal en iOS */
}

/* Tarjetas blancas con contraste */
.page-que-es .qe-benefits .card {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.05) !important;
}
.page-que-es .qe-benefits .card.card--promo {
  border-top-color: var(--blue) !important;
}

/* Píldoras/estadísticas */
.page-que-es .qe-benefits .stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 10px 0 18px;
  padding: 0;
}
.page-que-es .qe-benefits .stats li {
  list-style: none;
  background: #fff;
  border: 1px solid #e9edf3;
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--gray-dark);
}
.page-que-es .qe-benefits .stats strong { color: var(--blue); }

/* Aire horizontal extra en mobile chico */
@media (max-width: 480px){
  .page-que-es .qe-benefits .container {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ====== PÍLDORAS MÉTRICAS UNIFICADO ====== */
.metrics .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  list-style: none;
  margin: 10px 0 18px;
  padding: 0;
}
.metrics .pills li {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  background: #fff;
  border: 1px solid #e9edf3;
  border-radius: 999px;
  padding: 8px 12px;
  color: #465266;
  white-space: nowrap;
}
.metrics .pills li strong { color: #203E96; margin-right: 4px; }

@media (max-width: 768px){
  .metrics .pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-inline: 12px;
    gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .metrics .pills li {
    flex: 0 0 70vw;
    max-width: 80vw;
    scroll-snap-align: start;
  }
  .metrics .pills::-webkit-scrollbar { height: 0; }
}

/* Centrar título */
.page-que-es .qe-benefits h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}