/* =====================================================================
   Smart Hostel Sul da Ilha - Florianopolis, SC  -  spec mockup

   THE TABLE IS THE SITE. Smart Hostel publishes a full sliding rate
   ladder in BRL - R$ 70 a night for a shared bed down to R$ 33 at 29+
   days, and R$ 210 down to R$ 99 for a studio at 30+ - and presents it as
   a static four-column price list. At those monthly rates they compete
   with rentals, not with hostels, and an OTA is structurally incapable of
   selling a 30-night stay well. That whole revenue line can only be won
   direct. So the centre of this build is an interactive ladder where
   dragging the nights control past 29 shows the price collapse.

   STATUS: speculative pitch build. Not deployed, not reviewed.

   ---------------------------------------------------------------------
   PALETTE  [CONFIRM against their logo and signage - nothing was
   extractable from their template output, so this is proposed.]
   ---------------------------------------------------------------------
     Smart Ink       #15181D   nav, footer, display type
     Eletrico        #1FB6A6   the "smart" cue - and ONLY the book action
     Sul da Ilha Sun #FFB627   ONLY the long-stay / discount ladder
     Concreto Claro  #EDEDE8   section grounds
     Branco          #FFFFFF   page base
     Cinza Texto     #4A5058   body copy

   Two accents, used with discipline: teal is "book", yellow is "stay
   longer, pay less". They are never mixed in one component.

   ---------------------------------------------------------------------
   MEASURED CONTRAST (WCAG 2.1 AA / eMAG - they already ship an
   Acessibilidade toggle, so this is honoured seriously)
   ---------------------------------------------------------------------
     Ink   #15181D on White ......... 17.79  PASS AAA
     Ink   #15181D on Concreto ...... 15.15  PASS AAA
     Ink   #15181D on Teal .......... 7.03   PASS AAA
     Ink   #15181D on Yellow ....... 10.14   PASS AAA
     Cinza #4A5058 on White ......... 8.14   PASS AAA
     Cinza #4A5058 on Concreto ...... 6.93   PASS AAA
     White on Ink .................. 17.79   PASS AAA

   FAILURES FOUND, AND WHAT IS USED INSTEAD
     Teal   #1FB6A6 on White ........ 2.53   FAIL
     Teal   #1FB6A6 on Concreto ..... 2.15   FAIL
     White on Teal ................. 2.53   FAIL - a teal button with
                                      white text does not pass
     Yellow #FFB627 on White ....... 1.75   FAIL (the brief predicted this)
     Yellow #FFB627 on Concreto .... 1.49   FAIL
     White on Yellow ............... 1.75   FAIL
       -> --teal-ink   #146F66 on White     6.01  PASS AA
                                on Concreto 5.12  PASS AA
       -> --yellow-ink #7A5100 on White     6.99  PASS AAA
                                on Concreto 5.95  PASS AA
       -> --teal-bright #3FD8C7 on Ink     10.05  PASS AAA
       Teal and yellow are GROUNDS carrying INK. Neither is ever set as
       type on a light field; the darkened inks do that job.

   THE R$ 33 RULE: R$ 33 is their 29-plus-night shared rate. It is never
   shown as a headline nightly price anywhere on this build - every
   appearance carries its length-of-stay condition, and their own caveat
   about high season and holidays sits adjacent to the table, not in a
   footnote.
   ===================================================================== */

