/* Poppins es la tipografía de todo el diseño de Figma — sin esto el body hereda el stack de
   fuentes de sistema de Bootstrap, que a simple vista se nota distinto del diseño (ver el link
   de Google Fonts en layouts/main.php, que es lo que trae los pesos). Se aplica en el body (no
   en cada selector .quedebo-*) para que herede a cualquier elemento nuevo sin tener que acordarse
   de declarar la fuente de nuevo cada vez. */
body {
    font-family: 'Poppins', sans-serif;
}
.quedebo-navbar {
    padding-top: .75rem;
    padding-bottom: .75rem;
    box-shadow: 0px 4px 8px 0px rgba(42,24,89,0.1);
}
.quedebo-navbar-flex {
    display: flex;
    align-items: center;
}
.quedebo-hero {
    background: #F7F7F7;
    /* El padding-top era 2.5rem porque compartía el aire de arriba con el navbar de Credifama
       que había debajo (layouts/main.php) — sin ese navbar, la página queda pegada contra el
       borde del viewport y se ve apretada. Más grande acá para que el hero respire solo. */
    padding: 4rem 0;
}
/* space-between: las dos columnas tienen max-width y en pantallas anchas no llenan el
   container; sin esto quedaban amontonadas a la izquierda y la tarjeta no se alineaba con el
   borde derecho de las secciones de abajo. Al apilarse en mobile cada fila tiene un solo item,
   asi que no cambia nada ahi. */
.quedebo-hero-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2.5rem;
}
.quedebo-hero-left {
    flex: 1 1 420px;
    max-width: 582px;
    padding-top: 1.5rem;
}
.quedebo-hero-right {
    flex: 0 1 518px;
    max-width: 518px;
}
.quedebo-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: 1px solid #E5E5EA;
    border-radius: 999px;
    padding: .4rem .9rem;
    font-size: .85rem;
    color: #2A1859;
    margin-bottom: 1rem;
    box-shadow: 0px 4px 3.65px 0px rgba(0,86,176,0.12);
}
.quedebo-badge-icon {
    width: 18px;
    height: 14px;
    flex-shrink: 0;
}
.quedebo-title {
    margin-bottom: 1rem;
}
.quedebo-title-logo {
    width: 305px;
    max-width: 100%;
    height: auto;
}
.quedebo-subtitle {
    font-size: 2rem;
    font-weight: 600;
    color: #6B757D;
    margin-bottom: 1rem;
}
.quedebo-text {
    color: #343940;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}
/* Spec de Figma: en desktop fila con wrap (caben 2 chips por línea y el tercero baja solo); en
   mobile columna fija — el texto de los chips es corto y el wrap natural no alcanza a apilarlos
   solo, así que ahí se fuerza explícito (ver el breakpoint más abajo). */
.quedebo-chips {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .5rem;
}
.quedebo-chip {
    background: #FFD700;
    color: #343940;
    font-weight: 400;
    font-size: 1rem;
    padding: .4rem .75rem;
    border-radius: 999px;
}

/* card */
.quedebo-card {
    background: #fff;
    border: 1px solid #DFDFDF;
    border-radius: 1.1rem;
    box-shadow: 0 4px 20px -5px rgba(108,117,125,.5);
    padding: 1.5rem 2.5rem;
    width: 100%;
}
.quedebo-card-steps {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.5rem;
}
.quedebo-card-step {
    flex: 1 1 0;
    height: 8px;
    border-radius: 18px;
    background: #F7F7F7;
}
.quedebo-card-step-active {
    background: #E1DBF0;
}
.quedebo-card-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
}
.quedebo-card-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #FFD700;
    color: #2A1859;
    font-weight: 700;
    flex-shrink: 0;
}
.quedebo-card-title {
    font-weight: 700;
    color: #2A1859;
    font-size: 1.25rem;
    margin: 0;
}
.quedebo-field {
    display: block;
    margin-bottom: 1.5rem;
}
.quedebo-field-label {
    display: block;
    font-size: .875rem;
    color: #50585F;
    margin-bottom: .5rem;
}
.quedebo-input {
    background-color: #fff;
    color: #2A1859;
    padding: 1rem 1.5rem;
    border-radius: .875rem;
    border-color: #DFDFDF;
}
.quedebo-input:focus {
    background-color: #fff;
    color: #2A1859;
    border-color: #2A1859;
    box-shadow: none;
}
.quedebo-input::placeholder {
    color: #50585F;
}
/* el autofill de Chrome repinta el input: no se puede sobreescribir background-color,
   asi que se tapa con una sombra interna del color de fondo. */
