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

body{

    font-family: 'Poppins', sans-serif;

    color: var(--text);

    background:
    linear-gradient(
        180deg,
        #FFFFFF 0%,
        #F8FAFC 40%,
        #FFFFFF 100%
    );

}

/*==========================
    Tipografía de títulos
    (solo home por ahora — el resto
    de páginas sigue con Poppins
    hasta pasarlas también)
==========================*/

.page-home h1,
.page-home h2,
.page-home h3,
.page-home .logo-text strong{

    font-family:var(--font-display);
    font-weight:600;
    letter-spacing:-.01em;

}

a{

    text-decoration:none;

    color:inherit;

}

img{

    display:block;

    max-width:100%;

}

.container{

    width:min(1320px,92%);

    margin:auto;

}

/*----HEADER------*/
.header{

    background:white;

    height:88px;

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

    position:sticky;

    top:0;

    z-index:999;

}

/*-----NAVEGACIÓN-----*/

.nav{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:1;

    gap:40px;

}

.nav a{

    font-weight:500;

    position:relative;

    transition:.3s;

}

.nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.30s;

}

.nav a:hover{

    color:var(--primary);

}

.nav a:hover::after{

    width:100%;

}

.header .container{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

}



.desktop-whatsapp{

    justify-self:end;

}

/*==================================================
        BOTÓN WHATSAPP HEADER
==================================================*/

.desktop-whatsapp{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    width:200px;
    height:46px;

    background:#25D366;
    color:#fff;

    border-radius:12px;

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

    transition:.30s;

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

}

.desktop-whatsapp:hover{

    background:#1EBE5D;

    transform:translateY(-2px);

    box-shadow:0 12px 28px rgba(37,211,102,.35);

}

.desktop-whatsapp i{

    width:20px;
    height:20px;

}

/*-----LOGO-------*/
.logo{

    display:flex;

    align-items:center;

    gap:16px;

}

.logo img{

    width:58px;

}

.logo h2{

    font-size:1.25rem;

    color:var(--primary);

}

.logo span{

    font-size:.80rem;

    color:var(--text-light);

}

/*-----MENÚ-----*/
.menu{

    display:flex;

    list-style:none;

    gap:40px;

}

.menu a{

    font-weight:500;

    position:relative;

    transition:.3s;

}

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.30s;

}

.menu a:hover{

    color:var(--primary);

}

.menu a:hover::after{

    width:100%;

}

/*-----BOTÓN WHATSAPP-----*/

.btn-whatsapp{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:12px 22px;

    min-width:185px;
    height:46px;

    border:2px solid #25D366;
    border-radius:999px;

    background:#fff;
    color:#25D366;

    font-size:.92rem;
    font-weight:600;

    white-space:nowrap;

    flex-shrink:0;

    transition:.30s;

}

.btn-whatsapp svg{

    width:20px;
    height:20px;

    transition:transform .30s ease;

}

.btn-whatsapp:hover{

    background:#25D366;
    color:#fff;

    transform:translateY(-2px);

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

}

.btn-whatsapp:hover svg{

    transform:translateX(3px);

}

/*-----BOTÓN MENÚ-----*/

.menu-toggle{

    display:none;

    background:none;

    border:none;

    cursor:pointer;

    padding:8px;

    color:var(--text);

}

.menu-toggle svg{

    width:30px;

    height:30px;

}

/*------HERO------*/

.hero{

   padding:90px 0;

    background: linear-gradient(
    180deg,
    #F8FAFD 0%,
    #F3F7FC 35%,
    #FFFFFF 100%
);
     position:relative;

    overflow:hidden;

}
/*HERO GRID*/
.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:90px;

}
/*TEXTO*/
.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

    background:#EAF5FC;

    color:var(--primary);

    border:1px solid rgba(0,123,196,.12);

    border-radius:999px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:32px;

}

/*TITULO*/
.hero h1{

    font-size:clamp(48px,5vw,68px);

    font-weight:800;

    color:var(--text);

    line-height:1.05;

    letter-spacing:-1.5px;

    margin-bottom:28px;

    max-width:650px;

}
/*PARRAFO*/
.hero p{

    font-size:1.15rem;

    color:var(--text-light);

    line-height:1.9;

    max-width:560px;

    margin-bottom:42px;

}
.hero .container{

    position:relative;

    z-index:1;

}
.hero::before{

    content:"";

    position:absolute;

    width:900px;
    height:900px;

    border-radius:50%;

    background:rgba(66,174,232,.08);

    top:-350px;
    right:-250px;

    filter:blur(100px);

    opacity:.8;

}

.hero::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(66,174,232,.08);

    bottom:-180px;

    left:-120px;

    filter:blur(70px);

    animation:heroGlow 12s ease-in-out infinite;

}
@keyframes heroGlow{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(40px,-20px);

    }

}

/*BUSCADOR*/

.search{

    margin-bottom:30px;
    display:flex;

align-items:center;

gap:15px;

background:#fff;

padding:10px;

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

border-radius:18px;

max-width:700px;


}


.search-box button:hover{

    background:#082947;

}

/*------CATEGORIAS-------*/

/*-----IMAGEN-----*/
.hero-image{

    display:flex;

    justify-content:center;

}
.hero-image img{

    width:100%;

    max-width:560px;

}

/* ======================
UI KIT
====================== */

.ui-section{

margin:60px 0;

}

