/* =========================================================
   SCHENKEL HOTEL – CLEAN PREMIUM CSS (FULL FILE + COMMENTS)
   ---------------------------------------------------------
   This stylesheet controls the visual design of the website:
   - Main colors and reusable variables
   - Header and navigation menu
   - Homepage hero slider
   - Shared buttons
   - Booking bar on the homepage
   - Room cards and premium room sections
   - Gallery and lightbox
   - Footer
   - About page sections
   - Experiences page sections
   - Reservation page
   - Responsive behavior for tablets and phones
========================================================= */


/* =========================
   1) RESET
========================= */
/* Remove default spacing from all elements and make width/height
   calculations easier with box-sizing:border-box */
   *{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  
  
  /* =========================
     2) THEME TOKENS (Variables)
  ========================= */
  /* CSS variables let you reuse colors, sizes, and spacing throughout the file.
     This makes the code easier to maintain and update later. */
  :root{
    /* Fixed header height used in many places */
    --header-h: 92px;
  
    /* Brand colors */
    --navy:#192f60;
    --gold:#fff462;
    --gold-deep:#e9bc00;
  
    /* Page background colors */
    --bg:#f6f3ee;
    --surface:#ffffff;
  
    /* Text colors */
    --text:#1b1b1b;
    --muted:#5a6476;
  
    /* Shared shadow and border radius */
    --shadow:0 14px 30px rgba(0,0,0,.10);
    --radius:18px;
  
    /* Max width for centered content */
    --container:1120px;
  }
  
  
  /* =========================
     3) BASE
  ========================= */
  /* Smooth scrolling when clicking anchor links */
  html{
    scroll-behavior:smooth;
  }
  
  /* Make html and body use full page height */
  html, body{
    height:100%;
  }
  
  /* Base styling for the whole website */
  body{
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    font-size:16px;
    color:var(--text);
    background:var(--bg);
    overflow-x:hidden; /* prevents horizontal scroll caused by wide elements */
  }
  
  /* Links inherit text color unless styled differently later */
  a{
    color:inherit;
  }
  
  /* Make images responsive by default */
  img{
    width:100%;
    height:auto;
    display:block;
  }
  
  
  /* =========================
     4) ACCESSIBILITY (Skip Link)
  ========================= */
  /* Skip link helps keyboard and screen-reader users jump directly
     to the main content */
  .skip-link{
    position:absolute;
    left:-999px; /* hides it off-screen */
    top:10px;
    background:var(--gold);
    color:var(--navy);
    padding:10px 14px;
    font-weight:800;
    z-index:99999;
    text-decoration:none;
    border-radius:12px;
  }
  
  /* When focused with keyboard, the link becomes visible */
  .skip-link:focus{
    left:10px;
  }
  
  
  /* =========================
     5) LAYOUT HELPER (Container)
  ========================= */
  /* Reusable wrapper to center content and limit width */
  .container{
    width:min(var(--container), 92vw);
    margin:0 auto;
  }
  
  
  /* =========================
     6) HEADER (Fixed on top)
  ========================= */
  /* Fixed header stays visible while scrolling */
  header{
    position:fixed;
    width:100%;
    top:0;
    z-index:10000;
    background:var(--navy);
    box-shadow:0 8px 24px rgba(0,0,0,.15);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  
  /* Inner header layout: logo on one side, nav on the other */
  .header-inner{
    height:var(--header-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
  }
  
  /* Logo + hotel name container */
  .brand{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
  }
  
  /* Logo image width */
  #logo{
    width:64px;
  }
  
  /* Hotel name text */
  #title{
    color:#fff;
    line-height:1.1;
  }
  
  #title h2{
    font-size:16px;
    letter-spacing:.10em;
  }
  
  #title p{
    font-size:12px;
    color:rgba(255,255,255,.75);
    margin-top:6px;
  }
  
  /* Nav list layout */
  nav ul{
    display:flex;
    align-items:center;
    gap:10px;
    list-style:none;
  }
  
  nav li{
    display:flex;
  }
  
  /* Standard nav link */
  nav a.nav-link{
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    color:#fff;
    padding:14px 14px;
    border-radius:999px;
    transition:all .18s ease;
  }
  
  /* Hover state for nav links */
  nav a.nav-link:hover{
    background:rgba(255,255,255,.10);
    color:var(--gold);
  }
  
  /* Active/current page link */
  nav a.nav-link.active{
    background:rgba(255,255,255,.12);
    color:var(--gold);
  }
  
  /* Special CTA nav button like “Reservar” */
  nav a.nav-cta{
    background:var(--gold);
    color:var(--navy);
  }
  
  nav a.nav-cta:hover{
    opacity:.92;
    color:var(--navy);
  }


  .menu-toggle{
    display:none;
    width:50px;
    height:50px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;
    background:rgba(255,255,255,.08);
    cursor:pointer;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
    transition:background .18s ease, border-color .18s ease, transform .18s ease;
  }

  .menu-toggle:hover{
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.3);
  }

  .menu-toggle span{
    display:block;
    width:20px;
    height:2px;
    border-radius:999px;
    background:#fff;
    transition:transform .22s ease, opacity .22s ease;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0;
  }

  .menu-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }
  
  /* Because the header is fixed, main content needs top padding
     so it does not hide under the header */
  main{
    padding-top:var(--header-h);
  }
  
  /* On homepage, hero already handles spacing differently */
  body.home main{
    padding-top:0 !important;
  }
  
  
  /* =========================
     7) HERO / SLIDER (Swiper)
  ========================= */
  /* Hero section fills almost the full screen height */
  #hero{
    position:relative;
    height: calc(100dvh - var(--header-h));
    min-height: 560px;
    overflow:hidden;
    background:#000;
    clip-path: inset(0);
  }
  
  /* Swiper occupies the full hero area */
  #hero .swiper{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
  }
  
  #hero .swiper-wrapper,
  #hero .swiper-slide{
    height:100%;
  }
  
  /* Slide background image setup */
  #hero .slide-bg{
    height:100%;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    animation: heroZoom 18s ease-in-out infinite alternate;
    transform-origin:center center;
    will-change:transform;
  }
  
  /* Very subtle zoom animation for premium feel */
  @keyframes heroZoom{
    from{transform:scale(1)}
    to{transform:scale(1.08)}
  }
  
  /* Slider dots position */
  #hero .swiper-pagination{
    position:absolute !important;
    bottom:14px !important;
    left:0;
    right:0;
    z-index:3;
  }
  
  /* Previous/next arrows */
  #hero .swiper-button-prev,
  #hero .swiper-button-next{
    color: rgba(255,255,255,.85);
    z-index:3;
  }
  
  /* Dark overlay on top of images to improve text readability */
  #hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(1200px 600px at 50% 35%, rgba(0,0,0,.03) 0%, rgba(0,0,0,.16) 70%, rgba(0,0,0,.10) 100%),
      linear-gradient(to bottom, rgba(0,0,0,.10) 0%, rgba(0,0,0,.06) 30%, rgba(0,0,0,.14) 100%);
    pointer-events:none;
    z-index:2;
  }
  
  
  /* =========================
     8) HERO TEXT (centered)
  ========================= */
  /* Main text positioned at the center of the hero */
  .hero-copy{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:min(980px, 92vw);
    text-align:center;
    color:#fff;
    z-index:4;
    pointer-events:none;
  }
  
  /* Small label above hero title */
  .hero-copy .kicker{
    display:inline-block;
    font-size:14px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    padding:10px 14px;
    border-radius:999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  
  /* Main hero title */
  .hero-copy h1{
    font-family:'Playfair Display', serif;
    font-size:52px;
    line-height:1.05;
    margin:14px 0 12px;
    text-shadow: 0 18px 50px rgba(0,0,0,.45);
  }
  
  /* Supporting hero paragraph */
  .hero-copy p{
    max-width:70ch;
    margin:0 auto;
    font-size:16px;
    line-height:1.75;
    color: rgba(255,255,255,.92);
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.10);
    padding: 14px 16px;
    border-radius: 16px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  
  
  /* =========================
     9) BUTTONS (shared)
  ========================= */
  /* Group of buttons used in hero or content sections */
  .hero-actions{
    margin-top:18px;
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
    pointer-events:auto;
  }
  
  /* Base button style */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 18px;
    border-radius:999px;
    font-weight:800;
    letter-spacing:.04em;
    text-decoration:none;
    transition: transform 200ms ease, filter 200ms ease, background 200ms ease, border-color 200ms ease;
  }
  
  /* Small hover lift effect */
  .btn:hover{
    transform:translateY(-1px);
    filter:brightness(1.05);
  }
  
  /* Main yellow CTA button */
  .btn-primary{
    background: var(--gold);
    color: #0d1b2a;
    border:1px solid rgba(0,0,0,.10);
    box-shadow: 0 16px 40px rgba(0,0,0,.25);
  }
  
  /* Transparent/soft white button */
  .btn-ghost{
    background: rgba(255,255,255,.10);
    color:#fff;
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  
  /* Small extra link/button in hero */
  .hero-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:12px;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
    text-decoration:none;
    color: rgba(255,255,255,0.82);
    border:1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events:auto;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
  }
  
  .hero-link:hover{
    color:#fff;
    border-color: rgba(255,255,255,0.30);
    background: rgba(0,0,0,0.24);
    transform: translateY(-1px);
  }
  
  
  /* ===============================
     10) BOOKING BAR (Home)
  =============================== */
  /* Floating booking area placed over the hero image */
  .booking-bar{
    position:absolute;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    width: min(1120px, calc(100% - 32px));
    z-index:5;
  }
  
  /* Transparent glass effect container */
  .booking-form{
    background: rgba(10, 26, 51, 0.72);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 14px 14px 10px;
    box-shadow: 0 28px 80px rgba(0,0,0,0.35);
  }
  
  /* Multi-column booking layout */
  .booking-grid{
    display:grid;
    grid-template-columns: 1fr 1fr 0.8fr 0.8fr 1.2fr 1.2fr 1.1fr auto;
    gap:10px;
    align-items:end;
  }
  
  /* Each field block */
  .booking-field{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  
  /* Small label above each field */
  .booking-field .label{
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color: rgba(255,255,255,0.78);
  }
  
  /* Inputs/selects inside hero booking bar */
  .booking-field input,
  .booking-field select{
    height:44px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.10);
    color:#fff;
    padding:0 12px;
    outline:none;
  }
  
  .booking-field input::placeholder{
    color: rgba(255,255,255,0.58);
  }
  
  /* Focus state for accessibility and clarity */
  .booking-field input:focus,
  .booking-field select:focus{
    border-color: rgba(242, 222, 87, 0.70);
    box-shadow: 0 0 0 3px rgba(242, 222, 87, 0.18);
  }
  
  /* Submit button inside booking bar */
  .booking-submit{
    height:44px;
    padding:0 22px;
    border:0;
    border-radius:999px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
    background: var(--gold);
    color:#0d1b2a;
    cursor:pointer;
    box-shadow:0 16px 36px rgba(0,0,0,0.28);
    transition: transform 200ms ease, filter 200ms ease;
  }
  
  .booking-submit:hover{
    transform:translateY(-1px);
    filter:brightness(1.05);
  }
  
  /* Small helper text below booking form */
  .booking-hint{
    margin:10px 4px 0;
    font-size:12px;
    color: rgba(255,255,255,0.78);
  }
  
  
  /* =========================
     11) SECTIONS / SURFACES
  ========================= */
  /* Standard vertical spacing for sections */
  .section{
    padding:42px 0;
  }
  
  /* Reusable white panel with rounded corners and shadow */
  .surface{
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
  }
  
  /* Intro section used on homepage or internal pages */
  .introduction{
    background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    margin:26px auto 0 auto;
    padding:56px 48px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:16px;
  }
  
  /* Clear older float-based layouts if they existed */
  .introduction .left_content,
  .introduction .right_content{
    float:none;
    width:100%;
  }
  
  /* Small intro label */
  .introduction .left_top_content{
    font-size:14px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(25,47,96,.72);
  }
  
  /* Main intro title */
  .introduction .left_bottom_content{
    font-size:38px;
    font-weight:900;
    margin-top:10px;
    color:var(--navy);
    line-height:1.05;
  }
  
  /* Intro paragraph text */
  .introduction .right_content{
    max-width:62ch;
    line-height:1.75;
    color:var(--muted);
  }
  
  /* Generic hero section for internal pages */
  .page-hero{
    padding:44px 0 18px;
  }
  
  .page-hero h1{
    font-family:'Playfair Display', serif;
    font-size:38px;
    letter-spacing:.02em;
  }
  
  .page-hero p{
    color:var(--muted);
    margin-top:10px;
    line-height:1.7;
  }
  
  
  /* =========================
     12) ROOMS / CARDS
  ========================= */
  /* Grid of room cards */
  #roomcontainer,
  #room_intro{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
    align-items:stretch;
  }
  
  /* Basic room card style */
  .room,
  .room_container{
    background:var(--surface);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    cursor:pointer;
    position:relative;
  }
  
  /* Standard room card image */
  .room img{
    height:240px;
    object-fit:cover;
  }
  
  /* Text area inside standard room card */
  .room .room-info{
    padding:16px 18px;
  }
  
  .room .room-info h2{
    font-size:18px;
    margin-bottom:8px;
    color:var(--navy);
  }
  
  .room .room-info p{
    color:var(--muted);
    line-height:1.7;
  }
  
  /* Large feature card image */
  .room_container img{
    height:320px;
    object-fit:cover;
    transition:opacity .18s ease;
  }
  
  /* Text over image in room feature card */
  .room_container p{
    position:absolute;
    left:18px;
    bottom:18px;
    font-size:24px;
    font-weight:900;
    color:var(--gold);
    text-shadow:0 6px 22px rgba(0,0,0,.18);
  }
  
  .room_container:hover img{
    opacity:.88;
  }
  
  /* Hover animation for room cards */
  .room{
    transition:transform .3s ease, box-shadow .3s ease;
  }
  
  .room:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 56px rgba(0,0,0,.16);
  }
  
  .room img{
    transition:transform .45s ease;
  }
  
  .room:hover img{
    transform:scale(1.04);
  }
  
  .room{
    position:relative;
  }
  
  /* Small category label like Standard / Luxo */
  .room-badge{
    position:absolute;
    top:14px;
    left:14px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    padding:8px 10px;
    border-radius:999px;
    font-weight:900;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--navy);
    background:rgba(227,178,60,.92);
    box-shadow:0 10px 22px rgba(0,0,0,.16);
  }
  
  .room:hover .room-badge{
    filter:brightness(1.02);
  }
  
  /* Bullet list of room features */
  .room-features{
    list-style:none;
    margin-top:12px;
    display:grid;
    gap:8px;
    color:var(--muted);
    font-size:14px;
    line-height:1.65;
  }
  
  .room-features li{
    position:relative;
    padding-left:22px;
  }
  
  /* Checkmark before each feature */
  .room-features li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    font-weight:900;
    color:var(--navy);
  }
  
  
  /* =========================
     13) TABLES
  ========================= */
  /* Wrapper for tables if needed */
  .table-container{
    margin-top:26px;
  }
  
  /* Main table look */
  table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    border-radius:16px;
    box-shadow:var(--shadow);
    background:var(--surface);
  }
  
  /* Table title */
  caption{
    text-align:left;
    padding:16px 18px;
    font-weight:900;
    color:var(--navy);
  }
  
  /* Table cells */
  th, td{
    padding:14px 12px;
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  
  /* Header row */
  thead th{
    background:rgba(25,47,96,.06);
    color:var(--navy);
  }
  
  /* Remove border from last row */
  tbody tr:last-child td{
    border-bottom:0;
  }
  
  
  /* =========================
     14) FORMS (reservation etc.)
  ========================= */
  /* Main form container */
  #formcontainer{
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:22px;
    margin:18px 0 28px;
  }
  
  /* Space between form groups */
  .input-group{
    margin-bottom:14px;
  }
  
  /* General label styling */
  label{
    display:block;
    font-weight:800;
    margin-bottom:8px;
    color:var(--navy);
  }
  
  /* General input/select styling */
  input, select{
    width:100%;
    padding:12px 12px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.12);
    outline:none;
    background:#fff;
  }
  
  /* Focus state */
  input:focus, select:focus{
    border-color:rgba(25,47,96,.55);
    box-shadow:0 0 0 3px rgba(25,47,96,.10)
  }
  
  /* Submit button */
  input[type="submit"]{
    width:auto;
    background:var(--gold);
    color:var(--navy);
    border:0;
    padding:12px 18px;
    font-weight:900;
    border-radius:14px;
    cursor:pointer;
  }
  
  input[type="submit"]:hover{
    opacity:.92;
  }
  
  /* Success feedback message */
  #successMessage{
    margin-top:14px;
    padding:12px 12px;
    border-radius:12px;
    background:rgba(25,47,96,.08);
    color:var(--navy);
    font-weight:700;
  }
  
  
  /* =========================
     15) GALLERY GRID
  ========================= */
  /* 3-column gallery layout */
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
  }
  
  /* Each image card */
  .gallery-item{
    display:block;
    border-radius:16px;
    overflow:hidden;
    box-shadow: var(--shadow);
  }
  
  /* Gallery image style */
  .gallery-item img{
    height:240px;
    object-fit:cover;
    transition: transform .2s ease, opacity .2s ease;
  }
  
  .gallery-item:hover img{
    transform:scale(1.03);
    opacity:.92;
  }
  
  
  /* =========================
     16) LIGHTBOX (gallery zoom)
  ========================= */
  /* Prevent scrolling when lightbox is open */
  .no-scroll {
    overflow: hidden;
  }
  
  /* Full-screen overlay */
  .lightbox-overlay{
    position:fixed;
    inset:0;
    display:none;
    z-index:20000;
  }
  
  .lightbox-overlay.is-open{
    display:block;
  }
  
  /* Dark background behind the image */
  .lightbox-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.72);
  }
  
  /* Main image box */
  .lightbox-figure{
    position:relative;
    max-width:min(1100px,92vw);
    max-height:min(86vh, calc(100dvh - 48px));
    margin:max(24px, calc(var(--header-h) + 18px)) auto 0;
    background:rgba(10,14,20,.92);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 18px 60px rgba(0,0,0,.32);
  }
  
  /* Image inside lightbox */
  .lightbox-img{
    width:100%;
    max-height:min(76vh, calc(100dvh - var(--header-h) - 130px));
    object-fit:contain;
    background:#0b0f16;
  }
  
  /* Caption text */
  .lightbox-caption{
    padding:12px 16px 14px;
    font-size:14px;
    color:rgba(255,255,255,.85);
  }
  
  /* Close button */
  .lightbox-close{
    position:absolute;
    top:10px;
    right:10px;
    z-index:3;
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(8,12,18,.72);
    color:#fff;
    font-size:30px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,.28);
  }
  
  .lightbox-close:hover{
    background:rgba(255,255,255,.18);
  }

  .lightbox-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:48px;
    height:48px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(8,12,18,.72);
    color:#fff;
    font-size:28px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,.28);
  }

  .lightbox-prev{ left:14px; }
  .lightbox-next{ right:14px; }

  .lightbox-nav:hover{
    background:rgba(255,255,255,.18);
  }

  .lightbox-nav[hidden]{
    display:none;
  }
  
  
  /* =========================
     17) FOOTER
  ========================= */
  /* Main footer area */
  footer{
    margin-top:40px;
    background:var(--navy);
    padding:70px 0 22px;
  }

  .reservation-page footer{
    margin-top:0;
  }
  
  /* Top footer columns */
  #footer_info{
    color:#fff;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:26px;
    margin-bottom:34px;
  }
  
  #footer_info ul{
    list-style:none;
  }
  
  #footer_info li{
    padding-bottom:12px;
    font-size:14px;
    color:rgba(255,255,255,.86);
  }
  
  /* First list item used as title */
  #footer_info li:first-child{
    font-size:16px;
    font-weight:900;
    color:#fff;
    letter-spacing:.08em;
  }
  
  #hotel_info a{
    text-decoration:none;
    color:#fff;
  }
  
  #hotel_info a:hover{
    color:var(--gold);
  }
  
  /* Bottom footer icon/info boxes */
  #footer_content{
    display:flex;
    gap:22px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,.90);
    margin-bottom:26px;
  }
  
  #footer_content .text_icon_1,
  #footer_content .text_icon_2{
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(255,255,255,.06);
    padding:12px 14px;
    border-radius:14px;
  }
  
  #footer_content img{
    width:34px;
    height:34px;
  }