.quedebo-input:-webkit-autofill,
.quedebo-input:-webkit-autofill:hover,
.quedebo-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #2A1859;
    caret-color: #2A1859;
}
.quedebo-checklist {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.quedebo-checkbox,
.quedebo-captcha {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    position: relative;
}
.quedebo-checkbox-input {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    margin: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.quedebo-checkbox-box {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: .5rem;
    border: 1.5px solid #DFDFDF;
    background: #fff;
    flex-shrink: 0;
}
.quedebo-checkbox-input:checked + .quedebo-checkbox-box {
    background: #2A1859;
    border-color: #2A1859;
}
.quedebo-checkbox-input:checked + .quedebo-checkbox-box::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 8px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.quedebo-checkbox-text {
    font-size: .95rem;
    color: #212529;
}
.quedebo-checkbox-text a {
    color: #0056B0;
    font-weight: 500;
}
.quedebo-captcha {
    background: #F7F7F7;
    border: 1px dashed #DFDFDF;
    border-radius: .875rem;
    padding: .9rem 1rem;
    margin-bottom: 1rem;
}
.quedebo-captcha .quedebo-checkbox-text {
    color: #50585F;
}
.quedebo-captcha-widget {
    margin-bottom: 1rem;
    /* El modo flexible de Turnstile toma el ancho del contenedor: sin esto el div no tiene ancho
       propio de referencia en algunos navegadores. */
    width: 100%;
}
.quedebo-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: #DFDFDF;
    color: #6C757D;
    font-weight: 600;
    font-size: 1.125rem;
    padding: 1rem 1.5rem;
    border-radius: .875rem;
    margin-bottom: 1rem;
    border-color: transparent;
    opacity: 1;
}
/* El "→" es un caracter Unicode que muchas fuentes renderizan mas chico que el texto que lo
   rodea: se lo agranda a mano para que se lea al mismo peso visual que el label del boton. El
   centrado vertical real lo da el align-items:center del flex de arriba — vertical-align no
   alcanza acá porque agrandar el span con font-size corre su línea base. */
.quedebo-btn span[aria-hidden="true"] {
    font-size: 1.25em;
    line-height: 1;
}
.quedebo-btn:disabled {
    background-color: #DFDFDF !important;
    border-color: transparent !important;
    color: #6C757D !important;
    opacity: 1 !important;
}
.quedebo-btn:not(:disabled) {
    background: #2A1859;
    color: #fff;
}
.quedebo-btn:not(:disabled):hover {
    background: #3d2478;
    color: #fff;
}
.quedebo-card-divider {
    margin: 0 0 1rem;
}
.quedebo-card-legal {
    font-size: .8rem;
    color: #6C757D;
    margin-bottom: 0;
}

/* generic section */
.quedebo-section {
    padding: 3rem 0;
}
.quedebo-section-gray {
    background: #F7F7F7;
}
.quedebo-section-title {
    font-weight: 700;
    color: #2A1859;
    font-size: 2rem;
    margin-bottom: .5rem;
}
.quedebo-section-text {
    color: #343A40;
    max-width: 900px;
    margin-bottom: 2rem;
}

/* benefits */
.quedebo-benefits {
    background: #2A1859;
    border-radius: 1.875rem;
    box-shadow: 0px 6px 10px 2px rgba(42,24,89,0.15);
    padding: 4rem 3rem;
}
.quedebo-benefits-eyebrow {
    color: rgba(255,255,255,.6);
    font-weight: 700;
    font-size: .95rem;
    text-transform: uppercase;
    margin-bottom: .5rem;
}
.quedebo-benefits-title {
    color: #fff;
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}
.quedebo-benefits-divider {
    border-color: rgba(255,255,255,.15);
    margin-bottom: 2.5rem;
}
.quedebo-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.quedebo-benefit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 1.25rem;
    margin-bottom: .5rem;
}
.quedebo-benefit-icon {
    width: 48px;
    height: 48px;
}
.quedebo-benefit-icon-bg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: .875rem;
    background: #FFD700;
    padding: .75rem;
}
.quedebo-benefit-arrow {
    width: 30px;
    height: 30px;
}
.quedebo-benefit-eyebrow {
    color: rgba(255,255,255,.6);
    font-weight: 700;
    font-size: .95rem;
    text-transform: uppercase;
    margin-bottom: .25rem;
}
.quedebo-benefit-heading {
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: .25rem;
}
.quedebo-benefit-text {
    color: rgba(255,255,255,.7);
    margin-bottom: 0;
}
.quedebo-benefit-text strong {
    color: #fff;
}

/* highlight grid */
.quedebo-highlight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
}
.quedebo-highlight {
    border-radius: 1.875rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
}
.quedebo-highlight-yellow {
    background: #FFD700;
}
.quedebo-highlight-white {
    background: #fff;
    box-shadow: 0px 4px 3.65px 0px rgba(0,86,176,0.12);
    justify-content: flex-start;
}
.quedebo-highlight-title {
    font-weight: 700;
    color: #2A1859;
    /* Spec de Figma (typography/heading/h2): 24px, tracking -0.24px, line-height 1.3. */
    font-size: 1.5rem;
    line-height: 1.3;
    letter-spacing: -.015rem;
    margin-bottom: .5rem;
}
.quedebo-highlight-body {
    color: #343A40;
    /* Spec de Figma: 16px, tracking -0.16px. */
    font-size: 1rem;
    letter-spacing: -.01rem;
    margin: 0;
}
.quedebo-highlight-white .quedebo-highlight-body {
    color: #6C757D;
}
/* Los 3 stats van en una sola fila (lado a lado), cada uno como su propia columna: el numero
   grande arriba, el label chico debajo, centrados dentro del chip — ver spec de Figma. */