.btn{

padding:14px 28px;

border-radius:14px;

border:none;

cursor:pointer;

font-weight:600;

transition:.3s;

}

.btn-primary{

background:var(--primary);

color:#fff;

}

.btn-primary:hover{

background:var(--primary-dark);

}

.btn-secondary{

background:#fff;

border:2px solid var(--primary);

color:var(--primary);

}

.btn-secondary:hover{

background:var(--primary);

color:#fff;

}

.input{

width:100%;

max-width:500px;

padding:16px;

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

border-radius:12px;

font-size:16px;

}



.search input{

flex:1;

border:none;

outline:none;

font-size:16px;

}

.chips{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.chip{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

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

    border-radius:40px;

    background:#fff;

    transition:.3s;

    width:fit-content;

    flex:none;

}

.chip:hover{

background:var(--primary);

color:#fff;

}

.chip.active{

background:var(--primary);

color:#fff;

border-color:var(--primary);

}

.chip svg{

    width:18px;

    height:18px;

}

/*----- LÍNEA BREVE DE SERVICIOS (hero)-----*/
.hero .hero-services-line{

    margin:0 0 30px;

    font-size:1.02rem;

    font-weight:500;

    line-height:1.65;

    color:#5A6B7B;

    max-width:620px;

}

/*----- BENEFICIOS / SERVICIOS (hero)-----*/
.hero-benefits{

    display:grid;

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

    gap:22px;

    max-width:700px;

    margin:6px 0 30px;

}

.benefit{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

    gap:14px;

}

.benefit-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:54px;

    height:54px;

    border-radius:16px;

    background:rgba(0,123,196,.08);

    border:1px solid rgba(0,123,196,.14);

    color:var(--primary);

}

.benefit-icon svg{

    width:27px;

    height:27px;

}

.benefit-text{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.benefit-text strong{

    font-size:.95rem;

    font-weight:700;

    color:var(--text);

    line-height:1.3;

}

.benefit-text span{

    font-size:.88rem;

    line-height:1.5;

    color:var(--text-light);

}

/*----- BOTÓN VER CATEGORÍAS (hero)-----*/
.hero-categories-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    text-decoration:none;

}

.hero-categories-btn svg{

    width:18px;

    height:18px;

}

/*==================================================
        SOLUCIONES Y SERVICIOS
==================================================*/

.home-services{

    padding:80px 0;

    background:var(--surface);

}

.services-grid{

    display:grid;

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

    gap:22px;

}

.service-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:14px;

    padding:36px 26px;

    background:#fff;

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

    border-radius:20px;

    box-shadow:0 8px 24px rgba(0,0,0,.05);

    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;

}

.service-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

    box-shadow:0 16px 34px rgba(0,123,196,.12);

}

.service-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:60px;

    height:60px;

    border-radius:18px;

    background:rgba(0,123,196,.08);

    border:1px solid rgba(0,123,196,.14);

    color:var(--primary);

}

.service-icon svg{

    width:30px;

    height:30px;

}

.service-card h3{

    margin:0;

    font-size:1.05rem;

    font-weight:700;

    color:var(--text);

    line-height:1.35;

}

.service-card p{

    margin:0;

    font-size:.9rem;

    line-height:1.6;

    color:var(--text-light);

}

@media (max-width:1200px){

    .services-grid{

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

    }

}

@media (max-width:992px){

    .services-grid{

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

    }

}

@media (max-width:576px){

    .home-services{

        padding:60px 0;

    }

    .services-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .service-card{

        padding:28px 22px;

    }

}

.badge{

padding:8px 14px;

border-radius:50px;

font-size:14px;

font-weight:600;

margin-right:10px;

}

.badge-primary{

background:#E8F4FC;

color:var(--primary);

}

.badge-success{

background:#EAF8EE;

color:#1E8E3E;

}

.badge-warning{

background:#FFF4D6;

color:#C27A00;

}

/*==================================================
                ENCABEZADO DE SECCIONES
==================================================*/

.section-header{

    max-width:850px;

    margin:0 auto 40px;

    text-align:center;

}

.section-tag{

    display:inline-block;

    margin-bottom:18px;

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.08em;

    color:var(--primary);

    text-transform:uppercase;

}

.section-badge{

    display:inline-block;

    margin-bottom:18px;

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.08em;

    color:var(--primary);

    text-transform:uppercase;

}

.section-header h2{

    margin:0 0 20px;

    font-size:3rem;

    line-height:1.1;

    color:var(--text);

}

.section-header p{

    margin:0;

    font-size:1.1rem;

    line-height:1.8;

    color:var(--text-light);

}

/*==================================================
                    CATEGORÍAS
==================================================*/

.categories{

    padding:80px 0;

}

.categories-grid{

    display:grid;

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

    gap:28px;

}

.category-card{

    display:flex;

    flex-direction:column;

    text-decoration:none;

    color:inherit;

    background:var(--surface);

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

    border-radius:24px;

    padding:42px 34px;

    transition:all .35s ease;

    position:relative;

    overflow:hidden;

}

.category-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.category-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:0 22px 45px rgba(0,123,196,.12);

}

.category-card:hover::before{

    transform:scaleX(1);

}

.category-card svg{

    width:64px;

    height:64px;

    color:var(--primary);

    background:#EAF5FC;

    padding:14px;

    border-radius:18px;

    margin-bottom:28px;

    transition:.35s;

}

