:root{
--azul:#0B1E2D;
--gris:#1E293B;
--verde:#25D366;
--amarillo:#FFC107;
--blanco:#ffffff;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#000;
    overflow-x:hidden;
}

/*==============================
    SPA SCREENS
===============================*/

#app{
    position:relative;
    width:100%;
    height:100dvh;
    overflow:hidden;
    background-image:url("../img/fondo.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.screen{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(80px);
    transition:.45s;
}

.screen.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(0);
}

@keyframes fade{
    from{
    opacity:0;
    transform:translateY(20px);
    }

    to{
    opacity:1;
    transform:none;
    }
}

/* =========================================================
   HERO NOVA
========================================================= */

#hero{
    position:relative;
    height:100dvh;
    min-height:650px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background-image:url("../img/fondo.png");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}


/* =========================================================
   OVERLAY
========================================================= */

.hero-overlay{
    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(5,12,20,.82) 0%,
            rgba(5,12,20,.65) 45%,
            rgba(5,12,20,.28) 75%,
            rgba(5,12,20,.15) 100%
        );
}


/* =========================================================
   CONTENIDO HERO
========================================================= */

#hero .container{
    position:relative;
    z-index:5;
    width:100%;
}


/* =========================================================
   LOGOS
========================================================= */

.logos{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:35px;
    margin-bottom:20px;
}


.logos img{
    display:block;
    width:auto;
    object-fit:contain;
}

.logo-nova{
    height:145px;
    width:auto;
    object-fit:contain;
    filter:none;
}

.logo-adultos{
    height:105px;
    width:auto;

    object-fit:contain;

    /*
     * El logo original es oscuro.
     * Lo hacemos visible sobre el fondo.
     */
    filter:
        brightness(0)
        invert(1);
    opacity:.95;
}


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

#hero h1{
    margin:0;
    font-size:clamp(48px, 5vw, 78px);
    line-height:.98;
    font-weight:900;
    letter-spacing:-2px;
    color:#fff;
    text-transform:uppercase;
    text-shadow:
        0 5px 20px rgba(0,0,0,.45);
}


#hero h1 span{
    display:block;
    margin-top:5px;
    color:#FFC107;
    font-weight:900;
}


/* =========================================================
   SUBTITULO
========================================================= */

#hero h2{
    margin-top:25px;
    margin-bottom:0;
    color:#fff;
    font-size:clamp(20px, 2vw, 30px);
    font-weight:400;
    line-height:1.35;
    letter-spacing:.5px;
    max-width:850px;
    text-shadow:
        0 3px 15px rgba(0,0,0,.55);
}


/* =========================================================
   OFERTA
========================================================= */

.hero-oferta{
    display:flex;
    align-items:center;
    gap:15px;
    max-width:600px;
    margin-top:25px;
    color:#fff;
}


.hero-oferta-icono{
    width:52px;
    height:52px;
    min-width:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#FFC107;
    color:#0B1E2D;
    font-size:25px;
    box-shadow:
        0 8px 25px rgba(255,193,7,.25);
}


.hero-oferta strong{
    display:block;
    color:#FFC107;
    font-size:18px;
    font-weight:800;
    line-height:1.2;
}


.hero-oferta span{
    display:block;
    margin-top:3px;
    color:#fff;
    font-size:14px;
    font-weight:400;
    opacity:.9;
}


/* =========================================================
   BENEFICIOS
========================================================= */

.hero-beneficios{
    display:flex;
    flex-wrap:wrap;
    gap:10px 25px;
    margin-top:20px;
}

.hero-beneficio{
    display:flex;
    align-items:center;
    gap:7px;
    color:#fff;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
}

.hero-beneficio i{
    color:#25D366;
    font-size:17px;
}

/* =========================================================
   BOTON PRINCIPAL
========================================================= */