.quedebo-stats {
    display: flex;
    flex-direction: row;
    gap: .75rem;
}
.quedebo-stat {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .25rem;
    background: rgba(255,255,255,.2);
    border-radius: .875rem;
    padding: .75rem .5rem;
}
.quedebo-stat-number {
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -.0125rem;
    color: #343A40;
    margin-bottom: 0;
}
.quedebo-stat-label {
    font-size: .875rem;
    line-height: 1.35;
    letter-spacing: -.0175rem;
    color: #343A40;
    margin-bottom: 0;
}
.quedebo-btn-tertiary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: transparent;
    color: #2A1859;
    font-weight: 600;
    font-size: 1.125rem;
    padding: 1rem 1.5rem;
    border-radius: .875rem;
    align-self: flex-start;
}
.quedebo-highlight-note {
    background: #F7F7F7;
    border-radius: .875rem;
    padding: 1rem 1.5rem;
    color: #6C757D;
}
.quedebo-highlight-note strong {
    color: #6C757D;
}

/* testimonials */
.quedebo-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.quedebo-testimonial-card {
    background: #fff;
    border: 1px solid #DFDFDF;
    border-radius: 1.125rem;
    box-shadow: 0px 4px 4px 0px rgba(42,24,89,0.1);
    padding: 1.5rem;
}
.quedebo-testimonial-user {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}
.quedebo-testimonial-name {
    font-weight: 500;
    color: #27673B;
    font-size: 1.25rem;
}
.quedebo-testimonial-divider {
    margin: 0 0 1rem;
}
.quedebo-testimonial-text {
    color: #343A40;
    margin: 0;
    font-size: .95rem;
}

/* FAQ */
.quedebo-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.quedebo-faq-col {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.quedebo-accordion-item {
    background: #fff;
    border: 1px solid #DFDFDF;
    border-radius: .875rem;
    overflow: hidden;
}
.quedebo-accordion-item:has(.quedebo-accordion[aria-expanded="true"]) {
    border-color: #2A1859;
}
.quedebo-accordion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 1rem;
    color: #343A40;
    font-weight: 500;
    text-align: left;
}
.quedebo-accordion-chev {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    transform: rotate(90deg);
    transition: transform .2s ease;
}
.quedebo-accordion[aria-expanded="true"] .quedebo-accordion-chev {
    transform: rotate(-90deg);
}
.quedebo-accordion-panel {
    margin: 0 1rem;
    padding: 1rem 0;
    border-top: 1px solid #DFDFDF;
}
.quedebo-accordion-panel p {
    color: #6C757D;
    font-size: .875rem;
    margin: 0;
}
.quedebo-accordion-panel p + p {
    margin-top: .75rem;
}
.quedebo-btn.quedebo-btn-inline {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

/* footer */
.quedebo-footer {
    background: #2A1859;
    border-top: 4px solid #05F29B;
    padding: 5rem 0;
    color: #fff;
}
.quedebo-footer-logo {
    position: relative;
    width: 298px;
    height: 62px;
    margin: 0 auto 3rem;
}
.quedebo-footer-logo-arc {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 75px;
    height: auto;
}
.quedebo-footer-logo-star {
    position: absolute;
    height: auto;
}
/* Spec de Figma (node 239:2063, logo_credifama 298x62): posiciones/anchos exactos de cada
   pieza de la estrella, calculados desde los insets del diseño (no son intercambiables,
   cada Vector tiene su propio ancho). */
.quedebo-footer-logo-star-top {
    left: 33px;
    top: 34px;
    width: 27px;
}
.quedebo-footer-logo-star-left {
    left: 19px;
    top: 21px;
    width: 20px;
}
.quedebo-footer-logo-star-right {
    left: 33px;
    top: 20px;
    width: 19px;
}
.quedebo-footer-logo-wordmark {
    position: absolute;
    left: 88px;
    top: 8px;
    width: 208px;
    height: auto;
}
.quedebo-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}
.quedebo-footer-heading {
    font-weight: 500;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}
.quedebo-footer-social {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    opacity: .7;
}
.quedebo-footer-social a {
    display: inline-flex;
    transition: opacity .2s ease;
}
.quedebo-footer-social a:hover {
    opacity: .7;
}
.quedebo-footer-social img {
    width: 24px;
    height: 24px;
}
.quedebo-footer-links {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    opacity: .7;
}
.quedebo-footer-links a {
    color: #fff;
    text-decoration: none;
}
.quedebo-footer-links a:hover {
    text-decoration: underline;
}
.quedebo-footer-partners {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.quedebo-footer-partner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 280px;
}
.quedebo-footer-partner img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
}
.quedebo-footer-partner p {
    opacity: .7;
    font-size: .9rem;
    margin: 0;
}
.quedebo-footer-divider {
    border-color: rgba(255,255,255,.15);
    margin-bottom: 1rem;
}
.quedebo-footer-copy {
    margin: 0;
    font-size: .9rem;
}


