/* =========================================================
   RESET GLOBAL
========================================================= */

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

:root{
    --azul-marino:#001a33;
    --color-acento:#00ccff;
    --blanco:#ffffff;
    --gris:#666;
    --gris-claro:#f9f9f9;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:100px;
}

body{
    font-family:'Segoe UI',sans-serif;
    background:var(--blanco);
    overflow-x:hidden;
    padding-top:90px;
}

/* =========================================================
   NAVBAR
========================================================= */

.nav-central{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:90px;
    background:var(--azul-marino);
    z-index:9999;

    display:flex;
    align-items:center;

    border-bottom:2px solid var(--color-acento);

    transition:0.3s ease;
}

.nav-central.scrolled{
    box-shadow:0 4px 15px rgba(0,0,0,.3);
}

.nav-container{
    width:100%;
    max-width:1500px;

    margin:auto;

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

    padding:0 clamp(15px,4vw,60px);
}

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

.logos-wrapper{
    display:flex;
    align-items:center;
    gap:20px;
}

.main-logo-top img{
    height:clamp(40px,6vw,75px);
    width:auto;
}

.nav-logo-left img{
    height:clamp(50px,7vw,85px);
    width:auto;
}

/* =========================================================
   LINKS NAV
========================================================= */

.nav-links-right{
    display:flex;
    align-items:center;
    gap:25px;
    list-style:none;
}

.nav-links-right a{
    text-decoration:none;
    color:white;

    font-size:clamp(.75rem,1vw,.95rem);

    font-weight:700;

    text-transform:uppercase;

    transition:.3s;
}

.nav-links-right a:hover{
    color:var(--color-acento);
}

/* =========================================================
   BOTON MENU
========================================================= */

.menu-trigger{
    width:70px;
    height:70px;

    background:var(--color-acento);

    border:none;

    border-radius:10px;

    color:white;

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

    font-size:1.5rem;

    cursor:pointer;

    transition:.3s;
}

.menu-trigger:hover{
    background:#00b8e6;
}

/* =========================================================
   SIDEBAR
========================================================= */

.sidebar{
    height:100%;
    width:0;

    position:fixed;

    top:0;
    right:0;

    z-index:100000;

    background:#0a0a0a;

    overflow-x:hidden;

    transition:.4s;

    padding-top:80px;
}

.sidebar a{
    display:block;

    padding:15px 30px;

    text-decoration:none;

    color:#bbb;

    font-size:1rem;

    transition:.3s;
}

.sidebar a:hover{
    color:var(--color-acento);
    background:#1a1a1a;
}

.close-btn{
    position:absolute;

    top:10px;
    left:20px;

    font-size:2.5rem;

    color:white;

    background:none;

    border:none;

    cursor:pointer;
}

/* =========================================================
   DROPDOWN
========================================================= */

.dropdown-btn{
    width:100%;

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

    background:none;
    border:none;

    color:#bbb;

    padding:15px 30px;

    font-size:1rem;

    cursor:pointer;

    transition:.3s;
}

.dropdown-btn:hover{
    color:var(--color-acento);
    background:#1a1a1a;
}

.dropdown-container{
    display:none;
    overflow:hidden;
}

/* =========================================================
   TITULOS
========================================================= */

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title span{
    display:block;

    color:var(--color-acento);

    font-size:.9rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:10px;
}

.section-title h2{
    color:var(--azul-marino);

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

    font-weight:900;

    text-transform:uppercase;
}

.title-underline{
    width:80px;
    height:4px;

    background:var(--color-acento);

    margin:15px auto 0;

    border-radius:20px;
}

/* =========================================================
   CARDS RESPONSIVE PREMIUM
========================================================= */

.category-cards{
    padding:clamp(35px,5vw,70px) 4%;
    background:var(--gris-claro);
}

/* CONTENEDOR */

.cards-container{

    display:grid;

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

    gap:22px;

    max-width:1400px;

    margin:auto;
}

/* CARD */

.card{

    background:white;

    border-radius:18px;

    overflow:hidden;

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

    transition:.3s ease;

    display:flex;

    flex-direction:column;

    height:100%;
}