.category-card:hover svg{

    background:var(--primary);

    color:#fff;

    transform:scale(1.08);

}

.category-card h3{

    font-size:1.35rem;

    margin-bottom:14px;

    color:var(--text);

}

.category-card p{

    flex:1;

    color:var(--text-light);

    line-height:1.7;

    margin:0;

}


/*=========================
    PRODUCTOS
=========================*/

.featured-products{

    padding:80px 0;

}

.products-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
    align-items:stretch;
}

/*=========================
        PRODUCT CARD V2 (Horizontal compacto: Imagen 44% | Info 56%)
=========================*/

.product-card{
    position:relative;
    display:grid;
    grid-template-columns:44% 56%;
    gap:0;
    min-height:220px;
    background:#ffffff;
    border:1px solid #e8ecf2;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(15,23,42,0.04), 0 8px 24px -16px rgba(15,23,42,0.12);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.product-card:hover{
    transform:translateY(-4px);
    border-color:#cbd5e1;
    box-shadow:0 12px 28px -10px rgba(0,123,196,0.16);
}

.product-badges{
    position:absolute;
    top:8px;
    left:8px;
    z-index:3;
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    max-width:calc(44% - 16px);
}

.product-badges .product-badge{
    position:static;
}

.product-badge{
    padding:3px 8px;
    border-radius:999px;
    color:#fff;
    font-size:0.60rem;
    font-weight:700;
    letter-spacing:0.03em;
    text-transform:uppercase;
    line-height:1;
    box-shadow:0 1px 4px rgba(15,23,42,0.14);
}

.product-badge.badge-nuevo{

    background:#007BC4;

}

.product-badge.badge-oferta{

    background:#5DD62C;

}

.product-badge.badge-seminuevo{

    background:#0f766e;

}

.product-badge.badge-disponible{

    background:#8B5CF6;

}

.product-badge.badge-agotado{

    background:#b91c1c;

}

.product-badge.badge-preventa{

    background:#d97706;

}

.product-badge.badge-popular{

    background:#7c3aed;

}

.product-badge.badge-destacado{

    background:#b45309;

}

.product-badge.badge-condicion{

    background:var(--badge-condicion);

}

.product-media{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px;
    background:radial-gradient(120% 120% at 50% 10%, #ffffff 0%, #f4f6fa 100%);
    border-right:1px solid #f1f4f8;
    overflow:hidden;
}

.product-image{
    width:100%;
    height:100%;
    max-height:180px;
    object-fit:contain;
    padding:0;
    min-height:0;
    display:block;
    transition:transform .3s ease;
}

.product-card:hover .product-image{
    transform:scale(1.04);
}

.product-info{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:14px 16px;
    min-width:0;
}

.product-brand{
    display:flex;
    align-items:center;
    gap:6px;
    min-height:18px;
    margin:0 0 4px;
}

.product-brand-logo{
    height:16px;
    width:auto;
    max-width:75px;
    object-fit:contain;
}

.product-brand-name{
    font-size:0.64rem;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#8b93a3;
}

.product-name{
    font-size:0.92rem;
    font-weight:700;
    line-height:1.3;
    color:var(--text);
    letter-spacing:-0.1px;
    margin:0 0 5px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.4em;
}

.product-desc{
    font-size:0.76rem;
    line-height:1.4;
    color:#64748b;
    margin:0 0 8px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.1em;
}

.product-features{
    display:none;
}

.product-price{
    margin-top:auto;
    display:flex;
    flex-direction:column;
    gap:2px;
    margin-bottom:4px;
}

.product-price-main{
    font-size:1.22rem;
    font-weight:800;
    color:var(--text);
    letter-spacing:-0.2px;
    line-height:1.15;
}

.product-price-secondary{
    display:block;
    font-size:0.74rem;
    font-weight:500;
    color:#64748b;
    line-height:1.2;
}

.product-price-strike{
    font-size:0.74rem;
    color:#97a0b0;
    text-decoration:line-through;
}

.product-msi{
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin:0 0 10px;
    padding:3px 8px;
    border-radius:6px;
    background:rgba(0,123,196,0.08);
    color:#007BC4;
    border:1px solid rgba(0,123,196,0.18);
    font-size:0.70rem;
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1.2;
}

.product-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:9px 14px;
    border:none;
    border-radius:9px;
    background:linear-gradient(135deg, #007BC4, #005D96);
    color:#ffffff;
    font-size:0.82rem;
    font-weight:700;
    text-decoration:none;
    box-sizing:border-box;
    box-shadow:0 2px 6px rgba(0,123,196,0.18);
    transition:filter .2s ease, transform .2s ease, box-shadow .2s ease;
    margin-top:auto;
}

.product-button:hover{
    filter:brightness(1.08);
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,123,196,0.28);
}

.product-button svg,
.product-button [data-lucide]{
    width:15px;
    height:15px;
    transition:transform .2s ease;
}

.product-button:hover svg,
.product-button:hover [data-lucide]{
    transform:translateX(3px);
}

/*=========================
        MARCAS
=========================*/

.brands{

    padding:85px 0;

    background:var(--background);

}

.brands-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:28px;

    margin-top:35px;

}

.brand-card{

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--surface);

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

    border-radius:24px;

    height:130px;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.brand-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,123,196,.12);

    border-color:var(--primary);

}