#footer_content .social-pill svg{
  width:34px;
  height:34px;
  fill:#fff;
  flex:0 0 34px;
}

#footer_content .social-pill a{
  color:#fff;
  text-decoration:none;
  font-weight:800;
}

#footer_content .social-pill a:hover{
  color:var(--gold);
}
  
  /* Final copyright text */
  .copyright{
    text-align:center;
    font-weight:900;
    color:var(--gold);
    letter-spacing:.04em;
  }
  
  
  /* =========================
     18) BACKGROUND TEXTURE (optional)
  ========================= */
  /* Very soft repeated background texture across the site */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:url("../Images/background_img.jpg");
    background-size:520px auto;
    background-repeat:repeat;
    opacity:0.06;
    pointer-events:none;
    z-index:-1;
  }
  
  
  /* =========================
     19) WHATSAPP FLOAT BUTTON
  ========================= */
  /* Floating WhatsApp contact button */
  .whatsapp-float{
    position:fixed;
    right:22px;
    bottom:22px;
    width:62px;
    height:62px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#2ad168,#1daa52);
    color:#fff;
    box-shadow:0 18px 34px rgba(0,0,0,.28);
    z-index:11000;
    transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  }
  
  .whatsapp-float:hover{
    transform:translateY(-2px) scale(1.05);
    box-shadow:0 24px 44px rgba(0,0,0,.34);
    filter:brightness(1.03);
  }
  
  .whatsapp-float svg{
    width:30px;
    height:30px;
    fill:currentColor;
  }
  
  /* Visible focus style for keyboard users */
  .whatsapp-float:focus-visible{
    outline:3px solid rgba(255,255,255,.85);
    outline-offset:3px;
  }
  
  
  /* =========================
     20) TYPOGRAPHY (Headings)
  ========================= */
  /* Reusable heading styles */
  .section-title{
    font-family:'Playfair Display',serif;
    font-size:38px;
    color:var(--navy);
    margin-bottom:16px;
  }
  
  .section-title-sm{
    font-size:34px;
    margin-bottom:8px;
  }
  
  .content-title{
    font-family:'Playfair Display',serif;
    font-size:26px;
    color:var(--navy);
  }
  
  .content-title-sm{
    font-size:24px;
  }
  
  
  /* =========================================================
     21) EXPERIÊNCIAS – BIG SPLIT SECTIONS
  ========================================================= */
  /* Section wrapper with slight background tone */
  .exp-split-list{
    background: rgba(255,255,255,.55);
    padding: 14px 0 54px;
  }
  
  /* Two-column experience block */
  .exp-split{
    display:grid;
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
  }
  
  /* Reverse layout for alternating sections */
  .exp-split.reverse .exp-media{
    order:2;
  }
  
  .exp-split.reverse .exp-content{
    order:1;
  }
  
  /* Image side */
  .exp-media{
    position:relative;
    overflow:hidden;
    background:#111;
  }
  
  .exp-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform: scale(1.02);
  }
  
  
