@font-face {
    font-family: 'Altone';
    src: url('./tipografias/altone/Altone Trial-Bold.ttf')
         format('truetype');
    font-weight:400;
    font-style:normal;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    scroll-behavior:smooth;
}
body{
  margin:0;
    background-image:url('./imagenes/fondo.png');
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-color:#000;
}
/* =====================================================
                    SPLASH
===================================================== */

#splash{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    background:#000;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
    opacity:1;
    transition:
        opacity .7s ease,
        visibility .7s ease;
}

#splash.ocultar{
    opacity:0;
    visibility:hidden;
}

.splash-logo{
    width:
        clamp(
            130px,
            25vw,
            300px
        );
    height:auto;
    object-fit:contain;
    animation:
        splashLogo 1.8s ease-in-out
        infinite alternate;
}


@keyframes splashLogo{

    from{

        transform:scale(.92);

        opacity:.75;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}



/* =====================================================
                    HEADER
===================================================== */
header{
    width:100%;
    height:78px;
    color: #eee;
    padding: 10px clamp(20px,5vw,70px);
    background:transparent;
    display:flex;
    align-items:center;
    position:sticky;
    top:0;
    z-index:1000;
    border-bottom: 1px solid rgba(255,255,255,.15);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

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

.logo img{
    width:auto;
    height:clamp(42px,5vw,60px);
    display:block;
}

.header-right{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap: clamp(12px,2vw,28px);
}

nav{
    display:flex;
    align-items:center;
    gap:28px;
}


nav a{
    font-family:'Altone',Arial,sans-serif;
    text-decoration:none;
    color:#ffffff;
    font-size:14px;
    letter-spacing:1px;
    transition:.25s;
}


nav a:hover{
    opacity:.55;
}


.redes-sociales{
    display:flex;
    align-items:center;
}

.redes-sociales a{
    color:#ffffff;
    font-size:20px;
    transition:.25s;
}

.redes-sociales a:hover{
    opacity:.55;
}

.carrito-icono{
    display:flex;
    align-items:center;
    gap:7px;
    cursor:pointer;
    font-size:18px;
}


#contadorCarrito{
    min-width:19px;
    height:19px;
    display:none;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#111;
    color:#fff;
    font-size:10px;
    font-weight:bold;

}

.menu-toggle{
    display:none;
    font-size:22px;
    cursor:pointer;
}
/* =====================================================
                BANNER DE ANUNCIO
===================================================== */

.banner-anuncio{
    position:relative;
    width:100%;
    overflow:hidden;
    background:linear-gradient(
        90deg,
        #ffb300,
        #ffd76c,
        #ffb300
    );
    background-size:200% 100%;
    animation:brilloBanner 6s ease infinite;
    color:#111;
    text-align:center;
    padding:11px 16px;
    display:none;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 12px rgba(255,179,0,.25);
}

@keyframes brilloBanner{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}

.banner-anuncio-texto{
    font-family:'Altone',Arial,sans-serif;
    font-size:13px;
    font-weight:bold;
    letter-spacing:.5px;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:8px;
    animation:pulsoBanner 2.4s ease-in-out infinite;
}

@keyframes pulsoBanner{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.05); }
}

.banner-anuncio-texto i{
    font-size:12px;
}

@media(max-width:700px){
    .banner-anuncio{
        padding:10px 12px;
    }
    .banner-anuncio-texto{
        font-size:12px;
    }
}

/* =====================================================
                    PORTADA
===================================================== */
.portada-contenedor{
    position:relative;
    width:100%;
    aspect-ratio:2207 / 1169;
    overflow:hidden;
}

.portada-imagen{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.portada-contenedor::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:18%;
    background:linear-gradient(
        to bottom,
        transparent,
        #000
    );
    pointer-events:none;
}