.brand-card img{

    max-width:110px;

    max-height:55px;

    filter:grayscale(100%);

    opacity:.65;

    transition:.35s;
    

}

.brand-card:hover img{

    filter:none;

    opacity:1;

    transform:scale(1.05);

}

.brand-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.brand-card:hover::before{

    transform:scaleX(1);

}

/*==================================================
            ¿POR QUÉ ELEGIR BLUES INFORMÁTICA?
==================================================*/

.why-us{

    padding:85px 0;

    background:#F8FAFC;

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));

    gap:28px;

    margin-top:40px;

}

.why-card{

    background:var(--surface);

    border:1px solid var(--border);
    border-left:4px solid var(--primary);

    border-radius:0;

    clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);

    padding:40px;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.why-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,123,196,.14);

    border-color:var(--primary);

}

.why-card svg{

    width:56px;

    height:56px;

    padding:14px;

    border-radius:10px;

    background:var(--primary);

    color:#fff;

    box-shadow:7px 7px 0 var(--primary-light);

    margin-bottom:32px;

    transition:.3s;

}

.why-card:hover svg{

    transform:translate(4px,4px);

    box-shadow:3px 3px 0 var(--primary-light);

}

.why-card h3{

    font-size:1.45rem;

    color:var(--text);

    margin-bottom:16px;

}

.why-card p{

    color:var(--text-light);

    line-height:1.8;

}


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

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

.footer-cta{

    padding:80px 0 50px;

    background:var(--background);

}

.footer-cta-box{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    border-radius:32px;

    padding:60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

    color:#fff;

    box-shadow:0 25px 60px rgba(0,123,196,.18);

}

.footer-cta-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

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

    font-size:.85rem;

    font-weight:600;

    margin-bottom:18px;

}

.footer-cta h2{

    font-size:clamp(2rem,4vw,3rem);

    line-height:1.15;

    margin-bottom:18px;

}

.footer-cta p{

    max-width:650px;

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

    line-height:1.8;

}

.footer-cta-button{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 34px;

    border-radius:18px;

    background:#fff;

    color:var(--primary);

    font-weight:700;

    white-space:nowrap;

    transition:.35s;

}

.footer-cta-button:hover{

    transform:translateY(-5px);

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

}

.footer-cta-button svg{

    width:22px;

    height:22px;

}

.footer{

    background:#111111;

    color:#fff;

    padding:80px 0 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

}

.footer-about img{

    width:70px;

    margin-bottom:22px;

}

.footer-about h3{

    font-size:1.7rem;

    margin-bottom:18px;

}

.footer-about p{

    color:#CBD5E1;

    line-height:1.8;

    max-width:320px;

}

.footer h4{

    margin-bottom:22px;

    font-size:1.1rem;

}

.footer ul{

    list-style:none;

}

.footer li{

    margin-bottom:14px;

    color:#CBD5E1;

}

.footer a{

    transition:.30s;

}

.footer a:hover{

    color:var(--primary-light);

}

.footer-social{

    display:flex;

    gap:15px;

}

.footer-social a{

    width:48px;
    height:48px;

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

    border-radius:50%;

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

    transition:.35s;

}

.footer-social img{

    width:22px;
    height:22px;

}

.footer-social a:hover{

    background:var(--primary);

    transform:translateY(-4px);

}

.footer-social a:hover{

    background:var(--primary);

    transform:translateY(-4px);

}

.footer-social svg{

    width:20px;

    height:20px;

}

.footer-bottom{

    margin-top:70px;

    padding-top:30px;

    border-top:1px solid rgba(255,255,255,.12);

    text-align:center;

    color:#94A3B8;

}

.footer li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:16px;

}

.footer li svg{

    width:18px;

    height:18px;

    color:var(--primary-light);

    flex-shrink:0;

}

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

@media (max-width:992px){

    .footer{
        padding:60px 0 30px;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:40px 30px;
    }

    .footer-about{
        grid-column:1 / -1;
    }

    .footer-about p{
        max-width:480px;
    }

}

@media (max-width:576px){

    .footer-grid{
        grid-template-columns:1fr;
        gap:36px;
    }

    .footer-about p{
        max-width:100%;
    }

    .footer-bottom{
        margin-top:50px;
    }

}

/*=====================================
ANIMACIÓN SCROLL
=====================================*/

/*=====================================
APARICIÓN AL HACER SCROLL
    (una sola vez, sutil, no en el hero)
=====================================*/

.reveal{

    opacity:0;

    transform:translateY(18px);

    transition:
        opacity .5s cubic-bezier(.16,1,.3,1),
        transform .5s cubic-bezier(.16,1,.3,1);

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

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

@keyframes floatHero{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

.hero-image{

    animation:floatHero 7s ease-in-out infinite;

}

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

.hero::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(66,174,232,.08);

    bottom:-180px;

    left:-120px;

    filter:blur(70px);

    animation:heroGlow 12s ease-in-out infinite;

}

@keyframes heroGlow{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(40px,-20px);

    }

}

/*=====================================
BOTÓN CTA
=====================================*/

@keyframes pulseButton{

    0%,100%{

        box-shadow:0 0 0 rgba(0,123,196,.15);

    }

    50%{

        box-shadow:0 18px 35px rgba(0,123,196,.35);

    }

}

