*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
   
}
body{
    font-family: raleway,roboto,arial;
}

html,
body{
overflow-x:hidden;
}
:root {
  --bg-light: #ffffff;
  --bg-dark: #1e1e1e;
  --text-light: #333333;
  --text-dark: #f5f5f5;
  --primary: #ff6b6b;
  --secondary: #ffe66d;
  --circle-bg: #e0e0e0;
  --circle-active: #ff6b6b;
}
.animated-section {
    opacity: 0; /* Inicialmente invisible */
    transform: translateY(20px); /* Desplazamiento hacia abajo */
    animation: fadeInUp 0.5s ease forwards; /* Duración y tipo de animación */
  }
  
  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
.container{
    padding: 0px 80px;
}


.header{
position:absolute;
top:40px;
left:0;
width:100%;
z-index:20;

display:flex;
justify-content:center;
}

.nav{

width:min(1120px,92%);
height:82px;

padding:0 18px;

display:flex;
align-items:center;
gap:30px;

border-radius:60px;

background:
rgba(103,82,67,.22);

backdrop-filter:
blur(14px);

}

.nav-logo img{
width:100px;
}

.nav-links{

flex:1;

display:flex;
justify-content:center;

gap:42px;

list-style:none;
}

.nav-links a{

color:#fff;

font-size:20px;

text-decoration:none;
}

.nav-donate{

padding:16px 24px;

border-radius:40px;

background:#26B8EC;

color:#fff;

text-decoration:none;
}

.nav-user{

width:58px;
height:58px;

border-radius:50%;

background:
rgba(181,214,72,.65);

display:flex;

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

.nav-user svg{
fill:#fff;
}

.hero{
position:relative;
height:100vh;
overflow:visible;
}

.hero-media{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:hidden;
}

.hero-video,
.hero-fallback{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}

.hero-bottom-right{
position:absolute;
right:-70px;
bottom:-60px;
width:260px;
z-index:30;
pointer-events:none;
}

.hero-bottom-left{
position:absolute;
left:-45px;
bottom:-105px;
width:190px;
z-index:30;
pointer-events:none;
}
.nav-menu-mobile{
display:none;
}


.nav-donate,
.nav-user,
.nav-links a{

transition:
all .35s ease;

}

.nav-links a:hover{

opacity:.9;

transform:
translateY(-2px);

text-shadow:
0 0 18px
rgba(255,255,255,.25);

}

.nav-donate:hover{

transform:
translateY(-3px);

background:
#33C3F6;

box-shadow:
0 14px 32px
rgba(38,184,236,.35);

}

.nav-user:hover{

transform:
translateY(-3px)
scale(1.04);

background:
rgba(181,214,72,.9);

box-shadow:
0 12px 28px
rgba(181,214,72,.35);

}

.nav-logo img{

transition:
transform .45s ease;

}

.nav-logo:hover img{

transform:
scale(1.04);

}
.nav-links a{

position:relative;

color:#fff;

text-decoration:none;

padding-bottom:8px;

transition:
color .35s ease;

}

.nav-links a::after{
content:"";
position:absolute;
left:50%;
bottom:0;
width:0;
height:3px;
background:#26B8EC;
border-radius:20px;
transform:
translateX(-50%);
transition:
width .4s ease;

}

.nav-links a:hover{

color:#fff;

}

.nav-links a:hover::after{

width:100%;

}

.header{position:fixed;top:24px;left:0;width:100%;z-index:999;transition:.35s}
.header.sticky{top:12px}
.header.sticky .nav{background:rgba(103,82,67,.42);backdrop-filter:blur(22px);box-shadow:0 12px 32px rgba(0,0,0,.12)}

.nav-menu-mobile{display:none}
.nav-links{transition:.4s}


/* MAIN SECUNDARY
##################
##################
##################
##################
*/
.cards-home{
max-width:1280px;
margin:110px auto;
padding:0 25px;
text-align:center;
}

.cards-home h2{
font-size:62px;
font-weight:800;
line-height:1;
margin-bottom:18px;
color:#111;
}

.cards-home p{
font-size:30px;
color:#333;
margin-bottom:65px;
}

.cards-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;
}

.card-home{
position:relative;
padding:26px;
border-radius:30px;
text-decoration:none;
overflow:hidden;
transition:.35s;
}

