/* ==================================================
   PARADISE INN — ESTILOS PRINCIPALES
   Archivo: styles.css
   Contenido: estilos base y diseño de escritorio
   Responsive: consultar responsive.css
================================================== */

/* ==================================================
   VARIABLES DE COLOR
================================================== */
:root{
    --mango:#FDB913;
    --papaya:#FF6F3C;
    --palm:#1F7A5C;
    --jungle:#123832;
    --cream:#FFF8EC;
    --sky:#4FB6C6;
    --white:#FFFFFF;
  }

/* ==================================================
   REINICIO Y ESTILOS GLOBALES
================================================== */

*{box-sizing:border-box; margin:0; padding:0;}
  html{
    height:100%;
}

body{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    font-family:'Nunito', sans-serif;
    background:var(--cream);
    color:var(--jungle);
    -webkit-font-smoothing:antialiased;
}

main,
.page-content{
    padding-top:76px;
}
  h1,h2,h3,.display{
    font-family:'Fredoka', sans-serif;
    font-weight:600;
  }
  a{text-decoration:none; color:inherit;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

/* ==================================================
   ENCABEZADO Y NAVEGACIÓN
================================================== */
header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;

    background:var(--cream);

    overflow:visible;
}
 nav.wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:16px;
    padding-bottom:16px;
}
  .logo{
    display:flex; align-items:center; gap:10px;
    font-family:'Fredoka', sans-serif; font-size:1.5rem; font-weight:700;
    color:var(--jungle);
  }


/* Logo del encabezado
 * El archivo puede conservar una resolución mayor (por ejemplo, 780 × 179 px).
 * CSS únicamente controla el tamaño visual para mantener la nitidez.
 */
.logo img,
.logo .custom-logo,
.custom-logo-link img{
    display:block;
    width:195px;
    height:auto;
    max-height:45px;
    object-fit:contain;
    flex-shrink:0;
}

.custom-logo-link{
    display:flex;
    align-items:center;
    line-height:0;
}
  .logo-sun{
    width:34px; height:34px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, var(--mango), var(--papaya));
  }
  .navlinks ul {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.navlinks ul li {
    margin: 0;
    padding: 0;
}
.navlinks ul li a {
    padding: 9px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--jungle);
    transition: background .18s ease, color .18s ease;
    text-decoration: none;
    display: inline-block;
}
.navlinks ul li a:hover {
    background: rgba(31,122,92,0.1);
    color: var(--palm);
}
.navlinks ul li.cta-btn a {
    background: var(--mango);
    color: var(--jungle) !important;
    padding: 11px 22px !important;
    border-radius: 999px;
    box-shadow:0 4px 0 #C98A00;
    font-weight: 800 !important;
}
.navlinks ul li.cta-btn a:hover {
    transform: translateY(-1px);
    background: #ffc636;
}

/* Botón del menú móvil (oculto en escritorio) */
.menu-toggle{
    display:none;
    background:none;
    border:none;
    font-size:32px;
    color:var(--jungle);
    cursor:pointer;
}

/* ==========================
   SUBMENÚ DE NAVEGACIÓN
========================== */

.navlinks ul li{
    position:relative;
}

.navlinks ul ul{
    position:absolute;
    top:100%;
    left:0;
    min-width:220px;
    background:var(--white);
    border-radius:16px;
    padding:10px 0;
    list-style:none;
    display:none;
    z-index:999;
}

.navlinks ul ul li{
    width:100%;
}

.navlinks ul ul li a{
    display:block;
    padding:12px 20px;
    border-radius:0;
    white-space:nowrap;
}

.navlinks ul ul li a:hover{
    background:rgba(31,122,92,.08);
}

.navlinks ul li:hover > ul{
    display:block;
}