/* ---- estados del campo ---- */
.quedebo-input.is-error {
    border-color: #DC3545;
}
.quedebo-field-error {
    display: block;
    color: #DC3545;
    font-size: .875rem;
    margin-top: .5rem;
}
.quedebo-field-hint {
    display: block;
    color: #6C757D;
    font-size: .8rem;
    margin-top: .5rem;
}
.quedebo-input:disabled,
.quedebo-input[readonly] {
    background-color: #DFDFDF;
    border-color: #DFDFDF;
    color: #6C757D;
}

/* checkbox marcado en verde (captcha resuelto) */
.quedebo-checkbox-input:checked + .quedebo-checkbox-box.is-success {
    background: #28A745;
    border-color: #28A745;
}

/* ---- bloqueo por exceso de intentos con CI invalida ---- */
.quedebo-blocked {
    text-align: center;
    padding: 2rem 1rem 1rem;
}
.quedebo-blocked-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 1.25rem;
}
.quedebo-blocked-title {
    font-weight: 700;
    color: #2A1859;
    font-size: 1.5rem;
    margin: 0 0 1rem;
}
.quedebo-blocked-text {
    color: #50585F;
    font-size: .95rem;
    margin: 0;
}

/* ---- card: descripcion bajo el titulo ---- */
.quedebo-card-desc {
    color: #50585F;
    font-size: .875rem;
    margin: -1rem 0 1.5rem;
}

/* ---- paso 3: inputs de codigo ---- */
.quedebo-code-inputs {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.5rem;
}
.quedebo-code-input {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 1rem .5rem;
    border-radius: .875rem;
    border: 1px solid #DFDFDF;
    background: #fff;
    color: #50585F;
    font-size: 1rem;
}
.quedebo-code-input:focus {
    outline: none;
    border-color: #2A1859;
    background: #fff;
}
/* En la casilla activa el "0" de guía se superponía con el cursor: se oculta solo ahí, las demás
   lo siguen mostrando. Transparente y no display:none, para que el cursor no salte de lugar. */
.quedebo-code-input:focus::placeholder {
    color: transparent;
}
.quedebo-code-input:-webkit-autofill,
.quedebo-code-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #50585F;
}
.quedebo-code-input.is-success {
    border-color: #28A745;
    color: #28A745;
}
.quedebo-code-input.is-error {
    border-color: #DC3545;
    color: #DC3545;
}
.quedebo-code-input:disabled {
    background: #F7F7F7;
    color: #6C757D;
}

/* aviso dentro del card (maximo de intentos del codigo) */
.quedebo-notice {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #FFF9E6;
    border: 1px solid #F2E74B;
    border-radius: .875rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.quedebo-notice-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #50585F;
}
.quedebo-notice-text {
    margin: 0;
    color: #50585F;
    font-size: .875rem;
}

/* ---- botones terciarios del card ---- */
.quedebo-btn-link {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    font-weight: 600;
    padding: 1rem 1.5rem;
    border-radius: .875rem;
    color: #6C757D;
}
.quedebo-btn-link-active {
    color: #2A1859;
    font-size: .875rem;
    padding: .5rem 1rem;
    text-decoration: underline;
}
.quedebo-btn-link:disabled {
    color: #6C757D;
    cursor: default;
}

/* ---- panel de resultados ---- */
/* Pegado al borde derecho de la ventana, no al del container: queda fuera de la grilla del hero
   y la tarjeta de pasos se ve por detras, a la izquierda, oscurecida por el backdrop (mismo tono
   que los modales de gestion compartida) para que el foco quede en el panel. */
.quedebo-results-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: 1rem;
    background: rgba(42, 24, 89, .45);
}
.quedebo-results-panel {
    --results-pad: 1.5rem;
    background: #F7F7F7;
    border: 1px solid #DFDFDF;
    box-shadow: 0 4px 20px -5px rgba(108,117,125,.5);
    padding: var(--results-pad) 2rem;
    /* Ancho fijo en desktop (no 100% de un flex item, que en pantallas muy anchas lo estiraba
       mucho más de lo que pedía el diseño): el panel siempre mide 600px ahí donde entra. El
       max-width es la red de seguridad para ventanas MÁS ANGOSTAS que 600px (notebook con zoom,
       ventana redimensionada a mano): sin esto el panel desbordaba el body y metía scroll
       horizontal a toda la página, con el propio overlay quedando descentrado respecto a lo que
       se veía en pantalla. En mobile/tablet (ver @media 991.98px) el panel pasa a ser ancho
       completo a propósito — ahí es un bottom sheet, no este panel lateral de tamaño fijo. */
    width: 600px;
    max-width: 100%;
    /* Alto FIJO (no max-height): con pocas deudas el panel no se achica al contenido, deja
       espacio en blanco abajo — mismo tamaño siempre, como en el diseño. El listado de deudas es
       de largo variable: si no entra, scrollea dentro del panel en vez de estirar la pagina.
       2rem deja aire arriba y abajo respecto al alto de la ventana. */
    height: calc(100vh - 2rem);
    overflow-y: auto;
    /* Esquinas rectas contra el borde de la ventana. */
    border-radius: 1.125rem 0 0 1.125rem;
    border-right: 0;
    transition: transform .25s ease;
}
/* Estado "entreabierto" (spec de Figma): al cerrar, el panel NO desaparece — se corre hacia
   afuera de la pantalla dejando solo un borde + el arranque del contenido asomando. Clickeable
   en toda esa porción visible para reabrirlo del todo (ver resultsPeekOverlay en el JS), sin el
   backdrop oscuro de cuando está abierto (ver .is-peek en el overlay, más abajo). El mismo
   patrón vale para desktop (corre a la derecha) y mobile (corre hacia abajo, @media 991.98px). */