.green{background:#AFCF42;}
.red{background:#BE202E;}
.blue{background:#2DAEE5;}

.card-icon{
position:absolute;
top:28px;
left:28px;
width:48px;
height:48px;
background:#fff;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
z-index:5;
transition:.35s;
}

.card-icon img{
width:22px;
}

.card-image{
width:62%;
height:130px;
margin-left:auto;
margin-bottom:28px;
overflow:hidden;
border-radius:18px;
clip-path:polygon(0 0,100% 0,100% 74%,78% 100%,0 84%);
}

.card-image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
object-position:center;
transition:.45s;
}

.card-info{
text-align:left;
}

.card-info h3{
font-size:34px;
font-weight:800;
line-height:.95;
color:#111;
margin-bottom:8px;
}

.card-info span{
display:block;
font-size:15px;
line-height:1.2;
color:#111;
max-width:240px;
}

.card-home:hover{
transform:translateY(-8px);
box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.card-home:hover .card-image img{
transform:scale(1.08);
}

.card-home:hover .card-icon{
transform:rotate(45deg);
}



.section-apadrina{
position:relative;
max-width:1400px;
margin:170px auto;
overflow:visible;
}

.apadrina-bg{
position:relative;
background:url("./assets/bgmain.png") center center/cover no-repeat;
border-radius:42px;
overflow:visible;
min-height:640px;
}

.apadrina-wrapper{
display:flex;
align-items:center;
justify-content:space-between;
min-height:640px;
position:relative;
overflow:hidden;
}

.apadrina-info{
flex:0 0 42%;
padding:90px 0 90px 90px;
position:relative;
z-index:10;
}

.apadrina-info h2{
font-size:108px;
font-weight:300;
line-height:.82;
color:#111;
margin-bottom:42px;
text-align:left;
}

.apadrina-box{
display:inline-block;
padding:18px 34px;
border:2px solid #F3A35B;
border-radius:60px;
margin-bottom:45px;
}

.apadrina-box p{
font-size:34px;
line-height:1;
font-weight:400;
color:#111;
}

.apadrina-btn{
display:inline-flex;
align-items:center;
gap:16px;
font-size:28px;
font-weight:700;
text-decoration:none;
color:#111;
transition:.35s;
}

.apadrina-btn img{
width:40px;
transition:.35s;
}

.apadrina-btn:hover img{
transform:translateX(8px);
}

.apadrina-media{
flex:0 0 58%;
height:640px;
position:relative;
}

.mancha{
position:absolute;
right:40px;
top:90px;
width:430px;
z-index:1;
}

.persona{
position:absolute;
right:-10px;
bottom:0;
height:108%;
width:auto;
z-index:51;
}

.sello{
position:absolute;
z-index:100;
}

.sello-top-left{
width:175px;
left:-60px;
top:-28px;
transform:rotate(-18deg);
}

.sello-right{
width:70px;
right:-28px;
top:180px;
}

.sello-bottom{
width:175px;
right:110px;
bottom:-55px;
transform:rotate(18deg);
}

.pelusa{
position:absolute;
z-index:12;
}

.pelusa-left{
width:70px;
left:520px;
top:85px;
}

.pelusa-right{
width:60px;
right:32px;
top:215px;
}

.services-home{
position:relative;
max-width:1450px;
margin:80px auto;
padding:0 20px 80px;
overflow:visible;
}

.services-title{
position:relative;
z-index:5;
text-align:center;
margin-bottom:70px;
}

.services-title h2{
font-size:68px;
font-weight:800;
line-height:.9;
color:#111;
}

.services-splash{
position:absolute;
width:90px;
z-index:3;
pointer-events:none;
}

.services-splash-left{
left:320px;
top:-18px;
}

.services-splash-right{
right:320px;
top:-18px;
transform:scaleX(-1);
}

.services-line{
position:absolute;
left:0;
right:0;
top:50px;
width:100%;
z-index:1;
pointer-events:none;
}

.services-slider{
position:relative;
overflow-x:auto;
overflow-y:hidden;
padding:30px 0;
cursor:grab;
scroll-behavior:smooth;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
z-index:5;
}

.services-slider::-webkit-scrollbar{
display:none;
}

.services-track{
display:flex;
gap:28px;
width:max-content;
padding:20px;
align-items:flex-start;
}

.service-card{
position:relative;
width:340px;
height:470px;
background:#fff;
border-radius:28px;
overflow:hidden;
flex:none;
display:flex;
flex-direction:column;
text-decoration:none;
scroll-snap-align:center;
box-shadow:0 18px 45px rgba(0,0,0,.12);
transition:.35s;
}

.service-top{
height:130px;
padding:24px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:12px;
background:#fff;
}

.service-top h3{
font-size:24px;
font-weight:800;
line-height:.92;
color:#111;
}

.service-top p{
font-size:15px;
line-height:1.3;
color:#333;
}

.service-image{
flex:1;
overflow:hidden;
}

.service-image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
object-position:center;
transition:.45s;
margin-top: 20px;
}

.service-arrow{
position:absolute;
right:18px;
bottom:18px;
width:58px;
height:58px;
border-radius:50%;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
box-shadow:0 12px 28px rgba(0,0,0,.15);
transition:.35s;
}

.service-card.active{
transform:scale(1.03);
box-shadow:0 30px 70px rgba(0,0,0,.22);
opacity:1;
}



.service-arrow img{
width:22px;
}

.service-card:hover{
transform:translateY(-10px);
box-shadow:0 28px 60px rgba(0,0,0,.18);
}

.service-card:hover .service-image img{
transform:scale(1.08);
}

.service-card:hover .service-arrow{
transform:rotate(45deg);
}


.shop-home{
position:relative;
max-width:1400px;
margin:10px auto;
padding:0 25px;
overflow:hidden;
}

.shop-splash{
position:absolute;
left:-30px;
top:10px;
width:120px;
z-index:1;
}

.shop-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:60px;
margin-bottom:55px;
position:relative;
z-index:2;
}

.shop-left h2{
font-size:86px;
font-weight:700;
line-height:.82;
color:#111;
margin-bottom:30px;
}

.shop-right{
max-width:330px;
padding-top:18px;
}

.shop-right p{
font-size:34px;
line-height:1;
font-weight:500;
color:#111;
}

.shop-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:18px 34px;
border-radius:60px;
background:#26B8EC;
color:#fff;
font-size:30px;
font-weight:600;
text-decoration:none;
transition:.35s;
}

.shop-btn:hover{
transform:translateY(-4px);
background:#1EA7D8;
box-shadow:0 18px 35px rgba(38,184,236,.35);
}

.shop-slider{
overflow-x:auto;
overflow-y:hidden;
cursor:grab;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
}

.shop-slider::-webkit-scrollbar{
display:none;
}

.shop-track{
display:flex;
gap:22px;
width:max-content;
padding:10px 0 30px;
}

.shop-card{
width:260px;
text-decoration:none;
flex:none;
transition:.35s;
}

.shop-card:hover{
transform:translateY(-8px);
}

.shop-image{
position:relative;
height:340px;
border-radius:28px;
overflow:hidden;
box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.shop-image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:.45s;
}

.shop-card:hover .shop-image img{
transform:scale(1.08);
}

.shop-favorite{
position:absolute;
top:14px;
right:14px;
width:44px;
height:44px;
border:none;
border-radius:50%;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
transition:.35s;
box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.shop-favorite img{
width:30px;
}

.shop-card:hover .shop-favorite{
transform:scale(1.12);
}

.shop-info{
padding:16px 8px 0;
}

.shop-info h3{
font-size:18px;
font-weight:700;
line-height:1;
color:#fff;
text-shadow:0 2px 10px rgba(0,0,0,.35);
margin-top:-89px;
position:relative;
z-index:2;
}

.shop-info span{
font-size:20px;
font-weight:600;
color:#fff;
text-shadow:0 2px 10px rgba(0,0,0,.35);
position:relative;
z-index:2;
}

.shop-image::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:120px;
background:linear-gradient(to top,rgba(0,0,0,.55),transparent);
pointer-events:none;
}

.food-home{
position:relative;
max-width:1400px;
margin:80px auto;
padding:0 25px;
overflow:hidden;
}

.food-wave-left{
  position: absolute;
  left: -20px;
  top: 19px;
  width: 100%;
  z-index: -1;
  pointer-events: none;
}

.food-wave-right{
position: absolute;
  right: 106px;
  top: -3px;
  width: 103px;
  z-index: -1;
  pointer-events: none;
}

.food-title{
position:relative;
z-index:3;
text-align:center;
margin-bottom:45px;
}

.food-title h2{
font-size:72px;
font-weight:800;
line-height:.9;
color:#111;
margin-bottom:10px;
}

.food-title p{
font-size:34px;
font-weight:400;
color:#222;
}

.food-video{
position: relative;
  display: block;
  height: 326px;
  border-radius: 205px;
  overflow: hidden;
  text-decoration: none;
  border: none;
}

.food-video img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:.45s;
}

.food-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.28);
transition:.35s;
}

.food-video span{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
font-size:72px;
font-weight:700;
color:#fff;
transition:.35s;
z-index:2;
}

.food-video:hover img{
transform:scale(1.08);
}

.food-video:hover .food-overlay{
background:rgba(0,0,0,.18);
}

.food-video:hover span{
transform:translate(-50%,-50%) scale(1.05);
}

.about-home{
max-width:1350px;
margin:80px auto;
padding:40px 30px;
background:url("./assets/bgmain.png") center/cover;
border-radius:0px 170px;
text-align:center;
}

.about-home h2{
font-size:62px;
font-weight:800;
margin-bottom:70px;
color:#111;
}

