/* =============================================================================
   skeleton.css — alianza_bci
   Solo contiene los skeleton shapes específicos de esta landing.
   El CSS base (shimmer, lazy-content, skeleton-block, etc.) está en:
     _lazy_loading/lazy_base.css  ← incluir ANTES que este archivo.
   ============================================================================= */


/* =============================================================================
   HEADER
   ============================================================================= */
.skeleton-header {
    padding: 40px 5%;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.skeleton-header .sk-eyebrow {
    width: 160px;
    height: 20px;
    border-radius: 99px;
}

.skeleton-header .sk-logos {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.skeleton-header .sk-logo {
    width: 80px;
    height: 36px;
    border-radius: 4px;
}

.skeleton-header .sk-sep {
    width: 2px;
    height: 36px;
    border-radius: 2px;
}

.skeleton-header .sk-body-desktop {
    display: flex;
    gap: 32px;
    align-items: center;
}

.skeleton-header .sk-text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.skeleton-header .sk-title {
    height: 56px;
    border-radius: 8px;
}

.skeleton-header .sk-subtitle {
    width: 75%;
    height: 24px;
}

.skeleton-header .sk-cta {
    width: 180px;
    height: 48px;
    border-radius: 99px;
    margin-top: 8px;
}

.skeleton-header .sk-hero-img {
    flex: 0 0 42%;
    height: 380px;
    border-radius: 16px;
}

.skeleton-header .sk-hero-mobile {
    width: 100%;
    height: 240px;
    border-radius: 12px;
}

@media (max-width: 768px) {
    .skeleton-header {
        padding: 24px 4%;
        min-height: 420px;
    }

    .skeleton-header .sk-body-desktop {
        flex-direction: column;
    }

    .skeleton-header .sk-hero-img {
        display: none;
    }

    .skeleton-header .sk-title {
        height: 44px;
    }

    .skeleton-header .sk-subtitle {
        width: 90%;
    }
}


/* =============================================================================
   VUELA SMART
   ============================================================================= */
.skeleton-vuela-smart {
    padding: 48px 5%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.skeleton-vuela-smart .sk-pill {
    width: 120px;
    height: 22px;
    border-radius: 99px;
    align-self: center;
}

.skeleton-vuela-smart .sk-title {
    width: 60%;
    height: 44px;
    align-self: center;
}

.skeleton-vuela-smart .sk-subtitle {
    width: 45%;
    height: 20px;
    align-self: center;
}

.skeleton-vuela-smart .sk-card-row {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    margin-top: 12px;
}

.skeleton-vuela-smart .sk-mascot {
    width: 100px;
    height: 140px;
    border-radius: 12px;
    flex-shrink: 0;
}

.skeleton-vuela-smart .sk-card {
    flex: 0 0 360px;
    height: 220px;
    border-radius: 16px;
}

@media (max-width: 768px) {
    .skeleton-vuela-smart .sk-mascot {
        display: none;
    }

    .skeleton-vuela-smart .sk-card {
        flex: 1;
        height: 200px;
    }

    .skeleton-vuela-smart .sk-title,
    .skeleton-vuela-smart .sk-subtitle {
        width: 85%;
    }
}


/* =============================================================================
   BANNER DESTINO
   ============================================================================= */
.skeleton-banner-destino {
    padding: 48px 5%;
}

.skeleton-banner-destino .sk-banner-desk,
.skeleton-banner-destino .sk-banner-mob {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: block;
    border-radius: 12px;
}

.skeleton-banner-destino .sk-banner-desk {
    height: 320px;
}

.skeleton-banner-destino .sk-banner-mob {
    height: 200px;
}

@media (max-width: 768px) {
    .skeleton-banner-destino .sk-banner-desk {
        display: none;
    }
}

@media (min-width: 769px) {
    .skeleton-banner-destino .sk-banner-mob {
        display: none;
    }
}


/* =============================================================================
   BENEFICIOS
   ============================================================================= */
.skeleton-beneficios {
    padding: 48px 5%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.skeleton-beneficios .sk-eyebrow {
    width: 140px;
    height: 18px;
    border-radius: 99px;
    align-self: center;
}

.skeleton-beneficios .sk-title {
    width: 55%;
    height: 40px;
    align-self: center;
}

.skeleton-beneficios .sk-subtitle {
    width: 45%;
    height: 20px;
    align-self: center;
    margin-bottom: 16px;
}

.skeleton-beneficios .sk-content-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.skeleton-beneficios .sk-mascot {
    flex: 0 0 240px;
    height: 340px;
    border-radius: 16px;
}

.skeleton-beneficios .sk-cards-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.skeleton-beneficios .sk-card {
    height: 100px;
    border-radius: 12px;
}

@media (max-width: 768px) {
    .skeleton-beneficios .sk-content-row {
        flex-direction: column;
    }

    .skeleton-beneficios .sk-mascot {
        flex: none;
        width: 100%;
        height: 220px;
    }

    .skeleton-beneficios .sk-title,
    .skeleton-beneficios .sk-subtitle {
        width: 90%;
    }
}


/* =============================================================================
   CASHBACK
   ============================================================================= */
.skeleton-cashback {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.skeleton-cashback .sk-ticket-banner {
    width: 100%;
    height: 80px;
}

.skeleton-cashback .sk-content {
    padding: 40px 5%;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.skeleton-cashback .sk-text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.skeleton-cashback .sk-title {
    height: 44px;
    width: 80%;
}

.skeleton-cashback .sk-subtitle {
    height: 20px;
    width: 65%;
}

.skeleton-cashback .sk-boxes {
    flex: 0 0 55%;
    display: flex;
    gap: 16px;
}

.skeleton-cashback .sk-box {
    flex: 1;
    height: 280px;
    border-radius: 16px;
}

@media (max-width: 768px) {
    .skeleton-cashback .sk-content {
        flex-direction: column;
        padding: 24px 4%;
    }

    .skeleton-cashback .sk-boxes {
        flex: none;
        width: 100%;
    }

    .skeleton-cashback .sk-box {
        height: 220px;
    }
}


/* =============================================================================
   BLOGSMART
   ============================================================================= */
.skeleton-blogsmart {
    padding: 48px 5%;
}

.skeleton-blogsmart .sk-banner-desk {
    width: 100%;
    height: 280px;
    border-radius: 12px;
}

.skeleton-blogsmart .sk-banner-mob {
    width: 100%;
    height: 180px;
    border-radius: 12px;
}

@media (max-width: 768px) {
    .skeleton-blogsmart .sk-banner-desk {
        display: none;
    }
}

@media (min-width: 769px) {
    .skeleton-blogsmart .sk-banner-mob {
        display: none;
    }
}


/* =============================================================================
   FAQ
   ============================================================================= */
.skeleton-faq {
    padding: 48px 5%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 860px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.skeleton-faq .sk-title {
    width: 40%;
    height: 38px;
    align-self: center;
    margin-bottom: 4px;
}

.skeleton-faq .sk-subtitle {
    width: 55%;
    height: 20px;
    align-self: center;
    margin-bottom: 16px;
}

.skeleton-faq .sk-row {
    height: 56px;
    border-radius: 8px;
    width: 100%;
}

@media (max-width: 768px) {
    .skeleton-faq .sk-title {
        width: 70%;
    }

    .skeleton-faq .sk-subtitle {
        width: 85%;
    }
}


/* =============================================================================
   VENTAJAS SMART
   ============================================================================= */
.skeleton-ventajas-smart {
    padding: 48px 5%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

.skeleton-ventajas-smart .sk-title {
    width: 50%;
    height: 44px;
    align-self: center;
}

.skeleton-ventajas-smart .sk-subtitle {
    width: 60%;
    height: 22px;
    align-self: center;
    margin-bottom: 12px;
}

.skeleton-ventajas-smart .sk-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.skeleton-ventajas-smart .sk-table-header {
    height: 64px;
    border-radius: 10px;
    width: 100%;
}

.skeleton-ventajas-smart .sk-table-row {
    height: 48px;
    border-radius: 8px;
    width: 100%;
}

@media (max-width: 768px) {
    .skeleton-ventajas-smart .sk-title,
    .skeleton-ventajas-smart .sk-subtitle {
        width: 85%;
    }
}


/* =============================================================================
   MEMBRESIAS
   ============================================================================= */
.skeleton-membresias {
    padding: 48px 5%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.skeleton-membresias .sk-title {
    width: 50%;
    height: 44px;
    align-self: center;
}

.skeleton-membresias .sk-subtitle {
    width: 40%;
    height: 20px;
    align-self: center;
}

.skeleton-membresias .sk-tabs {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 8px 0;
}

.skeleton-membresias .sk-tab {
    width: 90px;
    height: 40px;
    border-radius: 99px;
}

.skeleton-membresias .sk-banner {
    width: 100%;
    height: 280px;
    border-radius: 16px;
}

.skeleton-membresias .sk-cards-mob {
    display: none;
    gap: 16px;
}

.skeleton-membresias .sk-card-mob {
    flex: 1;
    height: 240px;
    border-radius: 16px;
}

@media (max-width: 768px) {
    .skeleton-membresias .sk-title,
    .skeleton-membresias .sk-subtitle {
        width: 80%;
    }

    .skeleton-membresias .sk-banner {
        display: none;
    }

    .skeleton-membresias .sk-cards-mob {
        display: flex;
    }
}


/* =============================================================================
   TERMS
   ============================================================================= */
.skeleton-terms {
    padding: 24px 5%;
    display: flex;
    justify-content: center;
}

.skeleton-terms .sk-terms-link {
    width: 400px;
    height: 16px;
    border-radius: 4px;
}