:root{
    --dark:#101112;
    --dark-2:#17191b;
    --gold:#f4b51b;
    --gold-dark:#b8832f;
    --light:#f4f6f8;
    --white:#fff;
    --text:#17191b;
}


/* =====================================================
   GENERAL
===================================================== */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    background:var(--light);
    color:var(--text);
    overflow-x:hidden;
}


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

header{
    width:100%;
    min-height:92px;
    padding:14px 28px;

    background:linear-gradient(
        135deg,
        #0d0e0f,
        #17191b
    );

    display:flex;
    align-items:center;

    gap:18px;

    position:relative;

    z-index:100;

    box-shadow:0 3px 18px rgba(0,0,0,.22);
}


/* LOGO */

.header-logo{
    display:flex;
    align-items:center;
    gap:18px;
    flex-shrink:0;
}


.logo2{
    width:58px;
    height:58px;

    object-fit:contain;

    background:#050505;

    border-radius:4px;

    flex:0 0 auto;
}


.logo{
    color:#fff;

    font-size:clamp(
        27px,
        2.5vw,
        39px
    );

    font-weight:800;

    letter-spacing:-1.2px;

    white-space:nowrap;
}


.logo::first-letter{
    color:var(--gold);
}


/* =====================================================
   MENU DESKTOP
===================================================== */

#menu{
    margin-left:auto;

    display:flex;

    align-items:center;

    gap:30px;
}


#menu a{
    position:relative;

    margin:0;

    padding:10px 0;

    color:#fff;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    transition:.25s ease;
}


#menu a::after{
    content:"";

    position:absolute;

    left:0;

    bottom:2px;

    width:0;

    height:3px;

    border-radius:5px;

    background:var(--gold);

    transition:.25s ease;
}


#menu a:hover,
#menu a.inicio{
    color:var(--gold);
}


#menu a:hover::after,
#menu a.inicio::after{
    width:100%;
}


/* =====================================================
   BOTONES LOGIN / REGISTRAR
===================================================== */

.buttons{
    display:flex;

    align-items:center;

    gap:12px;

    margin-left:4px;

    flex-shrink:0;

    position:static;

    height:auto;
}


.btn{
    min-height:44px;

    padding:10px 20px;

    border-radius:10px;

    border:1px solid transparent;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s ease;

    white-space:nowrap;
}


.login{
    background:transparent;

    color:#fff;

    border-color:rgba(255,255,255,.8);
}


.register{
    background:var(--gold);

    color:#111;

    border-color:var(--gold);
}


.login:hover{
    background:#fff;
    color:#111;
    transform:translateY(-1px);
}


.register:hover{
    background:#ffd34e;
    transform:translateY(-1px);

    box-shadow:
        0 6px 18px
        rgba(244,181,27,.25);
}


/* =====================================================
   BOTON HAMBURGUESA
===================================================== */

.menu-toggle{
    display:none;

    width:46px;
    height:46px;

    padding:8px;

    background:transparent;

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

    border-radius:9px;

    cursor:pointer;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    margin-left:auto;

    position:relative;

    z-index:1100;
}


.menu-toggle span{
    width:25px;
    height:3px;

    background:#fff;

    border-radius:5px;

    display:block;

    transition:.3s ease;
}


/* ANIMACION HAMBURGUESA */

.menu-toggle.active span:nth-child(1){
    transform:
        translateY(8px)
        rotate(45deg);
}


.menu-toggle.active span:nth-child(2){
    opacity:0;
}


.menu-toggle.active span:nth-child(3){
    transform:
        translateY(-8px)
        rotate(-45deg);
}


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

.contenedor{
    min-height:430px;

    height:56vh;

    max-height:560px;

    background:#101112;
    position:relative;
    isolation:isolate;
    overflow:hidden;
}


.contenedor::before{
    content:
        "Todo lo que necesitas\A en un solo lugar";

    white-space:pre;

    position:absolute;

    left:clamp(
        30px,
        10vw,
        150px
    );

    top:50%;

    transform:translateY(-65%);

    color:#fff;

    font-size:clamp(
        36px,
        4.5vw,
        64px
    );

    line-height:1.02;

    font-weight:800;

    max-width:720px;
}


.contenedor::after{
    content:
        "Herramientas, materiales y más para tus proyectos, negocio y hogar.";

    position:absolute;

    left:clamp(
        30px,
        10vw,
        150px
    );

    top:calc(50% + 78px);

    color:#fff;

    font-size:clamp(
        15px,
        1.4vw,
        20px
    );

    line-height:1.45;

    font-weight:600;

    max-width:570px;
}


/* =====================================================
   CARRUSEL
===================================================== */

.pagina_carrusel{
    width:100%;

    padding:46px 20px 70px;

    background:var(--light);
}