.about-grid{
display:flex;
justify-content:center;
align-items:flex-start;
gap:80px;
flex-wrap:wrap;
}

.about-card{
position:relative;
width:280px;
text-decoration:none;
}

.about-shape{
position:absolute;
left:50%;
top:50%;
width:310px;
transform:translate(-50%,-50%) scale(.4) rotate(-20deg);
opacity:0;
transition:.45s;
z-index:1;
pointer-events:none;
}

.about-photo{
position:relative;
width:230px;
height:230px;
margin:auto;
border-radius:50%;
overflow:hidden;
z-index:3;
transition:.35s;
}

.about-photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:.45s;
}

.about-card span{
margin-top:35px;
display:inline-flex;
align-items:center;
gap:12px;
padding:14px 26px;
border:2px solid #111;
border-radius:60px;
font-size:28px;
font-weight:700;
color:#111;
background:#fff;
position:relative;
z-index:5;
transition:.35s;
}

.about-card span img{
width:18px;
}

.about-card:hover .about-photo{

transform:
translateY(-14px);

}

.about-card:hover .about-photo img{

transform:
scale(1.08);

}

.about-card:hover .about-shape{

opacity:1;

transform:
translate(-50%,-50%)
scale(1)
rotate(0);

}

.about-card:hover span{

background:#26B8EC;

border-color:#26B8EC;

color:#fff;

}

.about-card:hover span img{

filter:brightness(0) invert(1);

}


.about-home{
position:relative;
overflow:visible;
}

.about-splash-top{
position:absolute;
top:-35px;
right:-80px;
width:220px;
z-index:1;
pointer-events:none;
}

.about-splash-bottom{
position:absolute;
left:-70px;
bottom:-55px;
width:180px;
transform:rotate(180deg);
z-index:1;
pointer-events:none;
}

.footer-home{
max-width:1350px;
margin:140px auto 80px;
padding:0 30px;
}

.footer-content{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:80px;
}

.footer-left h2{
font-size:68px;
font-weight:800;
line-height:.9;
color:#111;
}

.footer-right{
text-align:left;
}

.footer-right p{
font-size:34px;
font-weight:400;
line-height:1;
color:#111;
margin-bottom:30px;
}

.footer-social{
display:flex;
align-items:center;
gap:40px;
}

.footer-social a{
width:58px;
height:58px;
border-radius:50%;
background:#ffffff;
display:flex;
justify-content:center;
align-items:center;
transition:.35s;
}

.footer-social img{
width: 60px;
height: 158px;
object-fit:contain;
}

.footer-social a:hover{
transform:translateY(-6px);
background:#26B8EC;
box-shadow:0 12px 28px rgba(38,184,236,.35);
}


/*==========================
HISTORIA
===========================*/

.history{
max-width:1400px;
margin-top:160px;
margin-bottom: 40px;
padding:0 25px;
display: flex;
flex-wrap: wrap;
}




.history-splash{

position:absolute;

left: -110px;
top: -69px;

width:195px;

z-index:-1;

}


.history-content{
display:flex;
align-items:center;
justify-content:space-between;
gap:80px;
}

/*==========================
LADO IZQUIERDO
===========================*/

.history-left{
position:relative;
width:38%;
}

.history-left .splash{
position:absolute;
left:-90px;
top:-30px;
width:120px;
z-index:-1;
}

.history-left h2{
font-size:72px;
font-weight:800;
line-height:.9;
color:#111;
margin-bottom:30px;
}

.history-left p{
font-size:17px;
line-height:1.7;
color:#444;
margin-bottom:18px;
}

.history-btn{
display:inline-block;
margin-top:25px;
padding:14px 40px;
border-radius:60px;
background:#26B8EC;
color:#fff;
font-size:36px;
font-weight:700;
text-decoration:none;
transition:.35s;
}

.history-btn:hover{
transform:translateY(-4px);
background:#1EA6D3;
}

/*==========================
GALERIA
===========================*/

.history-gallery{
width:62%;
display:flex;
align-items:center;
gap:18px;
}

.history-main{
flex:1;
height:520px;
border-radius:30px;
overflow:hidden;
box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.history-main img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:
opacity .35s ease,
transform .35s ease;
}

.history-main img.changing{
opacity:.3;
transform:scale(1.05);
}

/*==========================
MINIATURAS
===========================*/

.history-thumbs{
display:flex;
flex-direction:column;
gap:16px;
flex-wrap: wrap;
}

.history-thumbs img{
width:95px;
height:150px;
object-fit:cover;
border-radius:18px;
cursor:pointer;
opacity:.55;
transition:.35s;
}

.history-thumbs img:hover{
opacity:.9;
transform:translateX(-4px);
}

.history-thumbs img.active{
opacity:1;
transform:scale(1.05);
box-shadow:0 0 0 4px #26B8EC;
}

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

/*==================================
DIRECTORA
==================================*/

.director{

max-width:1400px;

margin:150px auto;

padding:0 25px;

position:relative;
    overflow:visible;


}

.director-title{

display:flex;

justify-content:center;

margin-bottom:30px;

}

.director-title span{

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 32px;

border:2px solid #222;

border-radius:60px;

font-size:32px;

font-weight:700;

color:#111;

background:#fff;

}

/*======================*/

.director-video{

position:relative;

width:100%;

height:600px;

border-radius:34px;

/* NO hidden */
overflow:visible;

box-shadow:0 20px 45px rgba(0,0,0,.12);

}

/* Imagen o video */
.director-media{
    width:100%;
    height:600px;
    object-fit:cover;
    display:block;
    border-radius:34px;
}

/*======================*/

.director-wave{
    position:absolute;

    left:50%;
    bottom:-225px;

    transform:translateX(-50%);

    width:125%;

    z-index:5;

    pointer-events:none;
}

/*======================*/

.director-video::after{

content:"";

position:absolute;

inset:0;

border-radius:34px;

box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);

pointer-events:none;

}

/*======================*/

.director-video:hover .director-media{

transform:scale(1.03);

transition:transform .8s ease;

}

/*=========================
EQUIPO
=========================*/

.team{

max-width:1400px;

margin:70px auto;

padding:80px 25px;

position:relative;

overflow:hidden;

}

/*================*/

.team-header{

margin-bottom:60px;

}

.team-header h2{

font-size:72px;

font-weight:800;

line-height:.9;

color:#111;

}

/*================*/

.team-grid{

display:grid;

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

gap:28px;

}

/*================*/

.team-card{

background:#fff;

border-radius:26px;

overflow:hidden;

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

transition:.35s;

display:flex;

flex-direction:column;

}

.team-card:hover{

transform:translateY(-8px);

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

}

/*================*/

.team-image{

position:relative;

height:280px;

overflow:hidden;

}

.team-image img:first-child{

width:100%;

height:100%;

display:block;

object-fit:cover;

transition:.5s;

}

.team-card:hover .team-image img:first-child{

transform:scale(1.06);

}

