/* ==========================================
   ESTILOS EXCLUSIVOS PARA MÓVIL
========================================== */

@media screen and (max-width:768px){

.banner{
    flex-direction:column;
    padding:20px;
    padding-top:80px;
    min-height:auto;
    gap:15px;
    text-align:center;
}

.banner-texto h1{
    font-size:24px !important;
}

.banner-texto p{
    font-size:14px;
    line-height:1.4;
}

.banner,
.video-promo,
.beneficios,
.formulario,
.banner-image{
    margin-left:0 !important;
    width:100%;
    box-sizing:border-box;
}

img{
    width:100%;
    height:auto;
    display:block;
}

/* ==========================
   IMAGEN
========================== */

.banner-image{
    padding:0 12px;
    margin:15px auto !important;
}

.preview-img{
    width:100%;
    max-width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:18px;
    box-shadow:0 0 15px rgba(0,255,255,.4);
}

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

.boton-grande{
    width:24px !important;
    height:90px !important;
    font-size:7px !important;
    letter-spacing:1px !important;
    left:0 !important;
    border-radius:0 8px 8px 0 !important;
    box-shadow:0 6px 16px rgba(0,0,0,.30) !important;
}

.ruta{top:50px !important;}
.nutricion{top:140px !important;}
.resultados{top:230px !important;}

/* ==========================
   VISITANTE
========================== */

.visitor-zone{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:20px;
}

.visitor-text{
    font-size:16px;
    white-space:nowrap;
}

.capsule{
    position:relative;
    width:190px;
    margin:0 auto;
}

.capsule-frame{
    width:100%;
    display:block;
    position:relative;
    z-index:1;
}

/* El contador real */

#visitorCounter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    font-family: 'Orbitron', sans-serif; /* Mantenemos la fuente de tu web */
    font-size: 17px !important; /* Tamaño perfecto para no desbordar */
    font-weight: 900;
    
    color: #00f3ff !important; /* Color cian de la temática */
    letter-spacing: 2px;
    white-space: nowrap; /* Evita que los números salten a la línea de abajo */
    
    text-shadow: 
        0 0 5px #00f3ff,
        0 0 10px rgba(0, 243, 255, 0.8);
    
    z-index: 100;
}

/* ==========================
   VIDEOS
========================== */

.video-container{
    margin-top:0 !important;
    margin-bottom:10px !important;
}

.video-promo{
    margin:20px auto !important;
    padding:0 12px !important;
}

}