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

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);}

		#menu-toggle,
		.menu-icon{display:none;}
		
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{width:auto;height:360px;padding-left:400px;position:absolute;}
		
		#tema{font-family:"Manrope", sans-serif;  font-weight:800;  color:#004FDE;  font-size:30px;  padding-left:460px;  padding-top:490px;  position:absolute;  z-index:2;}
		#par1{width:600px; height:auto; font-family:"Outfit", sans-serif; font-weight:300; color:black; font-size:18px; padding-top:550px; padding-left:300px; position:absolute; text-align:justify; z-index:2;}
		#card1{width:650px;height:240px; background:white; border-radius:22px; box-shadow:0 8px 20px rgba(0,0,0,.07); position:absolute; left:280px; top:610px; z-index:1; transition:.3s; cursor:pointer;}
		#card1:hover{transform:scale(1.03); box-shadow:0 12px 28px rgba(0,0,0,.10);}

		
		
		#tema2{position:absolute; font-family:"Manrope", sans-serif; font-weight:800; color:#004FDE; font-size:30px; padding-left:1100px; padding-top:490px; z-index:2;}
		#par2{width:600px; font-family:"Outfit", sans-serif; font-weight:300; color:black; font-size:18px; padding-top:550px; padding-left:980px; position:absolute; text-align:justify; z-index:2;}
		#card2{width:650px;height:240px;background:white; border-radius:22px; box-shadow:0 8px 20px rgba(0,0,0,.07); position:absolute; left:965px; top:610px; z-index:1; transition:.3s; cursor:pointer;}
		#card2:hover{transform:scale(1.03); box-shadow:0 12px 28px rgba(0,0,0,.10);}

		#cartera{position: absolute;font-family: "Manrope", sans-serif; font-optical-sizing: auto; font-weight: 800; font-style: normal; color:#004FDE; font-size: 30px; padding-left: 400px; padding-top: 750px;}
		
		.slider{overflow:hidden; width:100%; padding-top:870px;}
		.slide-track{display:flex; gap:30px; width:max-content; animation:scroll 50s linear infinite;}
		.slide-track img{width:300px; height:auto; object-fit:contain; transition:.3s;}
		.slide-track:hover{animation-play-state:paused;}
		.slide-track img:hover{transform:scale(1.05);}
		
		@keyframes scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}




		#mapa{position: absolute;font-family: "Manrope", sans-serif; font-optical-sizing: auto; font-weight: 800; font-style: normal; color:#004FDE; font-size: 30px; padding-left: 400px; padding-top: 100px;}
		#mundi{width:1000px; height: auto; padding-left: 480px; position: absolute; padding-top: 180px; z-index:2;}
		#card3{width:1060px;height:600px; background:white; border-radius:22px; box-shadow:0 8px 20px rgba(0,0,0,.07); position:absolute; left:480px; top:1370px; z-index:1;}

		#puntos{position: absolute;font-family: "Manrope", sans-serif; font-optical-sizing: auto; font-weight: 800; font-style: normal; color:#004FDE; font-size: 30px; padding-left: 400px; padding-top: 900px;}
		#i1{width:auto; height: 300px; padding-left: 500px; padding-top: 1000px;}
		#i2{width:auto; height: 300px; padding-left: 100px; padding-top: 1000px;}
		#i3{width:auto; height: 290px; padding-left: 100px; padding-top: 980px;}
		


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


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

    body{
        padding-top:110px;
        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;
    }

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

    nav a{
        font-size:16px;
    }

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

    section{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:35px;
    }

    #bot,
    #tema,
    #par1,
    #tema2,
    #par2,
    #cartera,
    #mapa,
    #mundi,
    #puntos,
    #i1,
    #i2,
    #i3{
        position:static;
        padding:0;
        margin:0 auto;
        left:auto;
        top:auto;
        width:auto;
    }

    #bot{
        width:92%;
        height:auto;
        margin-top:20px;
    }

    #card1,
    #card2,
    #card3{
        display:none;
    }

    #tema,
    #tema2,
    #cartera,
    #mapa,
    #puntos{
        width:85%;
        text-align:center;
        font-size:24px;
    }

    #par1,
    #par2{
        width:85%;
        font-size:16px;
        text-align:justify;
    }

    .slider{
        width:100%;
        padding-top:0;
    }

    .slide-track img{
        width:180px;
    }

    #mundi{
        width:90%;
        height:auto;
    }

    #i1,
    #i2,
    #i3{
        width:180px;
        height:auto;
    }

    footer{
        margin-top:60px;
    }
}