/*================*/

.team-like{

position:absolute;

top:16px;

right:16px;

width:42px;

height:42px;

border-radius:50%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

box-shadow:0 10px 22px rgba(0,0,0,.15);

}

.team-like img{

width:18px;

}

/*================*/

.team-info{

padding:22px;

}

.team-info h3{

font-size:42px;

font-weight:800;

line-height:1;

margin-bottom:12px;

color:#111;

}

.team-info p{

font-size:15px;

line-height:1.45;

color:#555;

}

/*================*/
/* SPLASH */
/*================*/

.team-splash{

position:absolute;

pointer-events:none;

z-index:-1;

}

.team-top-left{

width:260px;

top:-80px;

left:-60px;

}

.team-top-right{

width:260px;

top:-70px;

right:-60px;

transform:scaleX(-1);

}

.team-bottom-left{

width:170px;

left:-50px;

bottom:40px;

}

/*==========================
ALIADOS
==========================*/

.partners{

max-width:1400px;

margin:70px auto;

padding:0 30px;

}

.partners-header{

text-align:center;

margin-bottom:80px;

}

.partners-header h2{

font-size:34px;

font-weight:800;

line-height:1.35;

color:#111;

max-width:900px;

margin:auto auto 30px;

}

.partners-btn{

display:inline-flex;

align-items:center;

gap:12px;

text-decoration:none;

font-size:28px;

font-weight:700;

color:#ff3d6d;

transition:.35s;

}

.partners-btn img{

width:28px;

transition:.35s;

}

.partners-btn:hover{

transform:translateY(-3px);

}

.partners-btn:hover img{

transform:translateX(6px);

}

/*================*/

.partners-grid{

display:grid;

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

gap:70px 60px;

align-items:center;

justify-items:center;

}

.partners-grid img{

width:100%;

max-width:220px;

height:200px;

object-fit:contain;

opacity:.75;

transition:.35s;

}

.partners-grid img:hover{

filter:none;

opacity:1;

transform:scale(1.05);

}


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

.transparency-hero{

max-width:1400px;

margin:120px auto;

padding:0 25px;

position:relative;

overflow:visible;

}

.transparency-media{

position:relative;

height:620px;

border-radius:38px;

overflow:hidden;

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

}

.transparency-image{

width:100%;

height:100%;

display:block;

object-fit:cover;

}

/* Oscurece un poco la imagen */

.transparency-overlay{

position:absolute;

inset:0;

background:linear-gradient(
90deg,
rgba(0,0,0,.38) 0%,
rgba(0,0,0,.18) 35%,
rgba(0,0,0,.05) 70%,
transparent 100%
);

}

/*================*/

.transparency-content{

position:absolute;

left:50px;

bottom:50px;

max-width:520px;

z-index:5;

}

.transparency-content h1{

font-size:88px;

font-weight:800;

line-height:.9;

color:#fff;

margin-bottom:18px;

}

.transparency-content p{

font-size:24px;

line-height:1.45;

color:#fff;

}

/*================*/

.transparency-splash{

position:absolute;

right:-45px;

bottom:-55px;

width:210px;

z-index:8;

pointer-events:none;

}


/*==============================
INFORME FINANCIERO
==============================*/

.finance{

max-width:1400px;

margin:150px auto;

padding:0 25px;

position:relative;

}

.finance-splash{

position:absolute;

left: -35px;
top: -166px;

width:170px;

pointer-events:none;

}

/*================*/

.finance-header{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:70px;

margin-bottom:55px;

}

.finance-title{

flex:1;

}

.finance-title h2{

font-size:72px;

font-weight:800;

line-height:.9;

color:#111;

}

.finance-text{

max-width:460px;

}

.finance-pill{

display:inline-block;

width:110px;

height:24px;

border:2px solid #888;

border-radius:40px;

margin-bottom:20px;

}

.finance-text p{

font-size:19px;

line-height:1.55;

color:#333;

}

/*================*/

.finance-cards{

display:grid;

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

gap:24px;

}

.finance-card{

background:#fff;

padding:28px;

border-radius:28px;

box-shadow:0 18px 38px rgba(0,0,0,.10);

transition:.35s;

}

.finance-card:hover{

transform:translateY(-8px);

box-shadow:0 24px 48px rgba(0,0,0,.16);

}

.finance-card img{

width:42px;

margin-bottom:18px;

}

.finance-card h3{

font-size:48px;

font-weight:800;

line-height:1;

margin-bottom:10px;

color:#111;

}

.finance-card span{

display:block;

font-size:18px;

line-height:1.4;

color:#555;

}


/*================================
GRAFICO
================================*/

.finance-chart{

margin-top:90px;
padding: 0px 40px;

}

.chart-legend{

display:flex;

justify-content:center;

gap:40px;

margin-bottom:40px;

font-size:18px;

font-weight:600;

}

.legend-item{

display:flex;

align-items:center;

gap:10px;

}

.legend-color{

width:18px;

height:18px;

border-radius:50%;

display:block;

}

.legend-color.income{

background:#BFF28A;

}

.legend-color.expense{

background:#FF9654;

}

/*====================*/

.chart{

display:flex;

align-items:flex-end;

gap:30px;

}

/*====================*/

.chart-axis{

height:240px;

display:flex;

flex-direction:column;

justify-content:space-between;

font-size:18px;

font-weight:600;

color:#444;

padding-bottom:18px;

}

/*====================*/

.chart-bars{

flex:1;

display:flex;

justify-content:space-around;

align-items:flex-end;

height:240px;

border-bottom:3px solid #ddd;
flex-wrap: wrap;

}

/*====================*/

.month{

display:flex;

flex-direction:column;

align-items:center;

gap:18px;

}

.bars{

display:flex;

align-items:flex-end;

gap:16px;

height:220px;

}


.bar{

width:54px;

border-radius:28px 28px 0 0;

transform:scaleY(0);

transform-origin:bottom;

transition:transform .9s cubic-bezier(.22,1,.36,1);

}

.finance-chart.active .bar{

transform:scaleY(1);

}

.green{

background:#BFF28A;

}

.orange{

background:#FF9654;

}

.bar:hover{

transform:translateY(-6px);

}

.month span{

font-size:20px;

font-weight:700;

color:#333;

}

/*=========================
IMPACTO
=========================*/

.impact{

max-width:1100px;

margin:140px auto;

padding:0 25px;

}

.impact-title{

display:flex;

align-items:center;

justify-content:center;

gap:18px;

margin-bottom:45px;

}

.impact-title img{

width:80px;

}

.impact-title h2{

font-size:72px;

font-weight:800;

line-height:.8;

text-align:center;

color:#111;

}

.impact-title h2 span{

display:block;

font-size:34px;

font-weight:500;

}

/*================*/

.impact-grid{

display:grid;

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

gap:22px;

}

.impact-card{

position:relative;

height:280px;

border-radius:28px;

overflow:hidden;

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

}