:root{
  --ink:#15181D;
  --teal:#1FB6A6;
  --teal-ink:#146F66;
  --teal-bright:#3FD8C7;
  --sun:#FFB627;
  --sun-ink:#7A5100;
  --sun-deep:#F08A0C;
  --concreto:#EDEDE8;
  --cinza:#4A5058;
  --line:rgba(21,24,29,.14);
  --line-soft:rgba(21,24,29,.08);
  --line-dark:rgba(255,255,255,.18);
  --shadow:0 1px 2px rgba(21,24,29,.06),0 8px 22px rgba(21,24,29,.08);
  --shadow-lift:0 6px 12px rgba(21,24,29,.1),0 22px 46px rgba(21,24,29,.16);
  --r:8px;
  --maxw:1200px;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --disp:"Archivo","Arial Black",Impact,var(--sans);
  --g-footer:linear-gradient(180deg,#15181D 0%,#000000 100%);
  --g-hero:linear-gradient(160deg,rgba(31,182,166,.92) 0%,rgba(21,24,29,.9) 68%);
  --g-sun:linear-gradient(120deg,#FFB627 0%,#F08A0C 100%);
  --g-section:linear-gradient(180deg,#EDEDE8 0%,#FFFFFF 100%);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--cinza);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--teal-ink);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.02;margin:0 0 .5em;font-weight:800;
  letter-spacing:-.03em;color:var(--ink);text-transform:uppercase}
h1{font-size:clamp(2.4rem,7vw,4.8rem)}
h2{font-size:clamp(1.8rem,4vw,3rem)}
h3{font-size:clamp(1.06rem,1.9vw,1.28rem);letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{width:min(100% - 2.4rem,var(--maxw));margin-inline:auto}
section{padding-block:clamp(3rem,6.5vw,5.4rem)}
.eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-ink);margin:0 0 .8rem}
.eyebrow.sun{color:var(--sun-ink)}
.lede{font-size:clamp(1rem,1.6vw,1.16rem);max-width:64ch;color:var(--cinza)}
.center{text-align:center}
.center .lede{margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1.1rem;z-index:200}
.skip:focus{left:.6rem;top:.6rem}
:focus-visible{outline:3px solid var(--teal-ink);outline-offset:3px;border-radius:4px}

.cfm{display:inline-block;background:#FFF3D6;color:var(--sun-ink);border:1px dashed #B58412;
  border-radius:4px;padding:.04em .4em;font-size:.85em;font-weight:700}
.cfm-block{background:#FFF8E9;border:1px dashed #B58412;border-left-width:5px;border-radius:8px;
  padding:.95rem 1.15rem;color:#5B4200;font-size:.95rem;margin:0 0 1.15rem}
.note-block{background:var(--concreto);border-left:5px solid var(--teal-ink);border-radius:8px;
  padding:.95rem 1.15rem;font-size:.95rem;margin:0 0 1.15rem;color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.86rem 1.6rem;border-radius:var(--r);border:2px solid transparent;
  font-family:var(--sans);font-size:1rem;font-weight:800;line-height:1.2;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;text-transform:uppercase;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease}
.btn:hover{transform:translateY(-2px)}
/* a teal button carries INK: white on #1FB6A6 is 2.53 */
.btn-teal{background:var(--teal);color:var(--ink);box-shadow:0 6px 16px rgba(31,182,166,.34)}
.btn-teal:hover{background:var(--teal-bright);box-shadow:0 10px 24px rgba(31,182,166,.4)}
/* the yellow button is reserved for the long-stay tier and also carries INK */
.btn-sun{background:var(--g-sun);color:var(--ink);box-shadow:0 6px 16px rgba(240,138,12,.3)}
.btn-sun:hover{box-shadow:0 10px 24px rgba(240,138,12,.38)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:rgba(21,24,29,.05)}
.btn-ghost-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.68)}
.btn-ghost-light:hover{background:rgba(255,255,255,.22)}
.btn-sm{padding:.55rem 1.05rem;font-size:.88rem}
.btn .ar{transition:transform .2s ease}
.btn:hover .ar{transform:translateX(4px)}
[data-unconfirmed]{opacity:.62;cursor:not-allowed;filter:grayscale(.35)}

/* ---------- utility topbar ---------- */
.utility{background:var(--ink);color:rgba(255,255,255,.9);font-size:.83rem;padding:.42rem 0}
.utility .wrap{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between}
.utility a{color:var(--teal-bright);text-decoration:none}
.utility a:hover{text-decoration:underline}
.u-left,.u-right{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.lang{display:inline-flex;gap:.15rem;align-items:center;background:rgba(255,255,255,.1);border-radius:6px;padding:.14rem}
.lang a{padding:.14rem .55rem;border-radius:4px;text-decoration:none;font-weight:800;font-size:.78rem;color:rgba(255,255,255,.84)}
.lang a.on{background:var(--teal);color:var(--ink)}
.a11y-btn{background:none;border:1px solid rgba(255,255,255,.4);border-radius:6px;color:#fff;
  font:inherit;font-size:.78rem;font-weight:700;padding:.16rem .6rem;cursor:pointer}
.a11y-btn[aria-pressed="true"]{background:var(--sun);color:var(--ink);border-color:var(--sun)}

/* the Acessibilidade toggle is theirs, and it is honoured properly */
body.a11y{font-size:19px}
body.a11y .lede{font-size:1.22rem}
body.a11y a:not(.btn){text-decoration:underline}
body.a11y :focus-visible{outline-width:4px}

/* ---------- sticky nav ---------- */
.site-head{position:sticky;top:0;z-index:70;background:#fff;border-bottom:1px solid var(--line-soft);
  transition:padding .26s ease,box-shadow .26s ease;padding-block:.8rem}
.site-head.condensed{padding-block:.45rem;box-shadow:0 6px 22px rgba(21,24,29,.1)}
.head-in{display:flex;align-items:center;gap:1rem}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);line-height:1}
.brand b{font-family:var(--disp);font-size:1.36rem;font-weight:800;letter-spacing:-.03em;text-transform:uppercase}
.brand span{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-ink);font-weight:800;margin-top:.18rem}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.05rem}
.nav a{color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;padding:.15rem 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:3px;background:var(--teal);transition:right .24s ease}
.nav a:hover::after{right:0}
.head-cta{display:flex;align-items:center;gap:.5rem}
/* the price chip only appears once the header condenses, and it always
   carries its length-of-stay condition */