.room-gallery{
  height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:12px;
  padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.95));
}

.room-gallery__main{
  display:block;
  min-height:0;
  overflow:hidden;
  border-radius:20px;
}

.room-gallery__main img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.room-thumb-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
}

.room-thumb{
  display:block;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(25,47,96,.10);
  background:#fff;
}

.room-thumb img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  display:block;
}

.room-thumb:hover img,
.room-gallery__main:hover img{
  transform:scale(1.02);
  transition:transform .25s ease;
}
/* Text side */
  .exp-content{
    background: rgba(255,255,255,.95);
    padding: 60px 54px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:16px;
  }
  
  .exp-content h2{
    font-family:'Playfair Display', serif;
    color: var(--navy);
    font-size: 34px;
    line-height: 1.15;
    margin:0;
  }
  
  .exp-content p{
    color: var(--muted);
    line-height: 1.85;
    max-width: 62ch;
  }
  
  /* Bullet list for features/highlights */
  .exp-points{
    list-style:none;
    display:grid;
    gap:10px;
    margin: 6px 0 0;
    padding:0;
    color: var(--muted);
  }
  
  .exp-points li{
    position:relative;
    padding-left:22px;
  }
  
  /* Arrow before each point */
  .exp-points li::before{
    content:"→";
    position:absolute;
    left:0;
    top:0;
    color: rgba(25,47,96,.85);
    font-weight:900;
  }
  
  /* Buttons in experiences blocks */
  .exp-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top: 8px;
  }
  
  /* Separator between blocks */
  .exp-split + .exp-split{
    border-top: 1px solid rgba(0,0,0,.06);
  }
  
  
  /* =========================================================
     22) PROMO RIBBON (Home hero)
  ========================================================= */
  /* Small promotional bar floating over hero */
  .promo-ribbon{
    position:absolute;
    top: calc(var(--header-h) + 14px);
    left:50%;
    transform:translateX(-50%);
    width:min(1040px, 92vw);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:10px 14px;
    border-radius:999px;
    background:rgba(25,47,96,.74);
    border:1px solid rgba(255,255,255,.22);
    box-shadow: 0 16px 36px rgba(0,0,0,.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index:6;
    color:#fff;
    font-family: "Oswald", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    letter-spacing:.2px;
  }
  
  .promo-ribbon__text{
    font-size: 1.02rem;
    line-height: 1.2;
    opacity: .98;
  }
  
  .promo-ribbon__text strong{
    color: var(--gold);
    font-weight: 700;
  }
  
  .promo-ribbon__link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    background: rgba(255,244,98,.96);
    color: #13264f;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 18px rgba(0,0,0,.18);
    transition: transform .15s ease, filter .15s ease;
  }
  
  .promo-ribbon__link:hover{
    transform: translateY(-1px);
    filter: brightness(1.02);
  }
  
  
  /* =========================================================
     23) ABOUT PAGE – LUXURY VINTAGE (BIG SPLIT SECTIONS)
  ========================================================= */
  /* Main wrapper for About page blocks */
  .about-split-list{
    background: rgba(255,255,255,.55);
    padding: 14px 0 54px;
  }
  
  /* Two-column About block */
  .about-split{
    display:grid;
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
  }
  
  /* Alternate layout */
  .about-split.reverse .about-media{
    order:2;
  }
  
  .about-split.reverse .about-content{
    order:1;
  }
  
  /* Image side */
  .about-media{
    position:relative;
    overflow:hidden;
    background:#111;
  }
  
  /* Vintage black-and-white image effect */
  .vintage-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter: grayscale(1) contrast(1.08) brightness(.95);
    transform: scale(1.02);
  }
  
  /* Soft vintage grain overlay */
  .vintage-media::after{
    content:"";
    position:absolute;
    inset:0;
    background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 3px 3px;
    opacity:.08;
    pointer-events:none;
  }
  
  /* Small label over the image */
  .vintage-caption{
    position:absolute;
    left:16px;
    bottom:16px;
    margin:0;
    max-width: 78%;
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    color: rgba(255,255,255,.90);
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.14);
    padding:10px 12px;
    border-radius: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  
  /* Text side of About blocks */
  .about-content{
    background: rgba(255,255,255,.95);
    padding: 60px 54px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:16px;
  }
  
  /* Small heading above the title */
  .about-eyebrow{
    font-size:12px;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
    color: rgba(25,47,96,.70);
    margin:0;
  }
  
  /* About block title */
  .about-content h2{
    font-family:'Playfair Display', serif;
    color: var(--navy);
    font-size: 34px;
    line-height: 1.15;
    margin:0;
  }
  
  /* About text paragraph */
  .about-content p{
    color: var(--muted);
    line-height: 1.9;
    max-width: 68ch;
  }
  
  /* Secondary uppercase subtitle */
  .about-subtitle{
    margin: 6px 0 0;
    font-family:'Oswald', system-ui, sans-serif;
    font-size: 18px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color: rgba(25,47,96,.88);
  }
  
  /* Action buttons */
  .about-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top: 10px;
  }
  
  /* Contact text area */
  .about-contact{
    margin-top: 14px;
    color: var(--muted);
    line-height: 1.9;
  }
  
  /* Line between About blocks */
  .about-split + .about-split{
    border-top: 1px solid rgba(0,0,0,.06);
  }
  
  
  /* =========================================================
     24) ROOMS PAGE – PREMIUM
  ========================================================= */
  /* Slightly different spacing for rooms page hero */
  .rooms-showcase-page .page-hero{
    padding:46px 0 10px;
  }
  
  /* Small label above rooms page title */
  .rooms-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(25,47,96,.08);
    color:var(--navy);
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size:12px;
  }
  
  /* Rooms hero title */
  .rooms-page-hero h1{
    font-family:'Playfair Display', serif;
    font-size: clamp(2.3rem, 5vw, 4rem);
    line-height:1.05;
    color:var(--navy);
    margin-bottom:16px;
  }
  
  /* Rooms hero paragraph */
  .rooms-page-hero p{
    max-width:720px;
    color:var(--muted);
    line-height:1.8;
    font-size:1.05rem;
  }
  
  /* Grid of premium room detail blocks */
  .room-detail-list{
    display:grid;
    gap:26px;
    padding-top:6px;
  }
  
  /* Main premium room block */
  .room-detail-block{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:0;
    overflow:hidden;
    border-radius:28px;
    background:rgba(255,255,255,.92);
    box-shadow:0 18px 44px rgba(0,0,0,.10);
  }
  
  /* Reverse version for alternating layout */
  .room-detail-block--reverse{
    grid-template-columns:.95fr 1.05fr;
  }
  
  /* Put image second */
  .room-detail-block--reverse .room-detail-block__media{
    order:2;
  }
  
  /* Put text first */
  .room-detail-block--reverse .room-detail-block__text{
    order:1;
  }
  
  /* Media side */
  .room-detail-block__media{
    min-height:420px;
    background:rgba(247,244,238,.9);
  }
  
  .room-detail-block__media img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  
  /* Text side */
  .room-detail-block__text{
    padding:44px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  
  /* Room category pill */
  .room-detail-badge{
    display:inline-flex;
    width:max-content;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(25,47,96,.08);
    color:var(--navy);
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
    font-size:12px;
    margin-bottom:18px;
  }
  
  /* Room title */
  .room-detail-block__text h2{
    font-family:'Playfair Display', serif;
    font-size:2rem;
    color:var(--navy);
    margin-bottom:14px;
  }
  
  /* Room description */
  .room-detail-block__text p{
    color:var(--muted);
    line-height:1.8;
    margin-bottom:18px;
  }
  
  /* Feature list */
  .room-detail-block__text ul{
    list-style:none;
    display:grid;
    gap:12px;
    margin:0 0 24px;
    padding:0;
  }
  
  .room-detail-block__text li{
    position:relative;
    padding-left:22px;
    color:var(--text);
    line-height:1.6;
  }
  
  /* Decorative bullet */
  .room-detail-block__text li::before{
    content:"•";
    position:absolute;
    left:0;
    top:0;
    color:var(--gold-deep);
    font-weight:900;
  }
  
  /* Bottom CTA panel */
  .rooms-bottom-note{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:22px;
    padding:30px;
    border-radius:24px;
    box-shadow:var(--shadow);
  }
  
  .rooms-bottom-note h2{
    font-family:'Playfair Display', serif;
    color:var(--navy);
    margin-bottom:10px;
  }
  
  .rooms-bottom-note p{
    color:var(--muted);
    line-height:1.7;
  }
  
  /* CTA buttons area */
  .rooms-bottom-note__actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }
  
  /* Dark-outline ghost button variant */
  .room-dark-ghost{
    background:transparent;
    border:1px solid rgba(25,47,96,.18);
    color:var(--navy);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  
  .room-dark-ghost:hover{
    background:rgba(25,47,96,.06);
    color:var(--navy);
  }
  
  
  /* =========================================================
     25) RESERVATION PAGE – PREMIUM STYLE
  ========================================================= */
  /* Gradient page background */
  .reservation-page{
    background:
      linear-gradient(180deg, rgba(15,27,56,.96) 0%, rgba(25,47,96,.92) 42%, rgba(246,243,238,1) 100%);
  }
  
  /* Respect fixed header spacing */
  .reservation-page main{
    padding-top:var(--header-h);
  }
  
  /* Main hero area for reservation page */
  .reservation-hero{
    position:relative;
    min-height:calc(100vh - var(--header-h));
    padding:48px 0 220px;
    overflow:hidden;
  }
  
  /* Background image + dark gradient */
  .reservation-backdrop{
    position:absolute;
    inset:0;
    background:
      linear-gradient(90deg, rgba(9,18,40,.72) 0%, rgba(9,18,40,.48) 34%, rgba(9,18,40,.24) 100%),
      url("../Images/main_reservation.jpg") center/cover no-repeat;
    opacity:.32;
    pointer-events:none;
  }
  
  /* Two-column layout: text + form */
  .reservation-layout{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(300px, .9fr) minmax(340px, 1.1fr);
    gap:36px;
    align-items:start;
  }
  
  /* Left content column */
  .reservation-copy{
    color:#fff;
    padding:18px 0;
  }
  
  /* Small label */
  .reservation-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:18px;
  }
  
  /* Main reservation title */
  .reservation-copy h1{
    font-family:'Playfair Display', serif;
    font-size:clamp(2.2rem, 4.4vw, 4.2rem);
    line-height:1.02;
    margin-bottom:18px;
  }
  
  /* Supporting text */
  .reservation-copy p{
    font-size:1.03rem;
    line-height:1.9;
    color:rgba(255,255,255,.88);
    max-width:58ch;
  }
  
  /* Highlight cards below text */
  .reservation-highlights{
    display:grid;
    gap:14px;
    margin-top:28px;
  }
  
  .reservation-highlight{
    padding:16px 18px;
    border-radius:18px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  
  .reservation-highlight strong{
    display:block;
    font-size:1rem;
    margin-bottom:5px;
  }
  
  .reservation-highlight span{
    color:rgba(255,255,255,.78);
    font-size:.95rem;
  }
  
  /* Right column wrapper */
  .reservation-shell{
    display:flex;
    flex-direction:column;
    gap:18px;
    padding-bottom:72px;
  }
  
  /* Main white reservation form card */
  .reservation-panel{
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 26px 60px rgba(0,0,0,.20);
    border-radius:28px;
    padding:26px;
  }
  
  /* Form field layout */

  .reservation-status{
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 0.96rem;
    line-height: 1.5;
    border: 1px solid transparent;
  }

  .reservation-status.is-loading{
    background: rgba(25, 47, 96, 0.08);
    border-color: rgba(25, 47, 96, 0.14);
    color: var(--navy);
  }

  .reservation-status.is-success{
    background: rgba(46, 125, 50, 0.10);
    border-color: rgba(46, 125, 50, 0.20);
    color: #1f5f2a;
  }

  .reservation-status.is-error{
    background: rgba(176, 32, 32, 0.08);
    border-color: rgba(176, 32, 32, 0.18);
    color: #8b1e1e;
  }

  .reservation-panel-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
  }
  
  /* Standard reservation field */
  .reservation-field{
    display:flex;
    flex-direction:column;
  }
  
  /* Field spans both columns */
  .reservation-field-full{
    grid-column:1 / -1;
  }
  
  /* Labels inside reservation form */
  .reservation-field label{
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--navy);
    margin-bottom:8px;
  }
  
  /* Form controls */
  .reservation-field input,
  .reservation-field select{
    width:100%;
    border:1px solid rgba(25,47,96,.14);
    border-radius:16px;
    padding:14px 14px;
    background:#fff;
    color:var(--text);
    font-size:.98rem;
    box-shadow:none;
  }
  
  /* Focus state */
  .reservation-field input:focus,
  .reservation-field select:focus{
    border-color:rgba(25,47,96,.46);
    box-shadow:0 0 0 4px rgba(25,47,96,.10);
  }
  
  #childrenAgesWrap[hidden]{
  display:none !important;
}

