/* ================================================================
   Z-Bombilla Finanzas — Landing Home CSS
   web/assets/css/home-finanzas.css

   DEPENDENCIAS: main.css (Shipping CDN) + styleZB.css + Bootstrap 5
   Este fichero SOLO añade estilos propios de la landing pública.
   No duplica lo que ya viene de main.css.
   ================================================================ */
:root{
    /* Marca */
    --zb-orange: #f26f03;
    --zb-orange-dark: #d85f02;

    /* Textos / bordes */
    --zb-text: #111827;
    --zb-muted: #6b7280;
    --zb-border: rgba(17, 24, 39, .10);

    /* Escala tipográfica */
    --fz-base: 15px;
    --fz-title: clamp(1.55rem, 2.2vw, 2.05rem);
    --fz-section: 1.30rem; /* un pelín más fino */
    --fz-small: .92rem;

    /* Pesos */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-xbold: 800;
}
.zb-step-n, .zb-feature-icon{
    font-size: 40px;
}
/* ---------------------------------------------------------------
   HERO — estilo atmosférico (inspirado en Shipping)
--------------------------------------------------------------- */
.zb-hero-finanzas {
    /* Fondo atmosférico: capa de imagen de fondo oscura + overlay azul marino */
    background:
        linear-gradient(160deg,
            rgba(8, 12, 40, 0.82) 0%,
            rgba(14, 30, 80, 0.78) 45%,
            rgba(10, 18, 55, 0.88) 100%),
        url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=1600&auto=format&fit=crop&q=60')
        center center / cover no-repeat !important;
    min-height: 100vh;              /* pantalla completa como Shipping */
    padding-top: 80px;              /* solo lo que ocupa la navbar fija */
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* Degradado sutil en la parte inferior para fundirse con la sección siguiente */
.zb-hero-finanzas::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent, rgba(8, 12, 40, 0.45));
    pointer-events: none;
    z-index: 0;
}

/* El container del hero debe estar por encima del ::after */
.zb-hero-finanzas > .container {
    position: relative;
    z-index: 1;
}

/* Las olas también por encima */
.zb-hero-finanzas .hero-waves {
    position: relative;
    z-index: 2;
}

.min-vh-hero {
    min-height: calc(100vh - 160px);
    padding: 2rem 0;
}

/* Píldora de badge sobre el título */
.zb-hero-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #fff;
    border-radius: 50px;
    padding: .35rem 1rem;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .3px;
    margin-bottom: 1.25rem;
    width: fit-content;
}

.zb-hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.18;
    margin-bottom: 1.25rem;
    font-family: 'Poppins', sans-serif;
}

.zb-hero-title span {
    color: #f26f03;
}

.zb-hero-sub {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.75;
    margin-bottom: 2rem;
    //max-width: 520px !important;
    max-width: 100% !important;
    //margin: 0 auto 30px 70px !important;
}

/* Trust row bajo los CTAs */
.zb-hero-trust {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.zb-hero-trust span {
    color: rgba(255, 255, 255, 0.70);
    font-size: .82rem;
}

/* Panel de cristal esmerilado para la columna de texto del hero */
.zb-hero-text-panel {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    padding: 2.5rem 2.25rem !important;
}

/* Versión XL de los botones CTA */
.zb-cta-lg {
    padding: .72rem 1.8rem !important;
    font-size: .975rem !important;
}
/* ==========================================================================
   CTA (botón)
   ========================================================================== */
.btn-zb{
    background-color: var(--zb-orange);
    border-color: var(--zb-orange);
    color: #fff;
    font-weight: var(--fw-bold);
    border-radius: 12px;
    padding: .72rem 1rem;
    box-shadow: 0 10px 20px rgba(242,111,3,.18);
}

.btn-zb:hover,
.btn-zb:focus{
    background-color: var(--zb-orange-dark);
    border-color: var(--zb-orange-dark);
    color: #fff;
}
/* ---------------------------------------------------------------
   HERO — MOCKUP DE FACTURA (visual decorativo)
--------------------------------------------------------------- */
.zb-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0 1rem;
}

.zb-doc-mockup {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.45);
    max-width: 340px;
    width: 100%;
    //overflow: hidden;
    //transform: rotate(-1.5deg);
    pointer-events: none;
    user-select: none;
}

.zb-doc-topbar {
    display: flex;
    align-items: center;
    background: #1a3a7c;
    color: #fff;
    padding: .75rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    gap: .5rem;
    margin: 0;          /* anula cualquier margin heredado del reset global */
    line-height: 1.4;   /* evita colapso de línea que genera micro-gap */
}

.zb-doc-body {
    padding: 1.1rem 1.1rem .5rem;
}

.zb-doc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .38rem 0;
    border-bottom: 1px solid #f2f2f2;
    font-size: .85rem;
    color: #333;
}

.zb-doc-label {
    color: #000;
    font-size: .98rem;
}

.zb-doc-total {
    background: #edf2ff;
    margin: .5rem -.3rem -.2rem;
    padding: .6rem .8rem !important;
    border-radius: 8px;
    font-weight: 700;
    font-size: .95rem;
    color: #1a3a7c;
    border-bottom: none !important;
}

.zb-doc-actions {
    display: flex;
    justify-content: space-around;
    padding: .7rem 1rem;
    background: #f8f9fe;
    border-top: 1px solid #ebebf5;
}