.carousel{
    width:100%;

    max-width:1080px;

    margin:0 auto;

    border-radius:20px;

    overflow:hidden;

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


.carousel-item img{
    width:100%;

    height:520px;

    object-fit:cover;

    object-position:center;
}


.carousel-indicators{
    margin-bottom:16px;
}


.carousel-indicators button{
    width:10px;
    height:10px;

    border-radius:50%;

    border:0;

    background:#ddd;
}


.carousel-indicators .active{
    background:var(--gold);
}


.carousel-control-prev-icon,
.carousel-control-next-icon{
    filter:brightness(0) invert(1);
}


/* =====================================================
   CATEGORIAS
===================================================== */

.texto{
    width:min(
        1180px,
        100%
    );

    margin:56px auto 0;

    padding:0 24px;
}


.texto h3{
    margin:0 0 30px;

    text-align:center;

    color:var(--gold-dark);

    font-size:clamp(
        28px,
        3.2vw,
        42px
    );

    font-weight:900;

    letter-spacing:1px;
}


.vinculos{
    width:100%;

    display:grid;

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

    gap:20px;

    text-align:left;
}


.vinculos a{
    position:relative;

    min-height:150px;

    margin:0;

    padding:24px 58px 24px 24px;

    display:flex;

    align-items:flex-end;

    color:#17191b;

    text-decoration:none;

    font-size:17px;

    line-height:1.25;

    font-weight:800;

    background:#fff;

    border:1px solid #e7e9ec;

    border-radius:18px;

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

    overflow:hidden;

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


.vinculos a::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.15),
            rgba(255,255,255,.94) 72%
        );

    pointer-events:none;
}


.vinculos a::after{
    content:"→";

    position:absolute;

    right:18px;

    bottom:18px;

    width:40px;
    height:40px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:var(--gold);

    color:#111;

    font-size:22px;

    font-weight:900;

    z-index:2;
}


.vinculos a:hover{
    transform:translateY(-5px);

    border-color:
        rgba(244,181,27,.65);

    box-shadow:
        0 16px 32px
        rgba(0,0,0,.12);
}


.vinculos a:nth-child(1){
    background:
        url('../img/IMG1.jpeg')
        center 28%/cover no-repeat;
}


.vinculos a:nth-child(2){
    background:
        url('../img/IMG2.jpeg')
        center 28%/cover no-repeat;
}


.vinculos a:nth-child(3){
    background:
        url('../img/IMG3.jpeg')
        center 28%/cover no-repeat;
}


.vinculos a:nth-child(4){
    background:
        url('../img/IMG4.jpeg')
        center 28%/cover no-repeat;
}


.vinculos a:nth-child(5){
    background:
        url('../img/IMG5.jpeg')
        center 28%/cover no-repeat;
}


.vinculos a:nth-child(6){
    background:
        url('../img/IMG6.jpeg')
        center 28%/cover no-repeat;
}


.vinculos a:nth-child(7){
    background:
        url('../img/IMG7.jpeg')
        center 28%/cover no-repeat;
}


.vinculos a:nth-child(8){
    background:
        url('../img/IMG8.jpeg')
        center 28%/cover no-repeat;
}


.vinculos a:nth-child(9){
    background:
        url('../img/IMG9.jpeg')
        center 28%/cover no-repeat;
}


.vinculos a:nth-child(10){
    background:
        url('../img/IMG10.jpeg')
        center 28%/cover no-repeat;
}


.vinculos a{
    isolation:isolate;
}


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

@media(max-width:1100px){

    .vinculos{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


/* =====================================================
   RESPONSIVE GENERAL
===================================================== */

@media(max-width:1200px){

    header{
        padding:13px 20px;
    }

    #menu{
        gap:20px;
    }

}


/* =====================================================
   MENU HAMBURGUESA TABLET
===================================================== */

@media(max-width:900px){

    header{

        min-height:80px !important;

        height:auto !important;

        padding:14px 18px !important;

        display:flex !important;

        flex-wrap:nowrap !important;

        justify-content:space-between !important;

        align-items:center !important;

        gap:10px !important;

    }


    .header-logo{

        display:flex !important;

        align-items:center !important;

        gap:10px !important;

    }


    .logo2{

        width:48px !important;

        height:48px !important;

    }


    .logo{

        font-size:25px !important;

        letter-spacing:-.8px !important;

    }


    /* MOSTRAR HAMBURGUESA */

    .menu-toggle{

        display:flex !important;
    }


    /* MENU OCULTO */

    header #menu{

        position:absolute !important;

        top:100% !important;

        left:0 !important;

        width:100% !important;

        display:flex !important;

        flex-direction:column !important;

        align-items:stretch !important;

        gap:0 !important;

        margin:0 !important;

        padding:10px 18px 18px !important;

        background:
            linear-gradient(
                135deg,
                #0d0e0f,
                #17191b
            ) !important;

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

        z-index:1050 !important;

        opacity:0 !important;

        visibility:hidden !important;

        transform:translateY(-10px);

        pointer-events:none;

        transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease;

    }


    /* MENU ABIERTO */

    header #menu.active{

        opacity:1 !important;

        visibility:visible !important;

        transform:translateY(0);

        pointer-events:auto !important;

    }


    /* ENLACES */

    header #menu a{

        display:block !important;

        width:100% !important;

        padding:15px 10px !important;

        margin:0 !important;

        color:#fff !important;

        text-decoration:none !important;

        font-size:16px !important;

        text-align:left !important;

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

        white-space:normal !important;

    }


    header #menu a:hover{

        color:var(--gold) !important;

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

    }


    header #menu a::after{

        display:none !important;

    }


    /* BOTONES */

    header #menu .buttons{

        width:100% !important;

        display:flex !important;

        flex-direction:column !important;

        gap:10px !important;

        margin:15px 0 0 !important;

        padding:0 !important;

    }


    header #menu .buttons .btn{

        width:100% !important;

        max-width:none !important;

        min-height:45px !important;

        padding:10px 15px !important;

    }


    /* HERO */

    .contenedor{

        height:470px;
    }


    .carousel-item img{

        height:430px;
    }

}


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