.reservation-ages-wrap{
    padding:18px;
    border:1px solid rgba(25,47,96,.10);
    border-radius:20px;
    background:linear-gradient(180deg, rgba(247,243,236,.78) 0%, rgba(255,255,255,.96) 100%);
  }

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

  .reservation-ages-hint{
    margin-top:10px;
    color:var(--muted);
    font-size:.9rem;
    line-height:1.6;
  }

  /* Bottom action row in form */
  .reservation-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:22px;
    padding-top:20px;
    border-top:1px solid rgba(25,47,96,.10);
  }
  
  /* Small note text */
  .reservation-note{
    color:var(--muted);
    font-size:.95rem;
    line-height:1.7;
    max-width:46ch;
  }
  
  /* Submit button */
  .reservation-submit{
    border:0;
    border-radius:999px;
    padding:14px 22px;
    background:linear-gradient(135deg, var(--gold) 0%, #ffd84f 100%);
    color:var(--navy);
    font-weight:900;
    letter-spacing:.04em;
    cursor:pointer;
    box-shadow:0 12px 24px rgba(0,0,0,.12);
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  
  .reservation-submit:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 28px rgba(0,0,0,.16);
    filter:brightness(1.01);
  }
  
  /* Contact options below form */
  .reservation-contact-bar{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
    margin-top:10px;
    margin-bottom:28px;
    position:relative;
    z-index:2;
  }
  
  .reservation-contact-bar a{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:18px 18px;
    border-radius:20px;
    background:rgba(255,255,255,.92);
    text-decoration:none;
    color:var(--navy);
    box-shadow:0 14px 34px rgba(0,0,0,.10);
  }
  
  .reservation-contact-bar a strong{
    font-size:.86rem;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  
  .reservation-contact-bar a span{
    font-size:1rem;
    color:var(--muted);
  }
  
  
  /* =========================
     26) RESPONSIVE (all pages)
  ========================= */
  /* Medium-large screens */
  @media (max-width: 1100px){
    .booking-grid{
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  
    .booking-submit{
      width:100%;
    }
  
    .booking-field input,
    .booking-field select{
      height:40px;
    }
  
    .booking-submit{
      height:40px;
    }
  }
  
  /* Tablet screens */
  @media (max-width: 980px){
    .room-detail-block,
    .room-detail-block--reverse{
      grid-template-columns:1fr;
    }
  
    .room-detail-block--reverse .room-detail-block__media,
    .room-detail-block--reverse .room-detail-block__text{
      order:initial;
    }
  
    .rooms-bottom-note{
      flex-direction:column;
      align-items:flex-start;
    }
  
    .reservation-hero{
      padding:28px 0 120px;
    }

    .reservation-layout{
      grid-template-columns:1fr;
      max-width:640px;
      margin:0 auto;
    }

    .reservation-copy{
      display:none;
    }

    .reservation-shell{
      padding-bottom:24px;
    }
  
    .reservation-contact-bar{
      grid-template-columns:1fr;
    }
  }
  
  /* Small tablets / large phones */


/* =========================================================
   HOME – PREMIUM SPLIT SECTIONS + TRUST STRIP
========================================================= */
.home-premium{
  padding-top: 10px;
}

.home-split-list{
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.trust-strip-wrap{
  padding-top: 8px;
}

.trust-strip{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:16px;
  padding: 24px 22px;
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.trust-item{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding: 10px 8px;
}

.trust-item strong{
  font-family:'Playfair Display', serif;
  color: var(--navy);
  font-size: 22px;
  line-height: 1.2;
}

.trust-item span{
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}


  @media (max-width: 900px){
    .header-inner{
      min-height:var(--header-h);
      padding:12px 0;
      position:relative;
      flex-wrap:nowrap;
      align-items:center;
    }

    .brand{
      min-width:0;
      padding-right:12px;
    }

    #logo{
      width:52px;
      flex:0 0 52px;
    }

    #title h2{
      font-size:14px;
    }

    #title p{
      font-size:11px;
      margin-top:4px;
    }

    .menu-toggle{
      display:flex;
      margin-left:auto;
      flex:0 0 auto;
    }

    .site-nav{
      position:absolute;
      top:calc(100% + 10px);
      left:0;
      right:0;
      display:none;
      padding:14px;
      border-radius:20px;
      background:rgba(25,47,96,.98);
      box-shadow:0 18px 38px rgba(0,0,0,.22);
      border:1px solid rgba(255,255,255,.10);
    }

    .site-nav.is-open{
      display:block;
    }

    .site-nav .menu{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      gap:8px;
    }

    .site-nav li{
      width:100%;
    }

    .site-nav a.nav-link{
      display:flex;
      justify-content:center;
      width:100%;
      padding:14px 16px;
      letter-spacing:.08em;
    }
  
    #roomcontainer,
    #room_intro{
      grid-template-columns:1fr;
    }
  
    .introduction{
      padding:28px 18px;
    }
  
    #footer_info{
      grid-template-columns:1fr;
    }
  
    .page-hero h1{
      font-size:30px;
    }
  
    .hero-copy h1{
      font-size:34px;
    }
  
    .section-title{
      font-size:30px;
    }
  
    .section-title-sm{
      font-size:28px;
    }
  
    .hero-copy p{
      font-size:14px;
      max-width:92vw;
    }
  
    .gallery-grid{
      grid-template-columns:1fr;
    }
  
    .gallery-item img{
      height:260px;
    }
  
    .hero-copy{
      display:block !important;
      width:min(92vw, 640px);
      top: 53%;
    }

    .hero-copy .kicker{
      font-size:11px;
      padding:8px 12px;
    }

    .hero-copy h1{
      font-size:32px;
      margin:12px 0 10px;
    }

    .hero-copy p{
      font-size:14px;
      line-height:1.65;
      padding:12px 14px;
      max-width:100%;
    }

    .hero-link{
      display:none;
    }
  
    .booking-bar{
      display:none !important;
    }
  
    #hero .swiper-button-prev,
    #hero .swiper-button-next,
    #hero .swiper-pagination{
      display:none !important;
    }
  
    /* Experiences stack vertically */
    .exp-split{
      grid-template-columns: 1fr;
      min-height:auto;
    }
  
    .exp-split.reverse .exp-media,
    .exp-split.reverse .exp-content{
      order: initial;
    }
  
    .exp-media img{
      height: 320px;
    }
  
    .exp-content{
      padding: 26px 18px;
    }

    .trust-strip{
      grid-template-columns: 1fr;
      gap: 8px;
      padding: 18px 16px;
    }

    .trust-item{
      padding: 8px 4px;
    }
  
    .exp-content h2{
      font-size: 28px;
    }
  
    /* About sections stack vertically */
    .about-split{
      grid-template-columns: 1fr;
      min-height:auto;
    }
  
    .about-split.reverse .about-media,
    .about-split.reverse .about-content{
      order: initial;
    }
  
    .vintage-media img{
      height: 320px;
    }
  
    .about-content{
      padding: 26px 18px;
    }
  
    .about-content h2{
      font-size: 28px;
    }
  
    .vintage-caption{
      max-width: 90%;
    }
  
    .rooms-showcase-page .page-hero h1{
      font-size:34px;
    }
  
    .room-detail-block{
      grid-template-columns:1fr;
    }
  
    .room-detail-block--reverse .room-detail-block__media,
    .room-detail-block--reverse .room-detail-block__text,
    .room-detail-block__media,
    .room-detail-block__text{
      order:initial;
    }

    .room-thumb-grid{
      grid-template-columns:repeat(2, minmax(0,1fr));
    }
  
    .whatsapp-float{
      width:58px;
      height:58px;
      right:16px;
      bottom:16px;
    }
  }
  
  /* Small phones */
  @media (max-width: 640px){
    .booking-grid{
      grid-template-columns: 1fr 1fr;
    }

    .reservation-hero{
      padding:18px 0 90px;
    }
  
    .promo-ribbon{
      top: calc(var(--header-h) + 10px);
      border-radius: 18px;
      padding:10px 12px;
      flex-direction: column;
      text-align:center;
      gap:10px;
    }
  
    .promo-ribbon__text{
      font-size: .98rem
    }
  
    .promo-ribbon__link{
      width:100%;
      justify-content:center;
    }
  
    .room-detail-block__text{
      padding:28px 22px;
    }
  
    .reservation-panel{
      padding:18px;
      border-radius:22px;
    }
  
    .reservation-panel-grid{
      grid-template-columns:1fr;
    }
  
    .reservation-field-full{
      grid-column:auto;
    }

    .reservation-ages-grid{
      grid-template-columns:1fr;
    }
  
    .reservation-actions{
      flex-direction:column;
      align-items:stretch;
    }
  
    .reservation-submit{
      width:100%;
    }
 }
 /* =========================================================
   FACILITIES STRIP – EXPERIÊNCIAS PAGE
========================================================= */
.facilities-strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  padding:22px;
  border-radius:24px;
}