/* ==================================================
   HERO / PORTADA
================================================== */
  .hero{
    position:relative;
    overflow:hidden;
    margin: 0;
    padding:0;
    background:linear-gradient(
        180deg,
        #FFE9C7 0%,
        var(--cream) 65%
    );
}
  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:40px;
    align-items:center;
    padding-top:64px;
    padding-bottom:70px;
}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(31,122,92,0.12); color:var(--palm);
    padding:7px 16px; border-radius:999px; font-weight:800;
    font-size:0.82rem; letter-spacing:0.03em; text-transform:uppercase;
    margin-bottom:18px;
  }
  .hero h1{
    font-size:3.2rem; line-height:1.06; color:var(--jungle);
    margin-bottom:20px;
  }
  .hero h1 span{color:var(--papaya);}
  .hero p{font-size:1.15rem; line-height:1.55; color:#345850; max-width:480px; margin-bottom:30px;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
 .btn-primary{
    position:relative;

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

    background:var(--mango);
    color:var(--jungle);

    padding:15px 32px;

    border-radius:999px;

    font-weight:800;
    font-size:1rem;

    overflow:visible;
}

.btn-text{
    position:relative;
    z-index:1;
}

.btn-label{

    position:absolute;

    top:-8px;
    right:-12px;

    background:var(--jungle);

    color:var(--mango);

    padding:6px 14px;

    border-radius:12px;

    font-size:.72rem;

    font-weight:900;

    transform:rotate(12deg);

    text-transform:uppercase;

}

/* ==========================
   SOMBRAS DE BOTONES DESTACADOS
========================== */

/*
 * Se limita la sombra a los botones mostrados en:
 * - Botón principal del Hero.
 * - Botón Reserva del menú.
 * - Botón Reservar habitación.
 * - Botón Solicitar cotización.
 * - Botón Enviar solicitud.
 * - Etiquetas de descuento asociadas.
 *
 * No afecta otros botones primarios ni elementos del sitio.
 */
.hero .btn-primary,
.room-info-box .btn-primary,
.salon-info-box .btn-primary,
.reservation-submit-button{
    box-shadow:0 5px 0 #C98A00;
}

.hero .btn-label,
.salon-info-box .btn-label{
    box-shadow:0 6px 14px rgba(0,0,0,.18);
}

  .btn-primary:hover{transform:translateY(-2px);}
  .hero-art{position:relative;}
  .hero-photo-stack{position:relative; height:440px;}
  .hp{
    position:absolute; border-radius:28px; overflow:hidden;
    border:6px solid var(--white);
  }
  .hp1{width:78%; top:0; right:0; height:300px;}
  .hp2{width:52%; bottom:0; left:0; height:210px; z-index:2;}
  .hp img{width:100%; height:100%; object-fit:cover;}
  .blob{
    position:absolute; border-radius:50%;
    background:var(--mango); opacity:0.35;
  }
  .blob1{width:130px; height:130px; top:-30px; left:-30px;}
  .blob2{width:90px; height:90px; bottom:20px; right:-20px; background:var(--sky); opacity:0.3;}

  .wave{display:block; width:100%; line-height:0;}
  .wave svg{width:100%; height:auto; display:block;}

/* ==================================================
   SERVICIOS
================================================== */
  .services{background:var(--white); padding:80px 0 90px;}
  .section-head{text-align:center; max-width:620px; margin:0 auto 48px;}
  .section-head .eyebrow{background:rgba(255,111,60,0.12); color:var(--papaya);}
  .section-head h2{font-size:2.3rem; margin-bottom:12px; color:var(--jungle);}
  .section-head p{color:#537871; font-size:1.05rem;}

  .service-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
  }
  .service-card{
    background:var(--cream); border-radius:22px; padding:26px 20px;
    text-align:left; transition:transform .18s ease;
    border:2.5px solid transparent;
  }
  .service-card:hover{
    transform:translateY(-5px); border-color:var(--mango);
  }
  .service-icon{
    width:52px; height:52px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; margin-bottom:14px;
  }
  .service-card:nth-child(4n+1) .service-icon{background:rgba(255,111,60,0.16);}
  .service-card:nth-child(4n+2) .service-icon{background:rgba(79,182,198,0.2);}
  .service-card:nth-child(4n+3) .service-icon{background:rgba(31,122,92,0.16);}
  .service-card:nth-child(4n+4) .service-icon{background:rgba(255,177,59,0.25);}
  .service-card h3{font-size:1.05rem; margin-bottom:6px;}
  .service-card p{font-size:0.9rem; color:#5c7a73; line-height:1.4;}

/* ==================================================
   HABITACIONES: LISTADO
================================================== */
  .rooms{padding:90px 0; background:var(--cream);}
  .room-scroll{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  }
  .room-card{
    background:var(--white); border-radius:26px; overflow:hidden;
  }
  .room-photo{height:190px; overflow:hidden; position:relative;}
  .room-photo img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease;}
  .room-card:hover .room-photo img{transform:scale(1.06);}
  .room-tag{
    position:absolute; top:14px; left:14px;
    background:var(--white); color:var(--papaya); font-weight:800;
    font-size:0.75rem; padding:6px 12px; border-radius:999px;
  }
  .room-info{padding:22px;}
  .room-info h3{font-size:1.15rem; margin-bottom:8px;}
  .room-info p{font-size:0.9rem; color:#5c7a73; margin-bottom:14px;}
  .room-link{font-weight:800; color:var(--palm); font-size:0.9rem;}
  .room-link:after{content:" →"; }

/* ==================================================
   SALONES: BANDA PRINCIPAL
================================================== */
  .band{
    background:var(--palm); color:var(--white); padding:80px 0;
    position:relative; overflow:hidden;
  }
  .band .section-head p{color:#cfeee2;}
  .band .section-head .eyebrow{background:rgba(255,255,255,0.16); color:var(--white);}
  .band .section-head h2{color:var(--white);}
  .salon-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .salon-pill{
    background:rgba(255,255,255,0.1); border:2px solid rgba(255,255,255,0.25);
    border-radius:20px; padding:22px; text-align:center;
    font-weight:700; font-family:'Fredoka', sans-serif; font-size:1.05rem;
  }
  .salon-pill span{
    display:block; font-family:'Nunito'; font-weight:600; font-size:0.82rem;
    color:#cfeee2; margin-top:6px;
  }

/* ==================================================
   BARRA PROMOCIONAL
================================================== */
.promo-bar{
    background:var(--jungle); color:var(--white); text-align:center;
    padding:10px 16px;margin: 0; font-weight:800; font-size:0.9rem;
    letter-spacing:0.01em;
  }
  .promo-bar span{color:var(--mango);}
  .promo-badge{
    position:absolute; top:-14px; right:-14px;
    background:var(--jungle); color:var(--mango);
    font-family:'Fredoka', sans-serif; font-weight:700; font-size:0.78rem;
    padding:8px 12px; border-radius:999px; transform:rotate(8deg); white-space:nowrap;
  }
/* ==================================================
   PÁGINAS INTERNAS
================================================== */

.habitacion-single,
.salon-single,
.restaurant-page,
.gym-page{
    padding-top:76px;
    padding-bottom:80px;
    background:var(--cream);
}

/* ==================================================
   HABITACIONES: PLANTILLA GENERAL
================================================== */

.habitacion-single{
    background:var(--cream);
}


.habitacion-card{
    background:var(--white);
    border-radius:30px;
    padding:40px;
}


.habitacion-header{
    text-align:center;
    margin-bottom:35px;
}


.habitacion-header h1{
    font-size:3rem;
    color:var(--jungle);
}


.habitacion-imagen img{
    width:100%;
    height:auto;
    max-height:550px;
    object-fit:cover;
    border-radius:25px;
}


.habitacion-contenido{
    max-width:850px;
    margin:40px auto 0;
    font-size:1.1rem;
    line-height:1.7;
    color:#345850;
}
.room-data{
    margin-top:30px;
    display:grid;
    gap:14px;
}

.room-data p{
    background:var(--cream);
    padding:15px;
    border-radius:15px;
    font-weight:600;
}

.amenidades{
    background:var(--white);
    border-radius:20px;
    padding:20px;
    border:2px solid rgba(31,122,92,.1);
}

.precio{
    color:var(--palm);
    font-size:1.2rem;
}

/* ==================================================
   HABITACIONES: PÁGINA INDIVIDUAL
================================================== */


.room-detail{
    padding:70px 0;
}


.room-hero-image{
    border-radius:35px;
    overflow:hidden;
    margin-bottom:40px;
}


.room-hero-image img{
    width:100%;
    height:520px;
    object-fit:cover;
}


.room-header{
    max-width:800px;
    margin:auto;
    text-align:center;
}


.room-header h1{

    font-size:3rem;
    margin-bottom:20px;

}


.room-description{

    color:#537871;
    font-size:1.1rem;
    line-height:1.7;

}


.room-features{

    margin:50px 0;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}


.feature-card{

    background:var(--white);

    border-radius:25px;

    padding:30px;

    text-align:center;

}


.feature-card span{

    font-size:2rem;

    display:block;

    margin-bottom:10px;

}


.feature-card strong{

    display:block;

    margin-bottom:8px;

}


.room-info-box{

    background:linear-gradient(135deg,#FFE3B0,#FFD1BE);

    padding:40px;

    border-radius:35px;

}


.room-info-box h2{

    margin-bottom:20px;

}


.amenidades{

    white-space:pre-line;

    line-height:2;

    margin-bottom:30px;

}


.room-price{

    display:flex;

    flex-direction:column;

    margin-bottom:25px;

}


.room-price span{

    color:#537871;

}


.room-price strong{

    font-size:2rem;

    color:var(--palm);

}
/* ==========================
   GALERÍA REUTILIZABLE
========================== */

.gallery-container{
    width:100%;
    margin-bottom:40px;
}

.gallery-main{
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;
    margin-bottom:18px;
    border-radius:28px;
    background:#eee7db;
}

.gallery-main-image{
    width:100%;
    height:100%;
    object-fit:cover;
}

.gallery-strip{
    display:flex;
    gap:14px;
    width:100%;
    padding:2px 2px 12px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(18,56,50,.35) transparent;
}

.gallery-strip::-webkit-scrollbar{
    height:7px;
}

.gallery-strip::-webkit-scrollbar-track{
    background:transparent;
}

.gallery-strip::-webkit-scrollbar-thumb{
    background:rgba(18,56,50,.3);
    border-radius:999px;
}

.gallery-thumb-button{
    flex:0 0 150px;
    width:150px;
    padding:0;
    border:0;
    border-radius:16px;
    background:transparent;
    cursor:pointer;
    scroll-snap-align:start;
}

.gallery-thumb{
    display:block;
    width:100%;
    aspect-ratio:4 / 3;
    height:auto;
    object-fit:cover;
    border:3px solid transparent;
    border-radius:16px;
    transition:
        transform .25s ease,
        border-color .25s ease,
        opacity .25s ease;
}

.gallery-thumb-button:hover .gallery-thumb{
    transform:translateY(-3px);
    border-color:var(--mango);
}

.gallery-thumb-button:focus-visible{
    outline:3px solid var(--palm);
    outline-offset:3px;
}

.gallery-thumb-button.is-active .gallery-thumb{
    border-color:var(--mango);
}

.amenidades ul{

    list-style:none;
    padding:0;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;

}

.amenidades li{

    background:var(--cream);
    padding:12px 16px;
    border-radius:12px;
    font-weight:700;
    color:var(--jungle);

}

/* ==================================================
   SALONES: PÁGINA INDIVIDUAL
================================================== */

.salon-single{
    background:var(--cream);
}

.salon-detail{
    max-width:1200px;
    margin:auto;
    padding-top:70px;
}

.salon-hero-image{
    overflow:hidden;
    border-radius:28px;
    margin-bottom:25px;
}

.salon-hero-image img{
    width:100%;
    aspect-ratio:16 / 9;
    height:auto;
    object-fit:cover;
    display:block;
}

/* ==========================
   ENCABEZADO DEL SALÓN
========================== */

.salon-header{
    margin-bottom:35px;
}

.salon-header h1{
    font-size:3rem;
    margin-bottom:15px;
    color:var(--jungle);
}

.salon-description{
    font-size:1.08rem;
    color:#5c7a73;
    line-height:1.8;
}

/* ==========================
   CARACTERÍSTICAS DEL SALÓN
========================== */

.salon-features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin:50px 0;
}

.salon-features .feature-card{

    background:#fff;

    border-radius:22px;

    padding:28px;

    text-align:center;

}

.salon-features span{

    font-size:40px;

    display:block;

    margin-bottom:10px;

}

.salon-features strong{

    display:block;

    margin-bottom:10px;

    color:var(--jungle);

}

.salon-features p{

    color:#6b7776;

}

/* ==========================
   INFORMACIÓN DEL SALÓN
========================== */

.salon-info-box{

    background:#fff;

    border-radius:28px;

    padding:45px;

}

.salon-info-box h2{

    margin-bottom:25px;

    color:var(--jungle);

}

/* ==========================
   EQUIPAMIENTO DEL SALÓN
========================== */

.equipamiento-list{

    list-style:none;

    display:grid;

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

    gap:15px;

    margin-bottom:40px;

}

.equipamiento-list li{

    background:#f7f7f7;

    padding:15px 18px;

    border-radius:15px;

    font-weight:700;

    position:relative;

    padding-left:45px;

}

.equipamiento-list li::before{

    content:"✓";

    position:absolute;

    left:18px;

    color:var(--palm);

    font-weight:bold;

    font-size:20px;

}

/* ==========================
   PRECIO DEL SALÓN
========================== */

.salon-price{

    margin-bottom:30px;

}

.salon-price span{

    display:block;

    color:#777;

}

.salon-price strong{

    font-size:2.5rem;

    color:var(--papaya);

}
/* ==================================================
   RESTAURANTE
================================================== */


.restaurant-page{
    background:var(--cream);
}

.restaurant-page > .wrap,
.gym-page > .wrap{
    padding-top:70px;
}


.restaurant-header{
    text-align:center;
    max-width:900px;
    margin:0 auto 50px;
}


.restaurant-header h1{
    font-size:3rem;
    margin-bottom:20px;
}


.restaurant-description{
    font-size:1.15rem;
    line-height:1.8;
    color:#555;
}


/* Imagen principal del restaurante */

.restaurant-main-image{
    width:100%;
    margin-bottom:40px;
}


.restaurant-main-image img{

    width:100%;
    height:500px;
    object-fit:cover;

    border-radius:20px;

}


/* Galería del restaurante */

.restaurant-gallery{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;

    margin-bottom:70px;

}


.restaurant-gallery-item{

    overflow:hidden;

    border-radius:18px;

}


.restaurant-gallery-item img{

    width:100%;

    height:220px;

    object-fit:cover;

    transition:.4s;

}


.restaurant-gallery-item:hover img{

    transform:scale(1.08);

}


/* Información del restaurante */

.restaurant-information{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;

}


.restaurant-box{

    background:white;

    padding:35px;

    border-radius:20px;

}


.restaurant-box h2{

    margin-bottom:20px;

    font-size:1.5rem;

}

.restaurant-box p{

    line-height:1.8;

    color:#555;

}
.restaurant-thumb{

    cursor:pointer;

    transition:.3s;

}


.restaurant-thumb:hover{

    transform:scale(1.05);

    opacity:.8;

}

/* ==========================
   CONTACTO
========================== */

.contact{
    padding:90px 0;
    background:var(--white);
}

.contact-card{
    background:linear-gradient(135deg, #FFE3B0, #FFD1BE);
    border-radius:32px;
    padding:52px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:40px;
    align-items:center;
}

.contact-info{
    min-width:0;
}

.contact-info h2{
    font-size:2rem;
    margin-bottom:14px;
}

.contact-info p{
    color:#3f5f57;
    margin-bottom:22px;
    font-size:1.02rem;
    line-height:1.5;
}

.contact-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.contact-list > div{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:12px;
    align-items:center;
    font-weight:700;
    font-size:.95rem;
}

.contact-list span{
    min-width:0;
    overflow-wrap:anywhere;
}

.contact-list .ico{
    width:34px;
    height:34px;
    border-radius:10px;
    background:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
}

.map-frame{
    width:100%;
    min-width:0;
    border-radius:22px;
    overflow:hidden;
}

.map-frame iframe{
    display:block;
    width:100% !important;
    height:280px;
    border:0;
}

/* ==================================================
   PIE DE PÁGINA
================================================== */

footer {
    background: #0d3b34;
    color: #ffffff;
    padding: 23px 0 10px;
}

.footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.footer-title {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.footer-title-icon {
    font-size: 14px;
    color: #ffffff;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 2px;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-social-link:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    transform: translateY(-1px);
}

.footer-social-link:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.footer-bottom {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.footer-fine {
    margin: 0;
    color: rgba(255, 255, 255, 0.47);
    font-size: 11px;
    text-align: center;
}

.footer-fine a {
    color: inherit;
    text-decoration: none;
}

.footer-fine a:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* ==================================================
   ENCABEZADO DE CATEGORÍAS TURÍSTICAS
================================================== */

.tourism-section-header{
    position:static;
    top:auto;
    left:auto;
    right:auto;
    width:auto;
    height:auto;
    min-height:0;
    overflow:visible;
    transform:none;
    z-index:auto;

    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    align-items:start;
    gap:24px;

    max-width:900px;
    margin:0 0 42px;
    padding:0;

    background:transparent;
    border:none;
}
/* ==================================================
   GUÍA TURÍSTICA
================================================== */

.tourism-page{
    background:var(--cream);
}


/* ==================================================
   PORTADA DE LA GUÍA
================================================== */

.tourism-hero{
    padding:80px 0 60px;
    background:
        linear-gradient(
            rgba(248,241,227,.92),
            rgba(248,241,227,.92)
        );
}

.tourism-hero-content{
    max-width:900px;
}

.tourism-eyebrow{
    display:inline-block;
    margin-bottom:10px;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--green);
}

.tourism-hero h1{
    margin:0 0 18px;
    font-size:clamp(2.8rem,6vw,5.5rem);
    line-height:.95;
    color:var(--green);
}

.tourism-hero p{
    max-width:850px;
    margin:0;
    font-size:1.1rem;
    line-height:1.7;
    color:var(--text);
}


/* ==================================================
   NAVEGACIÓN DE CATEGORÍAS
================================================== */

.tourism-navigation{
    position:sticky;
    top:76px;
    z-index:20;
    padding:18px 0;
    background:rgba(255,255,255,.94);
    border-top:1px solid rgba(0,0,0,.06);
    border-bottom:1px solid rgba(0,0,0,.08);
}

.tourism-navigation-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.tourism-navigation-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:10px 18px;
    border:1px solid rgba(15,78,62,.18);
    border-radius:999px;
    background:#fff;
    color:var(--green);
    font-size:.9rem;
    font-weight:700;
    text-decoration:none;
    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.tourism-navigation-link:hover{
    transform:translateY(-2px);
    background:var(--green);
    border-color:var(--green);
    color:#fff;
}


/* ==================================================
   SECCIONES DE CATEGORÍAS
================================================== */

.tourism-section{
    padding:85px 0;
    scroll-margin-top:150px;
}

.tourism-section:nth-of-type(even){
    background:rgba(255,255,255,.45);
}

.tourism-section-header{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:24px;
    align-items:start;
    max-width:900px;
    margin-bottom:42px;
}

.tourism-section-number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    border-radius:50%;
    background:var(--green);
    color:#fff;
    font-size:1.1rem;
    font-weight:800;
}

.tourism-section-header h2{
    margin:0 0 10px;
    font-size:clamp(2rem,4vw,3.2rem);
    color:var(--green);
}

.tourism-section-header p{
    margin:0;
    max-width:760px;
    line-height:1.7;
    color:var(--text);
}


/* ==================================================
   CUADRÍCULA DE LUGARES
================================================== */

.tourism-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
}


/* ==================================================
   TARJETAS DE LUGARES
================================================== */

.tourism-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:22px;
    transition:
        transform .3s ease;
}

.tourism-card:hover{
    transform:translateY(-7px);
}

.tourism-card-media{
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    background:#e9e4d8;
}

.tourism-card-image{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s ease;
}

.tourism-card:hover .tourism-card-image{
    transform:scale(1.05);
}

.tourism-card-placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    gap:8px;
    color:var(--green);
}

.tourism-card-placeholder span{
    font-size:2rem;
}

.tourism-card-content{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:26px;
}

.tourism-card-category{
    display:inline-block;
    margin-bottom:10px;
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--gold);
}

