@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');


        :root {
            --dorado: #f8ae00;
            --dorado-oscuro: #B8860B;
            --azul: #257a81;
            --azul-claro: #3B82F6;
            --negro: #073c40;
            --blanco: #F9FAFB;
            --crema: #fef8f0;
        }
        
        body {
              font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: normal;
            color: var(--negro);
            overflow-x: hidden;
        }
        
        /* Banner y navegación */
        /* SOLO PARA EL BANNER PRINCIPAL */
#bannerCarousel .carousel-item {
    height: 100vh;
    background-size: cover;
    background-position: center;
}

#bannerCarousel .carousel-item:nth-child(1) {
    background-image: linear-gradient(rgba(0, 10, 50, 0.5), rgba(0, 10, 50, 0.5)),
                      url('../img/slide-1.jpg');
}

#bannerCarousel .carousel-item:nth-child(2) {
    background-image: linear-gradient(rgba(0, 10, 50, 0.5), rgba(0, 10, 50, 0.5)),
                      url('../img/slide-2.jpg');
}

#bannerCarousel .carousel-item:nth-child(3) {
    background-image: linear-gradient(rgba(0, 10, 50, 0.5), rgba(0, 10, 50, 0.5)),
                      url('../img/slide-3.jpg');
}

        
        .banner-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: var(--blanco);
            width: 90%;
            max-width: 800px;
        }
        
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            transition: background-color 0.3s ease;
            padding: 15px 0;
        }
        
        .navbar.scrolled {
            background-color: rgba(7, 60, 64, 0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .navbar-brand {
            font-weight: bold;
            font-size: 1.5rem;
            color: var(--dorado) !important;
        }
        
        .navbar-nav .nav-link {
            color: var(--blanco) !important;
            font-weight: 300;
            margin: 0 10px;
            transition: color 0.3s;
        }
        
        .navbar-nav .nav-link:hover {
            color: var(--dorado) !important;
        }

         .navbar-nav .nav-link.active {

          color: var(--dorado) !important;


         }
        
        .banner-content h1 {
            font-size: 3.5rem;
           
            margin-bottom: 0.5rem;
            color: var(--dorado);
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        .banner-content h2 {
            font-size: 1.8rem;
            margin-bottom: 2rem;
            color: var(--blanco);
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        .banner-int img {
            width: 100%;
            max-height: 300px;

        }

        /* Secciones generales */
           .section {
      width: 100%;
      height: auto;
      padding:4.5em 0;
    }
    
        
        .section-title {
            text-align: center;
            margin-bottom: 0px;
            color: var(--azul);
            position: relative;
        }
        
        .section-title::after {
            content: '';
            display: block;
            width: 80px;
            height: 3px;
            background-color: var(--dorado);
            margin: 15px auto 15px auto;
        }

          .section-title2 {
            text-align: center;
            margin-bottom: 0px;
            color: var(--blanco);
            position: relative;
        }
        
        .section-title2::after {
            content: '';
            display: block;
            width: 80px;
            height: 3px;
            background-color: var(--dorado);
            margin: 15px auto 60px auto;
        }


        .p-ini1 {
            font-size: 1em!important;
            font-weight: 500;
            margin-bottom: 0!important;
            padding-bottom: 0;
            color: #635547;
            text-transform: uppercase;
        }

         .p-ini2 {
            font-size: 1em!important;
            margin-bottom: 0!important;
            padding-bottom: 0;
            color: #635547;
        }

        .nav-tabs .nav-link {

            color: #fff;
        }
        
        /* Sección de inicio */
        .inicio {
            background-color:#fff;
        }
        
        .inicio h3 {
            color: var(--azul);
            margin-bottom: 6em;
        }
        
        .inicio p {
            font-size: 1.4em;
            line-height: 1.8;
            margin-bottom: 25px;
            text-align: center;
            padding: 0.5em 10%;
        }


        .inicio-1 {
           background-color: #f6f5f3;
          font-size: 16px;
           color: #635547; 
        }

        .inicio-1-img, .inicio-2-img {

        padding: 2em;
        }

        .inicio-1-txt {
       
        padding-left: 4em;
        }
         .inicio-2-txt {
      
        padding-right: 4em;
        }

            .inicio-1-txt p, .inicio-2-txt p {
        font-size: 1.1em;

       }

 

        .inicio-1-row, .inicio-2-row {

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

        .inicio-1 h3, .inicio-2 h3 {
           
            margin-bottom: 1em;
            font-size: 2em;
        }

       .inicio-2 {
    position: relative;
    background-color: #257a81;   /* fondo azul */
    color: #fff;
    font-size: 16px;
    overflow: hidden;            /* evita que el pseudo elemento se salga */
}

.inicio-2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;                 /* extra tamaño para cubrir al rotar */
    height: 300%;
    background-image: url("../img/ondas.png");
    background-repeat: repeat;
    background-size: auto;       /* o ajusta según tu imagen */
    transform: rotate(45deg);    /* 🔥 aquí giras el patrón */
    transform-origin: center top;
    opacity: 0.4;                /* opcional, por si quieres suavizar */
    pointer-events: none;        /* evita bloquear clics */
    z-index: 0;
}

.recamaras {

     background-color: #257a81;   /* fondo azul */
     color: #fff;
}

.recamaras::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;                 /* extra tamaño para cubrir al rotar */
    height: 300%;
    background-image: url("../img/ondas.png");
    background-repeat: repeat;
    background-size: auto;       /* o ajusta según tu imagen */
    transform: rotate(-45deg);    /* 🔥 aquí giras el patrón */
    transform-origin: left bottom;
    opacity: 0.4;                /* opcional, por si quieres suavizar */
    pointer-events: none;        /* evita bloquear clics */
    z-index: 0;
}

.inicio-2 > * {
    position: relative;
    z-index: 1;  /* contenido por encima */
}

 .btn_info_inicio a{
            display: block;
            width: 20%;
            margin-top: 2em; 
            font-size: 1.3em;
            text-align: center;
            padding:0.5em 1.5em;
            background-color: var(--dorado);
            border-radius: 5px;
            color: #fff;
            text-decoration: none;
            margin: 0 auto;

              }

        .btn_info a,  .btn_info2 a {
            display: inline-block;
            margin-top: 2em; 
            font-size: 1.2em;
            padding:0.5em 1.5em;
            border: 1px solid #333;
            border-radius: 5px;
            color: #635547;
            text-decoration: none;

              }

        .btn_info a i, .btn_info2 a i {

            font-size: 1.4em;
            margin-right: 10px;
            line-height: 1.4em;
        } 

         .btn_info2 a {

            border: 1px solid #fff;
            color: #fff;
         }

         .info-depa {

            padding-right: 6em;
         }

         #room-title {

         } 

         #room-desc {

            margin: 1em auto 1.5em auto;
         } 

         .txt-min {
            font-size: 1em!important;
         }   
        
        /* Amenidades */
        .amenidades {
            background-color: #f8f9fa;
        }
        
        .amenidad-card {
            text-align: center;
            padding: 30px 20px;
            border-radius: 10px;
            background-color: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s;
            height: 100%;
        }
        
        .amenidad-card:hover {
            transform: translateY(-10px);
        }
        
        .amenidad-icon {
            font-size: 3rem;
            color: var(--dorado);
            margin-bottom: 20px;
        }

        /* Ubicación */

        .ubicacion {
            padding: 6em 3em;
            background-color: var(--crema);
        }

        /* Ubicación */
        
        /* Galería */
        .galeria-img {
            height: 250px;
            object-fit: cover;
            width: 100%;
            border-radius: 8px;
            transition: transform 0.3s;
        }
        
        .galeria-img:hover {
            transform: scale(1.03);
        }
        
        /* Información de contacto */
        .contacto-info {
            background-color: var(--azul);
            color: var(--blanco);
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .contacto-info h4 {
            color: var(--dorado);
            margin-bottom: 25px;
        }
        
        .contacto-info p {
            margin-bottom: 15px;
            font-size: 1.1rem;
        }
        
        .contacto-info i {
            color: var(--dorado);
            margin-right: 10px;
            width: 20px;
        }

        .fade-target {
    opacity: 1;
    transition: opacity .5s ease;
}

.fade-out {
    opacity: 0 !important;
}

  .galeria-item {
    width: 100%;
    height: 220px;          /* Ajusta la altura que quieras */
    overflow: hidden;
    border-radius: 8px;
    position: relative;
  }

  .galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* Mantiene proporción y recorta */
    object-position: center;
    transition: transform .3s ease;
  }

  .galeria-item:hover img {
    transform: scale(1.07);
  }

        
        /* Footer */
        footer {
            background-color: var(--negro);
            color: var(--blanco);
            padding: 60px 0 30px;
        }
        
        .footer-logo {
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--dorado);
            margin-bottom: 20px;
        }
        
        .footer-links h5 {
            color: var(--dorado);
            margin-bottom: 20px;
        }
        
        .footer-links ul {
            list-style: none;
            padding: 0;
        }
        
        .footer-links li {
            margin-bottom: 10px;
        }
        
        .footer-links a {
            color: var(--blanco);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: var(--dorado);
        }
        
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 20px;
            margin-top: 40px;
            text-align: center;
        }
        
        /* Personalización del carousel */
        .carousel-control-prev, .carousel-control-next {
            width: 5%;
        }
        
        .carousel-indicators button {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin: 0 5px;
        }
        
        /* Responsive */
        @media (max-width: 768px) {

            .navbar {
                width: 100%;
            }

            .navbar-nav {
                padding: 2em;
                text-align: center;
                background-color: var(--negro);
            }
            .navbar-brand {

    margin-bottom: 1em;
            }

            .navbar-brand img {
                width: 80%;
            }

            .banner-content h1 {
                font-size: 2.5rem;
            }
            
            .banner-content h2 {
                font-size: 1.4rem;
            }
            
            section {
                padding: 60px 0;
            }
            
            .carousel-item {
                height: 70vh;
            }
               .banner-int img {
           
            height: 120px;

        }

 .btn_info_inicio a{
           
            width: 70%;
 

              }
              .inicio-1-txt {
    padding-left: 1em;
}

              .info-depa {
    padding-right: 1em;
             }

              .nav-tabs {

                font-size: 0.9em;
              }

              .inicio p {
    font-size: 1.2em;
   
    padding: 0.5em 3%;
}
              .inicio-2-txt {
     padding-right: 1em; 
}

              .inicio-1-img, .inicio-2-img {
    padding: 2em 1em;
               }

              .btn_info2 a {

                margin-top: 1em;
              }

              .recamaras-img {

                margin-top: 3em;
              }
        }


        @media (max-width: 380px) {
               .nav-tabs {

                font-size: 0.7em;
              }
            .nav-tabs .nav-link  {

                padding: 1em;
              }
}


        @media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1220px;
    }
}