.impact-card img{

width:100%;

height:100%;

object-fit:cover;

display:block;

transition:.5s;

}

.impact-card:hover img{

transform:scale(1.06);

}

.impact-overlay{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:25px;

background:linear-gradient(
to top,
rgba(0,0,0,.55),
rgba(0,0,0,.18),
transparent
);

}

.impact-overlay h3{

font-size:48px;

font-weight:800;

color:#fff;

line-height:1;

margin-bottom:6px;

}

.impact-overlay p{

font-size:28px;

font-weight:700;

line-height:1.05;

color:#fff;

}

/*=========================
FAQ
=========================*/

.faq{

max-width:1000px;

margin:150px auto;

padding:0 25px;

}

.faq-header{

text-align:center;

margin-bottom:60px;

}

.faq-header h2{

font-size:64px;

font-weight:800;

color:#111;

margin-bottom:20px;

}

.faq-header p{

font-size:20px;

line-height:1.7;

color:#555;

max-width:700px;

margin:auto;

}

/*================*/

.faq-list{

display:flex;

flex-direction:column;

gap:18px;

}

.faq-item{

background:#fff;

border-radius:24px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

overflow:hidden;

}

.faq-question{

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:28px 30px;

border:none;

background:none;

cursor:pointer;

font-size:22px;

font-weight:700;

text-align:left;

}

.faq-icon{

font-size:38px;

color:#A9CF38;

transition:.3s;

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

}

.faq-answer p{

padding:0 30px 28px;

font-size:17px;

line-height:1.7;

color:#555;

}

.faq-item.active .faq-answer{

max-height:250px;

}

.faq-item.active .faq-icon{

transform:rotate(45deg);

}

.mancha-verde{

    position:absolute;

    pointer-events:none;

    z-index:1;

}

.mancha-verde-bottom{

    width:220px;

    left:-90px;

    bottom:-80px;

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



.section-apadrina-page{
  margin-top: 0px !important;
  margin-bottom: -110px;
}
.section-apadrina-page .persona{
  height: 88%;

}

/*==============================
COMO FUNCIONA
==============================*/

.como-funciona{

max-width:1400px;

margin:150px auto;

padding:0 25px;

position:relative;

overflow:visible;

}

/*================*/

.como-splash-left{

position:absolute;

left:-70px;

bottom:10px;

width:210px;

z-index:-1;

}

.como-splash-right{

position:absolute;

right:-55px;

top:-25px;

width:170px;

z-index:-1;

}

/*================*/

.como-header{

display:flex;

justify-content:center;

align-items:center;

gap:35px;

margin-bottom:25px;

}

.como-header h2{

font-size:72px;

font-weight:800;

line-height:.9;

color:#111;

}

.como-stars{

width:140px;

}

/*================*/

.como-text{

max-width:950px;

margin:auto;

text-align:center;

font-size:21px;

line-height:1.7;

color:#333;

margin-bottom:55px;

}

/*================*/

.como-video{

position:relative;

overflow:visible;

}

.como-preview,
.como-player{

width:100%;

height:430px;

display:block;

object-fit:cover;

border-radius:90px;

box-shadow:0 20px 45px rgba(0,0,0,.12);

}

/*==================================
QUE CUBRE TU APORTE
==================================*/

.aporte{

max-width:1400px;

margin:150px auto 90px;

padding:0 25px;

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

position:relative;

}

.aporte-splash{

position:absolute;

top:-60px;

left:120px;

width:150px;

z-index:-1;

}

.aporte-left h2{

font-size:82px;

font-weight:800;

line-height:.9;

color:#111;

margin-bottom:35px;

}

.aporte-btn{

display:inline-flex;

align-items:center;

gap:14px;

padding:16px 34px;

border-radius:60px;

background:#2DA9E9;

color:#fff;

font-size:30px;

font-weight:700;

text-decoration:none;

transition:.35s;

}

.aporte-btn img{

width:22px;

transition:.35s;

}

.aporte-btn:hover{

transform:translateY(-4px);

}

.aporte-btn:hover img{

transform:translateX(5px);

}

.aporte-right p{

font-size:23px;

line-height:1.7;

color:#333;

max-width:620px;

}


/*====================================
CARDS APORTE
====================================*/

.aporte-cards{

max-width:1400px;

margin:70px auto 150px;

padding:0 25px;

display:grid;

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

gap:28px;

}

.aporte-card{

background:#fff;

padding:35px;

border-radius:30px;

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

transition:.35s;

text-align:center;

}

.aporte-card:hover{

transform:translateY(-8px);

box-shadow:0 24px 45px rgba(0,0,0,.14);

}

.aporte-card img{

width:140px;

height:70px;

object-fit:contain;

margin-bottom:22px;

}

.aporte-card h3{

font-size:30px;

font-weight:800;

color:#111;

margin-bottom:15px;

line-height:1.1;

}

.aporte-card p{

font-size:17px;

line-height:1.7;

color:#555;

}

/*====================*/


/*=====================================
A QUIÉN IMPACTA
=====================================*/

.impacta{

    max-width:1400px;

    margin:140px auto;

    padding:90px 25px 70px;

    background:#f7f7f7;

    border-radius:60px;

    position:relative;

    overflow:hidden;

}

/*==========================*/

.impacta-splash{

    position:absolute;

    width:170px;

    left:-70px;

    bottom:-60px;

    z-index:1;

}

/*==========================*/

.impacta-head{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:60px;

    gap:40px;

}

.impacta-head h2{

    font-size:82px;

    line-height:.9;

    font-weight:800;

    color:#111;

}

.impacta-btn{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 24px;

    border:2px solid #111;

    border-radius:50px;

    text-decoration:none;

    color:#111;

    font-size:22px;

    font-weight:600;

    transition:.35s;

}

.impacta-btn img{

    width:18px;

    transition:.35s;

}

.impacta-btn:hover{

    background:#2DA9E9;

    color:#fff;

    border-color:#2DA9E9;

}

.impacta-btn:hover img{

    transform:translateX(5px);

}

/*==========================*/

.impacta-slider{

    display:flex;

    gap:25px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

    cursor:grab;

}

.impacta-slider::-webkit-scrollbar{

    display:none;

}

.impacta-slider.dragging{

    cursor:grabbing;

    scroll-behavior:auto;

}

/*==========================*/

.impacta-card{

    min-width:300px;

    flex:0 0 300px;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

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

    transition:.35s;

}

.impacta-card:hover{

    transform:translateY(-8px);

}

.impacta-card>img{

    width:100%;

    height:270px;

    object-fit:cover;

    display:block;

}

/*==========================*/

.heart{

    position:absolute;

    margin-top:-255px;

    margin-left:245px;

    width:38px;

    height:38px;

    background:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

}

.heart img{

    width:18px;

}

/*==========================*/

.impacta-content{

    padding:22px;

}

.impacta-content h3{

    font-size:42px;

    line-height:1;

    margin-bottom:12px;

    color:#111;

}

.impacta-content p{

    font-size:15px;

    color:#555;

    line-height:1.6;

}

/*==========================*/

.impacta-dots{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:40px;

}

.impacta-dots span{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#FFD1B2;

    transition:.3s;

}

.impacta-dots span.active{

    background:#FF9654;

    width:14px;

    height:14px;

}


/*==================================
PLANES DE APORTE
==================================*/

.planes-aporte{

    max-width:1200px;

    margin:140px auto;

    padding:0 25px;

}

.planes-title{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-bottom:60px;

}

.planes-title img{

    width:170px;

}

.planes-title h2{

   font-size: 60px;
  font-weight: 800;
  color: #111;
  text-align: center;
  line-height: 54px;

}

/*=======================*/

.planes-grid{

    display:grid;

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

    gap:30px;

}

/*=======================*/

.plan-card{

    background:#fff;

    border-radius:30px;

    padding:40px 30px;

    box-shadow:0 15px 35px rgba(0,0,0,.10);

    text-align:center;

    transition:.35s;

    border:3px solid transparent;

}

.plan-card:hover{

    transform:translateY(-8px);

    border-color:#2DA9E9;

}

.plan-card.active{

    border-color:#A9CF38;

}

/*=======================*/

.plan-price{

    display:inline-block;

    padding:12px 26px;

    background:#fff;

    border-radius:50px;

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

    font-size:28px;

    font-weight:800;

    color:#111;

    margin-bottom:28px;

}

.plan-card p{

    font-size:17px;

    color:#555;

    line-height:1.8;

    margin-bottom:35px;

}

/*=======================*/

.plan-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 34px;

    background:#2DA9E9;

    color:#fff;

    border-radius:50px;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    transition:.3s;

}