.btn-clase{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-top:35px;
    min-height:64px;
    padding:0 45px;
    border:none;
    border-radius:60px;
    background:#FFC107;
    color:#0B1E2D;
    font-size:19px;
    font-weight:800;
    letter-spacing:.2px;
    cursor:pointer;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
    box-shadow:
        0 12px 35px rgba(255,193,7,.30);
}


.btn-clase i{
    font-size:23px;
}


.btn-clase:hover{
    transform:translateY(-4px);
    background:#ffd34d;
    box-shadow:
        0 18px 45px rgba(255,193,7,.45);
}


/* =========================================================
   TEXTO DE CONFIANZA
========================================================= */

.hero-confianza{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:12px;
    color:#fff;
    font-size:12px;
    opacity:.85;
}


.hero-confianza i{
    color:#25D366;
    font-size:15px;
}


/* =========================================================
   COMO FUNCIONA
========================================================= */

.hero-como-funciona{
    margin-top:30px;
    max-width:760px;
}

.hero-como-titulo{
    margin-bottom:12px;
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
    opacity:.8;
}

.hero-pasos{
    display:flex;
    align-items:center;
    gap:12px;
}


.hero-paso{
    display:flex;
    align-items:center;
    gap:7px;
    color:#fff;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}


.hero-paso-numero{
    width:27px;
    height:27px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,193,7,.15);
    border:1px solid rgba(255,193,7,.5);
    color:#FFC107;
    font-size:10px;
    font-weight:800;
}


.hero-paso-linea{
    width:25px;
    height:1px;
    background:rgba(255,255,255,.25);
}


/* =========================================================
   FRASE FINAL
========================================================= */

.hero-final{
    margin-top:18px;
    color:#fff;
    font-size:13px;
    font-weight:500;
    opacity:.75;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:992px){
    .logos{
        gap:20px;
    }
    .logo-nova{
        height:120px;
    }
    .logo-adultos{
        height:85px;
    }
    #hero h1{
        font-size:58px;
    }
}


/* =========================================================
   MÓVIL
========================================================= */

@media(max-width:768px){
    #hero{
        min-height:100dvh;
        background-position:
            62% center;
    }

    .hero-overlay{
        background:
            linear-gradient(
                180deg,
                rgba(5,12,20,.82),
                rgba(5,12,20,.70)
            );
    }

    #hero .container{
        padding-left:22px;
        padding-right:22px;
    }


    .logos{
        justify-content:center;
        gap:12px;
        margin-bottom:18px;
    }

    .logo-nova{
        height:85px;
    }


    .logo-adultos{
        height:60px;
    }

    #hero h1{
        font-size:42px;
        letter-spacing:-1px;
        line-height:.98;
    }

    #hero h2{
        margin-top:18px;
        font-size:18px;
        line-height:1.35;
    }

    .hero-oferta{
        margin-top:20px;
        gap:10px;
    }

    .hero-oferta-icono{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:19px;
    }

    .hero-oferta strong{
        font-size:15px;
    }

    .hero-oferta span{
        font-size:11px;
    }

    .hero-beneficios{
        gap:8px 15px;
        margin-top:15px;
    }

    .hero-beneficio{
        font-size:10px;
    }

    .hero-beneficio i{
        font-size:14px;
    }

    .btn-clase{
        width:100%;
        min-height:58px;
        margin-top:28px;
        padding:0 20px;
        font-size:16px;
    }

    .hero-confianza{
        justify-content:center;
        font-size:10px;
    }

    .hero-como-funciona{
        display:none;
    }

    .hero-final{
        text-align:center;
        font-size:11px;
        margin-top:15px;
    }
}

/*=============================
    FORMULARIO
==============================*/

#datos{

height:100vh;

display:flex;

align-items:center;



}

.card-form{

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(15px);

    -webkit-backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.25);

    border-radius:25px;

    padding:35px;

    width:100%;

    max-height:85vh;

    overflow-y:auto;

    overflow-x:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.20);

}

.progress{

    height:10px;

    border-radius:50px;

}

