/* =========================================================
   BODY   PC 
========================================================= */

body{

    margin:0;

    font-family:'Roboto',sans-serif;

    background:#f5f7fa;

}

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



.hero-pr {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('../img/pueblos-img/pueblos-visitar.png') no-repeat center center/cover;
    min-height: 100vh; /* Ajusta el tamaño sin ocupar toda la pantalla */
    padding: 100px 20px 50px; /* espacio arriba y abajo */
    color: white;
    position: relative;
}
/* =========================================================
   LOGO
========================================================= */
.hero-logo{

    display:flex;

    align-items:center;

    gap:15px;
    margin-right:270px;
    filter:
    drop-shadow(0 4px 10px rgba(0,0,0,.45));

}

.hero-logo i{

    font-size:3rem;

    color:#b7d42a;

}

.hero-logo-text{

    display:flex;

    flex-direction:column;

}

.logo-linea-1{

    font-size:2rem;

    font-weight:900;

    color:#fff;

    line-height:1;

}

.logo-linea-2{

    font-size:.9rem;

    font-weight:700;

    color:#fff;

    letter-spacing:2px;

}

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

.hero-menu{

    position:fixed;

    top:0;

    left:0;

    z-index:9999;

    width:100%;

    padding:20px 30px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:linear-gradient(
        to bottom,
        rgba(5,34,76,.70),
        rgba(5,34,76,.35)
    );

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

}
.hero-logo i{

    font-size:2rem;

    color:#b7d42a;

    margin-bottom:10px;

}
/* BOTON HAMBURGUESA */

.menu-toggle{

    background:none;

    border:none;

    cursor:pointer;

    color:#fff;

    padding:0;

}

.menu-toggle i{

    font-size:2rem;

    color:#b7d42a;

}

/* ENLACES */

.menu-links{

    display:flex;

    align-items:center;

    gap:50px;

}

.menu-links a{

    text-decoration:none;

    color:#fff;

    font-size:.95rem;

    font-weight:700;

    text-transform:uppercase;

    transition:.3s;

}

.menu-links a:hover{

    color:#b7d42a;

}

/* =========================================================
   DESKTOP
========================================================= */

@media (min-width:769px){

    .menu-toggle{

        display:none;

    }

}



/**************************
   hero-content 
 *************************/  
.hero-content{

    position:absolute;

    top:85%;

    left:50%;

    transform:translate(-50%,-50%);

    width:100%;

    max-width:1400px;

    text-align:center;

}
.hero-content h1{

     max-width:1100px;

    margin:0 auto;

    font-family:'Montserrat',sans-serif;

    font-size:clamp(4rem,6vw,5.5rem);

    font-weight:700;

    color:#fff;

    line-height:1.05;

    letter-spacing:-1px;

    text-shadow:
    0 4px 15px rgba(0,0,0,.50);

}

/**************************
   hero-eslogan 
 *************************/ 

.hero-eslogan{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

    margin-top:-40%;

    font-size:2.7rem;

    font-weight:800;

    color:#ffffff;

    text-shadow:
        0 4px 15px rgba(0,0,0,.45);

}

.hero-eslogan span{

    position:relative;

}

.hero-eslogan span:not(:last-child)::after{



    margin-left:30px;

    color:#b7d42a;

}


.hero-subtitulo{

    max-width:900px;

    margin:35px auto 0;

    padding:18px 30px;

    background:
    rgba(255,255,255,.12);

    backdrop-filter:blur(8px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:20px;

    font-size:1.15rem;

    line-height:1.8;

    color:#fff;

    text-shadow:
        0 2px 10px rgba(0,0,0,.45);

}



.hero-content h1,
.hero-content h1 span{

    text-shadow:

        4px 4px 0 rgba(0,0,0,.45),
        8px 8px 0 rgba(0,0,0,.25),
        12px 12px 25px rgba(0,0,0,.35);

}

.hero-band{
    margin-top: 35%;

    position:relative;

    display:inline-block;

 

}

.hero-band img{

    width:700px;

    height:auto;

    display:block;

}

.hero-band span{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    font-family:'Dancing Script',cursive;

    font-size:4rem;

    font-weight:700;

    color:#05224c;

    white-space:nowrap;

}

.intro-puerto-rico{

   background:linear-gradient(
    180deg,
    #dff4ff 0%,
    #d6f0ff 30%,
    #e3f3e3 100%

);

    padding:80px 0;

    position:relative;

}

.intro-puerto-rico h2{

    font-family:'Roboto',sans-serif;

    color:#05224c;

    font-weight:800;

    margin-bottom:15px;

}

.intro-puerto-rico p{

    color:#23415f;

    font-weight:400;

    line-height:1.8;

}

.menu-links.active{

    max-height:600px;

    opacity:1;

    transform:translateY(0);

}
.seccion-turismo{

    padding:80px 0;

}

.buscador-turismo{

    max-width:900px;

    margin:0 auto;

    text-align:center;

}

.buscador-turismo h2{

    margin-bottom:25px;

    font-weight:700;

}

.buscador-turismo .input-group{

    display:flex;

    gap:10px;

}

.buscador-turismo .form-control{

    height:60px;

    border-radius:50px;

    font-size:1.1rem;

}

.buscador-turismo .btn{

    min-width:180px;

    border-radius:50px;

}