.card:hover{

    transform:translateY(-6px);

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

/* IMAGEN */

.card img{

    width:100%;

    /* AQUI ESTA LA CLAVE */
    height:220px;

    object-fit:contain;

    background:white;

    padding:12px;

    transition:.4s ease;
}

.card:hover img{
    transform:scale(1.03);
}

/* BODY */

.card-body{

    padding:20px 18px;

    text-align:center;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    flex-grow:1;
}

/* TITULO */

.card-body h3{

    color:var(--azul-marino);

    font-size:1.2rem;

    margin-bottom:10px;

    line-height:1.2;
}

/* TEXTO */

.card-body p{

    color:var(--gris);

    line-height:1.5;

    font-size:.92rem;

    margin-bottom:18px;
}

/* BOTON */

.btn-card{

    display:inline-flex;

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

    padding:11px 20px;

    border-radius:8px;

    background:var(--color-acento);

    color:white;

    text-decoration:none;

    font-weight:700;

    font-size:.82rem;

    transition:.3s;
}

.btn-card:hover{
    background:var(--azul-marino);
}

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

@media(max-width:992px){

    .cards-container{

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

        gap:18px;
    }

}

/* =========================================================
   TELEFONO
========================================================= */

@media(max-width:768px){

    .cards-container{

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

        gap:12px;
    }

    .card{

        border-radius:14px;
    }

    .card img{

        /* MUCHISIMO MAS PEQUEÑAS */
        height:140px;

        padding:8px;
    }

    .card-body{

        padding:12px;
    }

    .card-body h3{

        font-size:.82rem;

        margin-bottom:6px;
    }

    .card-body p{

        font-size:.7rem;

        line-height:1.35;

        margin-bottom:12px;
    }

    .btn-card{

        width:100%;

        padding:9px 10px;

        font-size:.7rem;
    }

}

/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media(max-width:480px){

    .cards-container{

        gap:10px;
    }

    .card img{

        height:115px;
    }

    .card-body h3{

        font-size:.75rem;
    }

    .card-body p{

        /* OCULTAMOS TEXTO PARA QUE NO SE HAGAN GIGANTES */
        display:none;
    }

    .btn-card{

        font-size:.65rem;

        padding:8px;
    }

}

/* =========================================================
   PROMOCIONES
========================================================= */

.promo-section-integrated{
    padding:60px 5%;
}

.promo-container-integrated{
    display:grid;

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

    gap:20px;

    max-width:1400px;

    margin:auto;
}

.promo-card{
    background:white;

    border-radius:15px;

    overflow:hidden;

    box-shadow:0 4px 15px rgba(0,0,0,.1);
}

.promo-img-wrapper{
    position:relative;

    width:100%;

    min-height:250px;
}

.promo-img-wrapper img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
/* PROMO 1 */
.promo-img-1{
    transform:scale(1.05);
    object-position:center center;
}

/* PROMO 2 */
.promo-img-2{
    transform:scale(1.02);
    object-position:center top;
}

/* PROMO 3 */
.promo-img-3{
    transform:scale(1.05);
}

/* PROMO 4 */
.promo-img-4{
    transform:scale(1.00);
    object-position:center bottom;
}
.promo-tag{
    position:absolute;

    top:15px;
    right:15px;

    background:var(--azul-marino);

    color:white;

    padding:6px 15px;

    border-radius:5px;

    font-size:.75rem;

    font-weight:800;

    z-index:2;
}

.promo-tag.accent{
    background:var(--color-acento);
    color:var(--azul-marino);
}

/* =========================================================
   MODAL
========================================================= */

.modal-overlay{
    position:fixed;

    inset:0;

    background:rgba(0,15,30,.85);

    backdrop-filter:blur(8px);

    display:none;

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

    z-index:9999;

    padding:20px;

    opacity:0;

    pointer-events:none;

    transition:.3s ease;
}

.modal-overlay.active{

    display:flex;

    opacity:1;

    pointer-events:auto;
}

.modal-content{

    width:100%;
    max-width:900px;

    background:white;

    border-radius:20px;

    overflow:hidden;

    transform:translateY(30px);

    transition:.4s ease;

    position:relative;
}

.modal-overlay.active .modal-content{

    transform:translateY(0);
}

.modal-grid{

    display:grid;

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

.modal-image-side{

    background:#f4f7f9;

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

    padding:40px;
}

.modal-image-side img{

    max-width:100%;

    height:auto;

    object-fit:contain;

    cursor:zoom-in;

    transition:.3s ease;
}

.modal-image-side img:hover{
    transform:scale(1.03);
}
.modal-info-side{

    padding:50px 40px;
}

#modal-title{

    color:var(--azul-marino);

    font-size:clamp(1.8rem,4vw,2.5rem);

    margin:10px 0;
}

#modal-description{

    color:#555;

    line-height:1.8;

    margin-bottom:30px;
}