.progress-bar{

    background:#25D366;

}

.step-number{

    color:#25D366;

    font-weight:700;

    font-size:14px;

}

.titulo-form{

    color:#0B1E2D;

    font-weight:800;

    margin-top:10px;

}

.subtitulo-form{

    color:#777;

    margin-bottom:35px;

}

label{

    font-weight:600;

    margin-bottom:8px;

}

.form-control{

    height:60px;

    border-radius:15px;

    border:2px solid #e5e5e5;

}

.form-control:focus{

    border-color:#25D366;

    box-shadow:none;

}

.btn-continuar{

    width:100%;

    height:60px;

    border:none;

    border-radius:50px;

    background:#25D366;

    color:white;

    font-weight:700;

    font-size:18px;

    transition:.3s;

}

.btn-continuar:hover{

    transform:translateY(-3px);

}

#sedes{

height:100%;

display:flex;

align-items:center;

}


.sede-card{

background:white;

border:2px solid #ececec;

border-radius:18px;

padding:10px;

cursor:pointer;

transition:.30s;

height:100%;

}

.sede-card:hover{

transform:translateY(-8px);

border-color:#25D366;

box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.sede-icon{

font-size:30px;

color:#25D366;

margin-bottom:15px;

}

.sede-card h4{

font-size:19px;

font-weight:700;

margin-bottom:10px;

}

.sede-card p{

color:#777;

margin-bottom:20px;

}

.btn-sede{

background:#25D366;

color:white;

border:none;

padding:12px 25px;

border-radius:40px;

font-weight:600;

width:100%;

}

@media (max-width:768px){

.card-form{

    width:100%;

    max-height:92vh;

    padding:20px;

    border-radius:20px;

}

.progress{

    margin-bottom:20px;

}

.sede-card{

    margin-bottom:15px;

}

.logo-nova,
.logo-adultos{

    height:95px;

}

h1{

    font-size:40px;

}

h2{

    font-size:20px;

}

}


/* #app::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        rgba(8,14,22,.82),
        rgba(8,14,22,.70)
    );
} */


.asesor-card{
    background:#fff;
    border-radius:20px;
    padding:30px;
    text-align:center;
    transition:.30s;
    cursor:pointer;
    border:2px solid #ececec;
    height:100%;
}

.asesor-card:hover{
    transform:translateY(-8px);
    border-color:#25D366;
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.foto-asesor{
    width:120px;
    height:120px;
    border-radius:50%;
    object-fit:cover;
    margin:auto;
    display:block;
    margin-bottom:20px;
    border:5px solid #25D366;
}

.estado{
    color:#25D366;
    font-weight:700;
    margin:10px 0;
}

.btn-whatsapp{
    width:100%;
    padding:15px;
    border:none;
    border-radius:50px;
    background:#25D366;
    color:white;
    font-weight:700;
    margin-top:20px;
}

.sede-card{
    background:#fff;
    border-radius:20px;
    padding:22px;
    border:2px solid transparent;
    transition:.30s;
    height:100%;
}

.sede-card:hover{
    transform:translateY(-6px);
    border-color:#25D366;
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.sede-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}

.sede-titulo{
    margin:0;
    font-size:24px;
    font-weight:700;
    color:#0B1E2D;
}

.sede-icon{
    font-size:28px;
    color:#25D366;
}

.info-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:14px;
    color:#555;
    font-size:15px;
}

.info-item i{
    color:#25D366;
    min-width:18px;
    margin-top:2px;
}

.btn-mapa{
    background:#0B1E2D;
    color:#fff;
    border:none;
    border-radius:50px;
    padding:12px;
    transition:.30s;
}

.btn-mapa:hover{
    background:#173954;
}

.form-select{
    height:60px;
    border-radius:15px;
    border:2px solid #e5e5e5;
}

.form-select:focus{
    border-color:#25D366;
    box-shadow:none;
}

/* =========================================
   POPUP IDENTIDAD
========================================= */

#popupIdentidad {

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(8px);

    animation:
        popupFade .25s ease;

}