.footer-cta-button{

    animation:pulseButton 7s ease-in-out infinite;

}

/* ===============================
   MENÚ MÓVIL
=============================== */

.mobile-menu{
    display:none;
}

.menu-overlay{

    position:fixed;
    inset:0;

    background:rgba(15,23,42,.45);

    opacity:0;
    visibility:hidden;

    transition:opacity .3s ease, visibility .3s ease;

    z-index:997;

}

.menu-overlay.active{

    opacity:1;
    visibility:visible;

}

@media (max-width:992px){

    .nav{
        display:none;
    }

    .desktop-whatsapp{
        display:none;
    }

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .mobile-menu{

        position:fixed;

        top:76px;
        left:0;
        right:0;

        display:none;
        flex-direction:column;

        padding:24px;

        background:#fff;

        box-sizing:border-box;

        gap:24px;

        border-top:1px solid #ececec;

        box-shadow:0 12px 30px rgba(0,0,0,.08);

        z-index:998;

        max-width:100vw;

        max-height:calc(100vh - 76px);
        max-height:calc(100dvh - 76px);

        overflow-y:auto;
        overflow-x:hidden;

        -webkit-overflow-scrolling:touch;

    }

    .mobile-menu.active{
        display:flex;
    }

    .mobile-menu-header{

        display:flex;
        align-items:center;
        justify-content:space-between;

        padding-bottom:20px;
        margin-bottom:4px;

        border-bottom:1px solid #ececec;

    }

    .mobile-menu-header img{
        width:44px;
    }

    .mobile-menu-header button{

        background:none;
        border:none;
        cursor:pointer;
        padding:6px;
        color:var(--text);

    }

    .mobile-menu-header button svg{
        width:26px;
        height:26px;
    }

    .mobile-nav{

        display:flex;
        flex-direction:column;

        gap:22px;

    }

    .mobile-nav a{

        display:block;

        font-size:1.05rem;

        font-weight:500;

        padding:6px 0;

    }

    .mobile-menu .btn-whatsapp{

        display:flex;

        align-items:center;

        justify-content:center;

        gap:10px;

        width:100%;

        max-width:100%;

        min-width:0;

        flex-shrink:1;

        align-self:stretch;

        padding:14px 20px;

        border:2px solid #25D366;

        border-radius:999px;

        box-sizing:border-box;

        font-size:.95rem;

        font-weight:600;

        white-space:normal;

        text-align:center;

        overflow-wrap:anywhere;

        background:#25D366;

        color:#fff;

    }

    .mobile-menu .btn-whatsapp span{

        min-width:0;

        overflow-wrap:anywhere;

    }

    .mobile-menu .btn-whatsapp svg{

        color:#fff;

        flex-shrink:0;

    }

}

/* =====================================
   TABLET Y MÓVIL
===================================== */

@media (max-width:992px){

    .logo-text span{
        display:none;
    }

    .logo img{
        width:50px;
    }

    .header{
        height:76px;
    }

    .mobile-menu{
        top:76px;
    }

}

@media (max-width:576px){

    .logo h2{
        font-size:1.2rem;
    }

    .container{
        width:94%;
    }

}

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

@media (max-width:992px){

    .hero{

        padding:35px 0 60px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:60px;

        text-align:center;

    }

    .hero-content{

    display:flex;
    flex-direction:column;
    align-items:center;

    order:1;

}

    .hero h1{

        max-width:700px;

    }

    .hero p{

        max-width:650px;

    }

    .search{

        width:100%;

        max-width:700px;

    }

    .chips{

        justify-content:center;

    }

    .hero-image{

    order:2;

    display:flex;
    justify-content:center;

    margin-top:40px;

}

   .hero-image img{

    width:100%;

    max-width:300px;

    height:auto;

}

}

@media (max-width:768px){

    .hero{

        padding:60px 0;

    }

    .hero h1{

        font-size:2.6rem;

        line-height:1.15;

        letter-spacing:-1px;

    }

    .hero p{

        font-size:1rem;

    }

    .search{

        flex-direction:column;

        padding:16px;

        gap:16px;

    }

    .search input{

        width:100%;

    }

    .search button{

        width:100%;

    }

    .hero-benefits{

        grid-template-columns:1fr;

        gap:22px;

        max-width:440px;

        margin-left:auto;

        margin-right:auto;

        width:100%;

    }

    .benefit{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

}

@media (max-width:576px){

    .hero h1{

        font-size:2rem;
        line-height:1.1;
        max-width:11ch;
        margin:auto;

    }

    .hero-tag{

        font-size:.82rem;
        padding:10px 16px;

    }

    .chip{

        width:100%;
        justify-content:center;

    }

    .hero-image img{

        max-width:300px;

    }

}

/*=====================================
    CATEGORÍAS RESPONSIVE
=====================================*/

@media (max-width:1200px){

    .categories-grid{

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

    }

}

@media (max-width:768px){

    .categories{

        padding:70px 0;

    }

    .categories-grid{

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

        gap:20px;

    }

}

@media (max-width:576px){

    .categories-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .category-card{

        padding:24px;

        border-radius:18px;

    }

    .category-card svg{

        width:52px;
        height:52px;

        padding: 12px;

        margin-bottom:16px;

    }

    .category-card h3{

        font-size:1.2rem;

    }

    .category-card p{

    line-height:1.6;

    }
    }

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

@media (max-width:992px){
    .product-card{
        grid-template-columns:42% 58%;
    }
    .product-media{
        padding:12px;
    }
    .product-info{
        padding:12px 14px;
    }
}

@media (max-width:768px){
    .featured-products{
        padding:50px 0;
    }
}

/* Móvil (≤ 640px): formato vertical compacto */
@media (max-width:640px){
    .products-grid{
        grid-template-columns:1fr;
        gap:16px;
    }
    .product-card{
        grid-template-columns:1fr;
        min-height:auto;
        border-radius:14px;
    }
    .product-badges{
        max-width:calc(100% - 16px);
    }
    .product-media{
        border-right:none;
        border-bottom:1px solid #f1f4f8;
        min-height:170px;
        max-height:190px;
        padding:14px;
    }
    .product-info{
        padding:12px 14px 14px;
    }
    .product-name{
        min-height:auto;
    }
    .product-desc{
        min-height:auto;
    }
}

/*=====================================
    MEGA MENÚ CATEGORÍAS (DESKTOP)
=====================================*/

.nav-item{

    position:relative;

}

.nav-item > .nav-link{

    display:flex;

    align-items:center;

    gap:6px;

    cursor:pointer;

}

.nav-item .chev{

    width:16px;

    height:16px;

    transition:transform var(--transition);

}

.nav-item.open > .nav-link .chev{

    transform:rotate(180deg);

}

/* puente invisible para no perder el hover al ir al panel */
.nav-item::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:100%;

    height:18px;

}

