/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Poppins',sans-serif;
background:#f4f6fb;
color:#1f2937;
line-height:1.6;

}


/* HEADER */

header{

text-align:center;
padding:70px 20px;
background:linear-gradient(135deg,#1e3a8a,#2563eb);
color:white;

}

header h1{

font-size:48px;
font-weight:700;
margin-bottom:10px;

}

header p{

font-size:20px;
opacity:.9;

}


/* CONTENEDOR GENERAL */

.container{

max-width:1200px;
margin:auto;
padding:40px 20px;

}


/* ===== CARRUSEL ===== */

.carousel{

position:relative;
overflow:hidden;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.carousel-track{

display:flex;
transition:transform .6s ease;

}

.carousel-slide{

min-width:100%;

}

.carousel-slide img{

width:100%;
height:520px;
object-fit:cover;

}


/* BOTONES */

.carousel-btn{

position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,.5);
color:white;
border:none;
font-size:30px;
padding:10px 18px;
cursor:pointer;
border-radius:6px;
z-index:10;

}

.carousel-btn:hover{

background:#2563eb;

}

.prev{

left:10px;

}

.next{

right:10px;

}


/* ===== GALERIA GRID ===== */

.gallery{

margin-top:50px;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;

}

.gallery-item{

position:relative;
overflow:hidden;
border-radius:10px;
cursor:pointer;
box-shadow:0 5px 20px rgba(0,0,0,.12);

}

.gallery-item img{

width:100%;
height:250px;
object-fit:cover;
transition:transform .5s ease;

}

.gallery-item:hover img{

transform:scale(1.12);

}


/* OVERLAY HOVER */

.gallery-item::after{

content:"Ver imagen";
position:absolute;
bottom:0;
left:0;
width:100%;
background:rgba(0,0,0,.5);
color:white;
text-align:center;
padding:10px;
opacity:0;
transition:.3s;

}

.gallery-item:hover::after{

opacity:1;

}


/* ===== MODAL IMAGEN ===== */

.modal{

display:none;
position:fixed;
z-index:1000;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.85);
justify-content:center;
align-items:center;

}

.modal img{

max-width:90%;
max-height:85%;
border-radius:10px;

}

.modal.active{

display:flex;

}


/* BOTON CERRAR */

.close{

position:absolute;
top:20px;
right:30px;
font-size:40px;
color:white;
cursor:pointer;

}


/* ===== ANIMACION SCROLL ===== */

.reveal{

opacity:0;
transform:translateY(60px);
transition:all .8s ease;

}

.reveal.active{

opacity:1;
transform:translateY(0);

}


/* ===== FOOTER ===== */

footer{

margin-top:60px;
background:#111827;
color:white;
text-align:center;
padding:35px;

}


/* ===== RESPONSIVE ===== */

@media (max-width:1024px){

.carousel-slide img{

height:420px;

}

}


@media (max-width:768px){

header h1{

font-size:34px;

}

header p{

font-size:18px;

}

.carousel-slide img{

height:320px;

}

.gallery-item img{

height:200px;

}

}


@media (max-width:480px){

header{

padding:50px 15px;

}

header h1{

font-size:28px;

}

.carousel-slide img{

height:230px;

}

.gallery{

grid-template-columns:1fr;

}

.gallery-item img{

height:220px;

}

}