*{
margin:0;
padding:0;
box-sizing:border-box;
}

a{
text-decoration:none;
color:inherit;
transition:.25s;
}



body{
font-family:'Montserrat',sans-serif;
color:#333;
}

/* HEADER */

.header{ 
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
z-index:1000;

background:rgba(255,255,255,0.05);
backdrop-filter:blur(8px);
transition:all .3s;
}

/* LOGO GRANDE */
.logo{
position:absolute;
left:60px;
top:50%;
transform:translateY(-50%);
}

.logo img{
height:85px;
width:auto;
display:block;
}

/* MENU CENTRADO REAL */
.nav{
position:absolute;
left:50%;
transform:translateX(-50%);
display:flex;
gap:30px;
}

.nav a{
text-decoration:none;
color:white;
font-size:13px;
letter-spacing:1px;
position:relative;
}

.nav a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:white;
transition:.3s;
}

.nav a:hover::after{
width:100%;
}

/* BOTON DERECHA */
.header-right{
display:flex;
align-items:center;
gap:20px;
margin-left:auto;
}

.donate{
background:white;
border:none;
padding:10px 20px;
border-radius:25px;
font-weight:600;
cursor:pointer;
}

.menu-toggle{
display:none;
font-size:22px;
color:white;
cursor:pointer;
}

/* HERO */

.hero{
height:80vh;
background:url("img/hero-1.jpg") center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
color:white;
}

.hero-overlay{
position:absolute;
width:100%;
height:100%;
background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.5));
}

.hero-content{
position:relative;
max-width:900px;
animation:fadeUp 1.2s ease;
}

.hero-subtitle{
font-style:italic;
margin-bottom:20px;
opacity:.9;
}

.hero h1{
font-size:90px;
font-weight:800;
line-height:1.1;
}

.hero h1 span{
display:block;
font-size:30px;
font-weight:400;
margin-top:10px;
}

.scroll{
font-size:14px;
opacity:.8;
cursor:pointer;
}

/* CARDS */
.card a {
  color: white;
  text-decoration: none;
  font-weight: 600;
  display: inline-block; /* hace clic más fácil */
  position: relative;
  z-index: 2; /* asegura que esté por encima del ::before */
  padding: 8px 20px; /* opcional: estilo tipo botón */
  border-radius: 6px;
  background: rgba(255,255,255,0.1); /* ligero fondo si quieres efecto botón */
  transition: background 0.3s;
}

.card a:hover {
  background: rgba(255,255,255,0.25);
}

.info-cards{
display:grid;
grid-template-columns:repeat(4,1fr);
}

.card{
padding:60px 40px;
color:white;
transition:.4s;
position:relative;
overflow:hidden;
}

.card i{
font-size:28px;
margin-bottom:20px;
opacity:.9;
}

.card h3{
margin-bottom:10px;
}

.card p{
font-size:14px;
margin-bottom:20px;
opacity:.9;
}

.card a{
color:white;
text-decoration:none;
font-weight:600;
}

.card::before{
content:"";
position:absolute;
width:100%;
height:100%;
background:rgba(255,255,255,0.1);
top:0;
left:-100%;
transition:.4s;
}

.card:hover::before{
left:0;
}

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

/* COLORES */

.card1{background:#d3831b;}
.card2{background:#df821e;}
.card3{background:#2761b3;}
.card4{background:#1b67d3;}

/* ANIMACIÓN */

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* RESPONSIVE */

@media(max-width:900px){

.hero h1{
font-size:60px;
}

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

}

@media(max-width:700px){

.nav{
position:absolute;
top:80px;
left:0;
width:100%;
background:#111;
flex-direction:column;
align-items:center;
display:none;
padding:20px 0;
}

.nav.active{
display:flex;
}

.menu-toggle{
display:block;
}

.hero h1{
font-size:40px;
}

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

}

/* ABOUT SECTION */

.about-section{
padding:120px 20px;
background:#f7f7f7;
}

.about-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}


.about-image{
width:100%;
border-radius:30px;
overflow:hidden;
position:relative;
box-shadow:0 30px 70px rgba(0,0,0,.08);
transition:transform .5s ease,box-shadow .5s ease;
}

.about-image img{
width:100%;
height:550px;
object-fit:cover;
transition:transform .7s ease;
}

.about-image::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
120deg,
rgba(255,255,255,0) 40%,
rgba(255,255,255,.25) 50%,
rgba(255,255,255,0) 60%
);
transform:translateX(-100%);
transition:transform .9s ease;
}

.about-image:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 45px 90px rgba(0,0,0,.12);
}