.mega-menu{

    position:absolute;

    top:calc(100% + 18px);

    left:50%;

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

    width:820px;

    max-width:calc(100vw - 40px);

    display:grid;

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

    gap:14px;

    padding:30px 34px 26px;

    background:
        linear-gradient(160deg, rgba(38,50,60,.88) 0%, rgba(30,41,51,.82) 55%, rgba(26,34,44,.84) 100%);

    -webkit-backdrop-filter:blur(26px) saturate(150%);

    backdrop-filter:blur(26px) saturate(150%);

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

    border-radius:var(--radius-sm);

    box-shadow:
        0 18px 40px rgba(0,0,0,.16),
        0 6px 16px rgba(0,0,0,.10),
        inset 0 1px 0 rgba(255,255,255,.06);

    opacity:0;

    visibility:hidden;

    transition:opacity var(--transition), visibility var(--transition), transform var(--transition);

    z-index:1002;

}

/* iluminación azul institucional sutil en la esquina superior */
.mega-menu::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:62%;

    height:56%;

    border-radius:var(--radius-sm);

    background:radial-gradient(120% 90% at 0% 0%, rgba(0,123,196,.24) 0%, rgba(0,123,196,0) 62%);

    pointer-events:none;

}

.nav-item.open > .mega-menu,
.nav-item:hover > .mega-menu{

    opacity:1;

    visibility:visible;

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

}

.mega-menu a::after{

    content:none;

}

.mega-column h4{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

    color:#F2F6FA;

    margin-bottom:14px;

}

.mega-column h4 > svg{

    width:22px;

    height:22px;

    color:#42AEE8;

    flex-shrink:0;

}

.mega-column h4:not(:first-child){

    margin-top:6px;

    padding-top:18px;

    border-top:1px solid rgba(255,255,255,.10);

}

.mega-column:not(:first-child){

    border-left:1px solid rgba(255,255,255,.10);

    padding-left:16px;

}

.mega-column ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:10px;

    margin:0;

    padding:0;

}

.mega-column ul li a{

    display:inline-block;

    font-size:.92rem;

    font-weight:500;

    color:#C6D0DA;

    text-decoration:none;

    transition:color var(--transition), transform var(--transition);

}

.mega-column ul li a:hover{

    color:#FFFFFF;

    transform:translateX(3px);

}

.mega-column .mega-sub{

    margin:2px 0 6px 14px;

}

.mega-column .mega-sub ul{

    gap:8px;

}

.mega-column .mega-sub a{

    font-size:.84rem;

    font-weight:400;

    color:#93A1AE;

}

.mega-column .mega-sub a:hover{

    color:var(--primary-light);

}

/* enlace secundario "Ver todo el catálogo" */
.mega-menu-footer{

    grid-column:1 / -1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-top:8px;

    padding:14px 0 2px;

    border-top:1px solid rgba(255,255,255,.12);

    font-size:.9rem;

    font-weight:500;

    color:var(--primary-light);

    text-decoration:none;

    transition:color var(--transition);

}

.mega-menu-footer .chev,
.mega-menu-footer i{

    width:17px;

    height:17px;

    transition:transform var(--transition);

}

.mega-menu-footer:hover{

    color:#7CC7F0;

}

.mega-menu-footer:hover i{

    transform:translateX(3px);

}

/*=====================================
    MEGA MENÚ CATEGORÍAS (MÓVIL)
=====================================*/

.mobile-accordion{

    display:none;

}