.tourism-card h3{
    margin:0 0 14px;
    font-size:1.55rem;
    line-height:1.2;
    color:var(--green);
}

.tourism-card-description{
    margin-bottom:22px;
    color:var(--text);
    line-height:1.8;
    text-align:justify;
    text-wrap:pretty;
}

.tourism-card-description p:last-child{
    margin-bottom:0;
}


/* ==================================================
   DATOS DEL LUGAR
================================================== */

.tourism-card-details{
    display:grid;
    gap:12px;
    margin-top:auto;
    margin-bottom:22px;
}

.tourism-detail{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:13px 14px;
    border-radius:14px;
    background:var(--cream);
}

.tourism-detail-icon{
    font-size:1.1rem;
}

.tourism-detail small{
    display:block;
    margin-bottom:2px;
    color:#777;
}

.tourism-detail strong{
    display:block;
    font-size:.92rem;
    color:var(--green);
}


/* ==================================================
   BOTÓN GOOGLE MAPS
================================================== */

.tourism-map-button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    padding:14px 18px;
    border-radius:14px;
    background:var(--green);
    color:#fff;
    font-weight:700;
    text-decoration:none;
    transition:
        transform .25s ease,
        background .25s ease;
}

.tourism-map-button:hover{
    transform:translateY(-2px);
    background:#0c3f32;
}