.about-image:hover img{
transform:scale(1.06);
}

.about-image:hover::after{
transform:translateX(100%);
}


.about-content h2{
font-size:38px;
line-height:1.3;
margin:15px 0 20px 0;
font-weight:700;
color:#222;
}

.about-content p{
margin-bottom:15px;
line-height:1.7;
color:#555;
}

.about-tag{
font-size:12px;
letter-spacing:2px;
color:#1b67d3;
font-weight:600;
}

.about-stats{
display:flex;
gap:40px;
margin:30px 0;
}

.stat h3{
font-size:30px;
color:#1b67d3;
margin-bottom:5px;
}

.stat p{
font-size:13px;
color:#777;
}

.about-btn{
padding:14px 34px;
border:none;
border-radius:30px;
background:#1b67d3;
color:white;
font-weight:600;
cursor:pointer;
transition:.3s;
}

.about-btn:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

/* RESPONSIVE */

@media(max-width:900px){

.about-container{
grid-template-columns:1fr;
gap:50px;
}

.about-content{
text-align:center;
}

.about-stats{
justify-content:center;
}

}

.about-section{
opacity:0;
transform:translateY(60px);
transition:all 1s ease;
}

/* SERVICES SECTION */

.services-section{
position:relative;
padding:120px 20px;

background-image:url("img/servicios-bg.jpg");
background-size:cover;
background-position:center;
background-attachment:fixed;

color:white;
}

/* overlay oscuro para legibilidad */

.services-section::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.65);
z-index:1;
}

/* asegurar que el contenido quede arriba */

.services-header,
.services-grid{
position:relative;
z-index:2;
}

.services-header{
text-align:center;
max-width:700px;
margin:auto;
margin-bottom:70px;
}

.services-header span{
font-size:12px;
letter-spacing:2px;
color:#ffffff;
font-weight:600;
}

.services-header h2{
font-size:38px;
margin:15px 0;
color:white;
}

.services-header p{
color:#d0d0d0;
}

.services-grid{
max-width:1200px;
position: center;
margin:auto;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}

.service-card{
background:rgba(255,255,255,0.08);
backdrop-filter:blur(6px);
padding:40px 30px;
border-radius:10px;
text-align:center;
transition:.3s;
border:1px solid rgba(255,255,255,0.15);
}

.service-card p{
color:#e6e6e6;
}

.service-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 30px rgba(0,0,0,0.3);
background:rgba(255,255,255,0.12);
}

.service-card i{
font-size:28px;
color:#1b67d3;
margin-bottom:20px;
}

.service-card h3{
margin-bottom:10px;
}

.service-time{
font-weight:600;
margin-top:10px;
}

.service-hour{
font-size:24px;
color:#1b67d3;
font-weight:700;
margin-bottom:15px;
}

.service-card:hover{
transform:translateY(-6px);
box-shadow:0 15px 30px rgba(0,0,0,0.1);
}

/* RESPONSIVE */

@media(max-width:900px){

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

}

@media(max-width:600px){

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

.services-header h2{
font-size:30px;
}

}

/* MAP SECTION */

.map-section{
width:100%;
position:relative;
}

.map-container{
position:relative;
width:100%;
height:420px;
}

.map-container iframe{
width:100%;
height:100%;
border:0;
filter:grayscale(100%);
}

/* floating card */

.map-card{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:white;
padding:40px 60px;
border-radius:8px;
text-align:center;
box-shadow:0 15px 40px rgba(0,0,0,0.2);
max-width:500px;
}

.map-hours{
font-size:12px;
letter-spacing:2px;
color:#777;
}

.map-card h3{
margin:15px 0 25px;
font-size:26px;
color:#1b67d3;
}

.map-phone{
display:inline-block;
background:#1b67d3;
color:white;
padding:12px 28px;
border-radius:6px;
text-decoration:none;
font-weight:600;
}

.map-phone i{
margin-right:8px;
}



/* FOOTER */

