/* Estilo para el botón BOOK NOW */
        .btn_1 {
          display: inline-block;
          padding: 12px 28px;
          background: linear-gradient(135deg, #2ecc71, #27ae60);
          /* Verde degradado */
          color: #fff !important;
          font-weight: bold;
          font-size: 14px;
          letter-spacing: 1px;
          text-transform: uppercase;
          border: none;
          border-radius: 30px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
          transition: all 0.3s ease-in-out;
          cursor: pointer;
          text-decoration: none;
        }

        /* Hover (efecto más vivo con turquesa) */
        .btn_1:hover {
          background: linear-gradient(135deg, #1abc9c, #16a085);
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
          transform: translateY(-3px);
        }

        /* Clic */
        .btn_1:active {
          transform: scale(0.95);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }


        .hero-gallery {
          max-width: 1300px;
          margin: 60px auto;
          padding: 100px 19px 0 19px;
          /* padding-top en vez de margin-top */
          display: grid;
          grid-template-columns: 1.6fr 1fr;
          gap: 40px;
          align-items: start;
          scroll-margin-top: 100px;
        }


        .gallery {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
          gap: 20px;
        }

        .gallery img {
          width: 100%;
          height: 220px;
          object-fit: cover;
          border-radius: 16px;
          box-shadow: 0 10px 18px rgba(0, 0, 0, 0.15);
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .gallery img:hover {
          transform: translateY(-4px);
          box-shadow: 0 14px 25px rgba(0, 0, 0, 0.25);
        }

        .hero-text h2 {
          font-size: 2.4rem;
          line-height: 1.2;
          margin-bottom: 20px;
          font-weight: 700;
        }

        .hero-text h2 span {
          color: #00796b;
          /* color acento */
        }

        .hero-text .lead {
          font-size: 1.1rem;
          color: #555;
          margin-bottom: 25px;
        }

        .hero-text p {
          margin-bottom: 20px;
          color: #666;
          line-height: 1.7;
        }

        .features {
          list-style: none;
          padding: 0;
          margin-bottom: 35px;
        }

        .features li {
          margin-bottom: 10px;
          font-size: 1rem;
        }

        .btn-primary {
          display: inline-block;
          background: linear-gradient(135deg, #00796b, #009688);
          color: #fff;
          padding: 14px 34px;
          border-radius: 50px;
          text-decoration: none;
          font-weight: 600;
          letter-spacing: 0.5px;
          transition: all 0.3s ease;
        }

        .btn-primary:hover {
          background: linear-gradient(135deg, #009688, #00796b);
          box-shadow: 0 6px 20px rgba(0, 121, 107, 0.3);
        }

        @media (max-width: 992px) {
          .hero-gallery {
            grid-template-columns: 1fr;
          }

          .gallery {
            order: 2;
          }

          .hero-text {
            order: 1;
          }
        }

        @media (max-width: 768px) {
          .gallery {
            grid-template-columns: repeat(2, 1fr);
            /* 2 columnas en celular */
            gap: 10px;
            /* menos espacio entre ellas */
          }

          .gallery img {
            height: 150px;
            /* más bajitas para que no ocupen tanto */
          }
        }

        .why-choose {
          padding: 80px 20px;
          background: #f9f9f9;
          text-align: center;
        }

        .section-title {
          font-size: 2.2rem;
          font-weight: 700;
          margin-bottom: 10px;
        }

        .section-subtitle {
          font-size: 1rem;
          color: #666;
          margin-bottom: 40px;
        }

        .features-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
          gap: 30px;
        }

        .feature-card {
          background: #fff;
          border-radius: 14px;
          padding: 25px 15px;
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .feature-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
        }

        .feature-card img {
          width: 60px;
          height: 60px;
          margin-bottom: 15px;
        }

        .feature-card h3 {
          font-size: 1rem;
          font-weight: 600;
          color: #333;
        }

        .faq-section {
          padding: 80px 20px;
          background: #f9f9f9;
        }

        .faq-title {
          text-align: center;
          font-size: 2.2rem;
          font-weight: 700;
          margin-bottom: 50px;
          color: #222;
        }

        .faq-title span {
          color: #00796b;
          /* acento */
        }

        .faq {
          max-width: 900px;
          margin: 0 auto;
        }

        .faq-item {
          border-radius: 12px;
          overflow: hidden;
          margin-bottom: 15px;
          background: #fff;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .faq-question {
          width: 100%;
          text-align: left;
          background: #fff;
          border: none;
          outline: none;
          padding: 18px 20px;
          font-size: 1.05rem;
          font-weight: 600;
          cursor: pointer;
          position: relative;
          transition: background 0.3s;
        }

        .faq-question::after {
          content: '+';
          position: absolute;
          right: 20px;
          font-size: 1.4rem;
          transition: transform 0.3s;
        }

        .faq-item.active .faq-question::after {
          content: '–';
          transform: rotate(180deg);
        }

        .faq-answer {
          max-height: 0;
          overflow: hidden;
          background: #fafafa;
          padding: 0 20px;
          transition: max-height 0.4s ease, padding 0.3s ease;
        }

        .faq-item.active .faq-answer {
          max-height: 400px;
          padding: 15px 20px 20px;
        }

        .booking-invite {
          background: linear-gradient(to right, #f8fafc, #eef3f9);
        }

        .booking-invite h2 {
          font-size: 2rem;
          color: #1e293b;
        }

        .booking-invite .btn-primary {
          background: linear-gradient(135deg, #06b6d4, #3b82f6);
          border: none;
          transition: all 0.3s ease;
        }

        .booking-invite .btn-primary:hover {
          background: linear-gradient(135deg, #3b82f6, #06b6d4);
          transform: translateY(-3px);
        }


        .booking-box{
    margin-top:35px;
}

.btn-book{
    display:inline-block;
    padding:20px 50px;
    font-size:20px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#fff;
    text-decoration:none;

    background:linear-gradient(135deg,#ff8c00,#ff4d00);

    border-radius:60px;

    box-shadow:
        0 10px 30px rgba(255,90,0,.45);

    transition:.3s;
    animation:pulse 2s infinite;
}

.btn-book:hover{

    transform:translateY(-4px) scale(1.05);

    box-shadow:
        0 15px 35px rgba(255,90,0,.60);

    background:linear-gradient(135deg,#ff6b00,#ff2600);

}

.btn-book:active{
    transform:scale(.96);
}

.booking-note{

    margin-top:15px;
    font-size:15px;
    color:#666;
    font-weight:500;
}

@keyframes pulse{

0%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(255,102,0,.55);
}

70%{
box-shadow:0 0 0 20px rgba(255,102,0,0);
}

100%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(255,102,0,0);
}

}




.booking-premium{

padding:90px 20px;

background:linear-gradient(135deg,#0f172a,#1e3a8a);

}

.booking-wrapper{

display:flex;

align-items:center;

justify-content:space-between;

gap:60px;

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

backdrop-filter:blur(10px);

border-radius:30px;

padding:60px;

box-shadow:0 20px 60px rgba(0,0,0,.30);

}

.booking-content{

flex:1;

color:#fff;

}

.booking-badge{

display:inline-block;

background:#16a34a;

padding:8px 18px;

border-radius:50px;

font-weight:700;

margin-bottom:25px;

font-size:14px;

}

.booking-content h2{

font-size:50px;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}

.booking-content h2 span{

display:block;

color:#38bdf8;

}

.booking-text{

font-size:20px;

line-height:1.8;

opacity:.9;

margin-bottom:35px;

max-width:650px;

}

.booking-features{

display:grid;

grid-template-columns:repeat(2,minmax(250px,1fr));

gap:18px;

margin-bottom:45px;

}

.booking-features div{

font-size:18px;

font-weight:500;

}

.booking-features i{

color:#22c55e;

margin-right:10px;

}

.btn-booking{

display:inline-block;

background:linear-gradient(135deg,#ff7b00,#ff4500);

padding:22px 60px;

font-size:24px;

font-weight:800;

color:#fff;

text-decoration:none;

border-radius:70px;

letter-spacing:1px;

box-shadow:0 15px 40px rgba(255,98,0,.45);

transition:.3s;

animation:pulse 2s infinite;

}

.btn-booking:hover{

transform:translateY(-5px) scale(1.05);

color:#fff;

text-decoration:none;

box-shadow:0 20px 50px rgba(255,98,0,.65);

}

.booking-note{

margin-top:18px;

font-size:16px;

color:#d1d5db;

}

.booking-image{

flex:0 0 420px;

text-align:center;

}

.booking-image img{

width:100%;

max-width:420px;

border-radius:25px;

background:#fff;

padding:20px;

box-shadow:0 20px 60px rgba(0,0,0,.35);

transition:.4s;

}

.booking-image img:hover{

transform:scale(1.04);

}

@keyframes pulse{

0%{

transform:scale(1);

box-shadow:0 0 0 0 rgba(255,120,0,.5);

}

70%{

box-shadow:0 0 0 22px rgba(255,120,0,0);

}

100%{

transform:scale(1);

box-shadow:0 0 0 0 rgba(255,120,0,0);

}

}

@media(max-width:992px){

.booking-wrapper{

flex-direction:column-reverse;

text-align:center;

padding:40px 30px;

}

.booking-content h2{
color: white;
font-size:38px;

}

.booking-text{

font-size:18px;

margin:auto auto 30px;


}

.booking-features{

grid-template-columns:1fr;

text-align:left;

}

.booking-image{

flex:none;

}

}

@media(max-width:576px){

.booking-content h2{

font-size:30px;

}

.btn-booking{

width:100%;

font-size:20px;

padding:18px;

}

.booking-wrapper{

padding:30px 20px;

}

}