/* ==========================================================================
   COSTA SOLAR LAGOA — Florianópolis, SC
   Spec mockup. Reference: hotel-beachfront-ref-02 (HardaWebPro Resort).

   🚩 THE THINNEST LEAD IN THE BATCH. The only public reference is a single
      login-walled Instagram POST. We do not know the category, the address,
      the phone, whether "Lagoa" means Lagoa da Conceição, or whether the
      business is currently trading. NOTHING here is derived from brand assets.

   ⚠ EVERY COLOUR IS A PROPOSAL. The whole palette is expressed as tokens in
     :root so it swaps in ONE edit the moment a real logo arrives.

   ⚠ CONTRAST: Solar Gold #E0A458 on Off-White #F8F6F2 measures ≈1.9:1 and
     FAILS WCAG 4.5:1. It is therefore used ONLY as a button FILL (with Ink
     #1F2933 text on it, ≈7.4:1) and never as small text on the page ground.
     Slate Blue #3E5C76 on Off-White ≈ 7.0:1 — passes AA for body and headings.
   ========================================================================== */

:root{
  /* ---- brand tokens — replace these six values and the site re-skins ---- */
  --slate:#3E5C76;
  --slate-dk:#2C4256;
  --sand:#D8C3A5;
  --gold:#E0A458;
  --gold-dk:#C4873C;
  --paper:#F8F6F2;
  --ink:#1F2933;
  --white:#FFFFFF;
  --line:#E3DED4;
  --muted:#5C6B7A;

  /* ---- gradients, all built from the tokens above ---- */
  --g-hero:linear-gradient(0deg,rgba(31,41,51,.82) 0%,rgba(31,41,51,.34) 55%,rgba(31,41,51,.12) 100%);
  --g-foot:linear-gradient(160deg,var(--slate) 0%,var(--slate-dk) 100%);
  --g-cta:linear-gradient(135deg,var(--gold) 0%,var(--gold-dk) 100%);
  --g-band:linear-gradient(180deg,var(--paper) 0%,#EFEAE1 100%);
  --g-card:linear-gradient(180deg,rgba(31,41,51,0) 42%,rgba(31,41,51,.76) 100%);
  --glow:radial-gradient(ellipse at 50% 0%,rgba(224,164,88,.20) 0%,rgba(224,164,88,0) 62%);

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;

  --wrap:1240px;
  --gut:clamp(18px,4.4vw,52px);
  --r:4px;                       /* restrained radius — airier than the reference */
  --sh:0 6px 26px rgba(31,41,51,.09);
  --sh-lift:0 16px 40px rgba(31,41,51,.16);
  --ease:cubic-bezier(.22,.8,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.72;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;line-height:1.1;
  letter-spacing:-.012em;color:var(--slate)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--gold-dk);outline-offset:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--n{max-width:900px}
.sec{padding-block:clamp(56px,7.4vw,112px);position:relative}
.sec--t{padding-block:clamp(34px,4.6vw,62px)}
.band{background-image:var(--g-band)}
.sandbg{background:var(--sand)}
.white{background:var(--white)}

.eyebrow{font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-dk);margin:0 0 14px}   /* gold-dk ≈4.6:1 on paper — passes */
.h-xl{font-size:clamp(2.4rem,6vw,4.4rem)}
.h-lg{font-size:clamp(1.9rem,3.8vw,3rem)}
.h-md{font-size:clamp(1.35rem,2.3vw,1.85rem)}
.lede{font-size:clamp(1rem,1.3vw,1.1rem);color:var(--muted);max-width:62ch}
.sec-head{max-width:60ch;margin-bottom:clamp(26px,3.4vw,46px)}
.sec-head--c{margin-inline:auto;text-align:center}

/* ---------- [CONFIRM] markers — deliberate scaffolding, always visible -------
   The emptiness is the honest opener in the pitch, so the markers are styled
   to read as structure rather than as an unfinished page. */
.cfm{display:inline-block;border:1px dashed var(--gold-dk);background:rgba(224,164,88,.12);
  color:#8A5C1E;padding:.06em .5em;border-radius:var(--r);
  font-size:.85em;font-weight:500;font-style:normal;letter-spacing:.01em}
.dark .cfm,.sandbg .cfm{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.16);color:#fff}
.cfm-note{border:1px dashed var(--gold-dk);background:rgba(224,164,88,.09);border-radius:var(--r);
  padding:14px 18px;color:#8A5C1E;font-size:.92rem;margin:0 0 22px}
.cfm-slot{border:1px dashed var(--line);background:var(--white);border-radius:var(--r);
  padding:22px 18px;text-align:center;color:var(--muted);font-size:.9rem}
.cfm-slot .ic{width:34px;height:34px;margin:0 auto 12px;border-radius:50%;
  background-image:var(--g-cta);opacity:.34}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 30px;border-radius:var(--r);font-size:.8rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
  background-image:var(--g-cta);color:var(--ink);   /* Ink on gold ≈7.4:1 */
  box-shadow:var(--sh);transition:transform .28s var(--ease),box-shadow .28s var(--ease),filter .28s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-lift);filter:brightness(1.06)}