.quedebo-results-overlay.is-peek {
    pointer-events: none;
    background: transparent;
}
.quedebo-results-overlay.is-peek .quedebo-results-panel {
    transform: translateX(calc(100% - 48px));
    pointer-events: auto;
    cursor: pointer;
}
.quedebo-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    /* La CI y el boton de cerrar quedan a la vista mientras se scrollean las deudas. El fondo
       propio evita que las tarjetas se vean pasar por detras, y los margenes negativos
       compensan el padding del panel (--results-pad, distinto en mobile). */
    position: sticky;
    top: calc(var(--results-pad) * -1);
    background: #F7F7F7;
    margin-top: calc(var(--results-pad) * -1);
    padding: var(--results-pad) 0 .5rem;
    z-index: 1;
}
.quedebo-results-ci {
    background: #E1DBF0;
    color: #2A1859;
    font-weight: 700;
    font-size: .875rem;
    padding: .25rem .75rem;
    border-radius: 61px;
}
.quedebo-results-close {
    background: transparent;
    border: 0;
    padding: 0;
    width: 28px;
    height: 28px;
}
.quedebo-results-title {
    color: #2A1859;
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
}
.quedebo-results-title strong {
    font-weight: 700;
}
/* Sin deudas: el titulo va en verde, es la buena noticia de la pantalla. */
.quedebo-results-title-empty {
    color: #1E9E5A;
    margin-bottom: 1rem;
}
.quedebo-results-empty-text {
    color: #50585F;
    font-size: .95rem;
    margin-bottom: 1rem;
}
.quedebo-results-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* tarjeta de deuda */
.quedebo-debt-card {
    background: #fff;
    border: 1px solid #DFDFDF;
    border-radius: .875rem;
    box-shadow: 0 8px 8px -5px rgba(42,24,89,.1);
    padding: 1rem 1rem 1.5rem;
}
.quedebo-debt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.quedebo-debt-tag {
    background: #FFD700;
    color: #2A1859;
    font-weight: 600;
    font-size: .875rem;
    padding: .25rem .75rem;
    border-radius: 61px;
}
/* Spec de Figma (Card / Resultado, "image 54"): marco fijo 102x40, la imagen llena el marco
   (cover, no contain) y queda "esquinada" arriba a la derecha en vez de flotar centrada con
   aire alrededor cuando el logo real tiene una proporcion muy distinta a la del marco. */
.quedebo-debt-logo-frame {
    display: block;
    width: 102px;
    height: 40px;
    overflow: hidden;
    flex-shrink: 0;
}
.quedebo-debt-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right top;
}
.quedebo-debt-title {
    color: #2A1859;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .5rem;
}
.quedebo-debt-subtitle {
    color: #6C757D;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.quedebo-debt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}
.quedebo-debt-chip {
    background: #F7F7F7;
    color: #343A40;
    font-size: .875rem;
    padding: .25rem .5rem;
    border-radius: 4px;
}
.quedebo-debt-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #2A1859;
    color: #fff;
    font-weight: 600;
    font-size: .875rem;
    padding: .5rem 1rem;
    border: 0;
    border-radius: .875rem;
}
.quedebo-debt-cta img {
    width: 20px;
    height: 20px;
}
.quedebo-debt-cta-sent {
    background: #DFDFDF;
    color: #6C757D;
    cursor: default;
}
.quedebo-debt-cta-sent img {
    display: none;
}

/* CTA de registro al pie del panel */
.quedebo-register-note {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border-radius: .875rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.quedebo-register-note img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.quedebo-register-note p {
    color: #6C757D;
    font-size: 1rem;
    margin: 0;
}
.quedebo-btn-secondary {
    display: block;
    width: 100%;
    background: #E1DBF0;
    color: #2A1859;
    font-weight: 600;
    font-size: 1.125rem;
    padding: 1rem 1.5rem;
    border: 0;
    border-radius: .875rem;
    margin-bottom: 1.5rem;
}
/* Sin deudas el registro es la unica accion de la pantalla, va en violeta lleno. */
.quedebo-btn-secondary-solid {
    background: #2A1859;
    color: #fff;
}
.quedebo-results-legal {
    color: #6C757D;
    font-size: .875rem;
    margin: 0;
}

/* ---- panel vacio: sin deudas ---- */
.quedebo-empty-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
}

