/*=====================================================
PALETA
=====================================================*/

:root{

    --azul:#002A6C;
    --texto:#25324A;
    --gris:#6B7280;

    --linea:#E5E7EB;
    --fondo:#F8FAFC;
    --blanco:#FFFFFF;

    --esencial:#91BAFF30;
    --clasico:#91BAFF57;
    --global:#91BAFF87;

    --verde:#22C55E;
    --rojo:#94A3B8;

}

/*=====================================================
CONTENEDOR
=====================================================*/

.bv-tabla-premium{

    max-width:1400px;
    margin:auto;
    padding:30px;
    overflow-x:auto;

}

/*=====================================================
TABLA
=====================================================*/

.bv-tabla-premium table{

    width:100%;
    border-collapse:collapse;
    background:#FFF;
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--linea);

}

/*=====================================================
CELDAS
=====================================================*/

.bv-tabla-premium th,
.bv-tabla-premium td{

    padding:16px;
    border:1px solid var(--linea);
    text-align:center;
    font-size:15px;
    color:var(--texto);

}

/*=====================================================
TITULO
=====================================================*/

.cabecera-principal{

    background:#fff;
    width:38%;

}

.titulo-box{

    padding:35px;

}

.titulo-box :is(h1,h2){

    margin-bottom:12px;
    color:var(--azul);
    font-size:30px;
    font-weight:600;
    letter-spacing:0;
    text-transform:none;

}

.titulo-box p{

    color:var(--gris);
    line-height:1.6;

}

.titulo-tag{

    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    background:#EEF3F9;
    color:var(--azul);
    font-size:13px;
    font-weight:600;

}

/*=====================================================
ENCABEZADOS
=====================================================*/

.plan-header{

    padding:30px 20px;

}

.plan-header h3{

    margin:15px 0;
    font-size:24px;
    font-weight:600;
    color:var(--azul);
    text-transform:none;

}

/*=====================================================
COLORES PLANES
=====================================================*/

.esencial{

    background:var(--esencial);

}

.clasico{

    background:var(--clasico);

}

.global{

    background:var(--global);

}

/*=====================================================
BADGES
=====================================================*/

.badge{

    display:inline-block;
    padding:7px 14px;
    border-radius:6px;
    background:#fff;
    border:1px solid var(--linea);
    font-size:12px;
    font-weight:600;
    color:var(--azul);

}

/*=====================================================
PRECIOS
=====================================================*/

.precio{

    margin:18px 0;

}

.precio span{

    display:block;
    font-size:13px;
    color:var(--gris);

}

.precio strong{

    display:block;
    margin-top:6px;
    font-size:26px;
    color:var(--azul);
    font-weight:700;

}

/*=====================================================
BOTONES
=====================================================*/

.btn-plan,
.btn-bottom{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:130px;
    height:42px;

    border-radius:8px;

    background:var(--azul);
    color:#fff;

    text-decoration:none;
    font-weight:600;

    transition:.2s;

}

.btn-plan:hover,
.btn-bottom:hover{

    background:#003A92;

}

/*=====================================================
BARRA CENTRAL
=====================================================*/

.barra-principal{

    background:#00296B4F;
    color:#fff;

    font-size:18px;
    font-weight:600;

    letter-spacing:0;
    text-transform:none;

}

/*=====================================================
GRUPOS
=====================================================*/

.grupo{

    font-weight:600;
    color:var(--azul);

}

.grupo span{

    display:block;
    margin-top:8px;
    color:var(--gris);
    font-size:13px;
    font-weight:400;

}

/*=====================================================
CENTRAR CONTENIDO DE TODAS LAS CELDAS
=====================================================*/

.bv-tabla-premium th,
.bv-tabla-premium td{

    padding:16px;

    border:1px solid var(--linea);

    text-align:center;
    vertical-align:middle;

    font-size:15px;
    color:var(--texto);

}

/*=====================================================
CHECK
=====================================================*/

.ok{

    font-size:0;

}

.ok::before{

    content:"✓";

    display:inline-flex;

    width:28px;
    height:28px;

    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:var(--verde);
    color:#fff;

    font-size:15px;

}

/*=====================================================
NO
=====================================================*/

.no{

    font-size:0;

}

.no::before{

    content:"–";

    display:inline-flex;

    width:28px;
    height:28px;

    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:#CBD5E1;
    color:#fff;

    font-size:18px;

}