.btn-modal-action{

    display:inline-block;

    background:var(--azul-marino);

    color:white;

    text-decoration:none;

    padding:15px 35px;

    border-radius:50px;

    transition:.3s;
}

.btn-modal-action:hover{

    background:var(--color-acento);
}

.close-modal{

    position:absolute;

    top:15px;

    right:20px;

    font-size:2rem;

    color:var(--azul-marino);

    cursor:pointer;

    z-index:10000;
}

/* =========================================================
   MODAL RESPONSIVE TELEFONO
========================================================= */

@media(max-width:768px){

    .modal-overlay{

        padding:10px;
    }

    .modal-content{

        width:100%;

        max-width:100%;

        border-radius:18px;

        max-height:90vh;

        overflow-y:auto;
    }

    .modal-grid{

        grid-template-columns:1fr;
    }

    .modal-image-side{

        padding:20px;

        min-height:auto;
    }

    .modal-image-side img{

        width:100%;

        max-width:260px;

        height:auto;

        object-fit:contain;
    }

    .modal-info-side{

        padding:25px 20px;
    }

    #modal-title{

        font-size:1.5rem;

        line-height:1.2;

        margin-bottom:10px;

        text-align:center;
    }

    #modal-description{

        font-size:.85rem;

        line-height:1.6;

        text-align:center;

        margin-bottom:20px;
    }

    .specs-grid{

        grid-template-columns:1fr;

        gap:10px;
    }

    .spec-item{

        padding:10px;
    }

    .spec-item strong{

        font-size:.7rem;
    }

    .spec-item span{

        font-size:.82rem;
    }

    .btn-modal-action{

        width:100%;

        text-align:center;

        padding:14px;

        font-size:.82rem;
    }

    .close-modal{

        top:10px;

        right:15px;

        font-size:1.8rem;
    }
}

/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media(max-width:480px){

    .modal-image-side img{

        max-width:220px;
    }

    #modal-title{

        font-size:1.3rem;
    }

    #modal-description{

        font-size:.78rem;
    }

    .btn-modal-action{

        font-size:.75rem;
    }
}
/* =========================================================
   SPECS
========================================================= */

.specs-grid{
    display:grid;

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

    gap:10px;

    margin:20px 0;
}

.spec-item{
    background:#f8f9fa;

    padding:12px;

    border-radius:10px;

    border-left:4px solid var(--color-acento);
}

.spec-item strong{
    display:block;

    color:#888;

    font-size:.75rem;

    margin-bottom:5px;
}

.spec-item span{
    color:#333;

    font-weight:700;
}

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

.logos-flotantes-container{
    position:absolute;

    top:110px;

    left:0;

    width:100%;

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

    padding:0 4vw;

    pointer-events:none;

    z-index:2000;
}

.logo-flotante{
    pointer-events:auto;

    transition:.3s ease;

    filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));
}

.logo-flotante:hover{
    transform:scale(1.08);
}

.logo-flotante.izq img{
    height:clamp(60px,20vw,100px);
}

.logo-flotante.der img{
    height:clamp(80px,30vw,100px);
}

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

.footer{
    background: var(--azul-marino);
    color: white;
    padding: 60px 5%;
}