.price-chip{display:none;align-items:center;gap:.35rem;background:var(--sun);color:var(--ink);
  border-radius:999px;padding:.24rem .7rem;font-size:.78rem;font-weight:800;white-space:nowrap}
.site-head.condensed .price-chip{display:inline-flex}
.price-chip small{font-weight:600;font-size:.72rem}
.burger{display:none;background:none;border:2px solid var(--line);border-radius:var(--r);width:44px;height:44px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2.4px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2.4px;background:var(--ink);transition:transform .24s ease,top .24s ease}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.mobile-nav{display:none;background:#fff;border-top:1px solid var(--line-soft)}
.mobile-nav.open{display:block;animation:drop .28s ease}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mobile-nav a{display:block;padding:.78rem 0;border-bottom:1px solid var(--line-soft);color:var(--ink);
  text-decoration:none;font-weight:700;text-transform:uppercase;font-size:.92rem}
.mobile-nav a:last-child{border-bottom:0}
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:inline-flex}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(460px,72vh,660px);display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.hero-scrim{position:absolute;inset:0;z-index:1;background:var(--g-hero);mix-blend-mode:multiply}
.hero-scrim2{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(21,24,29,.1) 0%,rgba(21,24,29,.72) 100%)}
.hero-in{position:relative;z-index:2;padding-block:clamp(2.4rem,6vw,4rem) clamp(3rem,7vw,4.6rem)}
.hero h1{color:#fff;max-width:14ch}
.hero .eyebrow{color:var(--teal-bright)}
.hero .lede{color:rgba(255,255,255,.95);max-width:56ch}
.hero-bullets{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;gap:.5rem;flex-wrap:wrap}
.hero-bullets li{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  border-radius:999px;padding:.28rem .8rem;font-size:.86rem;font-weight:600}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}

/* ---------- reveal ---------- */
.rev{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.7,.3,1)}
.rev.in{opacity:1;transform:none}