@media (max-width:992px){

    .mobile-accordion{

        display:block;

        border-bottom:1px solid #ececec;

        padding-bottom:4px;

    }

    .mobile-accordion-trigger{

        width:100%;

        display:flex;

        align-items:center;

        justify-content:space-between;

        background:none;

        border:none;

        padding:6px 0;

        font-family:inherit;

        font-size:1.05rem;

        font-weight:500;

        color:var(--text);

        cursor:pointer;

    }

    .mobile-accordion-trigger .chev{

        width:20px;

        height:20px;

        transition:transform var(--transition);

        flex-shrink:0;

    }

    .mobile-accordion.open .mobile-accordion-trigger .chev{

        transform:rotate(180deg);

    }

    .mobile-accordion-content{

        display:grid;

        grid-template-rows:0fr;

        transition:grid-template-rows var(--transition);

    }

    .mobile-accordion.open .mobile-accordion-content{

        grid-template-rows:1fr;

    }

    .mobile-accordion-content > .mobile-mega-wrap{

        overflow:hidden;

    }

    .mobile-mega{

        display:grid;

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

        gap:6px 22px;

        padding:16px 0 10px;

    }

    .mobile-mega h4{

        display:flex;

        align-items:center;

        gap:8px;

        font-size:.72rem;

        font-weight:700;

        letter-spacing:.05em;

        text-transform:uppercase;

        color:var(--primary);

        margin:12px 0 8px;

    }

    .mobile-mega h4 > svg{

        width:20px;

        height:20px;

        color:#42AEE8;

        flex-shrink:0;

    }

    .mobile-mega ul{

        list-style:none;

        margin:0;

        padding:0;

        display:flex;

        flex-direction:column;

        gap:8px;

    }

    .mobile-mega ul a{

        display:block;

        color:var(--text-light);

        font-size:.9rem;

        font-weight:400;

        text-decoration:none;

        transition:color var(--transition);

    }

    .mobile-mega ul a:hover{

        color:var(--primary);

    }

    .mobile-mega ul ul{

        margin:6px 0 4px 12px;

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

        padding-left:12px;

        gap:6px;

    }

    .mobile-mega .mega-menu-footer{

        grid-column:1 / -1;

        justify-content:flex-start;

        margin-top:10px;

        padding:12px 0 0;

        font-size:.9rem;

    }

    .mobile-mega .mega-menu-footer i{

        width:17px;

        height:17px;

    }

}

@media (max-width:400px){

    .mobile-mega{

        grid-template-columns:1fr;

        gap:4px 0;

    }

}

/*=====================================
    HOME — HERO PRINCIPAL + HEADER
    (Solo página principal: body.page-home)
=====================================*/

.page-home{
    overflow-x:hidden;
}

/* ---- Header integrado visualmente sobre el hero ---- */

.page-home .header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    background:transparent;
    box-shadow:none;
    transition:background .3s ease, box-shadow .3s ease;
}

.page-home .header .header-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
}

.page-home .nav{
    flex:1;
}

/* Icono de búsqueda del header */
.header-search{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.24);
    background:rgba(255,255,255,.08);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    color:#fff;
    text-decoration:none;
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
}

.header-search:hover{
    background:rgba(255,255,255,.18);
    border-color:rgba(255,255,255,.45);
    transform:translateY(-2px);
}

.header-search svg{
    width:20px;
    height:20px;
}

/* Estado sobre la imagen (sin scroll): texto y logo claros */
.page-home .header:not(.is-scrolled) .logo-text strong,
.page-home .header:not(.is-scrolled) .nav > a,
.page-home .header:not(.is-scrolled) .nav-item > .nav-link,
.page-home .header:not(.is-scrolled) .menu-toggle{
    color:#fff;
}

.page-home .header:not(.is-scrolled) .logo-text span{
    color:rgba(255,255,255,.72);
}

.page-home .header:not(.is-scrolled) .logo img{
    filter:brightness(0) invert(1);
}

/* Estado con scroll: header sólido sobre el contenido */
.page-home .header.is-scrolled{
    background:#fff;
    box-shadow:0 4px 20px rgba(0,0,0,.06);
}

.page-home .header.is-scrolled .logo-text strong,
.page-home .header.is-scrolled .nav > a,
.page-home .header.is-scrolled .nav-item > .nav-link,
.page-home .header.is-scrolled .menu-toggle{
    color:var(--text);
}

.page-home .header.is-scrolled .logo-text span{
    color:var(--text-light);
}

.page-home .header.is-scrolled .logo img{
    filter:none;
}

.page-home .header.is-scrolled .header-search{
    background:var(--surface);
    border-color:var(--border);
    color:var(--text);
}

/* ---- Hero a pantalla completa (imagen dominante) ---- */

.page-home .hero.hero-cover{
    position:relative;
    isolation:isolate;
    display:grid;
    grid-template-columns:repeat(24, minmax(0,1fr));
    align-items:center;
    padding:0;
    overflow:hidden;
    background-color:#0d1117;
    background-image:url("../img/hero/hero2-principal.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    min-height:100vh;
    min-height:100svh;
}

/* Legibilidad del contenido (lado izquierdo). El velo superior suave
   mantiene el header legible; el degradado horizontal da contraste al
   texto sin ocultar la fotografía. */
.page-home .hero.hero-cover::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:
        linear-gradient(180deg, rgba(4,8,16,.42) 0%, rgba(4,8,16,0) 26%),
        linear-gradient(90deg,
            rgba(7,11,18,.78) 0%,
            rgba(7,11,18,.55) 28%,
            rgba(7,11,18,.32) 55%,
            rgba(7,11,18,.12) 76%,
            rgba(7,11,18,0) 96%);
}

/* Eliminar el orbe decorativo heredado del hero genérico */
.page-home .hero.hero-cover::after{
    content:none;
}