.footer{
background:#08294a;
color:white;
padding:80px 20px;
font-family:'Poppins',sans-serif;
}

.footer-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:60px;
}

.footer-logo{
margin-bottom:20px;
font-weight:700;
font-size:20px;
}

.footer-col p{
margin-bottom:10px;
color:#cfd8e3;
line-height:1.6;
}

.footer-col strong{
display:block;
margin-top:10px;
}

.footer-col h4{
margin-bottom:20px;
font-size:18px;
}

.footer-col ul{
list-style:none;
padding:0;
}

.footer-col li{
margin-bottom:10px;
}

.footer-col a{
text-decoration:none;
color:#cfd8e3;
font-size:14px;
transition:.3s;
}

.footer-col a:hover{
color:white;
}

/* BOTÓN DONAR */

.footer-donate h4{
margin-bottom:25px;
font-size:20px;
}

.donate-btn{
background:#1b67d3;
border:none;
color:white;
padding:12px 30px;
border-radius:6px;
cursor:pointer;
text-decoration:none;
display:inline-block;
transition:.3s;
}

.donate-btn:hover{
background:#1556b0;
transform:translateY(-2px);
}

/* REDES SOCIALES */

.footer-social{
display:flex;
gap:15px;
margin-top:10px;
}

.footer-social a{
width:42px;
height:42px;
background:#1b67d3;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
color:white;
font-size:18px;
transition:all .3s ease;
text-decoration:none;
}

.footer-social a:hover{
transform:translateY(-4px) scale(1.05);
background:#1556b0;
box-shadow:0 10px 20px rgba(0,0,0,.25);
}



/* RESPONSIVE */

@media(max-width:900px){

.footer-container{
grid-template-columns:1fr 1fr;
}

.map-card{
width:90%;
padding:30px;
}

}

@media(max-width:600px){

.footer-container{
grid-template-columns:1fr;
text-align:center;
}

}

.video-section{
  width:100%;
  padding:40px 100px;
  background:url("img/bg-video.jpg") center/cover no-repeat;
  display:flex;
  justify-content:center;
  align-items:center;
}

.video-container{
  width:80%; 
  max-width:2000px;
  position:relative;
  padding-bottom:56.25%;
  height:0;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 15px 35px rgba(0,0,0,0.3); 
}

.video-container iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}


/* HERO SLIDER */

.hero-slider{
position:relative;
width:100%;
height:80vh;
overflow:hidden;
font-family:'Montserrat',sans-serif;
}

.hero-track{
display:flex;
height:100%;
transition:transform .6s ease;
}

.hero-slide{
min-width:100%;
height:100%;
background-size:cover;
background-position:center;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}

/* overlay oscuro */

.hero-slide::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(
to bottom,
rgba(0,0,0,0.4),
rgba(0,0,0,0.75)
);
}

/* contenido */

.hero-content{
position:relative;
max-width:800px;
text-align:center;
color:#fff;
padding:20px;
}

.hero-subtitle{
font-size:14px;
letter-spacing:3px;
text-transform:uppercase;
margin-bottom:15px;
opacity:.8;
}

.hero-title{
font-size:34px;
line-height:1.4;
font-weight:700;
margin-bottom:35px;
}

/* autor */

.hero-author{
display:flex;
align-items:center;
justify-content:center;
gap:15px;
}

.hero-author img{
width:60px;
height:60px;
border-radius:50%;
object-fit:cover;
border:3px solid #fff;
}

.hero-author h4{
font-size:16px;
margin:0;
}

.hero-author span{
font-size:13px;
opacity:.7;
}

/* BOTONES */

.hero-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(255,255,255,0.15);
border:none;
color:#fff;
font-size:26px;
width:45px;
height:45px;
border-radius:50%;
cursor:pointer;
backdrop-filter:blur(6px);
transition:.3s;
}

.hero-btn:hover{
background:#1e6cff;
}

.hero-btn.prev{
left:25px;
}

.hero-btn.next{
right:25px;
}

/* DOTS */

.hero-dots{
position:absolute;
bottom:30px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:10px;
}

.dot{
width:10px;
height:10px;
border-radius:50%;
background:rgba(255,255,255,0.4);
cursor:pointer;
transition:.3s;
}

.dot.active{
background:#fff;
width:25px;
border-radius:20px;
}