@media(max-width:600px){

    header{

        padding:10px 14px !important;

        min-height:70px !important;

    }


    .header-logo{

        gap:8px !important;

    }


    .logo2{

        width:46px !important;

        height:46px !important;

    }


    .logo{

        font-size:22px !important;

        letter-spacing:-.7px !important;

    }


    .menu-toggle{

        width:44px;

        height:44px;

    }


    header #menu{

        padding:8px 14px 16px !important;

    }


    .contenedor{

        min-height:360px;

        height:55vh;

        background-position:60% center;

    }


    .contenedor::before{

        left:24px;

        right:24px;

        top:42%;

        font-size:
            clamp(
                31px,
                9vw,
                48px
            );

    }


    .contenedor::after{

        left:24px;

        right:24px;

        top:65%;

        font-size:15px;

    }


    .pagina_carrusel{

        padding:30px 14px 50px;

    }


    .carousel-item img{

        height:310px;

    }


    .texto{

        margin-top:34px;

    }


    .texto h3{

        font-size:25px;

    }


    .vinculos{

        grid-template-columns:1fr;

        gap:14px;

    }


    .vinculos a{

        min-height:145px;

        font-size:16px;

    }

}


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

.hero-cta{

    position:absolute;

    left:clamp(
        30px,
        10vw,
        150px
    );

    top:calc(50% + 145px);

    display:inline-flex;

    align-items:center;

    gap:24px;

    padding:15px 23px;

    border-radius:30px;

    background:var(--gold);

    color:#111;

    text-decoration:none;

    font-weight:800;

    font-size:16px;

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

    transition:.25s ease;

    z-index:2;
}


.hero-cta span{

    font-size:22px;

    line-height:1;

}


.hero-cta:hover{

    background:#ffd34e;

    color:#111;

    transform:translateY(-2px);

}


@media(max-width:600px){

    .hero-cta{

        left:24px;

        top:calc(65% + 68px);

        padding:12px 18px;

        font-size:14px;

    }

}


/* =====================================================
   MODULO NUESTROS PRODUCTOS
===================================================== */

.productos-modulo{

    width:100%;

    display:block;

    position:relative;

    clear:both;

    padding:70px 30px;

    margin:0;

    box-sizing:border-box;

    background:#f5f5f5;

    z-index:2;
}


.productos-contenido{

    width:90%;

    max-width:1200px;

    margin:0 auto;

    padding:40px;

    box-sizing:border-box;

    background:white;

    border-radius:20px;

    text-align:center;

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


.productos-contenido h2{

    margin:0 0 15px;

    font-size:32px;

    font-weight:bold;

    color:#000;
}


.productos-descripcion{

    margin:0 0 35px;

    font-size:17px;

    color:#000;
}


.productos-contenido .vinculos{

    width:100%;

    display:grid;

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

    gap:18px;

    box-sizing:border-box;
}


.productos-contenido .vinculos a{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:65px;

    padding:15px 20px;

    box-sizing:border-box;

    text-decoration:none;

    color:#000;

    background:#fff;

    border:2px solid #000;

    border-radius:12px;

    font-size:16px;

    font-weight:bold;

    transition:all .3s ease;
}


.productos-contenido .vinculos a:hover{

    transform:translateY(-4px);

    background:#000;

    color:#fff;

    box-shadow:
        0 7px 15px
        rgba(0,0,0,.2);
}


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

footer{

    position:relative;

    display:block;

    clear:both;

    width:100%;

    margin-top:0;

    z-index:1;
}


/* =====================================================
   PRODUCTOS EN CELULAR
===================================================== */

@media(max-width:768px){

    .productos-modulo{

        padding:40px 15px;

    }


    .productos-contenido{

        width:100%;

        padding:30px 15px;

        border-radius:15px;

    }


    .productos-contenido h2{

        font-size:25px;

    }


    .productos-descripcion{

        font-size:15px;

    }


    .productos-contenido .vinculos{

        grid-template-columns:1fr;

        gap:12px;

    }


    .productos-contenido .vinculos a{

        min-height:55px;

        font-size:15px;

    }

}

.contenedor .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
}

.contenedor::before,
.contenedor::after {
    z-index: 1;
}

.hero-cta {
    z-index: 2;
}