.facility-pill{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(25,47,96,.05);
  border:1px solid rgba(25,47,96,.08);
  min-height:72px;
}

.facility-pill strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:44px;
  padding:0 10px;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:.03em;
}

.facility-pill span{
  color:var(--navy);
  font-weight:700;
  line-height:1.35;
}

@media (max-width: 980px){
  .facilities-strip{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  .facilities-strip{
    grid-template-columns:1fr;
    padding:18px;
  }

  .facility-pill{
    min-height:auto;
  }
}

/* =========================================================
   FINAL CONSISTENCY PASS – HOME + EXPERIÊNCIAS
========================================================= */
.home-room-list{
  gap:26px;
}

.home-feature-block{
  border-radius:28px;
}

.home-feature-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:6px;
}

.attractions-opening-section{
  padding-top:12px;
}

.attractions-opening-block .room-detail-block__media{
  min-height:500px;
}

.attractions-summary-section{
  padding-top:6px;
}

.section-heading{
  max-width:760px;
  margin:0 auto 24px 0;
}

.section-heading--compact{
  margin-bottom:18px;
}

.section-kicker{
  display:inline-block;
  margin-bottom:10px;
  color:var(--navy);
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.section-heading h2{
  font-family:'Playfair Display', serif;
  font-size:clamp(30px, 4vw, 42px);
  line-height:1.16;
  color:var(--navy);
  margin-bottom:12px;
}

.section-heading p{
  color:var(--muted);
  line-height:1.8;
  max-width:680px;
}

.attraction-detail-list{
  padding-top:4px;
}

.attractions-bottom-note{
  align-items:center;
}

@media (max-width: 980px){
  .attractions-opening-block .room-detail-block__media{
    min-height:380px;
  }
}

@media (max-width: 700px){
  .section-heading h2{
    font-size:32px;
  }

  .section-heading p{
    font-size:15px;
  }

  .home-feature-actions{
    width:100%;
  }

  .home-feature-actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* =========================================================
   EXPERIÊNCIAS PAGE – CURATED CATEGORY GRID
========================================================= */
.experience-categories{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.experience-category{
  padding:28px;
  border-radius:24px;
  box-shadow:var(--shadow);
}

.experience-category__label{
  display:inline-block;
  margin-bottom:10px;
  color:var(--navy);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.experience-category h3{
  font-family:'Playfair Display', serif;
  color:var(--navy);
  font-size:28px;
  line-height:1.2;
  margin-bottom:12px;
}

.experience-category p{
  color:var(--muted);
  line-height:1.8;
  margin-bottom:16px;
}

.experience-category ul{
  list-style:none;
  display:grid;
  gap:10px;
}

.experience-category li{
  position:relative;
  padding-left:18px;
  color:var(--text);
  line-height:1.6;
}

.experience-category li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold-deep);
}

@media (max-width: 900px){
  .experience-categories{
    grid-template-columns:1fr;
  }

  .experience-category{
    padding:22px;
  }

  .experience-category h3{
    font-size:24px;
  }
}


/* =========================
   RESERVATION POPUP
========================= */
body.popup-open{
  overflow:hidden;
}

.reservation-popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(9, 18, 40, 0.58);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:9999;
}

.reservation-popup-overlay[hidden]{
  display:none !important;
}

.reservation-popup{
  width:min(100%, 520px);
  background:#fff;
  border-radius:28px;
  padding:30px 26px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.28);
  position:relative;
  text-align:center;
}