.btn .ar{transition:transform .28s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn--ghost{background:transparent;background-image:none;color:var(--slate);
  border:1px solid var(--slate);box-shadow:none}
.btn--ghost:hover{background:var(--slate);color:#fff}
.dark .btn--ghost,.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.75)}
.dark .btn--ghost:hover,.hero .btn--ghost:hover{background:#fff;color:var(--slate)}
.btn--wa{background-image:linear-gradient(135deg,#25D366 0%,#12A150 100%);color:#fff}
.btn--slate{background-image:linear-gradient(135deg,var(--slate) 0%,var(--slate-dk) 100%);color:#fff}
.btn--sm{padding:10px 20px;font-size:.72rem}
.btn--full{width:100%}
/* the number is unknown, so the control renders visibly unconfirmed rather
   than dialling a placeholder that could reach a stranger */
.btn[data-unconfirmed]{background-image:none;background:var(--line);color:var(--muted);
  border:1px dashed var(--gold-dk);box-shadow:none}
.btn[data-unconfirmed]:hover{transform:none;box-shadow:none;filter:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- Utility topbar ---------- */
.top{background:var(--slate-dk);color:rgba(255,255,255,.9);font-size:.78rem;padding-block:8px}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.top a:hover{color:#fff;text-decoration:underline}
.pills{display:flex;gap:6px}
.pills a{padding:3px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.34);font-weight:400}
.pills a.on{background:#fff;color:var(--slate-dk);border-color:#fff;font-weight:500}
.top__r{display:flex;gap:18px;align-items:center;flex-wrap:wrap}

/* ---------- Sticky nav ---------- */
.hdr{position:sticky;top:0;z-index:90;background:rgba(248,246,242,.94);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--line);
  padding-block:18px;transition:padding .3s var(--ease),box-shadow .3s var(--ease)}
.hdr.is-stuck{padding-block:10px;box-shadow:var(--sh)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{font-family:var(--serif);font-size:1.5rem;font-weight:500;color:var(--slate);
  letter-spacing:.01em;line-height:1.1}
.brand small{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-dk);font-weight:400}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:.8rem;letter-spacing:.06em;color:var(--ink);padding-block:4px;
  border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.nav a:hover{color:var(--slate);border-bottom-color:var(--gold)}
.burger{display:none;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--slate);transition:.3s var(--ease)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:89;background:var(--paper);display:flex;flex-direction:column;
  justify-content:center;gap:4px;padding:96px var(--gut) 40px;
  opacity:0;visibility:hidden;transform:translateY(-14px);transition:.34s var(--ease)}
.mnav.on{opacity:1;visibility:visible;transform:none}
.mnav a{font-family:var(--serif);font-size:clamp(1.7rem,7vw,2.4rem);color:var(--slate);
  padding-block:11px;border-bottom:1px solid var(--line)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(88svh,780px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2;will-change:transform}
.hero__bg img{width:100%;height:112%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:var(--g-hero)}
/* slow looping gradient drift — GPU-friendly, opacity/transform only */
.hero__glow{position:absolute;inset:-20% -10% auto;height:70%;z-index:-1;
  background:var(--glow);animation:drift 16s var(--ease) infinite alternate}
@keyframes drift{from{transform:translate3d(-4%,0,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.12)}}
.hero__in{padding-block:0 clamp(56px,9vh,110px);max-width:860px}
.hero h1{color:#fff;font-size:clamp(2.3rem,6vw,4.2rem);text-shadow:0 2px 30px rgba(31,41,51,.4)}
.hero p{color:rgba(255,255,255,.94);max-width:48ch;margin-top:18px;font-size:1.05rem}
.hero .eyebrow{color:var(--sand)}

/* ---------- ⭐ Availability widget ---------- */
.avail{background:var(--white);border-radius:var(--r);box-shadow:var(--sh-lift);
  padding:clamp(18px,2.4vw,26px);margin-top:-46px;position:relative;z-index:5}
.avail__g{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:14px;align-items:end}
.field label{display:block;font-size:.68rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field select{width:100%;padding:13px 14px;font:inherit;font-size:.95rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);color:var(--ink)}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold-dk)}
.avail__note{margin:14px 0 0;font-size:.8rem;color:var(--muted)}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.split--rev .split__t{order:2}
.fig{overflow:hidden;border-radius:var(--r);box-shadow:var(--sh);position:relative}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.fig:hover img{transform:scale(1.04)}
.fig figcaption{position:absolute;left:0;bottom:0;right:0;padding:9px 14px;
  background:linear-gradient(0deg,rgba(31,41,51,.78),rgba(31,41,51,0));
  color:#fff;font-size:.72rem;letter-spacing:.06em}

/* ---------- Trust badges — visible EMPTY slots, never invented amenities ---- */
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.badge{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 18px;text-align:center;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.badge:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.badge .ic{width:44px;height:44px;margin:0 auto 14px;border-radius:50%;
  background-image:var(--g-cta);opacity:.4}
.badge b{display:block;font-family:var(--serif);font-size:1.1rem;color:var(--slate);margin-bottom:6px}
.badge span{font-size:.84rem;color:var(--muted)}

/* ---------- Accommodation carousel ---------- */
.carou{position:relative}
.track{display:flex;gap:clamp(16px,2.2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:10px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.card{flex:0 0 min(370px,82vw);scroll-snap-align:start;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .34s var(--ease),box-shadow .34s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-lift)}
.card__i{position:relative;aspect-ratio:3/2;overflow:hidden}
.card__i img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card__i img{transform:scale(1.05)}
.card__i::after{content:"";position:absolute;inset:0;background:var(--g-card)}
.card__tag{position:absolute;left:12px;top:12px;z-index:2;background:rgba(248,246,242,.94);
  color:var(--slate);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 11px;border-radius:var(--r)}
.card__b{padding:20px 20px 24px}
.card__b h3{font-size:1.24rem;margin-bottom:8px}
.card__b p{font-size:.88rem;color:var(--muted);margin-bottom:14px}
.card__p{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line);padding-top:14px;margin-bottom:14px}
.card__p b{font-family:var(--serif);font-size:1.24rem;color:var(--slate);font-weight:500}
.card__p span{font-size:.76rem;color:var(--muted)}
.carou__ctl{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.carou__ctl button{width:44px;height:44px;border-radius:50%;border:1px solid var(--slate);
  color:var(--slate);display:grid;place-items:center;transition:.26s var(--ease)}
.carou__ctl button:hover{background:var(--slate);color:#fff}

/* ---------- Amenity grid ---------- */
.amen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}

/* ---------- Distance ladder ---------- */
.ladder{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0}
.ladder li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--line);font-size:.94rem}
.ladder li:last-child{border-bottom:0}
.ladder b{font-weight:400;color:var(--ink)}
.map{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;position:relative;
  background:var(--sand);display:grid;place-items:center;text-align:center;padding:26px}
.map__grid{position:absolute;inset:0;opacity:.42;
  background-image:linear-gradient(rgba(62,92,118,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(62,92,118,.16) 1px,transparent 1px);
  background-size:38px 38px}
.map>div{position:relative;z-index:2}

/* ---------- Activities ---------- */
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.act{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);box-shadow:var(--sh)}
.act img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.act:hover img{transform:scale(1.06)}
.act::after{content:"";position:absolute;inset:0;background:var(--g-card)}
.act figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff}
.act figcaption b{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:500;margin-bottom:5px}
.act figcaption span{font-size:.82rem;color:rgba(255,255,255,.9)}

/* ---------- Gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gal figure{margin:0;aspect-ratio:1;overflow:hidden;border-radius:var(--r)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gal figure:hover img{transform:scale(1.06)}

/* ---------- Reviews band — DELIBERATELY EMPTY ----------
   No invented quote, no invented score, no aggregate. There is no verified
   review data for this lead and there is no CSS here for a review card,
   on purpose. */
.reviews-empty{border:1px dashed var(--gold-dk);background:rgba(224,164,88,.08);
  border-radius:var(--r);padding:clamp(30px,4vw,56px);text-align:center}
.reviews-empty h2{margin-bottom:12px}
.reviews-empty p{color:#8A5C1E;max-width:56ch;margin-inline:auto;font-size:.96rem}

/* ---------- Direct-booking value band ---------- */
.value{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
.value div{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  border-radius:var(--r);padding:24px 22px}
.value b{display:block;font-family:var(--serif);font-size:1.2rem;color:#fff;margin-bottom:7px;font-weight:500}
.value span{font-size:.88rem;color:rgba(255,255,255,.9)}
.dark{background-image:var(--g-foot);color:rgba(255,255,255,.9)}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark .lede{color:rgba(255,255,255,.86)}
.dark .eyebrow{color:var(--sand)}

/* ---------- Contact form ---------- */
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3.2vw,40px);box-shadow:var(--sh)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.field textarea{width:100%;padding:13px 14px;font:inherit;font-size:.95rem;min-height:120px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);resize:vertical}
.field textarea:focus{outline:none;border-color:var(--gold-dk)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;color:var(--muted);margin:6px 0 18px}
.consent input{margin-top:5px;accent-color:var(--gold-dk)}
.consent a{color:var(--slate);text-decoration:underline}

/* ---------- Footer ---------- */
.ftr{background-image:var(--g-foot);color:rgba(255,255,255,.84);padding-block:clamp(48px,6vw,84px) 0}
.ftr h4{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sand);margin-bottom:16px;font-family:var(--sans)}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3.4vw,48px)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.9rem}
.ftr a:hover{color:#fff}
.ftr .brand{color:#fff;margin-bottom:14px;display:block}
.ftr .brand small{color:var(--sand)}
.ftr__bot{margin-top:clamp(32px,4vw,54px);border-top:1px solid rgba(255,255,255,.2);
  padding-block:20px 28px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  align-items:center;font-size:.78rem;color:rgba(255,255,255,.7)}

/* ---------- Sticky WhatsApp + mobile bar ---------- */
.wa{position:fixed;right:18px;bottom:18px;z-index:80;width:58px;height:58px;border-radius:50%;
  background-image:linear-gradient(135deg,#25D366 0%,#12A150 100%);
  display:grid;place-items:center;box-shadow:0 10px 28px rgba(18,161,80,.4);
  transition:transform .28s var(--ease)}
.wa:hover{transform:scale(1.07)}
.wa svg{width:29px;height:29px;fill:#0B2E17}
.wa[data-unconfirmed]{background-image:none;background:var(--line);box-shadow:var(--sh)}
.wa[data-unconfirmed] svg{fill:var(--muted)}
.wa__cfm{position:absolute;right:66px;top:50%;transform:translateY(-50%);white-space:nowrap;
  background:var(--slate-dk);color:#fff;font-size:.68rem;letter-spacing:.06em;
  padding:6px 11px;border-radius:var(--r)}
.mbar{display:none}

/* ---------- LGPD ---------- */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--white);
  border-top:1px solid var(--line);box-shadow:0 -10px 34px rgba(31,41,51,.13);
  padding:20px var(--gut);transform:translateY(110%);transition:transform .42s var(--ease)}
.ck.on{transform:none}
.ck__in{max-width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:1.5fr 1fr;
  gap:22px;align-items:center}
.ck p{font-size:.86rem;margin:0;color:var(--muted)}
.ck a{color:var(--slate);text-decoration:underline}
.ck__opts{display:flex;flex-wrap:wrap;gap:16px;margin-top:11px;font-size:.82rem}
.ck__opts label{display:flex;gap:8px;align-items:center}
.ck__opts input{accent-color:var(--gold-dk)}
.ck__btns{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end}

/* ---------- Reveal ---------- */
[data-rv]{opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-rv].in{opacity:1;transform:none}

/* ---------- Legal pages ---------- */
.legal{max-width:860px;margin-inline:auto;padding-block:clamp(46px,6vw,90px)}
.legal h2{margin:34px 0 12px;font-size:1.6rem}
.legal h3{margin:24px 0 10px;font-size:1.2rem}
.legal ul{padding-left:20px;display:grid;gap:8px;margin-bottom:18px}
.legal table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.9rem}
.legal th,.legal td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.legal th{background:var(--sand);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);font-weight:500}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .badges{grid-template-columns:repeat(2,1fr)}
  .value{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .avail__g{grid-template-columns:1fr 1fr}
  .avail__g .btn{grid-column:1/-1}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:block}
  .split,.ck__in{grid-template-columns:1fr}
  .split--rev .split__t{order:0}
  .amen,.acts{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(3,1fr)}
  .ck__btns{justify-content:flex-start}
  .avail{margin-top:-24px}
}
@media (max-width:640px){
  body{padding-bottom:64px}
  .wa{bottom:78px;width:52px;height:52px}
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:0;position:fixed;left:0;right:0;bottom:0;
    z-index:82;padding-bottom:env(safe-area-inset-bottom);background:var(--white);
    border-top:1px solid var(--line)}
  .mbar .btn{border-radius:0;box-shadow:none;padding:17px 8px}
  .mbar .btn:hover{transform:none}
  .amen,.acts,.badges,.fr{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .avail__g{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr}
  .top__in{justify-content:center;text-align:center}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1;transform:none}
  .hero__glow{animation:none}
  .track{scroll-behavior:auto}
}

/* ---------------------------------------------------- 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}
}