.super_marco{
    width: 100%;
    padding: 0px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }

.totem{
    width: 100%;
    display: block;
    background-color: #fafafa;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 40px 20px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
}

.totem_contenedor{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px 30px 20px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}


.asesor_nombre,.img_span, .info_datos h2,.contact-info h3, .social-media h3, .footer{
    color: #005B96;
}

.gallery_contenedor h2, .titulo_section, .videos_presentacion h2{
    color: #005B96;
}

.info_datos p, .presentacion_title h1{
    color: #EA6729;
}

.videos_presentacion p{
    color: #303841;
    font-weight: 500;
}


.contacto__btn{
    color: #fff;
    background-color: #EA6729;
    border: 2px solid #EA6729;
}

.contacto__btn:hover { 
    background-color: #EA6729;
}






.asesor_nombre {
  font-family: "Titan One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.separacion_texto{
   display: inline-block;
    margin-bottom: 20px;
}    




.inicio, .videos, .presentacion {
    background-color: #fff;
}

.inicio{
    display: block;
    background-color: #fafafa;
    border: 1px solid #ddd;
    padding: 40px 20px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 25px;
    
    background: transparent;
    background-image: url(../../assets/img/prueba/fondo_principal.PNG);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}




.presentacion_title h1{
    background-color: #fff;
    border-radius: 12px;
}

.publicidad_especialidad{
    text-align: start;
    width: 100%;
}

.publicidad_call{
    display:none;
}


.info_datos h2{
    padding: 0;
    font-size: 1.25rem;
}

.info_datos p{
    font-size: 1.1rem;
    padding: 0px 4px 0px 4px;
}

.contacto__btn{
    font-size: 1.25rem;
}


.info_datos{
    background-color: #fff;
    border-radius: 12px;
}


.gallery_contenedor h2, .gallery_contenedor h2,.titulo_section,.videos_presentacion h2{
    font-size: 2.5rem;
    font-family: sans-serif;
}




.contenedor_publicidad{
    background: #fff;
    border-radius: 12px;
}



.qr-icon{
    border: 2px solid #EA6729;
}


.testimonios {
        width: 100%;
        background: #fafafa;
        padding: 40px 20px;
}

.testimonios_contorno_principal{
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    padding: 20px 10px;
}

    .gallery_contenedor h2{
        font-weight: bold;
    }
    

.totem_food{
    width: 100%;
    display: block;
    background-color: #fafafa;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 40px 20px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
}



.footer{
    padding: 10px 20px 20px 20px;;
}

.totem_contenedor, .gallery_contenedor, .testimonios_contorno_principal, .videos_contenedor{
    background: transparent;
    background-image: url('../../assets/img/ff4.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}


        .social-media .icons a {
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        
/* Colores originales */
.facebook { color: #1877F2; border-color: #ccc; }
.tiktok { color: #010101; border: none; } /* Sin contorno */
.instagram { 
    background: linear-gradient(135deg, #FFD600, #F56040, #E1306C, #833AB4, #405DE6);
    -webkit-background-clip: text; 
    color: transparent; 
    border-color: #ccc;
}
.linkedin { color: #0077B5; border-color: #ccc; }
.twitter { color: #000000; border-color: #ccc; } /* Para X */

/* Hover personalizado con degradado */
.facebook:hover {
    background: linear-gradient(135deg, #005B96, #fff, #EA6729, #fff, #005B96, #fff, #EA6729);
    -webkit-background-clip: text;
    color: transparent;
    transform: scale(1.2);
    border-color: #5ED3E6;
}

.tiktok:hover {
    background: linear-gradient(135deg, #005B96, #fff, #EA6729, #fff, #005B96, #fff, #EA6729);
    -webkit-background-clip: text;
    color: transparent;
    transform: scale(1.2);
    border-color: #E651A7;
}

.instagram:hover {
    background: linear-gradient(135deg, #005B96, #fff, #EA6729, #fff, #005B96, #fff, #EA6729);
    -webkit-background-clip: text;
    color: transparent;
    transform: scale(1.2);
    border-color: #E651A7;
}

.linkedin:hover {
    background: linear-gradient(135deg, #005B96, #fff, #EA6729, #fff, #005B96, #fff, #EA6729);
    -webkit-background-clip: text;
    color: transparent;
    transform: scale(1.2);
    border-color: #5ED3E6;
}

.twitter:hover {
    background: linear-gradient(135deg, #005B96, #fff, #EA6729, #fff, #005B96, #fff, #EA6729);
    -webkit-background-clip: text;
    color: transparent;
    transform: scale(1.2);
    border-color: #E651A7;
}
        
        


@media screen and (min-width: 500px) {
    
    
    .asesor_nombre{
        font-size: 2.1rem;
        }

    .super_marco{
        width: 100%;
        padding: 0px 10px;
        max-width: 500px;
        }
    
    .totem_food{
        max-width: 500px;
        }    
        
    .info_datos{
            padding: 30px 20px 30px 20px;
        }
        
    .info_datos p {
            font-size: 1.1rem;
            padding: 0px 10px 0px 10px;
        }
        
        
    
    .qr-icon {
        width: 170px;
        }

}


@media screen and (min-width: 768px) {
    
    .super_marco {
        width: 100%;
        padding: 0px 0px;
        max-width: 600px;
        gap:20px;
    }
    
    
    .presentacion_title h1{
        margin-bottom: 20px;
        padding: 30px 25px 30px 25px;
    }
    
    .info_datos {
        padding: 30px 25px 30px 25px;
    }
    
    .info_datos h2 {
        font-size: 1.5rem;
    }
    
    .info_datos p {
        font-size: 1.25rem;
    }
    
  
    .testimonios {
        padding: 60px 50px;
        }
        
        
    .separacion_texto{
       display: inline-block;
        margin-bottom: 40px;
    }    
    
    
    .footer{
       padding: 0px 0px;
    }
    
    .totem_food {
        max-width: 600px;
        margin:  40px auto 40px auto;
    }

}


@media screen and (min-width: 1000px) {
    
 .super_marco,.totem_food,.testimonios {
         max-width: 750px;
    }
    
   .qr-icon {
        width: 180px;
    }
    
    .whatsapp-contact {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    }
    
    .asesor_nombre {
        font-size: 2.5rem;
    }
    
    
    .presentacion_title h1,.img_span{
        font-size: 2rem;
    }
    
    
    .info_datos h2 {
        font-size: 2.1rem;
    }
    
    .info_datos p {
        font-size: 1.7rem;
    }
    

    
    
}


@media screen and (min-width: 1440px) {
    .totem {
        width: 100%;
        min-width: 950px;
        max-width: 1440px;
        padding: 60px 100px 60px 100px;
    }
    
    .testimonios{
        min-width: 950px;
        max-width: 1440px;
        padding: 60px 100px 60px 100px;
    }
    
     .super_marco,.totem_food {
         max-width: 1400px;
    }
    
    .presentacion_title h1{
        line-height: 2.5rem;
        max-width: 1000px;
        padding: 43px 8% 45px 8%;
    }
    
    .contenedor_publicidad{
        max-width: 1000px;
        padding: 30px 8% 30px 8%;
    }
    
    .info_datos{
    gap: 40px;    
    }
    
    .contacto__btn{
        font-size: 2rem;
    }
    
}