/* ==================================================
   MENSAJE SIN CONTENIDO
================================================== */

.tourism-empty{
    padding:70px 0 100px;
}

.tourism-empty-card{
    max-width:720px;
    margin:0 auto;
    padding:55px 35px;
    text-align:center;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:24px;
}

.tourism-empty-card > span{
    display:block;
    margin-bottom:15px;
    font-size:2.8rem;
}

.tourism-empty-card h2{
    margin:0 0 10px;
    font-size:2.2rem;
    color:var(--green);
}

.tourism-empty-card p{
    margin:0;
    line-height:1.7;
    color:var(--text);
}

/* ==========================
   RESERVACIONES
========================== */

.reservation-page{
    min-height:100vh;
    background:var(--cream);
}


/* ==========================
   SECCIÓN PRINCIPAL
========================== */

.reservation-section{
    position:relative;
    padding:72px 0 80px;
    overflow:hidden;
}

.reservation-section > .wrap{
    position:relative;
    z-index:1;
}

.reservation-layout{
    display:grid;
    grid-template-columns:minmax(300px,.76fr) minmax(0,1.55fr);
    gap:42px;
    align-items:start;
}


/* ==========================
   INFORMACIÓN LATERAL
========================== */

.reservation-information{
    position:static;
}


/* ==========================
   TARJETA INTRODUCTORIA
========================== */