@media (max-width: 991.98px) {
    .quedebo-benefits-grid,
    .quedebo-testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .quedebo-highlight-grid,
    .quedebo-faq-grid,
    .quedebo-footer-grid {
        grid-template-columns: 1fr;
    }
    .quedebo-hero-left,
    .quedebo-hero-right {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .quedebo-hero-left {
        padding-top: 0;
    }
    /* Sin lugar para dejarlo al costado: el panel cubre la pantalla, anclado abajo, y scrollea
       dentro. El hero queda tapado en vez de asomando por detras. */
    .quedebo-results-overlay {
        /* El backdrop sigue cubriendo toda la ventana (inset: 0 de la regla base); el padding de
           arriba baja el panel para que el header de Credifama asome, oscurecido, por encima. */
        padding: 3.5rem 0 0;
        align-items: stretch;
    }
    .quedebo-results-panel {
        max-width: 100%;
        /* El height fijo del panel en la regla base es cosa de desktop (panel lateral a tamaño
           de diseño); acá en mobile sigue siendo un bottom sheet que se ajusta al contenido. */
        height: auto;
        max-height: 100%;
        border-radius: 1.125rem 1.125rem 0 0;
        border-right: 1px solid #DFDFDF;
        border-bottom: 0;
    }
    /* Mismo estado "entreabierto" que en desktop, pero corriendo hacia ABAJO (acá el panel es un
       bottom sheet, no uno lateral): deja asomar el borde superior + el titulo de resultados. */
    .quedebo-results-overlay.is-peek .quedebo-results-panel {
        transform: translateY(calc(100% - 48px));
    }
}

@media (max-width: 575.98px) {
    .quedebo-benefits-grid {
        grid-template-columns: 1fr;
    }
    .quedebo-chips {
        flex-direction: column;
    }
    /* Los 3 stats (+4 años/+20.000/+12.000) vuelven a apilarse en mobile: en fila, como quedan en
       desktop, el texto de cada chip queda ilegible a ese ancho. */
    .quedebo-stats {
        flex-direction: column;
        gap: .5rem;
    }
    .quedebo-stat {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 1rem;
        padding: .5rem 1.25rem;
    }
    .quedebo-stat-number {
        white-space: nowrap;
    }
    .quedebo-stat-label {
        flex: 1 1 0;
    }
    /* Spec de Figma (node 239:2020): en mobile los testimonios no se apilan en columna, son un
       carrusel horizontal con snap — una card centrada y las vecinas asomando apenas en los
       bordes (ver las x negativas/fuera de rango de las cards en el diseño). Cards a ancho fijo
       en vez de fr: el contenido de cada card no debe angostarse, tiene que desbordar y scrollear. */
    .quedebo-testimonial-grid {
        display: flex;
        grid-template-columns: none;
        gap: 1.25rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Sin esto el ultimo elemento no puede llegar a snapear centrado: no hay espacio a la
           derecha para que el scroll siga corriendo despues de esa card. */
        padding: 0 calc(50% - 160px);
        /* Exactamente el padding del .container (12px en Bootstrap 5, mismo criterio que
           .quedebo-benefits): con mas que eso el carrusel sobresalia del viewport, la pagina
           quedaba mas ancha que la pantalla y en el celular se podia correr de costado,
           mostrando una franja blanca a la derecha de toda la pagina. */
        margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -.5);
    }
    .quedebo-testimonial-grid::-webkit-scrollbar {
        display: none;
    }
    .quedebo-testimonial-card {
        flex: 0 0 320px;
        scroll-snap-align: center;
    }
    /* Valores exactos del diseño mobile en Figma (node 239:1954): padding 24px, gap 16px entre
       bloques, icono 45x45 con 14px de radio, tracking negativo en eyebrow/heading. En este
       diseño la seccion es ancho completo de pantalla (sin el .container centrado que usan
       highlights/testimonials/FAQ) — se "rompe" el padding del .container padre con margen
       negativo igual a ese padding, y se lo vuelve a poner como padding propio para que las
       esquinas redondeadas queden pegadas al borde y el contenido no toque los bordes.
       12px es el 0.75rem por lado del .container de Bootstrap (--bs-gutter-x: 1.5rem / 2). */
    .quedebo-benefits {
        margin-left: -12px;
        margin-right: -12px;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        padding-left: calc(1.5rem + 12px);
        padding-right: calc(1.5rem + 12px);
    }
    .quedebo-benefits-eyebrow {
        letter-spacing: -.01rem;
    }
    .quedebo-benefits-title {
        font-size: 1.5rem;
        letter-spacing: -.015rem;
    }
    .quedebo-benefits-divider {
        margin-bottom: 1rem;
    }
    /* La flecha lateral solo tiene sentido guiando la vista de una columna a la siguiente en el
       grid de 4 columnas de desktop. Apilados en una sola columna, se reemplaza por la flecha
       "hacia abajo" del diseño (mismo asset que la lateral, rotado 90°) entre cada paso. */
    .quedebo-benefit-arrow {
        display: none;
    }
    .quedebo-benefits-grid {
        gap: .5rem;
    }
    .quedebo-benefit {
        display: grid;
        grid-template-columns: 45px 1fr;
        column-gap: 1rem;
        row-gap: 0;
        padding: .5rem 0;
    }
    /* Reordena visualmente sin tocar el HTML (que en desktop ya funciona apilado): el icono
       ocupa las filas 1 y 2 (las de "paso N" + titulo) pero SIN estirarse — align-self: start
       lo deja arriba, sin obligar a esas dos filas a medir 45px cada una. Sin el span de 2 filas,
       el icono solo ocupaba la fila 1 y el titulo (fila 2) heredaba esa altura completa como
       hueco antes de empezar, separandolo visiblemente del eyebrow de arriba. */
    .quedebo-benefit-header {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: start;
        margin-bottom: 0;
    }
    .quedebo-benefit-icon,
    .quedebo-benefit-icon-bg {
        width: 45px;
        height: 45px;
    }
    .quedebo-benefit-eyebrow {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        justify-self: start;
        text-align: left;
        /* Spec de Figma (typography/label/large): 16px, tracking -0.48px. */
        font-size: 1rem;
        line-height: normal;
        letter-spacing: -.03rem;
        margin-bottom: 0;
        /* El line-height "normal" de Poppins deja aire arriba del texto visible: sin este ajuste
           el bloque "paso N" + titulo queda mas abajo que el icono de al lado. */
        margin-top: -.25rem;
    }
    .quedebo-benefit-heading {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        justify-self: start;
        text-align: left;
        /* Spec de Figma (typography/heading/h2): 24px, tracking -0.72px, line-height "normal"
           (que Poppins Bold renderiza en ~1.5, no el 1.2 generico que tenia antes). */
        font-size: 1.5rem;
        line-height: normal;
        letter-spacing: -.045rem;
        margin: 0;
    }
    .quedebo-benefit-text {
        grid-column: 1 / -1;
        grid-row: 3;
        letter-spacing: -.03rem;
        margin-top: .75rem;
    }
    .quedebo-benefit:not(:last-child) {
        position: relative;
        padding-bottom: 2.5rem;
    }
    .quedebo-benefit:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 20px;
        height: 20px;
        background: url('../images/landing/benefit-step-arrow.svg') center / contain no-repeat;
        transform: translateX(-50%) rotate(90deg);
    }
    .quedebo-card {
        /* 20px, como en el diseño mobile de Figma (popup a 412px): el 2.5rem horizontal de
           .quedebo-card de base es el valor de desktop, y en mobile comprimia demasiado el
           ancho util del contenido — los chips y el texto del hero se apretaban visiblemente. */
        padding: 2rem 1.25rem;
    }
    .quedebo-hero {
        /* Mismo motivo que la regla base: sin navbar arriba, el padding-top chico quedaba
           apretado. */
        padding: 2.5rem 0 2rem;
    }
    .quedebo-hero-flex {
        gap: 1.5rem;
    }
    .quedebo-title-logo {
        width: 240px;
    }
    .quedebo-subtitle {
        font-size: 1.5rem;
    }
    .quedebo-text {
        font-size: 1rem;
    }
    .quedebo-chip {
        font-size: .875rem;
    }
    .quedebo-section {
        padding: 2rem 0;
    }
    .quedebo-section-title,
    .quedebo-highlight-title {
        font-size: 1.5rem;
    }
    .quedebo-benefits-title {
        font-size: 1.75rem;
    }
    .quedebo-highlight {
        padding: 1.5rem;
    }
    .quedebo-footer {
        padding: 3rem 0;
    }
    .quedebo-footer-logo {
        width: 211px;
        height: 44px;
        margin-bottom: 2rem;
    }
    .quedebo-footer-logo-arc {
        left: 1px;
        top: 1px;
        width: 53px;
    }
    .quedebo-footer-logo-star-top {
        left: 23px;
        top: 24px;
        width: 19px;
    }
    .quedebo-footer-logo-star-left {
        left: 14px;
        top: 15px;
        width: 14px;
    }
    .quedebo-footer-logo-star-right {
        left: 23px;
        top: 14px;
        width: 14px;
    }
    .quedebo-footer-logo-wordmark {
        left: 62px;
        top: 6px;
        width: 147px;
    }
    /* Spec de Figma (node 239:2063): en mobile el footer es un bloque unico, todo centrado
       (logo, headings, links, socials, partners) en vez del grid de 3 columnas de desktop. */
    .quedebo-footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }
    .quedebo-footer-social {
        justify-content: center;
    }
    .quedebo-footer-links {
        align-items: center;
    }
    .quedebo-footer-partners {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    .quedebo-footer-partner {
        flex-direction: column;
        text-align: center;
    }
    .quedebo-results-panel {
        --results-pad: 1.25rem;
        padding: var(--results-pad) 1rem;
    }
    .quedebo-results-title {
        font-size: 1.25rem;
    }
    .quedebo-debt-head {
        gap: 1rem;
    }
    .quedebo-code-inputs {
        gap: .35rem;
    }
    .quedebo-code-input {
        padding: .85rem .25rem;
    }
    .quedebo-btn.quedebo-btn-inline {
        width: 100%;
        display: flex;
    }
}