.reservation-popup.is-error .reservation-popup-icon{
  background:rgba(176, 32, 32, 0.12);
  color:#8b1e1e;
}

.reservation-popup-close{
  position:absolute;
  top:12px;
  right:12px;
  width:40px;
  height:40px;
  border:none;
  border-radius:999px;
  background:rgba(25,47,96,.08);
  color:var(--navy);
  font-size:24px;
  cursor:pointer;
}

.reservation-popup-icon{
  width:74px;
  height:74px;
  margin:0 auto 16px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(46,125,50,.12);
  color:#1f7a3d;
  font-size:34px;
  font-weight:700;
}

.reservation-popup h3{
  margin:0 0 12px;
  font-family:"Playfair Display", serif;
  font-size:clamp(1.55rem, 2vw, 2rem);
  color:var(--navy);
}

.reservation-popup p{
  margin:0;
  color:#334155;
  line-height:1.7;
}

.reservation-popup-button{
  margin-top:22px;
  border:none;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  padding:12px 22px;
  font-weight:600;
  cursor:pointer;
}


/* =========================
   FLATPICKR / CALENDÁRIO EM PORTUGUÊS
========================= */
.flatpickr-input[readonly],
.booking-field .flatpickr-input,
.reservation-field .flatpickr-input{
  cursor:pointer;
  background:#fff;
}

.flatpickr-calendar{
  border-radius:18px;
  box-shadow:0 18px 45px rgba(15,23,42,.18);
  border:1px solid rgba(25,47,96,.08);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
  background:#192f60;
  border-color:#192f60;
}

.flatpickr-day.today{
  border-color:#e9bc00;
}


  @media (max-width: 640px){
    #title p{
      display:none;
    }

    #title h2{
      font-size:13px;
      letter-spacing:.08em;
    }

    .menu-toggle{
      width:46px;
      height:46px;
      border-radius:12px;
    }

    .site-nav{
      top:calc(100% + 8px);
      padding:12px;
    }
  }