@charset "UTF-8";

:root {
    --brand: #B11E23;
    --brand-dark: #167EC2;
    --ink: #14213d;
    --muted: #6b7280;
    --bg-soft: #f7fafc;
    --accent: #3458ff;
}
/* Non-destructive: new classes only */
.vip-hero {
    background: radial-gradient(1100px 520px at 20% -10%, #e6f8f1 20%, transparent 80%), linear-gradient(180deg,#ffffff,#f7fafc);
    border: 1px solid #eef2f7;
    border-radius: 18px;
    padding: 28px 24px;
    box-shadow: 0 6px 20px rgba(20,33,61,.05);
}

    .vip-hero h2 {
        margin: 0 0 6px;
        font-weight: 800;
        color: var(--ink);
        letter-spacing: .2px
    }

    .vip-hero .lead {
        margin: 0;
        color: #1f2937
    }

.hero-bullets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: .9rem
}

.vip-card {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(20,33,61,.07);
    transition: transform .18s ease, box-shadow .18s ease;
    height: 100%;
}

    .vip-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 36px rgba(20,33,61,.12)
    }

.eyebrow {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .12em;
    font-size: .78rem;
    color: var(--accent);
    margin-bottom: 4px
}

.vip-card h3 {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 8px
}

.price-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f1f5ff;
    border: 1px solid #dbe4ff;
    font-weight: 700;
    margin: 4px 0 10px;
}

    .price-pill .tag {
        font-size: .99rem;
        font-weight: 700;
        color: #334155;
        background: #e2e8f0;
        border-radius: 999px;
        padding: 2px 8px
    }

.subtle {
    color: var(--muted);
    font-size: 1.15rem;
}

.list-check {
    list-style: none;
    padding-left: 0;
    margin: 12px 0 0
}

    .list-check li {
        position: relative;
        padding-left: 28px;
        margin: 8px 0;
        line-height: 1.35
    }

        .list-check li:before {
            content: "\f00c";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 0;
            color: var(--brand);
            font-size: .95rem;
        }

.hint {
    font-style: italic;
    color: #334155
}

.note {
    background: #fff7ed;
    border: 1px solid #ffedd5;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: .9rem
}

.btn-vip {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff !important;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    letter-spacing: .2px;
    display: inline-block
}

    .btn-vip:hover {
        background: var(--brand-dark);
        border: 1px solid var(--brand-dark);
        color: #fff
    }

.thumbnail {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #eef2f7;
    background: #fff
}

.thumbnail-image {
    display: block;
    width: 100%;
    height: auto
}

.divider-primary {
    border-color: #dbeafe;
    max-width: 64px;
    border-width: 2px
}

.text-redvoucher {
    color: #b91c1c
}

@media (min-width:992px) {
    .grid-3 {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 18px
    }
}

/* === HERO BULLETS — compact + 1-line desktop + mobile horizontal scroll === */
.hero-bullets {
    display: flex;
    align-items: center;
    justify-content: center; /* desktop centered; usa flex-start si los prefieres a la izquierda */
    flex-wrap: nowrap; /* 1 línea en desktop */
    column-gap: 8px;
    row-gap: 0;
    margin-top: 6px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px; /* más compacto */
    font-size: 1.25rem;
    line-height: 1.1;
    border-radius: 999px;
    white-space: nowrap; /* evita cortes dentro del chip */
    margin: 0; /* por si hay márgenes heredados */
}

.hero-bullets .chip i {
    font-size: .9em;
    line-height: 1;
    margin-right: 4px; /* fallback si el navegador no soporta gap en inline-flex */
}