/* resultado de la consulta de CI (prueba de integracion con la app) */
.quedebo-result {
    margin: 0 0 1rem;
    padding: .875rem 1rem;
    border-radius: .875rem;
    font-size: .95rem;
    font-weight: 500;
}
.quedebo-result-loading {
    background: #F7F7F7;
    color: #6C757D;
}
.quedebo-result-success {
    background: #E1DBF0;
    color: #2A1859;
}
.quedebo-result-empty {
    background: #F7F7F7;
    color: #343A40;
}
.quedebo-result-error {
    background: #FDECEE;
    color: #DC3545;
}

/* ---- vistas de gestion compartida (Viemventura/Mercurius GC) y autogestion ----
   Reemplazan a #quedebo-results-with-debts como vistas DENTRO del mismo .quedebo-results-panel
   (spec de Figma: un paso más de la misma tarjeta, no un modal flotante aparte) — heredan su
   padding/scroll, así que .quedebo-panel-view no necesita fondo, borde ni tamaño propios. */
.quedebo-viemventura-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.quedebo-viemventura-badge {
    display: inline-flex;
    align-items: center;
    background: #E1DBF0;
    color: #2A1859;
    font-weight: 600;
    font-size: .8rem;
    padding: .35rem .75rem;
    border-radius: 999px;
}
.quedebo-viemventura-title {
    font-weight: 700;
    color: #2A1859;
    font-size: 1.375rem;
    margin-bottom: 1rem;
}
.quedebo-viemventura-title-success {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #1F9D55;
}
.quedebo-viemventura-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #1F9D55;
    flex-shrink: 0;
}
.quedebo-viemventura-check img {
    width: 12px;
    height: 12px;
}
.quedebo-viemventura-text {
    color: #50585F;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}
.quedebo-viemventura-text-sm {
    font-size: .875rem;
    margin-bottom: 1rem;
}
.quedebo-viemventura-subtitle {
    font-weight: 700;
    color: #2A1859;
    font-size: 1.05rem;
    margin-bottom: .5rem;
}
.quedebo-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%2350585F' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}
.quedebo-password-field {
    position: relative;
}
.quedebo-password-field .quedebo-input {
    padding-right: 3rem;
}
.quedebo-password-toggle {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quedebo-viemventura-link {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    color: #2A1859;
    font-weight: 600;
    font-size: 1rem;
    padding: .5rem;
    margin-top: 1rem;
    text-align: center;
}

/* ---- Términos y Condiciones (site/terminos) ---- */
.quedebo-legal {
    background: #F7F7F7;
    padding: 3rem 0 4rem;
}
/* Columna angosta: un texto legal largo se lee mal a todo el ancho del container. */
.quedebo-legal-doc {
    background: #fff;
    border: 1px solid #DFDFDF;
    border-radius: 1.125rem;
    box-shadow: 0 4px 20px -5px rgba(108, 117, 125, .5);
    max-width: 860px;
    margin: 0 auto;
    padding: 2.5rem 3rem 3rem;
    color: #343940;
    line-height: 1.65;
}
.quedebo-legal-title {
    font-weight: 700;
    font-size: 2rem;
    color: #2A1859;
    margin-bottom: .25rem;
}
.quedebo-legal-brand {
    font-weight: 600;
    color: #6B757D;
    margin-bottom: .25rem;
}
.quedebo-legal-date {
    color: #6C757D;
    font-size: .95rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #DFDFDF;
}
.quedebo-legal-doc h2 {
    font-weight: 700;
    font-size: 1.25rem;
    color: #2A1859;
    margin: 2rem 0 .75rem;
}
.quedebo-legal-doc p {
    margin-bottom: .9rem;
    /* Los párrafos legales son largos y con URLs/correos: que no empujen el ancho en mobile. */
    overflow-wrap: anywhere;
}
.quedebo-legal-doc ul {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}
.quedebo-legal-doc li {
    margin-bottom: .5rem;
    overflow-wrap: anywhere;
}
.quedebo-legal-doc a {
    color: #0056B0;
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .quedebo-legal {
        padding: 1.5rem 0 2.5rem;
    }
    .quedebo-legal-doc {
        padding: 1.5rem 1.25rem 2rem;
    }
    .quedebo-legal-title {
        font-size: 1.5rem;
    }
}