.zb-doc-btn {
    font-size: .75rem;
    color: #1a3a7c;
    padding: .22rem .55rem;
    border-radius: 5px;
    background: rgba(26, 58, 124, 0.09);
    font-weight: 500;
}

/* ---------------------------------------------------------------
   BARRA DE ESTADÍSTICAS
--------------------------------------------------------------- */
.zb-stats-bar {
    background: #f7f8ff;
    padding: 2.5rem 0;
    border-top: 1px solid #e8ecf8;
    border-bottom: 1px solid #e8ecf8;
}

.zb-stat {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.zb-stat-num {
    font-size: 2rem;
    font-weight: 800;
    color: #1a3a7c;
    line-height: 1;
    font-family: 'Poppins', sans-serif;
}

.zb-stat-label {
    font-size: .85rem;
    color: #666;
}

/* ---------------------------------------------------------------
   FEATURE TILES (about — tipos de documento)
--------------------------------------------------------------- */
.zb-feat-tile {
    background: #fff;
    border: 1.5px solid #e8ecf8;
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    cursor: default;
}

.zb-feat-tile:hover {
    border-color: #f26f03;
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(242, 111, 3, 0.10);
}

.zb-feat-tile i {
    font-size: 1.9rem;
    color: #1a3a7c;
    display: block;
    margin-bottom: .5rem;
}

.zb-feat-tile div {
    font-weight: 600;
    font-size: .855rem;
    color: #333;
}

/* ---------------------------------------------------------------
   FUNCIONALIDADES — icono cuadrado gradiente
--------------------------------------------------------------- */
.zb-feat-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.zb-feat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.09);
}

.zb-feat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1a3a7c 0%, #2d5cc8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.zb-feat-icon i {
    font-size: 1.3rem;
    color: #fff;
}

/* ---------------------------------------------------------------
   CUMPLIMIENTO FISCAL — sección oscura
--------------------------------------------------------------- */
.zb-compliance-section {
    background: linear-gradient(135deg, #0c1445 0%, #1e3a8a 100%) !important;
    padding: 5rem 0;
}

.zb-check-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #7dd3fc;
}

.zb-compliance-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.07);
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    padding: 3rem 3.5rem;
}

.zb-compliance-badge i {
    font-size: 4rem;
    color: #f26f03;
    margin-bottom: 1rem;
}

.zb-compliance-badge-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

.zb-compliance-badge-sub {
    font-size: .82rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: .3rem;
    text-align: center;
}

/* ---------------------------------------------------------------
   ECOSISTEMA Z-BOMBILLA — icono naranja
--------------------------------------------------------------- */
.zb-eco-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.zb-eco-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.09);
}

.zb-eco-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f26f03 0%, #d05800 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.zb-eco-icon i {
    font-size: 1.55rem;
    color: #fff;
}

/* ---------------------------------------------------------------
   PLANES PRECIOS
--------------------------------------------------------------- */
.zb-plan-card {
    border-radius: 12px !important;
    transition: transform .2s ease, box-shadow .2s ease;
}

.zb-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.09);
}

.zb-plan-featured {
    border: 2px solid #f26f03 !important;
}

.zb-plan-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #333;
    margin-bottom: .2rem;
}

.zb-plan-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a3a7c;
    line-height: 1.2;
    margin: .5rem 0 .15rem;
}

.zb-plan-price strong {
    font-size: 2rem;
    color: #f26f03;
}

.zb-plan-price small {
    font-size: .8rem;
    color: #888;
    font-weight: 400;
}

.zb-plan-sub {
    font-size: .78rem;
    color: #999;
    margin-bottom: .5rem;
}

.zb-plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.zb-plan-features li {
    padding: .45rem 0;
    font-size: .875rem;
    border-bottom: 1px solid #f0f0f0;
    color: #444;
}

.zb-plan-features li:last-child {
    border-bottom: none;
}

.zb-badge-recommended {
    background: #f26f03 !important;
    font-size: .68rem;
    padding: .28rem .6rem;
    border-radius: 50px;
}

/* ---------------------------------------------------------------
   SECCIÓN CTA FINAL
--------------------------------------------------------------- */
.zb-cta-section {
    background: linear-gradient(135deg, #0c1445 0%, #1a3a7c 100%) !important;
    padding: 5.5rem 0;
}

/* ---------------------------------------------------------------
   SECCIÓN FAQ — pequeñas mejoras sobre Bootstrap accordion
--------------------------------------------------------------- */
#faqAccordion .accordion-button {
    font-weight: 600;
    color: #1a3a7c;
}

#faqAccordion .accordion-button:not(.collapsed) {
    color: #f26f03;
    background-color: #fff8f2;
    box-shadow: none;
}

#faqAccordion .accordion-button::after {
    background-size: 1rem;
}


/* ---------------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------------- */
@media (max-width: 991px) {
    .zb-hero-title {
        font-size: 2.25rem;
    }
    .zb-compliance-badge {
        padding: 2.5rem 2.5rem;
    }
}

@media (max-width: 767px) {
    .zb-hero-finanzas {
        padding-top: 80px;
        min-height: 100svh; /* svh para móviles con barra de navegador */
    }
    .zb-hero-title {
        font-size: 1.85rem;
    }
    .zb-hero-sub {
        font-size: 1rem;
    }
    .zb-hero-trust {
        gap: 1rem;
    }
    .zb-stat-num {
        font-size: 1.65rem;
    }
    .zb-compliance-badge {
        padding: 1.75rem 1.75rem;
    }
    .zb-compliance-badge i {
        font-size: 3rem;
    }
}