@media(max-width:768px){

    header{
        height:68px;
        padding: 8px 18px;
    }

    .portada-contenedor{
        aspect-ratio:auto;
        height:100vh;
        min-height:100vh;
    }

    .portada-imagen{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
        transform:scale(1.08);
    }

    .portada-contenedor::after{
        height:22%;
    }

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

.productos{
    width:100%;
    padding:
        clamp(55px,7vw,100px)
        clamp(18px,5vw,70px);
}

.productos-header{
    width:100%;
    display:flex;
    justify-content:center;
    margin-bottom:
        clamp(35px,5vw,60px);
}

.productos-header h1{
    font-family:'Altone',Arial,sans-serif;
    font-size:clamp(28px,4vw,45px);
    letter-spacing:clamp(2px,1vw,6px);
    text-transform:uppercase;
    font-weight:bold;
}
/* =====================================================
                GRID DE PRODUCTOS
===================================================== */
.productos-grid{
    width:100%;
    max-width:1450px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(25px,3vw,55px)clamp(18px,2.5vw,35px);
}
/* =====================================================
                    PRODUCTO
===================================================== */

.producto{
    width:100%;
    min-width:0;
    
    position:relative;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        filter .45s ease;
}


/* ==========================================
        EFECTO AL PASAR EL MOUSE
========================================== */

.producto:hover{

    transform:translateY(-8px);

}


/* ==========================================
        CONTENEDOR DE IMAGEN
========================================== */

.producto-imagen-container{

    position:relative;

    width:100%;

    aspect-ratio:1 / 1.12;

    overflow:hidden;

    background:#111;

    border-radius:14px;

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

    transition:
        box-shadow .45s ease,
        transform .45s ease;

}


/* Brillo exterior */

.producto:hover
.producto-imagen-container{

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

}
/* =====================================================
        CAPA OSCURA SI ESTÁ AGOTADO (solo en hover)
===================================================== */

.producto.agotado .producto-imagen-container::before{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,0,0,0);
    transition: background .35s ease;
    pointer-events:none;
    z-index:3;
}

.producto.agotado:hover .producto-imagen-container::before{
    background: rgba(0,0,0,.75);
}

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

.producto-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .35s ease;
    pointer-events:none;
}

.producto-slide.active{
    opacity:1;
    pointer-events:auto;
}

.producto-imagen-fondo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:blur(28px) brightness(.55) saturate(1.15);
    transform:scale(1.2);
    z-index:1;
}

.producto-imagen{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    transform:scale(1.01);
    transition:
        transform .7s cubic-bezier(.2,.8,.2,1),
        filter .7s ease;
    z-index:2;
}


/* ==========================================
        ZOOM + BRILLO
========================================== */

.producto:hover
.producto-slide.active
.producto-imagen{

    transform:scale(1.055);

    filter:
        brightness(1.08)
        contrast(1.03);

}
/* ==========================================
        REFLEJO DE LUZ
========================================== */

.producto-imagen-container::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    transform:skewX(-20deg);

    pointer-events:none;

    z-index:4;

}


/* El reflejo pasa al hacer hover */

.producto:hover
.producto-imagen-container::after{

    animation:
        brilloProducto .8s ease;

}


@keyframes brilloProducto{

    0%{

        left:-120%;

    }

    100%{

        left:140%;

    }

}
/* =====================================================
                FLECHAS IMAGEN
===================================================== */

.imagen-btn{

    position:absolute;

    top:50%;

    transform:
        translateY(-50%)
        scale(.9);

    width:40px;

    height:40px;

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

    border-radius:50%;

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

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    opacity:0;

    transition:
        opacity .3s ease,
        transform .3s ease,
        background .3s ease;

    z-index:5;

}


/* Mostrar */

.producto-imagen-container:hover
.imagen-btn{

    opacity:1;

    transform:
        translateY(-50%)
        scale(1);

}


/* Hover individual */

.imagen-btn:hover{

    background:#fff;

    color:#111;

    transform:
        translateY(-50%)
        scale(1.1) !important;

}


.imagen-btn.anterior{

    left:14px;

}


.imagen-btn.siguiente{

    right:14px;

}
/* =====================================================
                    DOTS
===================================================== */

.imagen-dots{

    position:absolute;

    bottom:14px;

    left:0;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:7px;

    z-index:5;

}


.dot{

    width:6px;

    height:6px;

    border-radius:50%;

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

    cursor:pointer;

    transition:
        transform .3s ease,
        background .3s ease,
        width .3s ease;

}


.dot.active{

    width:18px;

    border-radius:10px;

    background:#fff;

    transform:none;

}