/* Móvil/Tablet: scroll horizontal con snap + fade en bordes (opcional) */
@media (max-width: 991.98px) {
    .hero-bullets {
        justify-content: flex-start; /* alinear a la izquierda en móvil */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        white-space: nowrap;
        padding-bottom: 6px; /* espacio para scrollbar */
    }

        .hero-bullets .chip {
            flex: 0 0 auto; /* evita que se encojan */
            scroll-snap-align: center;
            margin-right: 8px; /* fallback si no hay gap */
        }

    /* Efecto fade en bordes (añade la clase .hero-bullets--fade al contenedor) */
    .hero-bullets--fade {
        position: relative
    }

        .hero-bullets--fade::before,
        .hero-bullets--fade::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 28px;
            pointer-events: none;
            z-index: 1;
        }

        .hero-bullets--fade::before {
            left: 0;
            /* cambia #fff si el fondo del hero no es blanco */
            background: linear-gradient(90deg,#fff,rgba(255,255,255,0));
        }

        .hero-bullets--fade::after {
            right: 0;
            background: linear-gradient(270deg,#fff,rgba(255,255,255,0));
        }
}

/* (Opcional) más compacto en la lista con checks */
.list-check li {
    margin: 4px 0; /* antes 8px 0 */
    padding-left: 24px; /* menos indentación */
}


/* EYEBROW más destacado (pill + mayúsculas) */
.vip-card .eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: #eef2ff; /* suave */
    border: 1px solid #dbe4ff;
    border-radius: 999px;
    color: var(--accent); /* usa tu variable; o #3458ff */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .99rem;
    margin-bottom: 10px;
}

/* Título "YOUR VIP ... EXPERIENCE INCLUDES:" que reemplaza al <hr> */
.includes-title {
    margin: 12px 0 6px;
    font-size: 1.30rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #1f2937; /* ink suave */
    position: relative;
}


/* Tighter check-to-text spacing */
.list-check {
    margin-top: 4px;
    padding-left: 0;
}

    .list-check li {
        position: relative;
        padding-left: 18px; /* antes 22–28px */
        margin: 2px 0; /* menos separación vertical */
        line-height: 1.25;
    }

        .list-check li::before {
            content: "\f00c";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            top: .15em; /* alinea con la primera línea */
            width: 14px; /* reduce el “box” del icono */
            height: 14px;
            line-height: 14px;
            text-align: center;
            font-size: .8rem; /* icono un poco más compacto */
        }

/* Base (reutiliza el bloque previo) */
.vip-reco {
    border: 1px solid #e5e7eb;
    border-left-width: 6px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
}

    .vip-reco p {
        margin-bottom: .35rem;
        line-height: 1.35;
    }

.vip-reco__eyebrow {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    margin-bottom: .35rem;
}

.vip-reco__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    margin-top: .2rem;
}

/* Success (verde) */
.vip-reco--success {
    background: #ecfdf5; /* verde suave */
    border-color: #c9f0e3;
    border-left-color: #10b981;
    color: #145a4b;
}

    .vip-reco--success .vip-reco__eyebrow {
        background: #e7f7f0;
        border: 1px solid #bfe9dc;
        color: #0f766e;
    }

    .vip-reco--success .vip-reco__icon {
        background: #e7f7f0;
        color: #10b981;
    }

/* Nota clara y legible */
.vip-terms__note {
    background: #FFF2F3; /* rojo suave */
    border: 1px solid #F3C4C7;
    color: #7b1519;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 800;
    text-transform: uppercase;
}

/* Si ese bloque llegó a heredar estilos de .alert, los neutralizamos */
.vip-terms.alert,
.vip-terms[class*="alert-"] {
    background: #fff !important;
    border-color: #e5e7eb !important;
    color: #374151 !important;
}


/* CTA sólido con un poco más de presencia */
.vip-reco .btn-cta {
    background-color: #28a745 !important; /* verde Bootstrap */
    border-color: #1e7e34 !important;
    color: #fff !important;
    border-radius: 10px;
    font-weight: 700;
}

    .vip-reco .btn-cta:hover {
        background-color: #218838 !important;
        border-color: #1c7430 !important;
    }