.page-home .hero.hero-cover .hero-content-wrap{
    position:relative;
    z-index:2;
    grid-column:3 / 24;
    justify-self:start;
    align-self:center;
    width:100%;
    margin:0;
    padding:110px 0 80px;
}

/* Estructura editorial: bloque de texto | botón debajo del texto */
.page-home .hero.hero-cover .hero-content{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:clamp(24px, 2vw, 32px);
    align-items:center;
    text-align:left;
    width:100%;
}

.page-home .hero.hero-cover .hero-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    min-width:0;
}

.page-home .hero.hero-cover h1{
    color:#fff;
    text-shadow:0 6px 30px rgba(0,0,0,.5);
    font-size:clamp(3.25rem, 3.4vw, 3.75rem);
    line-height:1.12;
    letter-spacing:-.5px;
    font-weight:800;
    text-wrap:balance;
    max-width:min(23em, 100%);
    margin-bottom:24px;
}

.page-home .hero.hero-cover p{
    color:rgba(255,255,255,.9);
    font-size:clamp(1.15rem, 1.15vw, 1.2rem);
    line-height:1.7;
    width:100%;
    max-width:min(62ch, 100%);
    margin-bottom:16px;
}

.page-home .hero.hero-cover .hero-services-line{
    color:rgba(204,226,248,.88);
    font-size:clamp(1.05rem, 1.05vw, 1.1rem);
    max-width:min(62ch, 100%);
    margin-bottom:0;
}

/* Botón Ver categorías (columna derecha, integrado al bloque) */
.page-home .hero.hero-cover .hero-categories-btn{
    justify-self:start;
    margin-left:0;
    padding:16px 34px;
    border-radius:999px;
    font-size:1rem;
    font-weight:700;
    background:linear-gradient(135deg, #0aa2f0 0%, var(--primary-dark) 100%);
    box-shadow:
        0 16px 36px -12px rgba(0,123,196,.75),
        inset 0 1px 0 rgba(255,255,255,.22);
    transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.page-home .hero.hero-cover .hero-categories-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.06);
    box-shadow:
        0 22px 46px -14px rgba(0,123,196,.9),
        inset 0 1px 0 rgba(255,255,255,.22);
}

.page-home .hero.hero-cover .hero-categories-btn i{
    width:20px;
    height:20px;
    transition:transform .25s ease;
}

.page-home .hero.hero-cover .hero-categories-btn:hover i{
    transform:translateX(4px);
}

/* ---- Tablet ---- */

@media (max-width:992px){

    .page-home .header .header-container{
        gap:14px;
    }

    .page-home .header-search{
        display:none;
    }

    .page-home .hero.hero-cover{
        min-height:90svh;
        background-position:center;
    }

    .page-home .hero.hero-cover::before{
        background:
            linear-gradient(180deg, rgba(4,8,16,.68) 0%, rgba(4,8,16,.1) 36%, rgba(4,8,16,.82) 100%);
    }

    .page-home .hero.hero-cover .hero-content-wrap{
        grid-column:1 / -1;
        padding:140px 0 90px;
    }

    .page-home .hero.hero-cover .hero-content{
        display:grid;
        grid-template-columns:minmax(0, 1fr);
        gap:28px;
        max-width:680px;
        margin:0;
        text-align:left;
    }

    .page-home .hero.hero-cover .hero-copy{
        align-items:flex-start;
    }

    .page-home .hero.hero-cover .hero-categories-btn{
        justify-self:start;
        margin-left:0;
    }

    .page-home .hero.hero-cover h1{
        font-size:clamp(2.75rem, 5.8vw, 3.35rem);
        line-height:1.16;
        margin-bottom:20px;
    }

    .page-home .hero.hero-cover p{
        font-size:1.05rem;
        line-height:1.65;
    }

}

/* ---- Móvil ---- */

@media (max-width:576px){

    .page-home .hero.hero-cover{
        min-height:90svh;
        background-position:left center;
    }

    .page-home .hero.hero-cover .hero-content-wrap{
        padding:120px 0 96px;
    }

    .page-home .hero.hero-cover .hero-content{
        gap:24px;
    }

    .page-home .hero.hero-cover h1{
        font-size:2.15rem;
        letter-spacing:-.5px;
        max-width:none;
        margin:0 0 16px;
    }

    .page-home .hero.hero-cover p{
        font-size:1.03rem;
    }

    .page-home .hero.hero-cover .hero-services-line{
        font-size:.96rem;
        margin-bottom:0;
    }

    .page-home .hero.hero-cover .hero-categories-btn{
        padding:15px 28px;
        font-size:.98rem;
    }

}

/*==================================================
        BOTÓN FLOTANTE DE WHATSAPP
==================================================*/

.btn-whatsapp-flotante {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 50%;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
    transition: transform 0.25s ease, filter 0.25s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.btn-whatsapp-flotante img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.btn-whatsapp-flotante:hover {
    transform: scale(1.1) translateY(-2px);
    filter: drop-shadow(0 8px 16px rgba(37, 211, 102, 0.45)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

.btn-whatsapp-flotante:active {
    transform: scale(0.95);
}

@media (max-width: 768px) {
    .btn-whatsapp-flotante {
        bottom: 20px;
        right: 20px;
        width: 52px;
        height: 52px;
    }
}