/*=========================
RESET
==========================*/

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

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f5f5f5;
    color:#333;
    line-height:1.6;
}

/*=========================
TODOS LOS TEXTOS
==========================*/

p{
    text-align:center;
}

img{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
}

/*=========================
CONTENEDOR
==========================*/

.contenedor{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/*=========================
CUERPO
==========================*/

.cuerpo{
    width:100%;
    max-width:1200px;
    margin:60px auto;
    padding:40px;
    background:#a4dffa;
    border-radius:12px;
    box-shadow:0 5px 15px rgba(0,0,0,.10);
}

.cuerpo h2{
    text-align:center;
    color:#832b15;
    font-size:38px;
    margin-bottom:25px;
}

.cuerpo p{
    text-align:center;
    font-size:22px;
    color:#05160a;
    margin-bottom:20px;
    line-height:1.8;
}


/*=========================
MENU
==========================*/

.menu-principal{
    background:#ca694b;
    position:sticky;
    top:0;
    z-index:2000;
}

.menu-principal .contenedor{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
}

.logo{
    display:flex;
    align-items:center;
    gap:30px;
}

/* Hace que el logo y el título sean un solo enlace */
.logo a{
    display:flex;
    align-items:center;
    gap:18px;
    text-decoration:none;
    color:inherit;
}

.logo img{
    width:210px;
    height:180px;
}

.logo h2{
    color:#f5f31d;
    font-size:34px;
    font-weight:bold;
    margin:0;
}

.menu{
    display:flex;
    gap:20px;
}

.menu a{
    color:white;
    padding:12px 18px;
    border-radius:6px;
    transition:.3s;
}

.menu a:hover{
    background:#1cdf25;
}

.activo{
    background:#16c424;
}

/*=========================
BANNER
==========================*/

.banner{
    background:url("imagenes/Mirador.jpg");
    background-size:cover;
    background-position:center;
    height:600px;
}

.banner-pagina{
    background:url("imagenes/parque.jpg");
    background-size:cover;
    background-position:center;
    height:350px;
}

.capa{
    width:100%;
    height:100%;
    background:rgba(0,0,0,.55);
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.banner h1,
.banner-pagina h1{
    color:#c5e970;
    font-size:55px;
    margin-bottom:20px;
}

.banner p,
.banner-pagina p{
    color:#ebb784;
    font-size:32px;
    margin-bottom:40px;
}

/*=========================
BOTONES
==========================*/

.botones{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.boton{
    background:#ff9800;
    color:white;
    padding:15px 30px;
    border-radius:8px;
    transition:.3s;
    display:inline-block;
}

.boton:hover{
    background:#e68900;
}

.boton-secundario{
    background:white;
    color:#881f0d;
    padding:15px 30px;
    border-radius:8px;
    transition:.3s;
    display:inline-block;
}

.boton-secundario:hover{
    background:#c4ecf3;
}

/*=========================
SECCIONES
==========================*/

.seccion{
    padding:70px 0;
}

.seccion h2{
    color:#832b15;
    margin-bottom:20px;
    font-size:38px;
    text-align:center;
}

.titulo-centro{
    text-align:center;
    margin-bottom:25px;
}

.texto-centro{
    text-align:center;
    max-width:1000px;
    margin:auto;
    font-size:33px;
}

/*=========================
FLEX
==========================*/

.fila{
    display:flex;
    justify-content:space-between;
    gap:30px;
    flex-wrap:wrap;
    margin-top:40px;
}

.dos-columnas{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    flex-wrap:wrap;
}

.imagen{
    flex:1;
}

.texto{
    flex:1;
}

/*=========================
TARJETAS
==========================*/

.tarjeta{
    flex:1;
    min-width:280px;
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(124,10,10,.15);
    transition:.4s;
}

.tarjeta:hover{
    transform:translateY(-10px);
}

.tarjeta img{
    width:100%;
    height:230px;
    object-fit:cover;
    transition:.4s;
}

.tarjeta:hover img{
    transform:scale(1.08);
}

.tarjeta h3{
    color:#611a0d;
    text-align:center;
    margin:20px 0;
}

.tarjeta p{
    padding:0 20px 20px;
    text-align:center;
}

.tarjeta .boton{
    margin:20px;
}

/*=========================
INFORMACION
==========================*/

.informacion{
    padding:70px 0;
    background:rgb(224,120,94);
}

.texto h2{
    color:#6b1408;
    margin-bottom:20px;
    font-size:35px;
    text-align:center;
}

.texto p{
    margin-bottom:20px;
    text-align:center;
}

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

.galeria{
    padding:70px 0;
    background:#eef6fb;
}

.galeria h2{
    text-align:center;
    color:#6e180d;
    margin-bottom:40px;
    font-size:38px;
}

.mini{
    flex:1;
    min-width:220px;
    background:white;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 3px 10px rgba(15, 13, 13, 0.15);
    transition:.4s;
}

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

.mini img{
    width:100%;
    height:180px;
    object-fit:cover;
    transition:.4s;
}

.mini:hover img{
    transform:scale(1.08);
}

.mini p{
    padding:15px;
    text-align:center;
    font-weight:bold;
    color:#6b1408;
}


/*=========================
VIDEO
==========================*/

.video{
    padding:70px 0;
    background:white;
    text-align:center;
}

.video h2{
    text-align:center;
    margin-bottom:35px;
    color:#6e2109;
    font-size:38px;
}

.video video{
    width:700px;
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto;
    border-radius:15px;
    border:5px solid #004d7a;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}


/*=========================
PIE DE PAGINA Y REDES SOCIALES
==========================*/

.pie{
    background:#e4afa5;
    padding:40px 20px;
    text-align:center;
}

.pie h3{
    color:#570e0e;
    font-size:32px;
    margin-bottom:25px;
}

.footer-img{
    width:1000px;      /* Cambia el tamaño si deseas */
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto 0px auto;
    border-radius:10px;
}

.pie p{
    color:#570e0e;
    font-size:18px;
    margin:0;
}

/*=========================
EFECTOS
==========================*/

img{
    transition:.4s;
}

img:hover{
    opacity:.95;
}

.boton,
.boton-secundario{
    cursor:pointer;
}

.boton:hover,
.boton-secundario:hover{
    transform:scale(1.05);
}


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

@media(max-width:900px){
.menu-principal .contenedor{
flex-direction:column;
}

.menu{
flex-wrap:wrap;
justify-content:center;
margin-top:15px;
}

.logo{
flex-direction:column;
text-align:center;
}

.logo img{
width:80px;
height:80px;
}

.logo h2{
font-size:28px;
}

.banner h1,
.banner-pagina h1{
font-size:36px;
}

.banner p,
.banner-pagina p{
font-size:22px;
}

.dos-columnas{
flex-direction:column;
}

.fila{
justify-content:center;
}

.video video{
width:90%;
}

}


/*=========================
CELULARES
==========================*/

@media(max-width:600px){
.banner{
height:450px;
}

.banner-pagina{
height:280px;
}

.banner h1,
.banner-pagina h1{
font-size:28px;
}

.banner p,
.banner-pagina p{
font-size:18px;
}

.menu{
flex-direction:column;
align-items:center;
}

.menu a{
width:100%;
text-align:center;
}

.boton,
.boton-secundario{
display:block;
width:100%;
margin-bottom:10px;
text-align:center;
}

.tarjeta{
min-width:100%;
}

.mini{
min-width:100%;
}

.video video{
width:100%;
}

}