.popup-identidad {

    width:100%;

    max-width:430px;

    background:#fff;

    border-radius:28px;

    padding:35px 30px;

    text-align:center;

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

    animation:
        popupEntrada .35s ease;

}


.popup-icono {

    width:75px;

    height:75px;

    margin:0 auto 20px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#e9fff1;

    color:#25D366;

    font-size:38px;

}


.popup-identidad h3 {

    margin:0;

    color:#0B1E2D;

    font-size:28px;

    font-weight:800;

}


.popup-texto {

    margin-top:15px;

    color:#777;

}


.nombre-confirmacion {

    margin:20px 0;

    padding:18px;

    border-radius:16px;

    background:#f5f7fa;

    color:#0B1E2D;

    font-size:20px;

    font-weight:800;

    text-transform:uppercase;

}


.popup-pregunta {

    color:#555;

    font-weight:600;

}


.popup-botones {

    display:flex;

    gap:12px;

    margin-top:25px;

}


.btn-popup-si,
.btn-popup-no {

    flex:1;

    height:55px;

    border:none;

    border-radius:50px;

    font-weight:700;

    font-size:16px;

    cursor:pointer;

    transition:.25s;

}


.btn-popup-si {

    background:#25D366;

    color:white;

}


.btn-popup-no {

    background:#eef1f4;

    color:#333;

}


.btn-popup-si:hover,
.btn-popup-no:hover {

    transform:translateY(-3px);

}


@keyframes popupFade {

    from {
        opacity:0;
    }

    to {
        opacity:1;
    }

}


@keyframes popupEntrada {

    from {

        opacity:0;

        transform:
            translateY(25px)
            scale(.95);

    }

    to {

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


@media(max-width:500px) {

    .popup-identidad {

        padding:28px 20px;

        border-radius:24px;

    }


    .popup-identidad h3 {

        font-size:24px;

    }


    .nombre-confirmacion {

        font-size:17px;

    }

}

/* =========================================================
   UX MÓVIL - FECHA DE CLASE
========================================================= */

@media (max-width: 768px) {

    #fechaClase {
        padding: 10px;
        align-items: center;
    }


    #fechaClase .container {
        width: 100%;
        padding: 0;
    }


    #fechaClase .row {
        margin: 0;
    }


    #fechaClase .col-lg-7 {
        width: 100%;
        padding: 0;
    }


    #fechaClase .card-form {
        width: 100%;
        max-height: 94dvh;
        padding: 20px 17px;
        border-radius: 20px;
        overflow-y: auto;
    }


    #fechaClase .titulo-form {
        font-size: 23px;
        line-height: 1.2;
        margin-top: 8px;
        margin-bottom: 8px;
    }


    #fechaClase .subtitulo-form {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 18px;
    }


    #fechaClase .step-number {
        font-size: 12px;
    }


    #fechaClase .progress {
        height: 7px;
        margin-bottom: 14px !important;
    }


    #fechaClase .form-label {
        font-size: 14px;
        margin-bottom: 7px;
    }


    #fechaClase #fechaClaseInput {
        height: 52px;
        font-size: 16px;
        border-radius: 13px;
    }

    #fechaClase .resumen-sede {
        margin-bottom: 12px;
    }


    #fechaClase .fecha-ayuda {
        font-size: 13px;
        line-height: 1.45;
        margin-top: 10px !important;
    }

    #fechaClase .btn-continuar {
        height: 52px;
        font-size: 16px;
        margin-top: 18px !important;
    }

    #fechaClase #volverSedes {
        font-size: 14px;
    }


    #fechaClase .lista-horarios {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }


    #fechaClase .horario-opcion {
        min-height: 52px;
        padding: 12px 15px;
        font-size: 15px;
    }
}