/*=====================================================
FILAS
=====================================================*/

tbody tr{

    transition:.15s;

}

tbody tr:hover td{

    background:#FAFBFC;

}

/*=====================================================
PLAN DESTACADO
=====================================================*/

tbody td:nth-child(4){

    background:#F6FAFF;

}

/*=====================================================
BOLSA
=====================================================*/

.fila-bolsa td{

    background:#F3F8EF;
    font-size:18px;
    font-weight:600;
    color:var(--azul);

}

.fila-bolsa td:first-child{

    text-align:left;
    text-transform:none;

}

/*=====================================================
CTA
=====================================================*/

.fila-cta td{

    background:#F8FAFC;

}

/*=====================================================
SCROLL
=====================================================*/

.bv-tabla-premium::-webkit-scrollbar{

    height:8px;

}

.bv-tabla-premium::-webkit-scrollbar-thumb{

    background:#C5CED8;
    border-radius:10px;

}

.bv-tabla-premium::-webkit-scrollbar-track{

    background:#F3F4F6;

}

/*=====================================================
RESPONSIVE
=====================================================*/

@media(max-width:768px){

    .bv-tabla-premium{

        padding:10px;

    }

    .bv-tabla-premium table{

        min-width:1000px;

    }

    .titulo-box :is(h1,h2){

        font-size:24px;

    }

    .plan-header h3{

        font-size:20px;

    }

}
/*=====================================================
BOTON FLOTANTE IZQUIERDO
=====================================================*/

.bv-btn-flotante{

    position:fixed;

    left:0;
    top:50%;

    transform:translateY(-50%);

    z-index:9999;

    display:flex;
    align-items:center;
    gap:10px;

    padding:14px 18px 14px 14px;

    background:var(--azul);
    color:#fff;

    border-radius:0 12px 12px 0;

    text-decoration:none;

    font-size:15px;
    font-weight:600;

    box-shadow:
        0 8px 25px rgba(0,42,108,.25);

    animation:
        bvFlotacion 3s ease-in-out infinite;

    transition:
        background .25s ease,
        padding .25s ease,
        box-shadow .25s ease;

}


/*=====================================================
ICONO
=====================================================*/

.bv-btn-icono{

    display:flex;

    width:36px;
    height:36px;

    align-items:center;
    justify-content:center;

    flex-shrink:0;

    background:#fff;
    color:var(--azul);

    border-radius:50%;

    font-size:18px;

    animation:
        bvLatido 2s ease-in-out infinite;

}


/*=====================================================
TEXTO
=====================================================*/

.bv-btn-texto{

    white-space:nowrap;

}


/*=====================================================
FLUCTUACION BOTON
=====================================================*/

@keyframes bvFlotacion{

    0%,
    100%{

        transform:
            translateY(-50%)
            translateX(0);

    }

    45%{

        transform:
            translateY(calc(-50% - 4px))
            translateX(0);

    }

    55%{

        transform:
            translateY(calc(-50% + 3px))
            translateX(3px);

    }

    65%{

        transform:
            translateY(calc(-50% - 2px))
            translateX(0);

    }

}


/*=====================================================
LATIDO ICONO
=====================================================*/

@keyframes bvLatido{

    0%,
    70%,
    100%{

        transform:scale(1);

    }

    78%{

        transform:scale(1.12);

    }

    85%{

        transform:scale(1);

    }

    92%{

        transform:scale(1.08);

    }

}


/*=====================================================
HOVER
=====================================================*/

.bv-btn-flotante:hover{

    animation-play-state:paused;

    background:#003A92;

    color:#fff;

    padding-right:24px;

    box-shadow:
        0 12px 32px rgba(0,42,108,.35);

}


/*=====================================================
HOVER ICONO
=====================================================*/

.bv-btn-flotante:hover .bv-btn-icono{

    animation-play-state:paused;

    transform:scale(1.1);

}


/*=====================================================
MOBILE
=====================================================*/

@media(max-width:768px){

    .bv-btn-flotante{

        padding:10px;

        border-radius:0 10px 10px 0;

        animation-duration:3.5s;

    }

    .bv-btn-icono{

        width:34px;
        height:34px;

    }

    .bv-btn-texto{

        display:none;

    }

}


/*=====================================================
ACCESIBILIDAD
=====================================================*/

@media(prefers-reduced-motion:reduce){

    .bv-btn-flotante,
    .bv-btn-icono{

        animation:none;

    }

}