/*====================================================
    ABIGAIL Y SU MARIACHI - STYLE CORREGIDO
    Diseño limpio + responsive sin franja blanca
====================================================*/

:root{
    --negro:#050505;
    --negro2:#181818;
    --dorado:#D4AF37;
    --dorado2:#B8860B;
    --vino:#5c0a1a;
    --vino2:#9e1b32;
    --beige:#f8f4ed;
    --beige2:#efe2cb;
    --cafe:#2b1f1a;
    --verde:#25d366;
    --azul:#007bff;
    --blanco:#ffffff;
    --gris:#555555;
}

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

html{
    scroll-behavior:smooth;
    width:100%;
    overflow-x:hidden;
}

body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    font-family:'Montserrat', Arial, sans-serif;
    background:var(--beige);
    color:#333;
}

img, iframe{
    max-width:100%;
}

a{
    text-decoration:none;
}

section{
    width:100%;
    overflow:hidden;
}

/*====================================================
            HEADER
====================================================*/

.main-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 5%;
    background:linear-gradient(180deg,var(--negro2),var(--negro));
    border-bottom:3px solid var(--dorado);
    box-shadow:0 8px 25px rgba(0,0,0,.45);
    z-index:99999;
}

.logo-container{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.logo{
    width:150px;
    height:auto;
    display:block;
    transition:.35s;
}

.logo:hover{
    transform:scale(1.04);
}

.nav-menu{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
}

.nav-menu a{
    color:var(--blanco);
    font-size:15px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
    padding:10px 14px;
    border-radius:30px;
    border:1px solid transparent;
    transition:.35s;
}

.nav-menu a:hover{
    color:var(--dorado);
    border-color:var(--dorado);
    background:rgba(158,27,50,.22);
    transform:translateY(-5px);
    box-shadow:0 0 15px rgba(212,175,55,.55);
}

.social-container{
    display:flex;
    align-items:center;
    gap:15px;
    flex-shrink:0;
}

.social-container a{
    color:var(--dorado);
    font-size:23px;
    transition:.3s;
}

.social-container a:hover{
    color:var(--blanco);
    transform:translateY(-6px) scale(1.1);
    filter:drop-shadow(0 0 10px var(--dorado));
}

.mobile-title,
.menu-mobile-icon,
.nav-menu-mobile,
.mobile-linea-verde{
    display:none;
}

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

.hero{
    position:relative;
    min-height:100svh;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:130px 20px 70px;
    background:#000;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.48);
    z-index:1;
}

.hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
}

.bg-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    background-size:cover;
    background-repeat:no-repeat;
    opacity:0;
    animation:fadeHero 25s infinite;
}

.bg-img:nth-child(1){background-image:url("../img/mariachis.jpg");background-position:40% 15%;animation-delay:0s;}
.bg-img:nth-child(2){background-image:url("../img/mariachisenquito.jpg");background-position:60% 20%;animation-delay:5s;}
.bg-img:nth-child(3){background-image:url("../img/mariachisdequito.jpg");background-position:20% 20%;animation-delay:10s;}
.bg-img:nth-child(4){background-image:url("../img/mariachisquito.jpg");background-position:60% 30%;animation-delay:15s;}
.bg-img:nth-child(5){background-image:url("../img/mariachisquito1.jpg");background-position:80% 40%;animation-delay:20s;}

@keyframes fadeHero{
    0%{opacity:0;}
    5%{opacity:1;}
    20%{opacity:1;}
    25%{opacity:0;}
    100%{opacity:0;}
}

.hero-content{
    position:relative;
    z-index:5;
    width:100%;
    max-width:900px;
    color:var(--blanco);
    margin:0 auto;
}

.titulo{
    font-family:'Montserrat', sans-serif;
    font-size:clamp(42px,7vw,72px);
    font-weight:800;
    line-height:1.08;
    text-transform:uppercase;
    text-shadow:0 0 12px #000,0 0 25px var(--dorado),0 0 45px var(--dorado);
}

.subtitulo{
    margin-top:20px;
    font-size:clamp(17px,2.2vw,24px);
    color:#fff;
    letter-spacing:4px;
    text-transform:uppercase;
}