.footer-container{
    max-width: 1400px;
    margin: auto;

    display: grid;

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

    gap: 40px;
}

/* TABLET */

@media(max-width: 992px){

    .footer-container{
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

}

/* TELEFONO */

@media(max-width: 768px){

    .footer{
        padding: 40px 20px;
    }

    .footer-container{

        /* AQUÍ ESTÁ LA MAGIA */
        grid-template-columns: repeat(2, 1fr);

        gap: 25px;

        align-items: start;
    }

    .footer-column h3{
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .footer-column a{
        font-size: .85rem;
        margin-bottom: 8px;
    }

}

/* TELEFONOS MUY PEQUEÑOS */

@media(max-width: 480px){

    .footer-container{

        /* Sigue horizontal */
        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }

}

/* =========================================================
   SLIDER
========================================================= */

.prev,
.next{
    position:absolute;

    top:50%;

    transform:translateY(-50%);

    z-index:10;

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

    border:none;

    color:white;

    padding:15px;

    border-radius:50%;

    cursor:pointer;
}

.prev{
    left:20px;
}

.next{
    right:20px;
}

.dots{
    position:absolute;

    bottom:30px;

    width:100%;

    text-align:center;

    z-index:10;
}

.dot{
    width:12px;
    height:12px;

    display:inline-block;

    margin:0 5px;

    border-radius:50%;

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

    cursor:pointer;
}

.dot.active{
    background:var(--color-acento);
}

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

@media(max-width:992px){

    .nav-links-right li:not(:last-child){
        display:none;
    }

    .modal-grid{
        grid-template-columns:1fr;
    }

}

/* =========================================================
   RESPONSIVE MOBILE
========================================================= */

@media(max-width:768px){

    body{
        padding-top:75px;
    }

    .nav-central{
        height:75px;
    }

    .menu-trigger{
        width:60px;
        height:60px;
    }

    .cards-container{
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .promo-container-integrated{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .promo-img-wrapper{
        min-height:150px;
    }

    .card-body{
        padding:15px;
    }

    .card-body h3{
        font-size:.9rem;
    }

    .card-body p{
        font-size:.75rem;
    }

    .btn-card{
        width:100%;
        font-size:.75rem;
        padding:10px;
    }

    .footer-container{
        grid-template-columns:repeat(2,1fr);
    }

 .logo-flotante.izq img{
    height:45px;
}

.logo-flotante.der img{
    height:60px;
}
.logos-flotantes-container{
    top:80px;
}

    .specs-grid{
        grid-template-columns:1fr;
    }

}

/* =========================================================
   MOBILE PEQUEÑO
========================================================= */

@media(max-width:480px){

    .cards-container{
        grid-template-columns:repeat(2,1fr);
    }

    .promo-container-integrated{
        grid-template-columns:repeat(2,1fr);
    }

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

    .card-body h3{
        font-size:.8rem;
    }

    .card-body p{
        display:none;
    }

}

/* =========================================================
   PROTECCION GLOBAL
========================================================= */

img{
    max-width:100%;
    height:auto;
}

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

body{
    overflow-x:hidden;
}
/* =========================================
   PROMO TAG RESPONSIVE
========================================= */

@media(max-width:768px){

    .promo-tag{
        font-size:.50rem;
        padding:4px 8px;

        top:8px;
        right:8px;
    }

}

@media(max-width:480px){

    .promo-tag{
        font-size:.40rem;
        padding:3px 8px;

        top:6px;
        right:6px;

        border-radius:4px;
    }

}
/* =========================================
   ZOOM DE IMAGEN MODAL
========================================= */

.image-zoom-overlay{

    position:fixed;
    inset:0;

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

    display:none;

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

    z-index:999999;
}

.image-zoom-overlay.active{
    display:flex;
}

#zoomedImage{

    max-width:95%;
    max-height:95vh;

    object-fit:contain;

    cursor:zoom-out;
}

.close-zoom{

    position:absolute;

    top:20px;
    right:30px;

    color:white;

    font-size:3rem;

    cursor:pointer;

    z-index:2;
}