.reservation-intro-card{
    padding:30px;
    border:1px solid rgba(18,56,50,.11);
    border-radius:22px;
    background:var(--white);
}

.reservation-intro-card .section-label{
    display:inline-block;
    margin-bottom:14px;
    color:var(--palm);
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.reservation-intro-card h1{
    margin:0 0 18px;
    color:var(--jungle);
    font-size:clamp(2.1rem,3vw,3rem);
    line-height:1.08;
}

.reservation-intro-card p{
    margin:0;
    color:#345850;
    font-size:1rem;
    line-height:1.8;
}


/* ==========================
   TÉRMINOS Y CONDICIONES
========================== */

.reservation-information-card{
    margin-top:24px;
    padding:28px;
    border:1px solid rgba(18,56,50,.11);
    border-radius:22px;
    background:var(--white);
}

.reservation-information-card h2{
    margin:0 0 20px;
    padding-bottom:18px;
    border-bottom:1px solid rgba(18,56,50,.13);
    color:var(--jungle);
    font-size:clamp(1.65rem,2.3vw,2.35rem);
    line-height:1.15;
}

.reservation-terms ul{
    margin:0;
    padding-left:22px;
}

.reservation-terms li{
    margin-bottom:12px;
    color:#345850;
    font-size:.94rem;
    line-height:1.7;
}

.reservation-terms strong{
    color:var(--jungle);
}

/* ==========================
   CONTENEDOR DEL FORMULARIO
========================== */

.reservation-form-container{
    position:relative;
    padding:42px;
    overflow:hidden;
    border:1px solid rgba(18,56,50,.11);
    border-radius:26px;
    background:var(--white);
}

.reservation-form{
    display:flex;
    flex-direction:column;
    gap:34px;
}


/* ==========================
   GRUPOS DEL FORMULARIO
========================== */

.reservation-fieldset{
    margin:0;
    padding:0;
    border:0;
}

.reservation-fieldset + .reservation-fieldset{
    padding-top:34px;
    border-top:1px solid rgba(18,56,50,.10);
}

.reservation-fieldset legend{
    width:100%;
    margin-bottom:24px;
    padding:0;
    color:var(--jungle);
    font-family:'Fredoka',sans-serif;
    font-size:1.35rem;
    font-weight:600;
}

.reservation-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}

