*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{padding-top:160px; background:#f5f5f5; gap:20px;}



#menu-toggle,
.menu-icon{display:none;}

header{position:fixed; top:0; left:0; width:100%; box-sizing:border-box; display:flex; justify-content:space-between; align-items:center; padding:18px 35px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 4px 18px rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.05); z-index:9999;}
		
		.logo-btn img{ width:260px; height:auto;  cursor:pointer; transition:.3s; padding-left: 20px;}
		.logo-btn img:hover{ transform:scale(1.05);}
		
nav{margin-left:auto;}		
		
		nav ul{display:flex; gap:25px; list-style:none; align-items:center;}
		nav a{text-decoration:none; color:#004FDE; font-size:20px; transition:.3s; font-family:'Manrope', sans-serif; font-weight:600;}
		nav a:hover{font-weight:900; color:#36b34a;}
		
section{width: auto; height: auto; }
		
		#bot{display:block; width:70%; max-width:1200px; height:auto; margin:0 auto;}

		.categorias{display:flex; justify-content:center; gap:20px; margin-top:20px; margin-bottom:50px; flex-wrap:wrap;}
	.categorias a{text-decoration:none; font-family:"Manrope", sans-serif; font-weight:700; color:white; background:#004FDE; padding:12px 25px; border-radius:30px; transition:.3s;}
	.categorias a:hover{background:#36B34A; transform:scale(1.05);}
	

	.catalogo{display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; padding:50px; padding-top: 100px;font-family:'Outfit', sans-serif;}
	.producto{background:white; border-radius:20px; padding:20px; text-align:center; box-shadow:0 8px 20px rgba(0,0,0,.08); transition:.3s;}
	.producto:hover{transform:scale(1.03); box-shadow:0 12px 28px rgba(0,0,0,.12);}
	.producto img{width:180px; height:180px; object-fit:contain;}

	#velty{font-family:"Manrope", sans-serif; font-weight:800; font-size:42px; color:#004FDE; margin-left:80px; margin-top:50px; margin-bottom:30px;}
	h2::after{content:""; display:block; width:1720px; height:5px; background:#36B34A; margin-top:10px; border-radius:10px;}
    
    #jr{font-family:"Manrope", sans-serif; font-weight:800; font-size:42px; color:#004FDE; margin-left:80px; margin-top:50px; margin-bottom:30px;}
	h2::after{content:""; display:block; width:1720px; height:5px; background:#36B34A; margin-top:10px; border-radius:10px;}

	#tr{font-family:"Manrope", sans-serif; font-weight:800; font-size:42px; color:#004FDE; margin-left:80px; margin-top:50px; margin-bottom:30px;}
	h2::after{content:""; display:block; width:1720px; height:5px; background:#36B34A; margin-top:10px; border-radius:10px;}

	#dalitas{font-family:"Manrope", sans-serif; font-weight:800; font-size:42px; color:#004FDE; margin-left:80px; margin-top:50px; margin-bottom:30px;}
	h2::after{content:""; display:block; width:1720px; height:5px; background:#36B34A; margin-top:10px; border-radius:10px;}

	#despachador{font-family:"Manrope", sans-serif; font-weight:800; font-size:42px; color:#004FDE; margin-left:80px; margin-top:50px; margin-bottom:30px;}
	h2::after{content:""; display:block; width:1720px; height:5px; background:#36B34A; margin-top:10px; border-radius:10px;}

	#jalador{font-family:"Manrope", sans-serif; font-weight:800; font-size:42px; color:#004FDE; margin-left:80px; margin-top:50px; margin-bottom:30px;}
	h2::after{content:""; display:block; width:1720px; height:5px; background:#36B34A; margin-top:10px; border-radius:10px;}

	#bolsa{font-family:"Manrope", sans-serif; font-weight:800; font-size:42px; color:#004FDE; margin-left:80px; margin-top:50px; margin-bottom:30px;}
	h2::after{content:""; display:block; width:1720px; height:5px; background:#36B34A; margin-top:10px; border-radius:10px;}


	
		























footer{ background:#004FDE; color:white; text-align:center; padding:30px; margin-top:300px; font-family:'Manrope', sans-serif; font-weight:600;position:relative;}

#btn-arriba{ position:fixed; bottom:30px; right:30px; width:70px; height:70px; background:#004FDE; color:white; text-decoration:none; border-radius:50%; display:flex; justify-content:center; align-items:center; font-size:30px; font-weight:bold; box-shadow:0 4px 15px rgba(0,0,0,.3); opacity:0; visibility:hidden; transition:.3s; z-index:9999;}
#btn-arriba:hover{background:#36B34A; transform:scale(1.1);}



@media screen and (max-width:768px){

	 html,
    body{
        overflow-x:hidden;
    }

    body{
        padding-top:120px;
        overflow-x:hidden;
    }

    header{
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        padding:15px 20px;
    }

    .logo-btn img{
        width:170px;
        padding-left:0;
    }

    .menu-icon{
        display:block;
        font-size:32px;
        color:#004FDE;
        cursor:pointer;
        font-weight:800;
    }

    #menu-toggle{
        display:none;
    }

    nav{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:white;
        box-shadow:0 8px 18px rgba(0,0,0,.08);
        display:none;
        margin-left:0;
        z-index:9999;
    }

    nav ul{
        flex-direction:column;
        gap:15px;
        padding:20px 0;
        margin:0;
    }

    nav a{
        font-size:16px;
    }

    #menu-toggle:checked ~ nav{
        display:block;
    }

    section{
        overflow-x:visible;
    }

    #banner{
        width:90%;
        max-width:100%;
        height:auto;
        margin:20px auto 30px auto;
        display:block;
    }

    .categorias{
    width:75%;
    max-width:260px;
    margin:20px auto 40px auto;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

    .categorias a{
    width:100%;
    max-width:260px;
    font-size:14px;
    padding:12px 0;
    text-align:center;
}

	.categorias a:hover{
    transform:none;
}

    h2,
    #velty,
    #jr,
    #tr,
    #dalitas,
    #despachador{
        width:85%;
        font-size:30px;
        margin:45px auto 10px auto;
    }

    h2::after{
        width:100%;
        max-width:100%;
    }

    .catalogo{
    grid-template-columns:1fr;
    gap:25px;
    padding:20px 0;
    width:100%;
}

    .producto{
    width:85%;
    max-width:320px;
    margin:0 auto;
    padding:20px 15px;
}

    .producto img{
    width:140px;
    height:140px;
}

    #btn-arriba{
        width:55px;
        height:55px;
        font-size:24px;
        right:18px;
        bottom:18px;
    }

    footer{
        margin-top:80px;
        padding:25px 15px;
        font-size:14px;
    }
}