.descripcion{
    margin:28px auto;
    max-width:760px;
    font-size:clamp(16px,2vw,20px);
    line-height:1.75;
    text-shadow:0 2px 7px rgba(0,0,0,.7);
}

.linea-3d{
    width:min(220px,70%);
    height:5px;
    margin:28px auto;
    background:linear-gradient(90deg,transparent,var(--dorado),transparent);
    border-radius:20px;
    box-shadow:0 0 20px var(--dorado);
}

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:22px;
    flex-wrap:wrap;
}

.btn-hero{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:16px 34px;
    min-width:170px;
    border-radius:60px;
    color:#fff;
    font-size:17px;
    font-weight:800;
    transition:.35s;
}

.btn-whatsapp{background:var(--verde);box-shadow:0 0 18px var(--verde);}
.btn-llamar{background:#8B0000;box-shadow:0 0 18px #8B0000;}
.btn-hero:hover{transform:translateY(-7px) scale(1.04);}
.btn-whatsapp:hover{box-shadow:0 0 35px #00ff66;}
.btn-llamar:hover{box-shadow:0 0 35px #ff3333;}

/*====================================================
            QUIÉNES SOMOS
====================================================*/

.quienes-somos{
    background:linear-gradient(180deg,var(--beige),var(--beige2));
    padding:0 0 110px;
    scroll-margin-top:100px;
}

.qs-banner{
    width:100%;
    min-height:120px;
    background:linear-gradient(180deg,#191919,#050505);
    border-top:4px solid var(--dorado);
    border-bottom:4px solid var(--dorado);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:25px 6%;
    box-shadow:0 15px 35px rgba(0,0,0,.35);
}

.qs-banner h2{
    font-family:'Montserrat', sans-serif;
    font-size:clamp(36px,5vw,62px);
    color:#fff;
    letter-spacing:4px;
    text-transform:uppercase;
    text-align:center;
    text-shadow:0 2px 0 #6e5314,0 4px 0 #4b370d,0 0 10px var(--dorado),0 0 25px var(--dorado);
}

.qs-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px 28px;
    border-radius:50px;
    color:#fff;
    font-weight:800;
    transition:.35s;
    white-space:nowrap;
}

.qs-btn.contacto{background:#8B0000;box-shadow:0 0 18px rgba(139,0,0,.6);}
.qs-btn.whatsapp{background:var(--verde);box-shadow:0 0 18px rgba(0,200,83,.7);}
.qs-btn:hover{transform:translateY(-6px);}

.qs-container{
    max-width:1350px;
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:70px;
    padding:90px 6% 0;
}

.qs-imagen,
.qs-texto{flex:1;}

.qs-imagen img{
    width:100%;
    display:block;
    border-radius:25px;
    border:4px solid var(--dorado);
    box-shadow:0 25px 50px rgba(0,0,0,.25);
    transition:.4s;
}

.qs-imagen img:hover{transform:scale(1.02);}

.qs-texto span{
    color:#c89b3c;
    font-weight:800;
    letter-spacing:3px;
}

.qs-texto h3{
    font-size:clamp(30px,4vw,46px);
    color:#222;
    margin:20px 0;
    line-height:1.2;
}

.qs-linea{
    width:130px;
    height:6px;
    border-radius:50px;
    background:var(--dorado);
    margin:28px 0;
}

.qs-texto p{
    font-size:18px;
    color:#555;
    line-height:1.9;
}

.qs-estadisticas{
    display:flex;
    gap:25px;
    margin:45px 0;
}

.qs-card{
    flex:1;
    background:#fff;
    border-radius:20px;
    padding:28px 22px;
    text-align:center;
    box-shadow:0 15px 30px rgba(0,0,0,.12);
    border-top:5px solid var(--dorado);
    transition:.35s;
}

.qs-card:hover{transform:translateY(-8px);}
.qs-card h4{font-size:40px;color:var(--dorado);margin-bottom:8px;}
.qs-card p{font-size:15px;color:#555;}

.qs-botones{
    display:flex;
    gap:25px;
    flex-wrap:wrap;
}

.btn-galeria,
.btn-cotizar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 36px;
    border-radius:50px;
    font-weight:800;
    transition:.35s;
}

.btn-galeria{background:#111;color:#fff;box-shadow:0 0 18px rgba(0,0,0,.35);}
.btn-cotizar{background:var(--dorado);color:#111;box-shadow:0 0 18px rgba(212,175,55,.55);}
.btn-galeria:hover,.btn-cotizar:hover{transform:translateY(-6px);}

/*====================================================
            GALERÍA
====================================================*/

.seccion-galeria{
    background:var(--cafe);
    padding:80px 0 90px;
    scroll-margin-top:100px;
}

.seccion-galeria .qs-banner{
    min-height:85px;
    justify-content:center;
    background:linear-gradient(90deg,var(--vino),var(--vino2),var(--vino));
    margin-bottom:50px;
}

.seccion-galeria .qs-banner h2{
    font-size:clamp(34px,5vw,56px);
}

.galeria-contenedor{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:26px;
    padding:0 5%;
    max-width:1500px;
    margin:0 auto 60px;
}

.galeria-item{
    border-radius:18px;
    border:3px solid var(--dorado);
    overflow:hidden;
    background:#000;
    transition:.4s;
}

.galeria-item img{
    width:100%;
    height:390px;
    display:block;
    object-fit:cover;
    object-position:center top;
    transition:.4s;
}

.galeria-item:hover{
    transform:translateY(-6px) scale(.98);
    box-shadow:0 0 28px 6px var(--dorado);
}

.galeria-footer{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
    padding:0 20px;
}

.btn-contacto{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:13px 34px;
    border:2px solid var(--dorado);
    border-radius:40px;
    color:#fff;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
    transition:.35s;
}

.btn-contacto:hover{transform:translateY(-6px);}
.btn-contacto.btn-llamar:hover{background:#d32f2f;box-shadow:0 0 26px #ff0000;border-color:#ff0000;}
.btn-contacto.btn-whatsapp:hover{background:#25d366;box-shadow:0 0 26px #00ff66;border-color:#00ff66;}

/*====================================================
            CONTACTO
====================================================*/

#contacto{
    padding:120px 20px;
    background:#f5f0e6;
    scroll-margin-top:100px;
}

.contenedor-contacto{
    max-width:1150px;
    margin:0 auto;
}

.titulo-contacto{
    text-align:center;
    font-size:clamp(34px,5vw,56px);
    color:var(--vino);
    margin-bottom:45px;
    text-shadow:0 0 10px rgba(212,175,55,.35);
}

.bloque-principal{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:35px;
    align-items:stretch;
}

.datos-cajon,
.acciones{
    background:#fff;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,0,0,.1);
}

.datos-cajon{
    padding:35px;
    display:flex;
    flex-direction:column;
    gap:18px;
    text-align:center;
}

.datos-cajon h3{
    color:var(--vino);
    font-size:26px;
}

.contacto-item{
    color:#333;
    font-weight:600;
    line-height:1.5;
}

.contacto-item i{color:var(--dorado);margin-right:7px;}

.redes-sociales h4{
    color:var(--vino);
    margin-bottom:10px;
}

.grid-redes{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.grid-redes a{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:7px 10px;
    border-radius:9px;
    color:#b8860b;
    font-size:14px;
    font-weight:800;
    border:1px solid transparent;
    transition:.3s;
}

.grid-redes a:hover{
    background:#111;
    color:#ffd700;
    border-color:var(--dorado);
    transform:translateY(-4px);
}

.contacto-footer{
    margin-top:12px;
    padding-top:14px;
    border-top:1px solid #eee;
    color:var(--vino);
    font-style:italic;
    font-weight:700;
    line-height:1.55;
}

.acciones{
    padding:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.acciones iframe{
    width:100%;
    height:350px;
    border:0;
    display:block;
}

.botones{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:0 20px 20px;
}

.btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px;
    border-radius:12px;
    color:#fff;
    font-weight:800;
    transition:.3s;
}

.btn-wsp{background:var(--verde);}
.btn-llamar{background:var(--vino);}
.btn:hover{filter:brightness(1.08);transform:translateY(-3px);}

/*====================================================
            SEO FOOTER
====================================================*/

#seo-footer{
    padding:50px 20px;
    background:#dcc8a0;
    color:var(--vino);
    text-align:center;
}

.linea-divisor{
    width:min(90%,1100px);
    height:5px;
    background:var(--vino);
    margin:0 auto 40px;
    border-radius:4px;
}

.seo-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    max-width:1100px;
    margin:0 auto;
}

.seo-col h3{font-size:24px;margin-bottom:14px;}
.seo-col i{font-size:30px;margin-bottom:10px;display:block;}
.hashtags{font-size:14px;font-style:italic;color:#4a0d18;margin-top:15px;line-height:1.45;word-break:break-word;}

/*====================================================
            FOOTER
====================================================*/

.site-footer{
    background:#1a1a1a;
    padding:42px 20px;
    text-align:center;
    border-top:5px solid var(--dorado);
}

.footer-copy{
    color:#888;
    font-size:14px;
    margin-bottom:22px;
}

.footer-logo img{
    max-width:125px;
    margin:0 auto 25px;
    background:#fff;
    padding:10px;
    border-radius:50%;
}

.footer-adge{margin:22px 0 10px;}
.adge-title{color:#fff;font-size:19px;letter-spacing:3px;margin-bottom:5px;}
.adge-slogan{color:var(--dorado);font-size:12px;letter-spacing:1px;text-transform:uppercase;}
.adge-slogan-sub{color:#888;font-size:12px;letter-spacing:1px;margin-top:3px;}

.footer-seo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:30px;
    max-width:1100px;
    margin:35px auto;
    text-align:left;
}

.footer-seo-box h3{
    color:var(--dorado);
    font-size:20px;
    margin-bottom:16px;
    text-transform:uppercase;
}

.footer-seo-box ul{list-style:none;}
.footer-seo-box li{padding:6px 0;color:#d9d9d9;font-size:14px;}
.footer-seo-box a{display:block;padding:7px 0;color:#d9d9d9;transition:.25s;}
.footer-seo-box a:hover{color:var(--dorado);padding-left:8px;}

.seo-text{
    color:#cfcfcf;
    font-size:14px;
    line-height:1.7;
    max-width:900px;
    margin:25px auto 0;
    text-align:center;
}

.seo-text p{margin-bottom:12px;}

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

.floating-buttons{
    position:fixed;
    right:18px;
    bottom:28px;
    display:flex;
    flex-direction:column;
    gap:14px;
    z-index:9999;
}

.float-btn{
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:28px;
    box-shadow:0 4px 10px rgba(0,0,0,.35), inset 0 -5px 5px rgba(0,0,0,.2);
    animation:floating 3s ease-in-out infinite;
    transition:.3s;
}

.float-btn.whatsapp{background:var(--verde);}
.float-btn.phone{background:var(--azul);}
.float-btn:hover{transform:scale(1.12) translateY(-5px);}

@keyframes floating{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
}

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

@media(max-width:1024px){
    .nav-menu{gap:8px;}
    .nav-menu a{font-size:13px;padding:8px 9px;}
    .social-container{gap:10px;}
    .logo{width:120px;}
    .galeria-contenedor{grid-template-columns:repeat(2,1fr);}
    .qs-container{gap:40px;}
}

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

@media(max-width:768px){
    html, body{
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
    }

    .main-header{
        height:80px;
        padding:0 12px;
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
    }

    .logo-container{width:auto;}
    .logo{width:95px;height:auto;margin:0;}

    .mobile-title{
        display:block;
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        color:var(--dorado);
        font-size:12px;
        font-weight:800;
        text-transform:uppercase;
        white-space:nowrap;
        pointer-events:none;
    }

    .nav-menu,
    .social-container{
        display:none !important;
    }

    .menu-mobile-icon{
        display:flex;
        width:46px;
        height:46px;
        border-radius:50%;
        align-items:center;
        justify-content:center;
        background:#050505;
        border:2px solid var(--dorado);
        color:var(--dorado);
        font-size:21px;
        cursor:pointer;
        flex-shrink:0;
    }

    .nav-menu-mobile{
        display:none;
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:#050505;
        border-bottom:3px solid var(--dorado);
        z-index:99998;
        text-align:center;
    }

    .nav-menu-mobile a{
        display:block;
        padding:16px;
        color:#fff;
        font-weight:800;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .nav-menu-mobile a:hover{
        background:var(--dorado);
        color:#111;
    }

    .mobile-linea-verde{
        display:block;
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        height:5px;
        background:var(--dorado);
        box-shadow:0 0 10px var(--dorado);
    }

    .hero{
        min-height:100svh;
        padding:105px 14px 45px;
        width:100%;
        max-width:100%;
    }

    .hero-content{
        width:100%;
        max-width:100%;
    }

    .titulo{
        font-size:38px;
        line-height:1.05;
        letter-spacing:0;
    }

    .subtitulo{
        font-size:16px;
        letter-spacing:3px;
        margin-top:16px;
    }

    .descripcion{
        font-size:15px;
        line-height:1.6;
        margin:22px auto;
    }

    .descripcion br{
        display:none;
    }

    .linea-3d{
        margin:22px auto;
        width:70%;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
        gap:14px;
    }

    .btn-hero{
        width:220px;
        padding:14px 20px;
        font-size:16px;
    }

    .bg-img:nth-child(1),
    .bg-img:nth-child(2),
    .bg-img:nth-child(3),
    .bg-img:nth-child(4),
    .bg-img:nth-child(5){
        background-position:center center;
    }

    .qs-banner{
        min-height:auto;
        flex-direction:row;
        padding:12px 10px;
        gap:8px;
    }

    .qs-banner h2{
        font-size:18px;
        letter-spacing:1px;
        flex:1;
    }

    .qs-btn{
        padding:9px 12px;
        font-size:11px;
        gap:5px;
    }

    .qs-container{
        flex-direction:column;
        text-align:center;
        gap:35px;
        padding:50px 6% 0;
    }

    .qs-texto span{font-size:13px;letter-spacing:2px;}
    .qs-texto h3{font-size:30px;}
    .qs-linea{margin:24px auto;}
    .qs-texto p{font-size:16px;}

    .qs-estadisticas,
    .qs-botones{
        flex-direction:column;
        align-items:center;
    }

    .qs-card,
    .btn-galeria,
    .btn-cotizar{
        width:100%;
        max-width:320px;
    }

    .seccion-galeria{
        padding:55px 0 65px;
    }

    .galeria-contenedor{
        grid-template-columns:1fr;
        gap:24px;
        padding:0 18px;
        margin-bottom:45px;
    }

    .galeria-item img{
        height:auto;
        max-height:none;
        object-fit:contain;
        background:#000;
    }

    .galeria-footer{
        flex-direction:column;
        align-items:center;
        gap:16px;
    }

    .btn-contacto{
        width:260px;
        max-width:92%;
    }

    #contacto{
        padding:75px 16px;
    }

    .bloque-principal{
        grid-template-columns:1fr;
        gap:24px;
    }

    .datos-cajon{padding:25px 16px;}
    .grid-redes{flex-direction:column;}
    .acciones iframe{height:300px;}

    .seo-container{
        grid-template-columns:1fr;
        gap:25px;
    }

    .footer-seo-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .floating-buttons{
        right:12px;
        bottom:18px;
        gap:10px;
    }

    .float-btn{
        width:50px;
        height:50px;
        font-size:24px;
    }
}

@media(max-width:380px){
    .mobile-title{font-size:10.5px;}
    .logo{width:82px;}
    .menu-mobile-icon{width:42px;height:42px;}
    .titulo{font-size:34px;}
    .subtitulo{font-size:14px;letter-spacing:2px;}
}

/*====================================
     BOTONES FLOTANTES PREMIUM
====================================*/

/*====================================
   BOTONES FLOTANTES PREMIUM
====================================*/

.floating-buttons{
    position:fixed;
    right:20px;
    bottom:20px;
    display:flex;
    flex-direction:column;
    gap:15px;
    z-index:999999;
}

.float-btn{
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#ffffff;
    font-size:28px;
    transition:all .35s ease;
}

/*=========================
     WHATSAPP
=========================*/

.float-btn.whatsapp{
    background:#25D366 !important;
    border:2px solid #ffffff33;
    box-shadow:
        0 0 12px #25D366,
        0 0 25px rgba(37,211,102,.90),
        0 0 45px rgba(37,211,102,.60);
}

.float-btn.whatsapp:hover{
    transform:scale(1.12);
    box-shadow:
        0 0 18px #25D366,
        0 0 35px #25D366,
        0 0 60px rgba(37,211,102,.95);
}

/*=========================
        LLAMAR
=========================*/

.float-btn.phone{
    background:#8B0000 !important;
    border:2px solid #ffffff33;
    box-shadow:
        0 0 12px #8B0000,
        0 0 25px rgba(139,0,0,.90),
        0 0 45px rgba(139,0,0,.60);
}

.float-btn.phone:hover{
    transform:scale(1.12);
    box-shadow:
        0 0 18px #8B0000,
        0 0 35px #8B0000,
        0 0 60px rgba(139,0,0,.95);
}

/*=========================
      CELULAR
=========================*/

@media(max-width:768px){

    .floating-buttons{
        right:15px;
        bottom:18px;
    }

    .float-btn{
        width:56px;
        height:56px;
        font-size:25px;
    }

}


/* BOTONES FLOTANTES DEFINITIVOS */

.botones-flotantes-final{
    position:fixed !important;
    right:18px !important;
    bottom:20px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:15px !important;
    z-index:9999999 !important;
}

.boton-flotante-final{
    width:60px !important;
    height:60px !important;
    border-radius:50% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#fff !important;
    font-size:28px !important;
    text-decoration:none !important;
    opacity:1 !important;
    visibility:visible !important;
}

.boton-wsp-final{
    background:#25D366 !important;
    box-shadow:0 0 18px #25D366, 0 0 40px rgba(37,211,102,.9) !important;
}

.boton-call-final{
    background:#8B0000 !important;
    box-shadow:0 0 18px #8B0000, 0 0 40px rgba(139,0,0,.9) !important;
}

.boton-flotante-final:hover{
    transform:scale(1.12) !important;
}

@media(max-width:768px){
    .botones-flotantes-final{
        right:15px !important;
        bottom:18px !important;
    }

    .boton-flotante-final{
        width:56px !important;
        height:56px !important;
        font-size:25px !important;
    }
}




/* BOTONES HERO MISMA MEDIDA Y BRILLO */

.hero-buttons{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:25px !important;
    flex-wrap:wrap !important;
}

.btn-hero{
    width:230px !important;
    height:58px !important;
    border-radius:50px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    color:#fff !important;
    text-decoration:none !important;
    font-size:17px !important;
    font-weight:800 !important;
    letter-spacing:1px !important;
    border:2px solid rgba(255,255,255,.35) !important;
    transition:.35s ease !important;
}

.btn-whatsapp{
    background:#25D366 !important;
    box-shadow:
    0 0 18px #25D366,
    0 0 35px rgba(37,211,102,.75),
    inset 0 0 10px rgba(255,255,255,.35) !important;
}

.btn-llamar{
    background:#8B0000 !important;
    box-shadow:
    0 0 18px #8B0000,
    0 0 35px rgba(255,0,0,.55),
    inset 0 0 10px rgba(255,255,255,.28) !important;
}

.btn-whatsapp:hover{
    transform:translateY(-8px) scale(1.05) !important;
    box-shadow:
    0 0 25px #25D366,
    0 0 55px #00ff66,
    0 0 80px rgba(0,255,102,.75),
    inset 0 0 15px rgba(255,255,255,.45) !important;
}

.btn-llamar:hover{
    transform:translateY(-8px) scale(1.05) !important;
}

@media(max-width:768px){
    .hero-buttons{
        flex-direction:column !important;
        gap:16px !important;
    }

    .btn-hero{
        width:230px !important;
        height:56px !important;
        font-size:16px !important;
    }
}