.plan-btn:hover{

    background:#1f93cf;

}


/*==================================
CTA APADRINA
==================================*/

.cta-apadrina{

    position:relative;

    max-width:1400px;

    height:420px;

    margin:140px auto;

    border-radius:45px;

    overflow:hidden;

}

.cta-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.cta-overlay{

    position:absolute;

    inset:0;

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

}

.cta-content{

    position:relative;

    z-index:2;

    width:100%;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.cta-btn{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 38px;

    background:#fff;

    border-radius:60px;

    text-decoration:none;

    color:#111;

    font-size:42px;

    font-weight:700;

    transition:.35s;

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

}

.cta-btn img{

    width:22px;

    transition:.35s;

}

.cta-btn:hover{

    transform:translateY(-6px);

    background:#2DA9E9;

    color:#fff;

}

.cta-btn:hover img{

    transform:translateX(6px);

}

/*==================================
META APADRINAMIENTO
==================================*/

.meta-apadrinamiento{

    max-width:1400px;

    margin:140px auto;

    padding:70px 25px;

    position:relative;

    overflow:hidden;

}

.meta-wrapper{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:45px;

    align-items:center;

}

/*======================*/

.meta-photo img{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:28px;

}

/*======================*/

.meta-info h2{

    font-size:64px;

    line-height:.9;

    margin-bottom:18px;

    color:#111;

}

.meta-info p{

    font-size:19px;

    line-height:1.7;

    color:#444;

    margin-bottom:35px;

}

/*======================*/

.meta-progress{

    width:100%;

    height:42px;

    background:#ECECEC;

    border-radius:50px;

    overflow:hidden;

}

.meta-fill{

    height:100%;

    background:linear-gradient(90deg,#BDF48D,#9FD34B);

    border-radius:50px;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    padding-right:18px;

    color:#111;

    font-weight:700;

    font-size:20px;

}

/*======================*/

.meta-numbers{

    display:flex;

    justify-content:space-between;

    margin-top:16px;

    font-size:18px;

    font-weight:700;

}

/*======================*/

.meta-splash{

    position:absolute;

    left:-60px;

    top:0;

    width:170px;

}

.meta-wave{

    position:absolute;

    right:0;

    top:20px;

    width:90px;

}

/*========================*/




/*==========================
DOCUMENTOS
==========================*/

.documents{

max-width:1200px;

margin:150px auto;

padding:0 25px;

}

.documents-header{

text-align:center;

max-width:850px;

margin:0 auto 60px;

}

.documents-header h2{

font-size:64px;

font-weight:800;

color:#111;

margin-bottom:20px;

}

.documents-header p{

font-size:20px;

line-height:1.7;

color:#555;

}

/*================*/

.documents-list{

display:flex;

flex-direction:column;

gap:22px;

}

/*================*/

.document-item{

display:flex;

justify-content:space-between;

align-items:center;

gap:25px;

padding:28px 35px;

background:#fff;

border-radius:24px;

text-decoration:none;

box-shadow:0 15px 35px rgba(0,0,0,.10);

transition:.35s;

}

.document-item:hover{

transform:translateY(-5px);

box-shadow:0 20px 45px rgba(0,0,0,.15);

}

/*================*/

.document-info{

display:flex;

align-items:center;

gap:22px;

}

.document-info img{

width:54px;

flex-shrink:0;

}

.document-info h3{

font-size:28px;

color:#111;

margin-bottom:8px;

}

.document-info p{

font-size:16px;

line-height:1.6;

color:#666;

max-width:700px;

}

/*================*/

.document-download{

padding:12px 28px;

border-radius:50px;

background:#A9CF38;

color:#fff;

font-size:16px;

font-weight:700;

white-space:nowrap;

transition:.3s;

}

.document-item:hover .document-download{

background:#8BB527;

}


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

@media(max-width:1100px){

.team-grid{

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

}

.team-header h2{

font-size:58px;

}

}

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



@media(max-width:1200px){

.services-title h2{
font-size:56px;
}

.services-splash-left{
left:140px;
}

.services-splash-right{
right:140px;
}

.service-card{
width:320px;
height:450px;
}
.shop-left h2{
font-size:72px;
}

.shop-right p{
font-size:28px;
}


}


@media(max-width:992px){

.section-apadrina{
margin:100px auto;
}

.apadrina-wrapper{
flex-direction:column;
}

.apadrina-info{
flex:none;
width:100%;
padding:60px 35px 20px;
text-align:center;
}

.apadrina-info h2{
font-size:70px;
text-align:center;
}

.apadrina-box{
margin-bottom:30px;
}

.apadrina-box p{
font-size:24px;
}

.apadrina-btn{
justify-content:center;
font-size:24px;
}

.apadrina-media{
flex:none;
width:100%;
height:500px;
}

.mancha{
width: 380px;
right: 50%;
top: 3px;
transform:translateX(50%);
}

.persona{
height:100%;
right:50%;
transform:translateX(50%);
}

.sello-top-left{
width:120px;
left:-25px;
top:-20px;
}

.sello-right{
display:none;
}

.sello-bottom{
width:120px;
right:20px;
bottom:-30px;
}

.pelusa-left{
width:45px;
left:45px;
top:70px;
}

.pelusa-right{
width:40px;
right:18px;
top:165px;
}

.director{

margin:120px auto;

}

.director-media {
  width: 100%;
  height: 440px;
}

.director-title span{

font-size:26px;

padding:10px 26px;

}

.director-video{

height:430px;

}

.director-wave{

width:150%;

bottom:-20px;

}

.partners-grid{

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

gap:50px 35px;

}

.como-header{

flex-direction:column;

gap:20px;

}

.como-header h2{

font-size:52px;

text-align:center;

}

.como-stars{

width:100px;

}

.como-text{

font-size:17px;

}

.como-preview,
.como-player{

height:300px;

border-radius:45px;

}
.aporte{

grid-template-columns:1fr;

gap:35px;

text-align:center;

}

.aporte-right p{

margin:auto;

}

.aporte-left h2{

font-size:58px;

}
.aporte-cards{

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

}

.impacta{

        border-radius:40px;

        padding:70px 20px 60px;

    }

    .impacta-head{

        flex-direction:column;

        gap:30px;

    }

    .impacta-head h2{

        font-size:60px;

    }


}











/*  FINAL MAIN SECUNDARY
##################
##################
##################
##################
*/

/*   MAIN tercyari
##################
##################
##################
##################
*/


/*  FINAL MAIN tercyary
##################
##################
##################
##################
*/



@media(max-width:900px){
.nav{position:relative}

.nav-menu-mobile{display:block;margin-left:auto;background:none;border:none;color:#fff;font-size:34px;cursor:pointer}

.nav-links{
position:absolute;
top:100%;
left:0;
right:0;
margin-top:14px;
padding:28px;
display:flex;
flex-direction:column;
gap:22px;
border-radius:34px;
background:rgba(103,82,67,.92);
backdrop-filter:blur(20px);
opacity:0;
visibility:hidden;
transform:translateY(-20px);
}

.nav-links.active{
opacity:1;
visibility:visible;
transform:translateY(0);
}

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

.cards-home h2{
font-size:42px;
}

.cards-home p{
font-size:22px;
}

.card-image{
width:68%;
}
.services-home{
margin:120px auto;
}

.services-title{
margin-bottom:55px;
}

.services-title h2{
font-size:44px;
}

.footer-home{
margin:100px auto 60px;
}

.footer-content{
flex-direction:column;
align-items:center;
text-align:center;
gap:50px;
}

.footer-left h2{
font-size:46px;
}

.footer-right{
text-align:center;
}

.footer-right p{
font-size:24px;
}

.footer-social{
justify-content:center;
}

.history-content{
flex-direction:column;
}

.history-left,
.history-gallery{
width:100%;
}

.history-left{
text-align:center;
}

.history-left .splash{
left:-20px;
top:-40px;
width:90px;
}

.history-left h2{
font-size:52px;
}

.history-btn{
font-size:26px;
}

.history-gallery{
margin-top:40px;
}

.history-main{
height:420px;
}

.history-thumbs{
flex-direction:row;
justify-content:center;
}

.history-thumbs img{
width:90px;
height:90px;
}
.transparency-media{

height:480px;

}

.transparency-content{

left:35px;

bottom:35px;

max-width:420px;

}

.transparency-content h1{

font-size:64px;

}

.transparency-content p{

font-size:18px;

}

.transparency-splash{

width:160px;

right:-35px;

bottom:-35px;

}
.finance-header{

flex-direction:column;

gap:30px;

}

.finance-title h2{

font-size:56px;

}

.finance-cards{

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

}


.section-apadrina-page  .apadrina-info{
  margin-top:70px;
}

    .planes-grid{

        grid-template-columns:1fr;

    }

    .meta-wrapper{

grid-template-columns:1fr;

}

.meta-photo img{

height:260px;

}

.meta-info h2{

font-size:44px;

}

}



@media(max-width:650px){

.nav{
height:72px;
}

.nav-links,
.nav-donate,
.nav-user{
display:none;
}

.nav-menu-mobile{

display:block;

margin-left:auto;

background:none;

border:none;

font-size:34px;

color:white;
}

.hero-bottom-left{
  width: 144px;
  height: 235px;
}

.hero-bottom-right{
  width: 192px;
  height: 139px;
}

  .cards-home h2 {
    font-size: 28px;
  }

    .cards-home p {
    font-size: 18px;
  }

  .cards-home {
  margin: 80px auto;
}

.services-home{
padding:0 15px 30px;
}

.services-title h2{
font-size:34px;
}

.services-splash{
width:48px;
}

.services-splash-left{
left:-5px;
top:5px;
}

.services-splash-right{
right:-5px;
top:5px;
}

.services-line{
display:none;
}

.service-card{
width:90vw;
height:420px;
}

.service-top{
height:120px;
}

.service-top h3{
font-size:21px;
}

.service-top p{
font-size:14px;
}
.shop-home{
padding:0 18px;
}

.shop-splash{
width:70px;
left:-15px;
}

.shop-left h2{
font-size:42px;
}

.shop-right p{
font-size:18px;
}

.shop-btn{
width:100%;
font-size:18px;
padding:15px;
}

.shop-card{
width:78vw;
}

.shop-image{
height:300px;
}

.shop-info h3{
font-size:24px;
margin-top: -85px;
}

.shop-info span{
font-size:18px;
}

.services-home{
  margin-bottom: -80px;
}

.food-home{
padding:0 18px;
}

.food-wave-left{
width:120px;
left:-10px;
top:120px;
}

.food-wave-right{
width:70px;
right:0;
top:40px;
}

.food-title h2{
font-size:36px;
}

.food-title p{
font-size:18px;
}

.food-video{
height:220px;
border-radius:30px;
}

.food-video span{
font-size:32px;
}

  .about-splash-top {
    width: 198px;
    right: -47px;
    top: -64px;
  }
   .about-splash-bottom {
    width: 205px;
    left: -77px;
    bottom: -36px;
  }

  .services-splash{
width:65px;
}

.services-splash-left{
left:40px;
top:-8px;
}

.services-splash-right{
right:40px;
top:-8px;
}

.services-line{
top:160px;
}

.services-track{
gap:18px;
padding:10px;
}

.service-card{
width:82vw;
height:430px;
}

.service-top{
height:120px;
padding:20px;
}

.service-top h3{
font-size:22px;
}

.service-top p{
font-size:14px;
}

.service-arrow{
width:54px;
height:54px;
}
.shop-home{
margin-top: 110px;
margin-bottom: 40px;
}

.shop-header{
flex-direction:column;
gap:30px;
}

.shop-left h2{
font-size:56px;
}

.shop-right{
padding-top:0;
max-width:100%;
}

.shop-right p{
font-size:22px;
}

.shop-btn{
font-size:22px;
padding:15px 28px;
}

.shop-card{
width:220px;
}

.shop-image{
height:300px;
}


.food-home{
margin:40px auto;
}

.food-wave-left{
width:180px;
top:90px;
}

.food-wave-right{
width:100px;
}

.food-title h2{
font-size:48px;
}

.food-title p{
font-size:22px;
}

.food-video{
height:300px;
border-radius:45px;
}

.food-video span{
font-size:42px;
}

.about-home{

padding:70px 25px;

}

.about-home h2{

font-size:42px;

}

.about-grid{

gap:45px;

}

.about-photo{

width:180px;
height:180px;

}

.about-shape{

width: 263px;

}

.about-card span{

font-size:22px;

}
.footer-left h2{
font-size:36px;
}

.footer-right p{
font-size:18px;
}

.footer-social a{
width:50px;
height:50px;
}

  .footer-social img {
    width: 68px;
    height: 88px;
  }

.nav-links.active{
display:flex;
}



.history-left h2{
font-size:38px;
}

.history-left p{
font-size:15px;
}

.history-btn{
font-size:20px;
padding:12px 28px;
}

.history-main{
height:320px;
border-radius:22px;
}

.history-gallery{
flex-direction:column;
}

.history-thumbs{
margin-top:18px;
}

.history-thumbs img{
width:70px;
height:70px;
border-radius:14px;
}
.director{

padding:0 18px;

}

.director-title span{

font-size:22px;

padding:10px 22px;

}

.director-video{

height:250px;

border-radius:24px;

}

.director-wave{

width: 124%;
bottom: -77px;

}
.director-media {
  height: 245px;
}
.team{

margin:100px auto;

padding:30px 18px;

}

.team-grid{

grid-template-columns:1fr;

gap:24px;

}

.team-header{

text-align:center;

}

.team-header h2{

font-size:42px;

}

.team-image{

height:320px;

}

.team-info h3{

font-size:34px;

}

.team-top-left{

width:180px;

top:-40px;

left:-50px;

}

.team-top-right{

width:180px;

top:-40px;

right:-50px;

}

.team-bottom-left{

width:120px;

bottom:10px;

left:-35px;

}
.partners{

margin:100px auto;

padding:0 20px;

}

.partners-header h2{

font-size:24px;

}

.partners-btn{

font-size:22px;

}

.partners-grid{

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

gap:35px 25px;

}

.partners-grid img{

max-width:150px;

height:150px;

}

.transparency-hero{

padding:0 18px;

margin:120px auto;

}

.transparency-media{

height:420px;

border-radius:26px;

}

.transparency-content{

left:24px;

right:24px;

bottom:24px;

max-width:none;

}

.transparency-content h1{

font-size:28px;

margin-bottom:12px;

}

.transparency-content p{

font-size:16px;

line-height:1.45;

}

.transparency-splash{

width:120px;

right:-25px;

bottom:-79px;

}
.finance{

padding:0 18px;

margin:100px auto;

}

.finance-title h2{

font-size:42px;

}

.finance-text p{

font-size:16px;

}

.finance-cards{

grid-template-columns:1fr;

}

.finance-card h3{

font-size:38px;

}

.finance-splash{

width:110px;

right:-20px;

}
.chart{

flex-direction:column;

align-items:stretch;

}

.chart-axis{

display:none;

}

.chart-bars{

height:220px;

overflow-x:auto;


gap:35px;

padding-bottom:20px;

}

.month{

min-width:110px;

}

.bar{

width:42px;

}

.month span{

font-size:16px;

}

.chart-legend{

font-size:15px;

gap:25px;

}

.impact{

padding:0 18px;

}

.impact-title{

gap:10px;

}

.impact-title img{

width:55px;

}

.impact-title h2{

font-size:48px;

}

.impact-title h2 span{

font-size:22px;

}

.impact-grid{

grid-template-columns:1fr;

}

.impact-card{

height:240px;

}

.impact-overlay h3{

font-size:38px;

}

.impact-overlay p{

font-size:22px;

}

.documents{

padding:0 18px;

margin:100px auto;

}

.documents-header h2{

font-size:42px;

}

.documents-header p{

font-size:16px;

}

.document-item{

flex-direction:column;

align-items:flex-start;

padding:24px;

}

.document-info{

align-items:flex-start;

}

.document-info img{

width:42px;

}

.document-info h3{

font-size:22px;

}

.document-download{

width:100%;

text-align:center;

}

.faq{

padding:0 18px;

margin:100px auto;

}

.faq-header h2{

font-size:42px;

}

.faq-header p{

font-size:16px;

}

.faq-question{

font-size:18px;

padding:22px;

}

.faq-answer p{

padding:0 22px 22px;

font-size:15px;

}
.como-funciona{

padding:0 18px;

margin:100px auto;

}

.como-header h2{

font-size:42px;

}

.como-text{

font-size:16px;

}

.como-preview,
.como-player{

height:220px;

border-radius:32px;

}

.como-splash-left{

width:120px;

left:-40px;

}

.como-splash-right{

width:110px;

right:-35px;

}

.aporte{

padding:0 18px;

margin:100px auto 60px;

}

.aporte-left h2{

font-size:42px;

}

.aporte-btn{

font-size:22px;

padding:14px 26px;

}

.aporte-right p{

font-size:17px;

}

.aporte-splash{

width:90px;

left:30px;

top:-25px;

}

.aporte-cards{

grid-template-columns:1fr;

padding:0 18px;

margin:50px auto 100px;

}

.aporte-card{

padding:28px;

}

.aporte-card h3{

font-size:24px;

}

.aporte-card p{

font-size:15px;

}

.impacta{

        margin:90px auto;

        padding:60px 18px;

        border-radius:30px;

    }

    .impacta-head{

        margin-bottom:35px;

    }

    .impacta-head h2{

        font-size:44px;

    }

    .impacta-btn{

        font-size:18px;

        padding:10px 18px;

    }

    .impacta-card{

        min-width:260px;

        flex:0 0 260px;

    }

    .impacta-card>img{

        height:220px;

    }

    .heart{

        margin-left:205px;

        margin-top:-205px;

        width:34px;

        height:34px;

    }

    .heart img{

        width:16px;

    }

    .impacta-content h3{

        font-size:34px;

    }

    .impacta-content p{

        font-size:14px;

    }

    .impacta-splash{

        width:120px;

        left:-45px;

        bottom:-45px;

    }
       .planes-aporte{

        padding:0 18px;

        margin:100px auto;

    }

    .planes-title{

        gap:10px;

    }

    .planes-title img{

        width:50px;

    }

    .planes-title h2{

        font-size:40px;

        text-align:center;

    }

    .plan-price{

        font-size:22px;

    }

    .cta-apadrina{

        height:260px;

        margin:100px 18px;

        border-radius:30px;

    }

    .cta-btn{

        font-size:28px;

        padding:16px 28px;

    }

    .cta-btn img{

        width:18px;

    }
    .meta-apadrinamiento{

padding:80px 18px;

margin:100px auto;

}

.meta-photo img{

height:220px;

}

.meta-info h2{

font-size:36px;

}

.meta-info p{

font-size:16px;

}

.meta-progress{

height:34px;

}

.meta-fill{

font-size:16px;

}

.meta-numbers{

font-size:15px;

}


}