.reservation-field{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.reservation-field-full{
    grid-column:1 / -1;
}


/* ==========================
   ETIQUETAS
========================== */

.reservation-field label{
    color:var(--jungle);
    font-size:.92rem;
    font-weight:800;
}

.reservation-field label span{
    color:#b44a3c;
}


/* ==========================
   CAMPOS
========================== */

.reservation-field input,
.reservation-field select,
.reservation-field textarea{
    width:100%;
    min-height:52px;
    padding:13px 15px;
    border:1px solid rgba(18,56,50,.18);
    border-radius:12px;
    background:#fff;
    color:var(--jungle);
    font:inherit;
    line-height:1.4;
    outline:none;
    transition:
        border-color .2s ease,
        background .2s ease;
}

.reservation-field textarea{
    min-height:150px;
    resize:vertical;
}

.reservation-field input::placeholder,
.reservation-field textarea::placeholder{
    color:rgba(52,88,80,.55);
}

.reservation-field input:hover,
.reservation-field select:hover,
.reservation-field textarea:hover{
    border-color:rgba(18,56,50,.36);
}

.reservation-field input:focus,
.reservation-field select:focus,
.reservation-field textarea:focus{
    border-color:var(--palm);
    background:#fff;
}

.reservation-field input:invalid:not(:placeholder-shown),
.reservation-field textarea:invalid:not(:placeholder-shown){
    border-color:#b44a3c;
}


/* ==========================
   AVISO DE PRIVACIDAD
========================== */

.reservation-consent{
    padding:20px;
    border-radius:14px;
    background:rgba(31,122,92,.09);
}

.reservation-consent label{
    display:flex;
    gap:12px;
    align-items:flex-start;
    color:#345850;
    font-size:.92rem;
    line-height:1.6;
    cursor:pointer;
}

.reservation-consent input{
    width:18px;
    height:18px;
    margin-top:3px;
    flex:0 0 auto;
    accent-color:var(--palm);
}


/* ==========================
   BOTÓN DE ENVÍO
========================== */

.reservation-submit{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    align-items:center;
    justify-content:space-between;
}

.reservation-submit-button{
    min-width:210px;
    border:0;
    cursor:pointer;
}

.reservation-required-note{
    margin:0;
    color:rgba(52,88,80,.72);
    font-size:.86rem;
}


/* ==========================
   MENSAJES
========================== */

.reservation-message{
    margin-bottom:30px;
    padding:18px 22px;
    border-radius:14px;
    font-weight:700;
    line-height:1.6;
}

.reservation-message-success{
    border:1px solid rgba(31,122,92,.25);
    background:rgba(31,122,92,.10);
    color:#235f3a;
}

.reservation-message-error{
    border:1px solid rgba(180,74,60,.25);
    background:rgba(180,74,60,.10);
    color:#8f3328;
}


/* ==========================
   CAMPO ANTISPAM
========================== */

.reservation-honeypot{
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
}
/* ==================================================
   RESERVACIONES: RESUMEN DE COTIZACIÓN
================================================== */

.reservation-summary{
    padding:28px;
    border:1px solid rgba(18,56,50,.12);
    border-radius:20px;
    background:var(--white);
}

.reservation-summary-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}