/* REUSMEN DE SEDE */ 
@media (max-width: 768px) {
    .sede-resumen {
        padding: 12px 14px;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .sede-resumen strong {
        font-size: 15px;
    }

    .sede-resumen span {
        font-size: 12px;
    }
}

.fecha-ayuda-contenido {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px;
    line-height: 1.45;
}


.fecha-ayuda-contenido i {
    color: #25D366;
    font-size: 18px;
    flex-shrink: 0;
}


.fecha-ayuda small {
    display: block;
    margin-top: 7px;
    color: #777;
}


.fecha-valida {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 12px;
    background: #eafff1;
    color: #168a45;
    font-size: 14px;
}

.fecha-valida i {
    font-size: 18px;
}


/* =========================================================
   FECHAS DISPONIBLES
========================================================= */

.lista-fechas {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;

    margin-top: 12px;

}


.fecha-opcion {

    border: 2px solid #e5e7eb;

    background: #fff;

    border-radius: 16px;

    padding: 13px 8px;

    min-height: 95px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: .25s;

    color: #0B1E2D;

}


.fecha-opcion:hover {

    border-color: #25D366;

    transform: translateY(-3px);

}


.fecha-opcion.seleccionado {

    background: #25D366;

    border-color: #25D366;

    color: #fff;

    box-shadow:
        0 8px 20px
        rgba(37,211,102,.25);

}


.fecha-dia {

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    opacity: .75;

}


.fecha-numero {

    font-size: 28px;

    line-height: 1.1;

    font-weight: 800;

}


.fecha-mes {

    font-size: 12px;

    font-weight: 600;

    opacity: .75;

}


.fecha-opcion.seleccionado
.fecha-dia,
.fecha-opcion.seleccionado
.fecha-mes {

    opacity: .9;

}


/* =========================================================
   HORARIOS
========================================================= */

.lista-horarios {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);
    gap: 12px;
}

.horario-opcion {
    min-height: 55px;
    border: 2px solid #e5e7eb;
    background: #fff;
    border-radius: 14px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #0B1E2D;
    transition: .25s;
}

.horario-opcion:hover {
    border-color: #25D366;
    transform: translateY(-2px);
}

.horario-opcion.seleccionado {
    background: #25D366;
    border-color: #25D366;
    color: #fff;
}

.horario-opcion i {
    color: #25D366;
}

.horario-opcion.seleccionado i {
    color: #fff;
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 768px) {
    #fechaClase {
        padding: 8px;
    }


    #fechaClase .card-form {
        padding: 18px 15px;
        max-height: 94dvh;
        border-radius: 20px;
    }


    #fechaClase .titulo-form {
        font-size: 22px;
        line-height: 1.2;
        margin-bottom: 6px;
    }


    #fechaClase .subtitulo-form {
        font-size: 13px;
        margin-bottom: 16px;
    }


    #fechaClase .progress {
        height: 7px;
        margin-bottom: 12px !important;
    }


    #fechaClase .step-number {
        font-size: 11px;
    }

    #fechaClase .form-label {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .lista-fechas {
        grid-template-columns:
            repeat(3, 1fr);
        gap: 8px;
    }

    .fecha-opcion {
        min-height: 82px;
        padding: 8px 5px;
        border-radius: 13px;
    }

    .fecha-dia {
        font-size: 10px;
    }

    .fecha-numero {
        font-size: 24px;
    }

    .fecha-mes {
        font-size: 10px;
    }

    .lista-horarios {
        grid-template-columns:
            1fr;
        gap: 8px;
    }

    .horario-opcion {
        min-height: 50px;
        font-size: 14px;
        border-radius: 13px;
    }

    .fecha-ayuda {
        font-size: 12px;
        margin-top: 10px !important;
    }

    .fecha-valida {
        padding: 9px 11px;
        font-size: 12px;
    }


    #fechaClase .btn-continuar {
        height: 52px;
        font-size: 16px;
        margin-top: 16px !important;
    }

    #fechaClase #volverSedes {
        font-size: 13px;
    }

}