/* =====================================================
                INFORMACIÓN PRODUCTO
===================================================== */

.producto-info{
    padding-top:12px;
    text-align:left;
    color:#fff;
}


/* ==========================================
        NOMBRE
========================================== */

.producto-info h3{
    position:relative;
    display:inline-block;
    font-family:'Altone',Arial,sans-serif;
    font-size:clamp(15px,1.4vw,19px);
    font-weight:bold;
    margin-bottom:5px;
    letter-spacing:.6px;
    color:#fff;
    cursor:default;
}


/* Línea debajo del nombre */

.producto-info h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:#fff;

    transition:
        width .4s cubic-bezier(.2,.8,.2,1);

}


/* Animación */

.producto:hover
.producto-info h3::after{

    width:100%;

}


/* ==========================================
                PRECIO
========================================== */

.producto-precio{
    display:inline-flex;
    align-items:center;
    gap:10px;

    font-family:Arial,sans-serif;
    font-size:clamp(15px,1.4vw,18px);
    font-weight:500;

    color:#fff;

    margin-bottom:8px;

    opacity:.85;

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.producto:hover
.producto-precio{
    opacity:1;
    transform:translateX(3px);
}
/* =====================================================
                BOTÓN CARRITO
===================================================== */

.btn-agregar{
    position:relative;
    overflow:hidden;
    width:100%;
    border:1px solid rgba(255,255,255,.8);
    background:#fff;
    color:#111;
    padding:14px ;
    font-family:'Altone',Arial,sans-serif;
    font-size:13px;
    letter-spacing:.7px;
    cursor:pointer;
    border-radius:7px;
    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


/* Efecto hover */

.btn-agregar:hover{
    background:#111;
    color:#fff;
    border-color:#fff;
    transform:translateY(-2px);
    box-shadow:
        0 8px 20px rgba(0,0,0,.35);
}

/* Efecto al presionar */
.btn-agregar:active{
    transform:
        translateY(1px)
        scale(.98);
}

/* =====================================================
                LOADING
===================================================== */

.productos-loading{

    grid-column:
        1 / -1;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:250px;

}


.loader{

    width:35px;

    height:35px;

    border:
        3px solid #eee;

    border-top-color:#111;

    border-radius:50%;

    animation:
        girar .8s linear infinite;

}


@keyframes girar{

    to{

        transform:rotate(360deg);

    }

}


.mensaje-productos{

    grid-column:
        1 / -1;

    text-align:center;

    padding:60px 20px;

    color:#777;

}



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

.contacto{
    padding:80px 20px;
    text-align:center;
    border-top:1px solid #eee;

}

.contacto h2{
    font-family:'Altone',Arial,sans-serif;
    font-size:clamp(25px,4vw,38px);
    margin-bottom:30px;
    color: white;
}


.redes-contacto{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:25px;
}

.redes-contacto a{
    color:#ffffff;
    font-size:26px;
    transition:.25s;
}

.redes-contacto a:hover{
    transform:translateY(-3px);
    opacity:.55;
}

/* =====================================================
                    FOOTER
===================================================== */
footer{
    background:#111;
    color:#fff;
    text-align:center;
    padding:22px;
    font-size:13px;
}

/* =====================================================
                    TABLET
===================================================== */
@media(max-width:1000px){
    .productos-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    nav{
        gap:18px;
    }
}
/* =====================================================
                    CELULAR
===================================================== */
@media(max-width:700px){

    nav{
        position:absolute;
        top:68px;
        right:0;
        width:210px;
        background:#fff;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        box-shadow:0 10px 25px rgba(0,0,0,.12);
    }

    nav.show{
        display:flex;
    }

    nav a{
        padding:17px 20px;
        border-bottom:1px solid #eee;
    }

    .menu-toggle{
        display:block;
    }

    .redes-sociales{
        display:none;
    }

    .productos{
        padding:50px 14px;
    }

    .productos-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px 14px;
    }

    .producto-imagen-container{
        aspect-ratio:1 / 1;
    }


    .imagen-btn{

        display:none;

    }

}



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

@media(max-width:380px){

    .productos{

        padding-left:10px;

        padding-right:10px;

    }


    .productos-grid{

        gap:35px;

    }


    .producto-info{

        padding-left:4px;

        padding-right:4px;

    }

}
/* =====================================================
                TALLAS DEL PRODUCTO
===================================================== */

.producto-tallas{
    margin-top:6px;
    margin-bottom:9px;
}


.tallas-titulo{
    display:block;
    color:#888;
    font-family:Arial,sans-serif;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.9px;
    margin-bottom:6px;

}


/* =====================================================
                LISTA DE TALLAS
===================================================== */

.tallas-lista{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}


/* =====================================================
                    TALLA
===================================================== */

.talla-item{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    min-height:38px;
    padding:7px 12px;
    border-radius:7px;
    background:#111;
    border:1px solid #333;
    color:#fff;
    font-family:Arial,sans-serif;
    font-size:12px;
    font-weight:bold;
    cursor:pointer;
    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}
/* Hover */
.talla-item:hover{
    background:#222;
    border-color:#777;
    transform:translateY(-1px);
}

/* =====================================================
                TALLA SELECCIONADA
===================================================== */
.talla-item.seleccionada{
    background:#fff;
    color:#111;
    border-color:#fff;
    box-shadow: 0 5px 15px rgba(0,0,0,.25);
    transform:translateY(-1px);
}

/* =====================================================
                MENSAJE TALLA
===================================================== */

.mensaje-talla{
    min-height:14px;
    margin-top:1px;
    color:#ff7777;
    font-family:Arial,sans-serif;
    font-size:11px;
}

/* =====================================================
                SIN TALLAS
===================================================== */

.sin-tallas{

    color:#777;

    font-size:12px;

}


/* =====================================================
                BOTÓN AGOTADO
===================================================== */

.btn-agotado{

    background:#222 !important;

    color:#777 !important;

    border-color:#444 !important;

    cursor:not-allowed !important;

    box-shadow:none !important;

    transform:none !important;

}


.btn-agotado:hover{

    background:#222 !important;

    color:#777 !important;

    border-color:#444 !important;

    transform:none !important;

    box-shadow:none !important;

}
/* =====================================================
                ESTADO DEL PRODUCTO
===================================================== */

.producto-estado{
    display:inline-flex;
    align-items:center;
    gap:5px;
    width:max-content;
    padding:4px 8px;
    margin:0;
    border-radius:20px;
    font-family:Arial,sans-serif;
    font-size:10px;
    font-weight:bold;
    letter-spacing:.4px;
    text-transform:uppercase;
    vertical-align:middle;
}


/* ===============================
            DISPONIBLE
================================ */

.producto-estado.disponible{

    color:#7CFFB2;

    background:rgba(34,197,94,.10);

    border:1px solid rgba(34,197,94,.30);

}


/* ===============================
              AGOTADO
================================ */

.producto-estado.agotado{

    color:#ff7b7b;

    background:rgba(239,68,68,.10);

    border:1px solid rgba(239,68,68,.30);

}

/* ===============================
              PROXIMAMENTE
================================ */
.producto.proximamente{
    opacity:.75;
}

.producto-estado.proximamente{
    background:#3d3510;
    color:#ffd76c;
}

.producto-descripcion{
    color:#999;
    font-size:13px;
    margin:6px 0;
    line-height:1.4;
}

.producto-nota-proximamente{
    margin-top:10px;
    padding:10px 12px;
    background:#3d3510;
    color:#ffd76c;
    border-radius:8px;
    font-size:13px;
    display:flex;
    align-items:center;
    gap:8px;
}

.btn-proximamente{
    background:#ffd76c;
    color:#111;
    cursor:pointer;
}

.btn-proximamente:hover{
    transform:translateY(-2px);
}

/* ===============================
          PUNTO ESTADO
================================ */

.estado-punto{

    width:7px;

    height:7px;

    border-radius:50%;

    display:block;

}


.producto-estado.disponible
.estado-punto{

    background:#22c55e;

    box-shadow:
        0 0 8px rgba(34,197,94,.8);

}


.producto-estado.agotado
.estado-punto{

    background:#ef4444;

    box-shadow:
        0 0 8px rgba(239,68,68,.8);

}