.reservation-summary-label{
    display:block;
    margin-bottom:6px;
    color:var(--palm);
    font-size:.74rem;
    font-weight:900;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.reservation-summary h2{
    margin:0;
    color:var(--jungle);
    font-size:1.55rem;
}

.reservation-summary-discount{
    flex:0 0 auto;
    padding:8px 13px;
    border-radius:999px;
    background:var(--mango);
    color:var(--jungle);
    font-size:.8rem;
    font-weight:900;
}

.reservation-summary-placeholder{
    margin:0;
    color:#537871;
    line-height:1.7;
}

.reservation-summary-list{
    display:grid;
    gap:0;
    margin:0;
}

.reservation-summary-list > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:13px 0;
    border-bottom:1px solid rgba(18,56,50,.09);
}

.reservation-summary-list dt{
    color:#537871;
    font-size:.93rem;
}

.reservation-summary-list dd{
    margin:0;
    color:var(--jungle);
    font-weight:800;
    text-align:right;
}

.reservation-summary-list .reservation-summary-saving dd{
    color:var(--palm);
}

.reservation-summary-total{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    padding-top:22px;
}

.reservation-summary-total span{
    color:var(--jungle);
    font-weight:900;
}

.reservation-summary-total strong{
    color:var(--papaya);
    font-family:'Fredoka',sans-serif;
    font-size:clamp(1.65rem,3vw,2.25rem);
    line-height:1;
    text-align:right;
}

.reservation-summary-note{
    margin:18px 0 0;
    color:rgba(52,88,80,.72);
    font-size:.82rem;
    line-height:1.6;
}