/* ---------- bands / cards ---------- */
.band-concreto{background:var(--concreto)}
.band-fade{background:var(--g-section)}
.band-ink{background:var(--ink);color:rgba(255,255,255,.88)}
.band-ink h2,.band-ink h3{color:#fff}
.band-ink .eyebrow{color:var(--teal-bright)}
.band-ink .lede{color:rgba(255,255,255,.88)}
.band-ink a{color:var(--teal-bright)}
.band-sun{background:var(--g-sun);color:var(--ink)}
.band-sun h2,.band-sun h3{color:var(--ink)}
.band-sun .eyebrow{color:#5B3D00}
.band-sun .lede{color:rgba(21,24,29,.86)}
.grid{display:grid;gap:1.1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:1.3rem;
  box-shadow:var(--shadow);transition:transform .24s ease,box-shadow .24s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card h3{margin-bottom:.35rem}
.card p:last-child{margin-bottom:0}
.band-ink .card{background:rgba(255,255,255,.06);border-color:var(--line-dark);color:rgba(255,255,255,.88)}
.band-sun .card{background:rgba(255,255,255,.82);border-color:transparent}
.split{display:grid;gap:clamp(1.4rem,4vw,3rem);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center}
.figure{border-radius:var(--r);overflow:hidden;background:var(--concreto);position:relative;margin:0}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.7,.3,1)}
.figure:hover img{transform:scale(1.04)}
.figure figcaption{font-size:.8rem;color:var(--cinza);padding:.5rem .1rem 0}
.band-ink .figure figcaption{color:rgba(255,255,255,.75)}
.ph-tag{position:absolute;left:.6rem;top:.6rem;z-index:2;background:rgba(21,24,29,.86);color:#fff;
  font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;padding:.22rem .55rem;border-radius:4px}
.ratio-3x2 img{aspect-ratio:3/2}
.ratio-4x3 img{aspect-ratio:4/3}
.ratio-1x1 img{aspect-ratio:1/1}
.ratio-16x9 img{aspect-ratio:16/9}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ticks li{position:relative;padding-left:1.6rem;font-size:.96rem}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:.7rem;height:.7rem;background:var(--teal)}
.band-ink .ticks li::before{background:var(--teal-bright)}
.band-sun .ticks li::before{background:var(--ink)}
.ticks.two{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ---------- THE RATE LADDER ---------- */
.ladder-controls{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin:1.6rem 0 1.2rem}
.nights-field{display:flex;flex-direction:column;gap:.35rem;flex:1;min-width:min(100%,22rem)}
.nights-field label{font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.nights-row{display:flex;align-items:center;gap:.9rem}
input[type="range"].nights{flex:1;accent-color:var(--sun-deep);height:2rem;min-width:0}
.nights-out{font-family:var(--disp);font-size:1.6rem;font-weight:800;color:var(--ink);min-width:5.5rem;text-align:right}
.nights-out small{display:block;font-family:var(--sans);font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.nights-presets{display:flex;gap:.4rem;flex-wrap:wrap}
.nights-presets button{background:#fff;border:2px solid var(--line);border-radius:999px;
  font:inherit;font-size:.84rem;font-weight:700;padding:.35rem .9rem;cursor:pointer;color:var(--ink);
  transition:border-color .2s ease,background-color .2s ease}
.nights-presets button:hover{border-color:var(--sun-deep)}
.nights-presets button[aria-pressed="true"]{background:var(--sun);border-color:var(--sun);color:var(--ink)}

.table-scroll{overflow-x:auto;border:2px solid var(--ink);border-radius:var(--r);background:#fff}
table.ladder{border-collapse:collapse;width:100%;min-width:660px;font-size:.94rem}
table.ladder caption{text-align:left;padding:.9rem 1rem;font-size:.9rem;color:var(--cinza)}
table.ladder th,table.ladder td{padding:.72rem .85rem;border-bottom:1px solid var(--line-soft);text-align:left}
table.ladder thead th{background:var(--ink);color:#fff;font-weight:800;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
table.ladder tbody th{background:var(--concreto);font-weight:800;color:var(--ink);white-space:nowrap}
table.ladder td{font-variant-numeric:tabular-nums;white-space:nowrap}
table.ladder td b{font-family:var(--disp);font-size:1.12rem;font-weight:800;color:var(--ink);display:block}
table.ladder td span{font-size:.78rem;color:var(--cinza);display:block}
/* the applicable band lights up as the nights control moves */
table.ladder td.on{background:var(--sun);position:relative}
table.ladder td.on b{color:var(--ink)}
table.ladder td.on span{color:#5B3D00}
table.ladder td.on::after{content:"";position:absolute;inset:0;border:2px solid var(--ink);pointer-events:none}
.saving{display:inline-block;background:var(--ink);color:var(--sun);font-size:.72rem;font-weight:800;
  border-radius:3px;padding:.08rem .4rem;margin-top:.25rem}
.ladder-caveat{margin-top:1rem;font-size:.92rem;font-weight:600;color:var(--ink);
  background:var(--concreto);border-left:5px solid var(--sun-deep);border-radius:8px;padding:.9rem 1.1rem}

/* ---------- booking widget ---------- */
.booking{background:#fff;border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--shadow-lift);padding:1.15rem 1.2rem 1.3rem;
  margin-top:-3.4rem;position:relative;z-index:6}
.booking-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end}
.bfield{display:flex;flex-direction:column;gap:.28rem;min-width:0}
.bfield label{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.bfield input,.bfield select{font:inherit;font-size:.94rem;padding:.6rem .7rem;border:2px solid var(--line);
  border-radius:var(--r);background:#fff;color:var(--ink);width:100%}
.bfield input:focus,.bfield select:focus{border-color:var(--teal-ink);outline:none;box-shadow:0 0 0 3px rgba(20,111,102,.18)}
.bfield .hint{font-size:.72rem;color:var(--cinza)}
.booking .btn{width:100%}
.booking-note{margin:.9rem 0 0;font-size:.86rem;color:var(--cinza)}
.booking-note strong{color:var(--ink)}
@media (max-width:820px){.booking{margin-top:1.4rem}}

/* ---------- self check-in steps ---------- */
.steps{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:1.9rem;counter-reset:s}
.step{counter-increment:s;background:rgba(255,255,255,.06);border:1px solid var(--line-dark);border-radius:var(--r);padding:1.3rem}
.step::before{content:counter(s);display:inline-flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;border-radius:var(--r);background:var(--teal);color:var(--ink);
  font-family:var(--disp);font-size:1.2rem;font-weight:800;margin-bottom:.7rem}
.step h3{margin:0 0 .35rem;color:#fff}
.step p{margin:0;font-size:.94rem;color:rgba(255,255,255,.86)}
.door-art{margin:0}
.door-art svg{width:100%;height:auto;display:block;border-radius:var(--r)}

/* ---------- beach room grid ---------- */
.rooms{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:1.8rem}
.room{background:#fff;border:2px solid var(--ink);border-radius:var(--r);padding:1.1rem 1.15rem;
  display:flex;flex-direction:column;gap:.3rem;transition:transform .22s ease,background-color .22s ease}
.room:hover{transform:translateY(-3px);background:var(--concreto)}
.room .no{font-family:var(--disp);font-size:.9rem;font-weight:800;color:var(--teal-ink);letter-spacing:.08em}
.room b{font-family:var(--disp);font-size:1.16rem;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:-.01em}
.room span{font-size:.85rem;color:var(--cinza)}
.room .fix{background:var(--sun);color:var(--ink);font-size:.7rem;font-weight:800;border-radius:3px;
  padding:.08rem .4rem;align-self:flex-start;margin-top:.2rem}

/* ---------- amenity grid ---------- */
.amen{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:1.9rem}
.am{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:1.2rem;box-shadow:var(--shadow)}
.am .ico{width:2.6rem;height:2.6rem;border-radius:var(--r);background:var(--concreto);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:.7rem}
.am .ico svg{width:1.4rem;height:1.4rem;stroke:var(--ink);fill:none;stroke-width:1.9}
.am h3{margin:0 0 .3rem;font-size:1rem}
.am p{margin:0;font-size:.9rem}

/* ---------- lockers drawing ---------- */
.locker-art{margin:0;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:1rem}
.locker-art svg{width:100%;height:auto;display:block}

/* ---------- two-building block ---------- */
.buildings{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:1.8rem}
.building{background:#fff;border:2px solid var(--ink);border-radius:var(--r);padding:1.4rem;display:flex;flex-direction:column;gap:.6rem}
.building .num{font-family:var(--disp);font-size:2.6rem;font-weight:800;line-height:1;color:var(--teal-ink)}
.building h3{margin:0}
.building dl{margin:0;display:grid;gap:.25rem;font-size:.92rem}
.building dt{font-weight:800;color:var(--ink)}
.building dd{margin:0}

/* ---------- testimonials ---------- */
.quotes{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:1.8rem}
.quote{background:#fff;border:1px dashed #B58412;border-radius:var(--r);padding:1.3rem}
.quote blockquote{margin:0 0 .7rem;font-size:1rem;color:var(--ink)}
.quote figcaption{font-size:.86rem;color:var(--cinza);font-weight:700}
.quote .flag{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}

/* ---------- FAQ ---------- */
.faq{max-width:62rem;margin-inline:auto;display:grid;gap:.5rem}
.faq details{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:0 1.15rem}
.faq summary{cursor:pointer;list-style:none;padding:1rem 2rem 1rem 0;font-weight:800;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.15rem;top:1.35rem;width:9px;height:9px;
  border-right:2.4px solid var(--teal-ink);border-bottom:2.4px solid var(--teal-ink);
  transform:rotate(45deg);transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details > *:not(summary){padding-bottom:1rem;margin-top:-.25rem}
.faq details[open] > *:not(summary){animation:fadein .26s ease}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- long-stay enquiry form ---------- */
.form-card{background:rgba(255,255,255,.9);border:2px solid var(--ink);border-radius:var(--r);padding:clamp(1.2rem,3vw,1.8rem)}
.form-grid{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ffield{display:flex;flex-direction:column;gap:.28rem;min-width:0}
.ffield.full{grid-column:1 / -1}
.ffield label{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.ffield input,.ffield select,.ffield textarea{font:inherit;font-size:.95rem;padding:.6rem .75rem;
  border:2px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);width:100%}
.ffield textarea{min-height:5.5rem;resize:vertical}
.ffield input:focus,.ffield select:focus,.ffield textarea:focus{border-color:var(--ink);outline:none;
  box-shadow:0 0 0 3px rgba(21,24,29,.14)}
.consent{display:flex;gap:.7rem;align-items:flex-start;margin-top:.9rem;font-size:.88rem;color:var(--ink)}
.consent input{margin-top:.28rem;width:1.15rem;height:1.15rem;accent-color:var(--ink);flex:0 0 auto}

/* ---------- 360 tour placeholder ---------- */
.tour{position:relative;border-radius:var(--r);overflow:hidden;border:2px solid var(--ink)}
.tour img{width:100%;aspect-ratio:16/9;object-fit:cover}
.tour .overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.8rem;background:rgba(21,24,29,.55);color:#fff;text-align:center;padding:1.2rem}
.tour .overlay b{font-family:var(--disp);font-size:clamp(1.2rem,3vw,2rem);text-transform:uppercase;letter-spacing:-.02em}
.tour .overlay p{margin:0;max-width:46ch;font-size:.92rem;color:rgba(255,255,255,.9)}

/* ---------- footer ---------- */
.site-foot{background:var(--g-footer);color:rgba(255,255,255,.85);padding-block:3rem 6.4rem;font-size:.94rem}
.site-foot h4{color:#fff;font-family:var(--disp);font-size:1rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.6rem}
.site-foot a{color:var(--teal-bright);text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.32rem}
.foot-wa{background:#1C8C4B;color:#fff;border-radius:var(--r);padding:1.1rem 1.2rem;margin-top:1.4rem;
  display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.foot-wa b{font-family:var(--disp);text-transform:uppercase;font-size:1.05rem}
.foot-wa .btn{background:#fff;color:#0F5C31}
.foot-bottom{border-top:1px solid var(--line-dark);margin-top:2rem;padding-top:1.2rem;display:flex;
  gap:1rem;flex-wrap:wrap;justify-content:space-between;font-size:.84rem;color:rgba(255,255,255,.68)}
.mock-note{background:rgba(255,255,255,.06);border:1px dashed rgba(255,182,39,.55);border-radius:8px;
  padding:.85rem 1.05rem;margin-top:1.5rem;font-size:.85rem;color:rgba(255,255,255,.9)}

/* ---------- mobile bar + WhatsApp ---------- */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:88;display:none;background:var(--ink);
  box-shadow:0 -6px 20px rgba(21,24,29,.3);padding-bottom:env(safe-area-inset-bottom)}
.mobile-bar a{flex:1;min-height:56px;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:.94rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#fff;
  text-decoration:none;border-right:1px solid var(--line-dark)}
.mobile-bar a:first-child{background:#1C8C4B}
.mobile-bar a:last-child{border-right:0;background:var(--teal);color:var(--ink)}
@media (max-width:820px){
  .mobile-bar{display:flex}
  .site-foot{padding-bottom:8.2rem}
}

/* ---------- LGPD ---------- */
.lgpd{position:fixed;left:0;right:0;bottom:0;z-index:120;background:#fff;border-top:4px solid var(--teal);
  box-shadow:0 -12px 36px rgba(21,24,29,.26);padding:1.1rem 0 1.25rem;transform:translateY(102%);
  transition:transform .38s cubic-bezier(.22,.7,.3,1)}
.lgpd.show{transform:none}
.lgpd h2{font-size:1.06rem;margin-bottom:.35rem}
.lgpd p{font-size:.9rem;margin-bottom:.8rem;max-width:80ch}
.lgpd-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.lgpd-prefs{margin-top:1rem;border-top:1px solid var(--line-soft);padding-top:.9rem}
.lgpd-row{display:flex;gap:.8rem;align-items:flex-start;padding:.55rem 0;border-bottom:1px solid var(--line-soft)}
.lgpd-row:last-child{border-bottom:0}
.lgpd-row input{margin-top:.35rem;width:1.15rem;height:1.15rem;accent-color:var(--teal-ink)}
.lgpd-row b{display:block;font-size:.95rem;color:var(--ink)}
.lgpd-row small{font-size:.85rem;color:var(--cinza)}
@media (max-width:820px){.lgpd{padding-bottom:5.2rem}}

/* ---------- page heads / prose ---------- */
.page-head{background:var(--ink);color:rgba(255,255,255,.88);padding-block:clamp(2.2rem,5vw,3.4rem) clamp(1.4rem,3.5vw,2rem)}
.page-head h1{color:#fff}
.page-head .lede{color:rgba(255,255,255,.88)}
.crumbs{font-size:.84rem;color:rgba(255,255,255,.7);margin-bottom:.7rem}
.crumbs a{color:var(--teal-bright);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.prose{max-width:72ch}
.prose h2{margin-top:2.2rem}
.prose ul{padding-left:1.15rem}
.prose li{margin-bottom:.4rem}

@media (max-width:560px){
  body{font-size:16px}
  .utility{font-size:.75rem}
  .card{padding:1.1rem}
  .nights-out{font-size:1.3rem;min-width:4.6rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rev{opacity:1;transform:none}
}
@media print{
  .utility,.site-head,.mobile-bar,.lgpd,.booking{display:none !important}
  body{font-size:11pt;color:#000;background:#fff}
  .hero{min-height:auto;color:#000}
  .hero-scrim,.hero-scrim2{display:none}
}

/* ---------------------------------------------------- responsive tables */
/* A data table with several prose columns has a min-content width far
   wider than a phone. Without its own scroll box it widens the whole
   document and the page scrolls sideways. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl-scroll>table{margin:0}

/* ------------------------------------------------- overflow guard
   Nothing may widen the document. Form controls and replaced elements
   cap at their container; flex/grid children get min-width:0 so they
   are allowed to shrink below their content width; and the header's
   right-hand cluster wraps on a phone rather than pushing the page
   sideways. */
input,select,textarea,img,svg,video,iframe{max-width:100%}
.form,.mapwrap,.split__t,.hdr__r,.head-right{min-width:0}
.form,.mapwrap,.split__t{max-width:100%}
@media (max-width:820px){
  .hdr__r,.head-right{flex-wrap:wrap;justify-content:flex-end;row-gap:.4rem}
}

/* ------------------------------------------- legal-header-layout
   The LGPD privacy page is generated from a shared template and uses
   .hdr__cta for its header cluster. Most stylesheets in this batch define
   .hdr__r or .head-cta instead, so on those sites the cluster had no
   layout at all - block flow, and on a long brand name it ran off the
   screen. This defines it, keeps the back-link on one line, and lets the
   row wrap before anything overflows. */
.hdr__cta,.head-cta{display:flex;align-items:center;gap:.6rem;
  flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:100%}
.hdr__cta .btn,.head-cta .btn{white-space:nowrap}
.hdr__cta .lang,.head-cta .lang{display:inline-flex;gap:.35rem;flex:0 0 auto}
@media (max-width:560px){
  .hdr__in,.head-in{flex-wrap:wrap;row-gap:.55rem}
  .hdr__in>.brand,.head-in>.brand{min-width:0;max-width:100%}
  .brand__n{white-space:normal;overflow-wrap:anywhere}
  .hdr__cta,.head-cta{width:100%;justify-content:flex-start}
}