:root{
    --ink:#0C2545; --cobalt:#15407A; --cobalt-2:#1B538F; --teal:#2E8B96; --teal-light:#4FB3BF;
    --gold:#E8A23D; --gold-soft:#F2C879; --coral:#D8483B; --sand:#F4EFE6; --sand-2:#EAE2D2;
    --cream:#FBF7EF; --text:#22303f; --muted:#5b6b78; --wa:#25D366;
    --radius:18px; --shadow:0 18px 50px -22px rgba(12,37,69,.55);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;font-family:'Mulish',system-ui,sans-serif;color:var(--text);background:var(--sand);line-height:1.6;-webkit-font-smoothing:antialiased;}
  h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.12;margin:0;}
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 22px;}
  .script{font-family:'Pinyon Script',cursive;font-weight:400;}
  .star-div{display:flex;align-items:center;gap:16px;justify-content:center;margin:0 auto;max-width:340px;}
  .star-div .line{height:2px;flex:1;background:linear-gradient(90deg,transparent,var(--gold));}
  .star-div .line.r{background:linear-gradient(90deg,var(--gold),transparent);}
  .star-div svg{width:26px;height:26px;flex:none;color:var(--gold);}

  /* LANG TOGGLE */
  .lang-toggle{position:fixed;top:12px;right:12px;z-index:50;display:flex;background:rgba(12,37,69,.55);backdrop-filter:blur(6px);padding:2px;border-radius:8px;box-shadow:var(--shadow);}
  .lang-btn{border:none;cursor:pointer;font-family:'Mulish';font-weight:700;font-size:.6rem;letter-spacing:.03em;line-height:1;padding:5px 7px;border-radius:6px;background:transparent;color:#fff;opacity:.6;transition:all .15s ease;display:flex;align-items:center;gap:4px;}
  .lang-btn .flag-icon{width:15px;height:10px;border-radius:2px;flex-shrink:0;box-shadow:0 0 0 .5px rgba(255,255,255,.4);}
  .lang-btn.active{background:var(--gold);color:#3a2407;opacity:1;}
  .lang-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  @media(max-width:820px){.lang-toggle{top:8px;right:8px;}.lang-btn{padding:4px 6px;font-size:.56rem;gap:3px;}.lang-btn .flag-icon{width:13px;height:9px;}}

  /* HERO */
  .hero{position:relative;background:var(--ink);}
  .hero-mural{display:block;width:100%;max-width:1400px;margin:0 auto;height:auto;}
  .hero-bar{position:relative;z-index:2;width:100%;padding:28px 0 34px;background:var(--ink);}
  .hero-eyebrow{color:var(--gold-soft);font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;margin-bottom:14px;}
  .hero-bar p.tag{color:#eaf2ff;font-size:1.18rem;max-width:34ch;margin:0 0 22px;font-weight:500;}
  .cta-row{display:flex;flex-wrap:wrap;gap:13px;}
  .btn{display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer;font-family:'Mulish';font-weight:700;font-size:.98rem;padding:14px 24px;border-radius:50px;text-decoration:none;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;}
  .btn-gold{background:linear-gradient(135deg,var(--gold),#d98f2a);color:#3a2407;box-shadow:0 10px 26px -10px rgba(232,162,61,.8);}
  .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(4px);}
  .btn-wa{background:var(--wa);color:#04331a;}
  .btn:hover{transform:translateY(-2px);}
  .btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}

  /* STORY */
  .story{padding:78px 0 60px;text-align:center;}
  .story h2{font-size:clamp(1.9rem,4.4vw,2.9rem);color:var(--ink);}
  .story .lede{max-width:62ch;margin:18px auto 0;color:var(--muted);font-size:1.12rem;}
  .perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;max-width:900px;margin:44px auto 0;}
  .perk{background:var(--cream);border:1px solid var(--sand-2);border-radius:14px;padding:18px 14px;text-align:center;}
  .perk svg{width:28px;height:28px;color:var(--teal);margin-bottom:8px;}
  .perk b{display:block;font-family:'Fraunces';font-size:1rem;color:var(--ink);}
  .perk span{font-size:.84rem;color:var(--muted);}

  /* SUITES */
  .suites{padding:20px 0 74px;}
  .flyer-wrap{max-width:420px;margin:0 auto 44px;}
  .flyer-wrap img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);}
  .whole-wrap{background:linear-gradient(150deg,var(--ink),var(--cobalt));color:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);max-width:940px;margin:0 auto;padding:44px 34px;text-align:center;}
  .whole-wrap .kicker{color:var(--gold-soft);}
  .whole-wrap h2{color:#fff;margin:.2em 0 .4em;}
  .whole-wrap p{color:#eaf1fb;max-width:720px;margin:0 auto 16px;}
  .whole-wrap .sleeps{display:inline-block;background:var(--gold);color:#3a2407;font-weight:800;letter-spacing:.02em;padding:7px 16px;border-radius:999px;margin-bottom:20px;font-size:.9rem;}
  .whole-cta{margin-top:14px;}
  .b-vrbo{background:var(--gold);color:#3a2407;font-weight:800;}
  .xlinks{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;}
  .mnu{margin:14px 0 12px;border-top:1px solid var(--sand-2);border-bottom:1px solid var(--sand-2);}
  .mnu summary{cursor:pointer;list-style:none;padding:11px 2px;font-weight:700;color:var(--teal);font-size:.95rem;display:flex;align-items:center;gap:8px;}
  .mnu summary::-webkit-details-marker{display:none;}
  .mnu summary::after{content:"\203A";margin-left:auto;font-size:1.3rem;line-height:1;transform:rotate(90deg);transition:transform .2s;color:var(--muted);}
  .mnu[open] summary::after{transform:rotate(-90deg);}
  .mnu-body{padding:2px 0 16px;}
  .mnu-body h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:16px 0 7px;font-weight:800;}
  .mnu-body h4:first-child{margin-top:4px;}
  .mnu-body ul{list-style:none;margin:0;padding:0;}
  .mnu-body li{display:flex;align-items:baseline;gap:8px;padding:4px 0;font-size:.92rem;color:var(--ink);}
  .mnu-body li span{flex:1;}
  .mnu-body li em{font-style:normal;font-size:.8rem;color:var(--muted);display:block;}
  .mnu-body li b{font-variant-numeric:tabular-nums;color:var(--teal);white-space:nowrap;}
  .mnu-body li b em{display:inline;font-size:.75rem;color:var(--muted);}
  .mnu-note{margin-top:14px;font-size:.82rem;color:var(--muted);font-style:italic;}
  .terrace{padding:0 0 74px;}
  .terrace-wrap{background:var(--cream);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--sand-2);display:grid;grid-template-columns:1fr;max-width:900px;margin:0 auto;}
  .terrace-wrap .pw{position:relative;}
  .terrace-wrap .photo{aspect-ratio:16/9;width:100%;object-fit:cover;background:#dfe6ea;}
  .terrace-wrap .card-body{padding:24px 28px 30px;}
  @media(min-width:760px){.terrace-wrap{grid-template-columns:1.1fr 1fr;}.terrace-wrap .photo{aspect-ratio:4/3;height:100%;}}
  .sec-head{text-align:center;margin-bottom:40px;}
  .sec-head .kicker{color:var(--teal);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.74rem;}
  .sec-head h2{font-size:clamp(1.8rem,4vw,2.7rem);color:var(--ink);margin-top:8px;}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;}
  .card{background:var(--cream);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--sand-2);display:flex;flex-direction:column;transition:transform .18s ease;}
  .card:hover{transform:translateY(-4px);}
  .card .photo{aspect-ratio:4/3;width:100%;object-fit:cover;background:#dfe6ea;}
  .coming-soon-banner{background:var(--coral);color:#fff;font-weight:700;text-align:center;padding:11px 14px;border-radius:10px;margin-bottom:16px;font-size:.94rem;letter-spacing:.01em;box-shadow:var(--shadow);}
  .book-row{position:relative;}
  .book-row .soon-badge{position:absolute;inset:0;background:rgba(255,255,255,.94);border-radius:10px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:.76rem;line-height:1.25;color:var(--ink);padding:6px;z-index:3;}
  .book-row.soon .btn{visibility:hidden;}
  .balneario{padding:34px 0 8px;}
  .balneario h2{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--ink);}
  .balneario .lede{max-width:60ch;margin:0 auto 22px;color:var(--muted);font-size:1.04rem;}
  .big-pw{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);}
  .big-pw .photo{aspect-ratio:4/3;width:100%;object-fit:cover;background:#dfe6ea;}
  .big-pw .gal-nav{width:44px;height:44px;font-size:1.5rem;}
  @media(min-width:700px){.big-pw .photo{aspect-ratio:16/8;}}
  .badge{position:absolute;margin:12px;top:0;left:0;background:rgba(12,37,69,.86);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:50px;}
  .card .pw{position:relative;}
  .gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:none;background:rgba(12,37,69,.55);color:#fff;font-size:1.2rem;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:5;backdrop-filter:blur(4px);}
  .pw[data-gallery] .gal-nav{display:flex;}
  .gal-prev{left:10px;}
  .gal-next{right:10px;}
  .gal-nav:hover{background:rgba(12,37,69,.8);}
  .gal-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:5;}
  .gal-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;}
  .gal-dots span.active{background:#fff;width:16px;border-radius:4px;}
  .card-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1;}
  .card-body h3{font-size:1.4rem;color:var(--ink);}
  .card-body .es{font-family:'Pinyon Script';font-size:1.35rem;color:var(--teal);margin-top:-8px;}
  .beds{font-size:.9rem;color:var(--muted);}
  .beds b{color:var(--teal);font-weight:700;}
  .book-row{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap;}
  .book-row .btn{flex:1;justify-content:center;padding:11px 12px;font-size:.86rem;min-width:120px;}
  .b-airbnb{background:var(--coral);color:#fff;}
  .b-booking{background:var(--cobalt);color:#fff;}
  .b-vrbo{background:#1668e3;color:#fff;}
  .b-pending{background:transparent;color:var(--muted);border:1.5px dashed var(--sand-2);cursor:default;font-size:.78rem;opacity:.85;}

  /* GROUP / RESERVE */
  .reserve{background:linear-gradient(150deg,var(--ink),var(--cobalt));color:#fff;padding:72px 0;}
  .reserve .wrap{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:start;}
  .reserve h2{font-size:clamp(1.9rem,4vw,2.7rem);}
  .reserve p{color:#cfe0f4;font-size:1.06rem;margin:14px 0 22px;}
  .contact-btns{display:flex;flex-direction:column;gap:12px;max-width:330px;}
  .contact-btns .btn{justify-content:center;}
  .btn-call{background:var(--gold);color:#3a2407;}
  .btn-mail{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.5);}
  .btn-ig{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF);color:#fff;gap:8px;}
  .btn-tt{background:#111;color:#fff;gap:8px;}
  .btn-fb{background:#1877F2;color:#fff;gap:8px;}
  .btn-goog{background:#fff;color:#3c4043;border:1.5px solid rgba(0,0,0,.16);gap:8px;font-weight:600;}
  .btn-goog:hover,.btn-goog:focus{background:#f1f3f4;}
  .grp-note{margin-top:20px;font-size:.92rem;color:#aec5e2;}
  form.res{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:26px;backdrop-filter:blur(6px);}
  form.res label{display:block;font-size:.82rem;font-weight:600;color:#dce8f6;margin:0 0 5px;}
  form.res .field{margin-bottom:14px;}
  form.res .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  form.res input,form.res select,form.res textarea{width:100%;padding:11px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.94);color:#1a2733;font-family:inherit;font-size:.95rem;}
  form.res textarea{min-height:74px;resize:vertical;}
  form.res .btn{width:100%;justify-content:center;margin-top:6px;}

  /* LOCATION */
  .loc{padding:74px 0;}
  .loc .wrap{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center;}
  .loc h2{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--ink);}
  .loc ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px;}
  .loc li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;}
  .loc li svg{width:20px;height:20px;color:var(--coral);flex:none;margin-top:3px;}
  .map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--sand-2);min-height:330px;}
  .map iframe{width:100%;height:100%;min-height:330px;border:0;display:block;}

  /* SUNSET STRIP */
  .sunset{padding:10px 0 78px;}
  .sunset .sec-head{margin-bottom:26px;}
  .sunset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .sunset-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;box-shadow:var(--shadow);}

  /* CONTACT/QR */
  .contact{background:var(--ink);color:#fff;padding:66px 0 40px;}
  .contact .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:46px;align-items:center;}
  .contact .brandline{display:flex;align-items:center;gap:16px;margin-bottom:6px;}
  .contact .brandline img{width:74px;height:74px;border-radius:50%;box-shadow:0 8px 22px -8px rgba(0,0,0,.6);}
  .contact .script{font-size:2.3rem;color:var(--gold-soft);}
  .contact p{color:#c4d4e8;margin:12px 0;}
  .phone{font-family:'Fraunces';font-size:1.6rem;color:#fff;text-decoration:none;display:inline-flex;gap:10px;align-items:center;}
  .phone svg{width:22px;height:22px;color:var(--gold);}
  .contact .mini{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;}
  .contact .mini a{font-size:.9rem;padding:9px 16px;}
  .qr-panel{background:var(--cream);color:var(--ink);border-radius:var(--radius);padding:24px;text-align:center;}
  .qr-panel h3{font-size:1.1rem;margin-bottom:3px;}
  .qr-panel p{color:var(--muted);font-size:.82rem;margin:0 0 14px;}
  #qrcode{display:inline-block;background:#fff;padding:12px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--sand-2);}
  #qrcode img,#qrcode canvas{display:block;}
  #qrlink{display:inline-block;text-decoration:none;transition:transform .15s ease,filter .15s ease;}
  #qrlink:hover,#qrlink:focus-visible{transform:scale(1.03);filter:brightness(1.04);}
  #qrlink:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:14px;}
  .foot{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:20px;text-align:center;color:#8ea7c4;font-size:.82rem;}

  @media(max-width:820px){
    .hero-bar{padding-top:24px;}
    .reserve .wrap,.loc .wrap,.contact .wrap{grid-template-columns:1fr;}
    .sunset-grid{grid-template-columns:1fr;}
    .hero-bar p.tag{font-size:1.05rem;}
  }
  @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;}.btn:hover,.card:hover{transform:none;}}

  /* Boricua */
  .boricua{padding:20px 0 60px;text-align:center;}
  .boricua h2{font-size:clamp(1.8rem,4vw,2.7rem);color:var(--ink);}
  .boricua .lede{max-width:66ch;margin:0 auto;color:var(--muted);font-size:1.1rem;}
  /* ===== ACTIVITIES & EXCURSIONS + RESTAURANTS ===== */
  .explore{padding:64px 0;background:linear-gradient(180deg,var(--cream),var(--sand));}
  .tabs{display:flex;gap:8px;justify-content:center;margin:0 0 30px;flex-wrap:wrap;}
  .tab-btn{border:2px solid var(--ink);background:transparent;color:var(--ink);font-family:'Mulish';font-weight:700;
    font-size:.9rem;letter-spacing:.02em;padding:11px 24px;border-radius:50px;cursor:pointer;transition:all .18s ease;}
  .tab-btn[aria-selected="true"]{background:var(--ink);color:#fff;}
  .tab-panel[hidden]{display:none;}
  .xgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;}
  .xcard{background:#fff;border-radius:16px;padding:20px 18px;box-shadow:0 10px 30px -20px rgba(12,37,69,.6);
    border-top:4px solid var(--teal);display:flex;flex-direction:column;gap:5px;}
  .xcard .ico{font-size:1.7rem;line-height:1;}
  .xcard strong{font-family:'Fraunces',Georgia,serif;font-size:1.12rem;color:var(--ink);}
  .feeds{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;align-items:flex-start;}
  .feeds > *{flex:1 1 300px;max-width:500px;min-width:0;}
  .tt-feed{margin-top:16px;}
  .tt-feed blockquote{margin:0;width:100%;}
  .tt-feed .tiktok-embed{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 6px 24px -14px rgba(12,37,69,.45);}
  .fb-feed{margin-top:16px;}
  .fb-feed-cap{font-size:.86rem;color:var(--muted);margin:0 0 8px;}
  .fb-feed iframe{max-width:100%;border-radius:12px;background:#fff;box-shadow:0 6px 24px -14px rgba(12,37,69,.45);display:block;margin:0 auto;}
  .grp-h{max-width:760px;margin:34px auto 2px;font-size:1.28rem;color:var(--ink);letter-spacing:-.01em;}
  .grp-sub{max-width:760px;margin:0 auto 14px;color:var(--muted);font-size:.9rem;}
  .xcard .pick{display:inline-block;margin-left:8px;vertical-align:2px;font-family:'Mulish',system-ui,sans-serif;font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#3a2407;background:var(--gold);padding:3px 7px;border-radius:5px;white-space:nowrap;}
  .xcard .meta{font-size:.82rem;color:var(--teal);font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
  .xcard p{margin:0;font-size:.92rem;color:var(--muted);line-height:1.55;}
  .xcard a.lnk{margin-top:auto;padding-top:10px;font-size:.88rem;font-weight:700;color:var(--cobalt-2);text-decoration:none;}
  .xcard a.lnk:hover{text-decoration:underline;}
  .op-bar{margin-top:26px;background:var(--ink);color:#fff;border-radius:18px;padding:26px 24px;display:flex;
    flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;}
  .op-bar h3{font-size:1.3rem;margin-bottom:4px;}
  .op-bar p{margin:0;font-size:.94rem;opacity:.9;max-width:56ch;}
  .op-bar .btn{flex:none;}
  .fineprint{margin-top:16px;font-size:.78rem;color:var(--muted);line-height:1.6;text-align:center;}
  @media(max-width:700px){
    .tab-btn{flex:1;min-width:140px;padding:11px 14px;font-size:.84rem;}
    .op-bar{flex-direction:column;align-items:flex-start;}
    .op-bar .btn{width:100%;justify-content:center;}
    .op-bar>div:last-child{width:100%;}
  }
  .menu-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
  .menu-thumbs img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:9px;
    border:1px solid var(--sand-2);box-shadow:0 6px 18px -12px rgba(12,37,69,.7);}
  .menu-hint{margin-top:8px!important;font-size:.79rem!important;font-style:italic;}
  /* Flyer lightbox */
  .zoomable{cursor:zoom-in;transition:transform .15s ease;}
  .zoomable:hover{transform:scale(1.015);}
  .lb{position:fixed;inset:0;z-index:200;background:rgba(6,18,34,.92);backdrop-filter:blur(6px);
    display:none;align-items:center;justify-content:center;padding:24px 16px;overflow:auto;-webkit-overflow-scrolling:touch;}
  .lb.open{display:flex;}
  .lb img{max-width:min(100%,1040px);max-height:88vh;width:auto;border-radius:14px;
    box-shadow:0 30px 80px -30px rgba(0,0,0,.9);cursor:zoom-out;}
  .lb-x{position:fixed;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(255,255,255,.15);color:#fff;font-size:1.6rem;line-height:1;display:flex;
    align-items:center;justify-content:center;backdrop-filter:blur(6px);}
  .lb-x:hover{background:rgba(255,255,255,.3);}
  /* Address line under the building band */
  .band-addr{display:flex;align-items:center;justify-content:center;gap:9px;
    padding:14px 22px 4px;text-align:center;text-decoration:none;
    color:var(--gold);font-weight:700;font-size:.86rem;letter-spacing:.03em;
    background:var(--ink);}
  .band-addr svg{width:17px;height:17px;flex:none;}
  .band-addr span{border-bottom:1px solid rgba(230,178,80,.45);padding-bottom:2px;}
  .band-addr:hover span,.band-addr:focus span{border-bottom-color:var(--gold);}
  @media (max-width:520px){ .band-addr{font-size:.79rem;gap:7px;padding:12px 16px 2px;} }

  /* Social row under the address */
  .band-social{display:flex;justify-content:center;gap:14px;padding:12px 22px 4px;background:var(--ink);}
  .band-social a{display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:50%;
    border:1px solid rgba(232,162,61,.35);
    transition:background .15s ease,border-color .15s ease,transform .15s ease;}
  .band-social a:hover,.band-social a:focus{background:rgba(232,162,61,.14);
    border-color:var(--gold);transform:translateY(-1px);}
  .band-social svg{width:22px;height:22px;flex:none;}
  @media (max-width:520px){ .band-social a{width:38px;height:38px;} .band-social svg{width:20px;height:20px;} }

  /* Building band — sits directly under the hero mural */
  .building-band{position:relative;background:var(--ink);line-height:0;}
  .building-band img{display:block;width:100%;height:clamp(250px,40vw,470px);
    object-fit:cover;object-position:center 50%;}
  /* Property */
  .property{padding:60px 0 40px;text-align:center;}
  .property h2{font-size:clamp(1.8rem,4vw,2.7rem);color:var(--ink);}
  .property .lede{max-width:60ch;margin:0 auto;color:var(--muted);font-size:1.06rem;}
  .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .trio figure{margin:0;}
  .trio img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;box-shadow:var(--shadow);}
  .trio figcaption{margin-top:8px;font-size:.86rem;color:var(--muted);font-weight:600;}
  /* Park */
  .park{padding:50px 0 40px;text-align:center;}
  .park h2{font-size:clamp(1.8rem,4vw,2.7rem);color:var(--ink);}
  .sunset-grid{grid-template-columns:repeat(3,1fr);}
  @media(max-width:820px){
    .trio{grid-template-columns:1fr;}
  }


  /* ---- Multipage nav (v18) ---- */
  .sitenav{position:sticky;top:0;z-index:40;background:rgba(12,37,69,.96);
    backdrop-filter:saturate(140%) blur(8px);
    border-bottom:1px solid rgba(232,162,61,.22);}
  /* side padding keeps links clear of the fixed ES/EN toggle (top-right) */
  .sitenav .wrap{display:flex;gap:4px;justify-content:center;flex-wrap:nowrap;
    padding:0 104px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .sitenav .wrap::-webkit-scrollbar{display:none;}
  .sitenav a{display:inline-block;padding:13px 15px;text-decoration:none;
    color:#cfe0f5;font-weight:700;font-size:.82rem;letter-spacing:.06em;
    text-transform:uppercase;border-bottom:2.5px solid transparent;
    transition:color .15s ease,border-color .15s ease;white-space:nowrap;}
  .sitenav a:hover,.sitenav a:focus{color:var(--gold-soft);}
  .sitenav a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold);}
  /* Tarifa Residente in the nav (v90). Red because it is the PR-only deal,
     not another section. Border, not fill — a solid red pill next to the gold
     "Completa tu reserva" pill turned the strip into two competing buttons. */
  .sitenav a.nav-pr{color:#ffb3b7;border:1.5px solid #ED1C24;border-radius:999px;
    padding:8px 13px;margin:0 4px;align-self:center;white-space:nowrap;font-weight:800;}
  .sitenav a.nav-pr:hover,.sitenav a.nav-pr:focus{background:#ED1C24;color:#fff;}
  @media(max-width:640px){.sitenav a.nav-pr{padding:7px 10px;margin:0 2px;}}
  @media (max-width:820px){
    .sitenav .wrap{justify-content:flex-start;padding:0 106px 0 8px;}
  }
  @media (max-width:520px){
    .sitenav .wrap{gap:0;padding:0 100px 0 6px;}
    .sitenav a{padding:12px 9px;font-size:.7rem;letter-spacing:.03em;}
  }
  /* inner pages start under the sticky nav, not under a hero */
  main > section:first-child{padding-top:34px;}


  /* ---- Family Lounges (v20) ---- */
  .terrace-wrap + .terrace-wrap{margin-top:22px;}
  .terrace-wrap.no-photo{grid-template-columns:1fr !important;}
  .lounge-name{font-family:'Fraunces',Georgia,serif;font-size:1.5rem;color:var(--ink);
    margin:0 0 8px;line-height:1.2;}
  .badge-inline{position:static;display:inline-block;margin-bottom:10px;}

  /* ============================================================
     TARIFA RESIDENTE PR  (v21)
     Direct-booking inquiry for Puerto Rico residents only.
     Classes prefixed .pr- to avoid clashing with form.res
     ============================================================ */
  .pr-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:10px;padding:13px 16px;border:2px solid #ED1C24;border-radius:50px;background:transparent;color:#C0141B;font-family:'Mulish';font-weight:800;font-size:.92rem;letter-spacing:.01em;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .18s ease,color .18s ease,transform .15s ease;}
  .pr-cta:hover{background:#ED1C24;color:#fff;transform:translateY(-2px);}
  .pr-flag{width:24px;height:16px;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.18);}

  .pr-band{background:var(--ink);color:var(--sand);padding:64px 0;border-top:4px solid #ED1C24;}
  .pr-inner{max-width:760px;margin:0 auto;}
  .pr-band .kicker{display:block;color:var(--gold);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.74rem;margin-bottom:10px;}
  .pr-band h2,.pr-band h1{font-size:clamp(1.7rem,4vw,2.4rem);color:#fff;margin-bottom:14px;}
  .pr-lede{color:#cfe0f4;font-size:1.06rem;margin:0 0 10px;max-width:58ch;}
  .pr-note{color:#9db4d0;font-size:.9rem;margin:0 0 26px;max-width:58ch;}

  .pr-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:6px;}
  .pr-chip{position:relative;display:inline-flex;align-items:center;gap:8px;border:1.5px solid rgba(244,239,230,.32);border-radius:999px;padding:11px 17px;font-size:.9rem;font-weight:600;color:#eaf1fb;cursor:pointer;user-select:none;transition:border-color .15s ease,background .15s ease,color .15s ease;}
  /* hide the native box — iOS renders it as a big white square */
  .pr-chip input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
  .pr-tick{flex:none;width:17px;height:17px;border-radius:50%;border:1.5px solid rgba(244,239,230,.45);position:relative;transition:background .15s ease,border-color .15s ease;}
  .pr-tick::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;border:solid #3a2407;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.4);opacity:0;transition:opacity .15s ease,transform .15s ease;}
  .pr-chip:hover{border-color:var(--gold);}
  .pr-chip:has(input:checked){border-color:var(--gold);background:rgba(232,162,61,.18);color:#fff;}
  .pr-chip:has(input:checked) .pr-tick{background:var(--gold);border-color:var(--gold);}
  .pr-chip:has(input:checked) .pr-tick::after{opacity:1;transform:rotate(45deg) scale(1);}
  .pr-chip:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:3px;}
  .pr-chips.pr-invalid .pr-chip{border-color:#ED6A62;}
  .pr-err{color:#FF9B93;font-size:.86rem;font-weight:600;margin:8px 0 0;}
  @media(prefers-reduced-motion:reduce){.pr-chip,.pr-tick,.pr-tick::after{transition:none;}}

  .pr-confirm{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;line-height:1.5;color:#dce8f6;margin:16px 0 4px;cursor:pointer;}
  .pr-confirm input{accent-color:var(--gold);margin-top:4px;flex:none;}

  .pr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px;}
  .pr-actions .btn{margin-top:0;}
  .pr-or{font-size:.86rem;color:#9db4d0;}
  .pr-pay{margin-top:22px;font-size:.86rem;color:#9db4d0;border-top:1px solid rgba(244,239,230,.14);padding-top:16px;}

  .pr-band form.res{margin-top:6px;}
  .pr-band form.res .btn{width:auto;}

  @media(max-width:620px){
    .pr-band{padding:48px 0;}
    .pr-actions{flex-direction:column;align-items:stretch;}
    .pr-actions .btn{justify-content:center;}
    .pr-or{text-align:center;}
  }
  @media(prefers-reduced-motion:reduce){.pr-cta{transition:none;}.pr-cta:hover{transform:none;}}

  /* PR resident button, .btn family — for dark backgrounds (hero, bands) */
  .btn-pr{background:#ED1C24;color:#fff;border:2px solid #ED1C24;padding:17px 30px;font-size:1.06rem;font-weight:800;box-shadow:0 10px 26px -10px rgba(237,28,36,.8);}
  .btn-pr:hover{background:#C0141B;border-color:#C0141B;color:#fff;}
  .btn-pr .pr-flag{width:28px;height:19px;}

  /* Hero CTA row — keep all three on one line where there's room,
     and on phones pair WhatsApp + PR Resident Rate side by side. */
  .hero-bar .cta-row .btn{flex:0 1 auto;}
  @media(max-width:900px){
    .hero-bar .cta-row .btn{padding:14px 18px;font-size:.92rem;}
    .hero-bar .cta-row .btn-pr{padding:14px 18px;font-size:.92rem;}
  }
  @media(max-width:640px){
    .hero-bar .cta-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
    .hero-bar .cta-row > .btn:first-child{grid-column:1 / -1;}
    .hero-bar .cta-row .btn{justify-content:center;text-align:center;padding:14px 10px;font-size:.86rem;gap:7px;}
    .hero-bar .cta-row .btn-pr{padding:14px 10px;font-size:.86rem;}
    .hero-bar .cta-row .pr-flag{width:22px;height:15px;}
  }

  /* full "Tarifa Residente PR" wording — allow a clean two-line wrap on phones */
  @media(max-width:640px){
    .hero-bar .cta-row .btn-pr{line-height:1.25;padding:12px 10px;}
    .hero-bar .cta-row .btn-pr span{display:inline-block;}
  }

  /* discount badge on the resident section */
  .pr-badge{display:inline-block;background:#6CACE4;color:#0C2545;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;padding:7px 15px;border-radius:999px;margin-bottom:14px;}

  /* VRBO on a suite card = whole-property listing only, so it reads as
     secondary info rather than "book this suite here" */
  .b-vrbo-whole{background:transparent;color:#1668e3;border:1.5px solid #1668e3;font-weight:700;}
  .b-vrbo-whole:hover{background:#1668e3;color:#fff;}

  /* ---- Sale tag: PR resident rate, sits beside the social icons ---- */
  .band-social{flex-wrap:wrap;align-items:center;}
  /* the circular social buttons shouldn't stretch when the tag joins the row */
  .band-social > a.sale-tag{width:auto;height:auto;border-radius:8px;}

  .sale-tag{
    display:inline-flex;align-items:center;gap:8px;
    background:#ED1C24;color:#fff;
    padding:8px 15px 8px 12px;
    border-radius:6px;
    font-family:'Mulish';font-weight:800;line-height:1;
    text-decoration:none;
    box-shadow:0 6px 18px -6px rgba(237,28,36,.9);
    position:relative;
    transition:transform .15s ease,background .15s ease;
  }
  /* notch on the left so it reads as a price tag, not a button */
  .sale-tag::before{
    content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%);
    width:0;height:0;
    border-top:8px solid transparent;border-bottom:8px solid transparent;
    border-right:8px solid #ED1C24;
  }
  .sale-tag:hover{background:#C0141B;transform:translateY(-2px);}
  .sale-tag:hover::before{border-right-color:#C0141B;}
  .sale-tag .pr-flag{width:22px;height:15px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.5);}
  .sale-lines{display:flex;flex-direction:column;gap:3px;}
  .sale-name{font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--sand);opacity:.85;}
  .sale-pct{font-size:.95rem;font-weight:800;letter-spacing:-.01em;color:#fff;}

  @media (max-width:520px){
    .band-social{gap:10px;padding:12px 14px 6px;}
    .sale-tag{padding:7px 12px 7px 10px;gap:6px;}
    .sale-name{font-size:.58rem;letter-spacing:.1em;}
    .sale-pct{font-size:.86rem;}
    .sale-tag .pr-flag{width:19px;height:13px;}
  }
  @media(prefers-reduced-motion:reduce){.sale-tag{transition:none;}.sale-tag:hover{transform:none;}}

  /* "Photos coming soon" panel — used for El Batey while it's being redone */
  .soon-box{display:flex;align-items:flex-start;gap:13px;margin-top:16px;padding:16px 18px;
    background:rgba(46,139,150,.08);border:1px dashed rgba(46,139,150,.45);border-radius:12px;}
  .soon-box svg{width:26px;height:26px;flex:none;color:var(--teal);margin-top:1px;}
  .soon-box strong{display:block;color:var(--ink);font-weight:800;font-size:.95rem;margin-bottom:3px;}
  .soon-box span{display:block;color:var(--muted);font-size:.88rem;line-height:1.5;}

  .lounge-line{margin:0 0 10px;font-size:.84rem;line-height:1.45;color:var(--teal);font-weight:600;}
  /* the terrace link under each suite card. Jumps to #lounge-sol / #lounge-batey,
     which exists on the list page AND on the generated suite pages — so the same
     card markup works on both and no cross-page path can rot. */
  .lounge-cta{display:inline-flex;align-items:center;gap:5px;margin:0 0 12px;
    color:var(--teal);font-weight:700;font-size:.82rem;letter-spacing:.02em;text-decoration:none;
    border-bottom:1.5px solid rgba(0,0,0,.14);padding-bottom:2px;}
  .lounge-cta:hover,.lounge-cta:focus{color:var(--gold);border-bottom-color:var(--gold);}
  .terrace-wrap:target{box-shadow:0 0 0 2px var(--gold),var(--shadow);}

  .whole-lounges{color:var(--gold-soft);font-weight:600;font-size:.94rem;margin:0 auto 16px;max-width:52ch;}

  /* nudge from the terraces down to the suite cards */
  .scroll-cue{display:flex;flex-direction:column;align-items:center;gap:6px;margin:34px auto 0;
    color:var(--teal);font-weight:800;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;
    text-decoration:none;width:max-content;}
  .scroll-cue svg{width:22px;height:22px;animation:cueBob 2s ease-in-out infinite;}
  .scroll-cue:hover{color:var(--ink);}
  @keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
  @media(prefers-reduced-motion:reduce){.scroll-cue svg{animation:none;}}

  /* ---- Deep-linked suite cards (v45) ----
     /suites/#coqui lands on that card. A brief gold ring tells the guest
     which one they were sent to, then fades. Offset under the sticky nav is
     already handled by the anchor landing fix in site.js — no scroll-margin
     here, or the jump would overshoot twice. */
  .suites .card:target{animation:suite-land 2.4s ease-out 1;}
  @keyframes suite-land{
    0%   {box-shadow:0 0 0 3px var(--gold);}
    70%  {box-shadow:0 0 0 3px var(--gold);}
    100% {box-shadow:0 0 0 3px rgba(232,162,61,0);}
  }
  @media (prefers-reduced-motion:reduce){
    .suites .card:target{animation:none;box-shadow:0 0 0 2px var(--gold);}
  }

  /* ---- Deep-linked restaurant cards (v64) ----
     /patabajo -> /restaurants/#patabajo. Same gold-ring landing cue as the
     suite cards. No scroll-margin here either, for the same reason. */
  .xcard:target{animation:suite-land 2.4s ease-out 1;}
  @media (prefers-reduced-motion:reduce){
    .xcard:target{animation:none;box-shadow:0 0 0 2px var(--gold);}
  }

  /* ---- "Cotizando: <suite>" banner (v46) ----
     Sits above the heading in the resident-rate band so the guest lands
     already seeing which suite the quote is for. Hidden until one is picked. */
  .pr-forsuite{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
    margin:0 0 16px;padding:11px 16px;border-radius:12px;
    background:rgba(232,162,61,.12);border:1px solid rgba(232,162,61,.42);}
  .pr-forsuite[hidden]{display:none;}
  .pr-forsuite-k{color:var(--gold-soft);font-weight:800;font-size:.7rem;
    letter-spacing:.1em;text-transform:uppercase;}
  .pr-forsuite-n{color:#fff;font-weight:700;font-size:1.02rem;line-height:1.3;}

  /* ---- Standalone suite pages (v49) ----
     One card, centred, so it reads as that suite's own page rather than a
     one-item grid. */
  .suites .grid.one{grid-template-columns:minmax(0,620px);justify-content:center;}
  .suite-back{text-align:center;margin:34px 0 0;}
  .suite-back a{color:var(--teal);font-weight:700;letter-spacing:.04em;
    text-decoration:none;border-bottom:1.5px solid rgba(31,122,140,.4);
    padding-bottom:2px;}
  .suite-back a:hover,.suite-back a:focus{color:var(--gold);
    border-bottom-color:var(--gold);}
  .card h3 a.suite-link{color:inherit;text-decoration:none;}
  .card h3 a.suite-link:hover,.card h3 a.suite-link:focus{color:var(--teal);}

  /* ---- Send this suite (v50) ----
     One tap from the suite's own page to WhatsApp or Messages, carrying that
     suite's URL. */
  .share-row{max-width:620px;margin:26px auto 0;padding:16px 18px;
    border-radius:14px;background:var(--sand-2);border:1px solid rgba(12,37,69,.1);
    display:flex;flex-direction:column;gap:11px;align-items:center;}
  .share-k{color:var(--ink);font-weight:800;font-size:.72rem;
    letter-spacing:.12em;text-transform:uppercase;opacity:.72;}
  .share-btns{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;}
  .btn.btn-share{display:inline-flex;align-items:center;gap:7px;
    padding:10px 16px;border-radius:999px;border:1.5px solid var(--cobalt);
    background:#fff;color:var(--cobalt);font-weight:700;font-size:.9rem;
    cursor:pointer;text-decoration:none;}
  .btn.btn-share:hover,.btn.btn-share:focus{background:var(--cobalt);color:#fff;}
  .btn.btn-share.b-wa{border-color:#25D366;color:#128C4A;}
  .btn.btn-share.b-wa:hover,.btn.btn-share.b-wa:focus{background:#25D366;color:#fff;}
  .btn.btn-share.is-done{background:var(--teal);border-color:var(--teal);color:#fff;}
  @media (max-width:420px){ .btn.btn-share{padding:9px 13px;font-size:.84rem;} }

  /* v66: compact share row that sits INSIDE a restaurant card. The standard
     row is a full-width band under a suite; here it nests, so it drops the
     sand background (the card is already on white) and tightens spacing. */
  .xcard .share-row-sm{max-width:none;margin:14px 0 0;padding:12px 10px;
    background:rgba(12,37,69,.035);gap:9px;}
  .xcard .share-row-sm .share-k{font-size:.66rem;letter-spacing:.1em;}
  .xcard .share-row-sm .btn.btn-share{padding:8px 12px;font-size:.82rem;}
  .buildtag{opacity:.5;font-variant-numeric:tabular-nums;}

  /* ---- "Ver esta suite" (v52) ----
     The primary action on each card in the list: open that suite's own page.
     Sits above the platform buttons so it reads first. */
  .btn.see-suite{display:flex;align-items:center;justify-content:center;gap:7px;
    width:100%;margin:0 0 10px;padding:13px 18px;border-radius:999px;
    background:var(--ink);color:var(--sand);font-weight:700;font-size:.98rem;
    text-decoration:none;border:none;}
  .btn.see-suite:hover,.btn.see-suite:focus{background:var(--cobalt-2);color:#fff;}
  .btn.see-suite svg{flex:0 0 auto;}

  /* ---- List page shows the chooser only (v55) ----
     On /suites/all/ each card is a doorway: photo, name, what it is, and one
     button. Booking and the resident rate live on the suite's own page, so a
     guest is never picking from five sets of buttons at once. The markup stays
     in place because the suite pages are generated from these cards. */
  .suites.is-list .card .book-row,
  .suites.is-list .card .pr-cta{display:none;}
  .suites.is-list .card .see-suite{margin-bottom:0;}

  /* PRTC innkeeper licence line in the footer */
  .foot-lic{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding-top:12px;
    border-top:1px solid rgba(244,239,230,.14);font-size:.78rem;letter-spacing:.02em;opacity:.72;line-height:1.4;text-align:center;}
  .foot-lic svg{width:16px;height:16px;flex:none;color:var(--gold);}
  @media(max-width:520px){.foot-lic{flex-direction:column;gap:5px;font-size:.74rem;}}

  /* Direct booking leads; OTAs demoted to a secondary row */
  .card-body .pr-cta{margin-top:14px;padding:15px 18px;font-size:1rem;}
  .ota-label{margin:16px 0 8px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:.75;text-align:center;}
  .card-body .book-row .btn{padding:9px 13px;font-size:.8rem;font-weight:700;opacity:.92;}
  .card-body .book-row .b-airbnb{background:transparent;color:#c8443c;border:1.5px solid rgba(200,68,60,.55);}
  .card-body .book-row .b-airbnb:hover{background:#c8443c;color:#fff;}
  .card-body .book-row .b-booking{background:transparent;color:#1668e3;border:1.5px solid rgba(22,104,227,.5);}
  .card-body .book-row .b-booking:hover{background:#1668e3;color:#fff;}

  /* ============================================================
     HOUSE RULES + SIGNED ACKNOWLEDGMENT  (/rules/)   v68
     The quiz sits inside form.res on the dark band, so it inherits
     the field styling; only the question blocks are new.
     ============================================================ */
  .rl-accept{display:grid;gap:12px;margin:22px 0 20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);}
  /* Thumb-sized targets. The tick gets an explicit basis so it can never be
     squeezed to a sliver and land on top of the first word. */
  .rl-accept .pr-chip{display:flex;align-items:center;gap:14px;border-radius:14px;
                      min-height:62px;padding:16px 18px;font-weight:500;
                      font-size:.95rem;line-height:1.45;text-align:left;}
  .rl-accept .pr-chip > span:last-child{flex:1 1 auto;min-width:0;}
  .rl-accept .pr-tick{flex:0 0 26px;width:26px;height:26px;border-radius:8px;border-width:2px;margin:0;}
  .rl-accept .pr-tick::after{left:9px;top:4px;width:6px;height:12px;border-width:0 2.5px 2.5px 0;}
  .rl-sign{font-family:'Pinyon Script',cursive;font-size:1.6rem !important;letter-spacing:.02em;
           padding:16px 14px !important;}
  /* one big button, not a row of small ones */
  .pr-band form.res .btn.rl-submit{width:100%;justify-content:center;min-height:60px;
                                   font-size:1.08rem;margin-top:14px;}
  .rl-done{background:rgba(255,255,255,.07);border:1px solid rgba(232,162,61,.5);border-radius:var(--radius);
           padding:30px 26px;text-align:center;}
  .rl-done h3{color:#fff;font-size:1.5rem;margin-bottom:10px;}
  .rl-done p{color:#cfe0f4;margin:0 0 18px;}
  .rl-done .btn{justify-content:center;}
  @media(max-width:640px){
    .rl-sign{font-size:1.3rem !important;}
  }

  /* Printed from a phone or a laptop, /rules/ is the paper form we hand to
     walk-ins. Ink-friendly, no nav, no QR, signature lines instead of inputs. */
  @media print{
    .lang-toggle,.sitenav,.qr-panel,.scroll-cue,.lb,#rl-wa,#rl-done{display:none !important;}
    body{background:#fff !important;color:#000 !important;visibility:visible !important;}
    .story,.explore,.pr-band{padding:10px 0 !important;background:#fff !important;color:#000 !important;
                             border-top:none !important;}
    .pr-band h2,.pr-band h1,.rl-done h3{color:#000 !important;}
    .pr-lede,.pr-note,.xcard p{color:#222 !important;}
    .xgrid{grid-template-columns:1fr 1fr !important;gap:8px !important;}
    .xcard{box-shadow:none !important;border:1px solid #999;padding:10px 12px !important;break-inside:avoid;}
    .perks{margin-top:14px !important;}
    form.res{background:#fff !important;border:1px solid #999 !important;backdrop-filter:none !important;}
    form.res label{color:#000 !important;}
    form.res input,form.res select{border:1px solid #666 !important;background:#fff !important;}
    .rl-accept .pr-chip{background:#fff !important;border:1px solid #999 !important;break-inside:avoid;}
    .contact{background:#fff !important;color:#000 !important;}
    a[href]:after{content:"";}
  }

  /* House rules strip — sits just above the footer on every page, because the
     nav item alone is the sixth thing in a row and gets thumbed past. (v69) */
  .rules-strip{background:var(--cream);border-top:1px solid var(--sand-2);border-bottom:1px solid var(--sand-2);
               padding:26px 0;}
  .rules-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
  .rules-strip .rs-copy{flex:1 1 340px;min-width:0;}
  .rules-strip b{display:block;font-family:'Fraunces',Georgia,serif;font-size:1.16rem;color:var(--ink);}
  .rules-strip span{display:block;font-size:.92rem;color:var(--muted);margin-top:4px;}
  .rules-strip .rs-btns{display:flex;gap:11px;flex-wrap:wrap;}
  .rules-strip .btn{padding:12px 22px;font-size:.94rem;}
  .btn-rules{background:var(--ink);color:#fff;}
  .btn-rules:hover{background:var(--cobalt);}
  .btn-sign{background:transparent;color:var(--ink);border:2px solid var(--ink);}
  .btn-sign:hover{background:var(--ink);color:#fff;}
  @media(max-width:640px){
    .rules-strip .wrap{flex-direction:column;align-items:stretch;text-align:center;}
    .rules-strip .rs-btns{flex-direction:column;}
    .rules-strip .btn{width:100%;justify-content:center;}
  }
  @media print{.rules-strip{display:none !important;}}

  /* The rules run long on a phone, so the acuse sits above them and this
     button brings you back up from the bottom of the list. (v75) */
  .rl-jump{min-height:56px;padding:16px 30px;font-size:1.02rem;}
  @media(max-width:640px){.rl-jump{width:100%;justify-content:center;}}
  @media print{.rl-jump{display:none !important;}}

  /* per-suite occupancy hint under the guest count (v76) */
  .rl-cap{margin:7px 0 0;font-size:.82rem;color:#9db4d0;}
  .rl-cap.rl-cap-bad{color:#FF9B93;font-weight:700;}

  /* Read-before-sign gate (v77). The form sits above the rules so people can
     find it; this makes sure they still go look at them. */
  .rl-gate{margin:22px 0 4px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);}
  .rl-gate-k{font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
             color:var(--gold);margin:0 0 10px;}
  .pr-band form.res .btn.rl-read{width:100%;justify-content:center;min-height:58px;font-size:1rem;
                                 margin:0;text-align:center;}
  .rl-gate.is-read .rl-read{background:rgba(232,162,61,.18);border-color:var(--gold);color:#ffe9c6;}
  .rl-gate-note{margin:9px 0 0;font-size:.84rem;color:#9db4d0;}
  .rl-gate.is-read .rl-gate-note{color:#ffe9c6;}
  .pr-band form.res .btn.rl-submit[disabled]{opacity:.42;cursor:not-allowed;
                                             background:rgba(232,162,61,.35);color:#3a2407;
                                             box-shadow:none;transform:none;}
  @media print{.rl-gate{display:none !important;}}

/* ---------- /reservar/ : complete your booking ---------- */
.nav-cta{background:var(--gold,#c99a3f);color:#0C2545!important;border-radius:999px;
  padding:6px 14px!important;font-weight:700;}
.nav-cta[aria-current="page"]{background:#0C2545;color:#fff!important;}
.bk-stay{background:#fff;border:1px solid rgba(12,37,69,.12);border-radius:16px;
  padding:18px 20px;margin:6px 0 4px;box-shadow:0 6px 22px rgba(12,37,69,.06);}
.bk-stay-k{margin:0 0 10px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#c99a3f;font-weight:800;}
.bk-stay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;}
.bk-stay-cell b{display:block;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:#6b7280;font-weight:700;margin-bottom:3px;}
.bk-stay-cell span{display:block;font-size:1.02rem;color:#0C2545;font-weight:600;}
.bk-choice{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 2px;}
.bk-opt-btn{flex:1 1 150px;padding:12px 14px;border-radius:12px;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.32);background:rgba(255,255,255,.06);
  color:inherit;font:inherit;font-weight:600;font-size:.92rem;
  transition:background .15s ease,border-color .15s ease;}
.bk-opt-btn:hover{background:rgba(255,255,255,.12);}
.bk-opt-btn.is-on{background:#c99a3f;border-color:#c99a3f;color:#0C2545;}
.bk-pane{margin-top:12px;}
.bk-id input[type=file]{width:100%;padding:12px;border:1.5px dashed rgba(255,255,255,.35);
  border-radius:12px;background:rgba(255,255,255,.06);color:inherit;font-size:.92rem;}
#bk-idwa{width:100%;justify-content:center;}
.bk-req{margin-left:8px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:800;color:#c99a3f;}
.bk-pick{margin:2px 0 10px;}
.bk-opt{margin-left:8px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  opacity:.65;font-weight:700;}
.bk-hint{margin:8px 0 0;font-size:.82rem;line-height:1.5;opacity:.72;}
.bk-pay{margin-top:14px;width:100%;justify-content:center;}

/* payment-method picker on /reservar/ */
.bk-surch{margin:8px 0 0;font-weight:600;color:var(--gold,#b8893a);font-size:.95rem;line-height:1.45}
.bk-pay-pick .bk-choice{flex-wrap:wrap}

/* v141: phone fixes
   1. Suite cards on the list show their Airbnb and VRBO buttons.
   2. On phones the menu wraps onto more lines instead of running off the edge.
   3. Nothing can push the page sideways on a phone. */
.suites.is-list .card .book-row,
.suites.is-list .card .pr-cta{display:flex;}
.suites.is-list .card .pr-cta{display:inline-flex;}
@media (max-width:820px){
  .sitenav .wrap{flex-wrap:wrap;justify-content:center;gap:2px 4px;padding:0 8px;overflow:visible;}
  .sitenav a{padding:10px 8px;font-size:.66rem;}
  .sitenav{overflow:hidden;max-width:100%;}
}
html,body{max-width:100%;overflow-x:hidden;}

/* v141: menu wraps at every width so no item is cut off or hidden behind the language toggle. */
.sitenav .wrap{flex-wrap:wrap;justify-content:center;overflow:visible;padding-left:8px;padding-right:8px;}
.sitenav .wrap::-webkit-scrollbar{display:none;}
@media (min-width:821px){
  .sitenav .wrap{padding-right:120px;}
}

/* v141: every button and menu link is at least 44px tall on phones, so it's easy to tap. */
@media (max-width:820px){
  .btn,.lnk,.pr-cta,.book-row .btn,.sitenav a,.lang-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;}
  .lang-btn{min-width:44px;}
}

/* v141: on desktop the menu fits on one row so it doesn't cover the photos while scrolling. */
@media (min-width:1101px){
  .sitenav .wrap{flex-wrap:nowrap;padding-right:100px;}
  .sitenav a{padding:12px 8px;font-size:.66rem;letter-spacing:.02em;white-space:nowrap;}
}
@media (min-width:821px) and (max-width:1100px){
  .sitenav{position:relative;}
  .sitenav .wrap{flex-wrap:wrap;padding-right:100px;}
  .sitenav a{padding:10px 7px;}
}

/* v141: on phones the ES/EN toggle sits on its own row above the menu, so it never covers a menu item. */
@media (max-width:820px){
  .sitenav{padding-top:40px;}
  .lang-toggle{top:6px;right:8px;}
}

/* v141: on phones the menu scrolls away with the page, so it never hides the content under it. */
@media (max-width:820px){
  .sitenav{position:relative;}
}

/* v141: on desktop the mermaid banner is about half the window height, so the photos below it are visible sooner. */
@media (min-width:821px){
  .hero-mural{max-width:min(1000px, 104vh);}
}
/* v141: the Complete Booking button fits inside the menu bar on desktop. */
@media (min-width:821px){
  .sitenav a.nav-cta,.sitenav a.nav-pr{padding:7px 14px;line-height:1.15;display:inline-flex;align-items:center;margin:0 4px;}
}

/* ES / EN toggle: bigger, and centered at the top on phones so it stands out. */
.lang-toggle{padding:4px;border-radius:12px;}
.lang-btn{font-size:.85rem;padding:9px 16px;min-width:64px;min-height:40px;gap:6px;letter-spacing:.06em;}
.lang-btn .flag-icon{width:22px;height:15px;}
@media(max-width:820px){
  .lang-toggle{top:8px;left:50%;right:auto;transform:translateX(-50%);}
  .lang-btn{font-size:1rem;padding:10px 20px;min-width:84px;min-height:46px;}
  .lang-btn .flag-icon{width:26px;height:18px;}
  .sitenav{padding-top:72px;}
}