/* =====================================================================
   Princess Biquinis Floripa — spec mockup stylesheet
   Campeche · Centro · Florianopolis, SC

   STATUS: speculative pitch build. Nothing here is approved, launched or
   pointed at a domain. Every business fact carries a visible [CONFIRM].

   ---------------------------------------------------------------------
   PALETTE (from PROMPT.md — [CONFIRM against the logo, and against the
   brand owner guidelines if the shops are a licensed retailer])
   ---------------------------------------------------------------------
     Salt White   #FBFBF9   page ground
     Deep Water   #123A57   base type, dark bands, footer
     Deep Water 2 #0B2434   footer gradient stop
     Hot Coral    #FF5A5F   primary accent
     Sun Gold     #FFC24A   secondary accent
     Palm         #2E7D63   fit + sizing sections, in-stock states
     Sand         #EFE3D2   alternate ground, card fills
     Shell        #F6C9C2   soft ground for store + community blocks

   ---------------------------------------------------------------------
   MEASURED CONTRAST (WCAG 2.1 / eMAG — every pair actually computed,
   failures recorded rather than hidden)
   ---------------------------------------------------------------------
     Deep Water  on Salt White ......... 11.46  PASS AAA
     Deep Water  on Sand ...............  9.38  PASS AAA
     Deep Water  on Shell ..............  7.95  PASS AAA
     Deep Water  on Sun Gold ...........  7.39  PASS AAA  (gold chips OK)
     Salt White  on Deep Water ......... 11.46  PASS AAA
     Salt White  on Deep Water 2 ....... 15.40  PASS AAA
     Salt White  on Palm ...............  4.79  PASS AA (normal)
     Palm        on Salt White .........  4.79  PASS AA (normal)

   FAILURES FOUND, AND WHAT IS USED INSTEAD
     Hot Coral #FF5A5F on Salt White ...  2.95  FAIL
     Hot Coral #FF5A5F on Sand .........  2.41  FAIL
     Hot Coral #FF5A5F on Shell ........  2.04  FAIL
     Salt White on Hot Coral ...........  3.05  FAIL (a solid coral button
                                                 with white text is unsafe)
     Deep Water on Hot Coral ...........  3.89  FAIL for body; passes only
                                                 as large text (18.66px bold)
       -> --coral-ink  #B92C31  on Salt White  5.85  PASS AA
       -> --coral-ink  #B92C31  on Sand        4.78  PASS AA
       -> Salt White on --coral-ink            5.85  PASS AA
       Hot Coral is therefore DECORATIVE ONLY: gradients, rules and chip
       fills carrying Deep Water text at display size. All coral TEXT and
       all solid coral BUTTONS use --coral-ink.

     Sun Gold #FFC24A on Salt White ....  1.55  FAIL (badly)
     Sun Gold #FFC24A on Sand ..........  1.27  FAIL
       -> --gold-ink  #7A5010  on Salt White   6.80  PASS AA
       -> --gold-ink  #7A5010  on Sand         5.56  PASS AA
       Sun Gold is a GROUND ONLY (Deep Water on it = 7.39), never type.

     Palm #2E7D63 on Sand ..............  3.92  FAIL
       -> --palm-ink  #1E5140  on Sand         7.19  PASS AAA
       -> --palm-ink  #1E5140  on Salt White   8.79  PASS AAA

   NON-COLOUR RULE (brief, Accessibility): the coverage scale and the
   bust-support scale must never be conveyed by colour or dots alone.
   Every scale in this build carries a text value beside the bar, and the
   bar itself is aria-hidden.
   ===================================================================== */

/* ---------- tokens ---------- */
:root{
  --salt:#FBFBF9;
  --deep:#123A57;
  --deep2:#0B2434;
  --coral:#FF5A5F;
  --coral-ink:#B92C31;
  --coral-ink-2:#C8353A;
  --gold:#FFC24A;
  --gold-ink:#7A5010;
  --palm:#2E7D63;
  --palm-ink:#1E5140;
  --sand:#EFE3D2;
  --shell:#F6C9C2;
  --line:rgba(18,58,87,.14);
  --line-soft:rgba(18,58,87,.08);
  --shadow:0 2px 6px rgba(11,36,52,.06),0 12px 30px rgba(11,36,52,.07);
  --shadow-lift:0 6px 14px rgba(11,36,52,.10),0 24px 54px rgba(11,36,52,.13);
  --r:16px;
  --r-lg:26px;
  --maxw:1180px;
  --sans:"Outfit","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --g-section:linear-gradient(180deg,#FBFBF9 0%,#EFE3D2 100%);
  --g-dark:linear-gradient(160deg,#123A57 0%,#0B2434 100%);
  --g-cta:linear-gradient(135deg,#B92C31 0%,#C8353A 100%);
  --g-water:linear-gradient(150deg,#123A57 0%,#1E5140 58%,#2E7D63 100%);
  --g-hot:linear-gradient(90deg,#FF5A5F 0%,#FFC24A 100%);
}

*,*::before,*::after{box-sizing:border-box}
/* the fit finder hides non-matching shape cards with the hidden attribute,
   and .shape is display:flex, so the UA default needs reinforcing */
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--salt);color:var(--deep);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  font-weight:400;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--coral-ink);text-underline-offset:3px}
h1,h2,h3,h4{line-height:1.12;margin:0 0 .5em;font-weight:600;letter-spacing:-.02em}
h1{font-size:clamp(2.15rem,6.2vw,4.1rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.16rem,2vw,1.42rem)}
p{margin:0 0 1em}
.wrap{width:min(100% - 2.4rem,var(--maxw));margin-inline:auto}
section{padding-block:clamp(3.6rem,8vw,6.4rem)}
.eyebrow{
  font-size:.775rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--palm-ink);margin:0 0 .85rem;
}
.eyebrow.gold{color:var(--gold-ink)}
.eyebrow.coral{color:var(--coral-ink)}
.lede{font-size:clamp(1.02rem,1.7vw,1.19rem);max-width:64ch;color:rgba(18,58,87,.86)}
.serif{font-family:var(--serif);font-style:italic;font-weight:500}
.center{text-align:center}
.center .lede{margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--deep);color:#fff;padding:.7rem 1.1rem;z-index:200}
.skip:focus{left:.6rem;top:.6rem}
:focus-visible{outline:3px solid var(--coral-ink);outline-offset:3px;border-radius:4px}

/* ---------- confirm markers ---------- */
.cfm{
  display:inline-block;background:#FFF0C4;color:var(--gold-ink);
  border:1px dashed #C08A18;border-radius:5px;
  padding:.04em .38em;font-size:.86em;font-weight:600;
}
.cfm-block{
  background:#FFF6E0;border:1px dashed #C08A18;border-left-width:5px;
  border-radius:10px;padding:.95rem 1.15rem;color:#5C4208;
  font-size:.95rem;margin:0 0 1.15rem;
}
.warn-block{
  background:#FFF1F0;border:1px solid rgba(185,44,49,.35);border-left:5px solid var(--coral-ink);
  border-radius:12px;padding:1.05rem 1.25rem;color:#6B1A1E;font-size:.96rem;margin:0 0 1.15rem;
}
.warn-block strong{color:#541417}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.86rem 1.5rem;border-radius:999px;border:1.5px solid transparent;
  font:inherit;font-size:1rem;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,color .22s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--g-cta);color:#fff;box-shadow:0 6px 18px rgba(185,44,49,.28)}
.btn-primary:hover{box-shadow:0 10px 26px rgba(185,44,49,.36)}
.btn-ghost{background:transparent;color:var(--deep);border-color:rgba(18,58,87,.4)}
.btn-ghost:hover{background:rgba(18,58,87,.06)}
.btn-ghost-light{background:rgba(251,251,249,.14);color:#fff;border-color:rgba(255,255,255,.6)}
.btn-ghost-light:hover{background:rgba(251,251,249,.24)}
.btn-wa{background:#1C8C4B;color:#fff}
.btn-wa:hover{background:#166F3C}
.btn-sm{padding:.6rem 1.1rem;font-size:.92rem}
.btn .ar{transition:transform .22s ease}
.btn:hover .ar{transform:translateX(4px)}
[data-unconfirmed]{opacity:.62;cursor:not-allowed;filter:grayscale(.4)}

/* ---------- topbar ---------- */
.topbar{
  background:var(--g-dark);color:rgba(251,251,249,.94);
  font-size:.85rem;padding:.5rem 0;position:relative;z-index:60;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.topbar a{color:#fff}
.tb-left{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.tb-right{display:flex;align-items:center;gap:.8rem}
.status{display:inline-flex;align-items:center;gap:.4rem;font-weight:600}
.status .dot{width:.52rem;height:.52rem;border-radius:50%;background:#7FD8A4;flex:0 0 auto}
.status.shut .dot{background:#FF9B9E}
.lang{display:inline-flex;gap:.1rem;align-items:center}
.lang a{
  padding:.16rem .48rem;border-radius:999px;text-decoration:none;font-weight:600;
  font-size:.8rem;color:rgba(251,251,249,.78);
}
.lang a.on{background:rgba(251,251,249,.94);color:var(--deep)}
.lang a:hover{color:#fff}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:70;background:rgba(251,251,249,.92);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line-soft);
  transition:padding .28s ease,box-shadow .28s ease,background-color .28s ease;
  padding-block:.85rem;
}
.site-head.condensed{padding-block:.42rem;box-shadow:0 6px 22px rgba(11,36,52,.10);background:rgba(251,251,249,.985)}
.head-in{display:flex;align-items:center;gap:1.1rem}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--deep);line-height:1.05}
.brand b{font-size:1.32rem;font-weight:700;letter-spacing:-.025em}
.brand span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--palm-ink);font-weight:600}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.35rem}
.nav a{
  color:var(--deep);text-decoration:none;font-size:.95rem;font-weight:500;
  padding:.2rem 0;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--g-hot);transition:right .26s ease;
}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.head-cta{display:flex;align-items:center;gap:.55rem}
.burger{
  display:none;background:none;border:1.5px solid var(--line);border-radius:12px;
  width:44px;height:44px;cursor:pointer;padding:0;align-items:center;justify-content:center;
}
.burger span{display:block;width:19px;height:2px;background:var(--deep);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--deep);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;border-top:1px solid var(--line-soft);background:var(--salt)}
.mobile-nav.open{display:block;animation:drop .3s ease}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mobile-nav a{
  display:block;padding:.82rem 0;border-bottom:1px solid var(--line-soft);
  color:var(--deep);text-decoration:none;font-weight:500;
}
.mobile-nav a:last-child{border-bottom:0}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(520px,84vh,760px);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:linear-gradient(180deg,rgba(11,36,52,.38) 0%,rgba(11,36,52,.24) 42%,rgba(11,36,52,.84) 100%);
}
.hero-flare{
  position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(58% 44% at 78% 16%,rgba(255,194,74,.42) 0%,rgba(255,90,95,.16) 42%,rgba(255,255,255,0) 72%);
  animation:flare 13s ease-in-out infinite alternate;
}
@keyframes flare{from{opacity:.55;transform:translate3d(0,0,0) scale(1)}to{opacity:1;transform:translate3d(-3%,2%,0) scale(1.1)}}
.hero-in{position:relative;z-index:2;padding-block:clamp(2.6rem,7vw,4.6rem)}
.hero h1{max-width:17ch;text-shadow:0 2px 28px rgba(11,36,52,.6)}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:500}
.hero .lede{color:rgba(255,255,255,.95);max-width:56ch;text-shadow:0 1px 16px rgba(11,36,52,.7)}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.5rem}
.hero-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.1rem}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .8rem;border-radius:999px;
  font-size:.83rem;font-weight:600;background:rgba(11,36,52,.55);
  border:1px solid rgba(255,255,255,.5);color:#fff;
}
.chip-gold{background:var(--gold);color:var(--deep);border-color:transparent}
.chip-sand{background:var(--sand);color:var(--deep);border-color:transparent}
.chip-shell{background:var(--shell);color:var(--deep);border-color:transparent}
.chip-palm{background:var(--palm);color:#fff;border-color:transparent}
.hero-float{
  position:absolute;right:clamp(1rem,4vw,3rem);bottom:clamp(1rem,4vw,3rem);z-index:3;
  background:rgba(251,251,249,.96);color:var(--deep);border-radius:var(--r);
  padding:1rem 1.15rem;max-width:19rem;box-shadow:var(--shadow-lift);
  font-size:.9rem;line-height:1.45;
}
.hero-float b{display:block;font-size:.98rem}
@media (max-width:920px){.hero-float{display:none}}

/* ---------- bands ---------- */
.band-sand{background:var(--g-section)}
.band-shell{background:linear-gradient(180deg,#FBFBF9 0%,#F6C9C2 100%)}
.band-water{background:var(--g-water);color:#fff}
.band-water .eyebrow{color:#BFE7D6}
.band-water .lede{color:rgba(255,255,255,.92)}
.band-water a{color:#FFD98A}
.band-dark{background:var(--g-dark);color:#fff}
.band-dark .eyebrow{color:#FFD98A}
.band-dark .lede{color:rgba(255,255,255,.9)}
.glow{position:relative;overflow:hidden}
.glow::before{
  content:"";position:absolute;width:48rem;height:48rem;left:-14rem;top:-20rem;border-radius:50%;
  background:radial-gradient(circle,rgba(255,194,74,.20) 0%,rgba(255,194,74,0) 66%);pointer-events:none;
}
.glow .wrap{position:relative;z-index:2}

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

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:1.25rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:1.4rem;box-shadow:var(--shadow);
  transition:transform .26s ease,box-shadow .26s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card h3{margin-bottom:.35rem}
.card p:last-child{margin-bottom:0}
.card-sand{background:var(--sand);border-color:rgba(18,58,87,.1)}
.card-flat:hover{transform:none;box-shadow:var(--shadow)}
.figure{border-radius:var(--r);overflow:hidden;background:var(--sand);position:relative;margin:0}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.7,.3,1)}
.figure:hover img{transform:scale(1.045)}
.figure figcaption{font-size:.78rem;color:rgba(18,58,87,.62);padding:.5rem .1rem 0}
.ph-tag{
  position:absolute;left:.6rem;top:.6rem;z-index:2;background:rgba(11,36,52,.8);color:#fff;
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  padding:.24rem .55rem;border-radius:6px;
}
.ratio-4x5 img{aspect-ratio:4/5}
.ratio-3x2 img{aspect-ratio:3/2}
.ratio-1x1 img{aspect-ratio:1/1}
.ratio-16x9 img{aspect-ratio:16/9}

/* ---------- fit finder ---------- */
.ff-steps{display:grid;gap:1.4rem;margin-top:1.9rem}
.ff-step{
  background:rgba(251,251,249,.08);border:1px solid rgba(255,255,255,.26);
  border-radius:var(--r-lg);padding:clamp(1.1rem,3vw,1.7rem);margin:0;
}
.ff-step > legend{font-weight:600;font-size:1.1rem;padding:0 .2rem;display:flex;align-items:center;gap:.6rem}
.ff-num{
  display:inline-flex;align-items:center;justify-content:center;width:1.85rem;height:1.85rem;
  border-radius:50%;background:var(--gold);color:var(--deep);font-size:.9rem;font-weight:700;flex:0 0 auto;
}
.ff-hint{font-size:.9rem;color:rgba(255,255,255,.84);margin:.55rem 0 1rem}
.ff-opts{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.ff-opt{position:relative}
.ff-opt input{position:absolute;opacity:0;width:1px;height:1px}
.ff-opt label{
  display:block;height:100%;cursor:pointer;border-radius:14px;padding:.85rem 1rem;
  background:rgba(251,251,249,.12);border:1.5px solid rgba(255,255,255,.34);
  transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
}
.ff-opt label:hover{background:rgba(251,251,249,.2);transform:translateY(-2px)}
.ff-opt input:checked + label{background:var(--gold);border-color:var(--gold);color:var(--deep)}
.ff-opt input:focus-visible + label{outline:3px solid #fff;outline-offset:3px}
.ff-opt b{display:block;font-size:1rem;font-weight:600}
.ff-opt small{display:block;font-size:.85rem;line-height:1.4;opacity:.9;margin-top:.15rem}
.ff-opt input:checked + label small{opacity:1}
.ff-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem;align-items:center}
.ff-note{font-size:.86rem;color:rgba(255,255,255,.8);margin:.9rem 0 0}
.ff-result{
  margin-top:1.8rem;background:rgba(251,251,249,.97);color:var(--deep);
  border-radius:var(--r-lg);padding:clamp(1.1rem,3vw,1.8rem);
}
.ff-result h3{margin-bottom:.2rem}
.shape-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));margin-top:1.2rem}
.shape{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .24s ease,box-shadow .24s ease;
}
.shape:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.shape .art{background:linear-gradient(160deg,#FBFBF9 0%,#EFE3D2 100%);padding:.9rem;position:relative}
.shape .art svg{width:100%;height:auto;display:block}
.shape .body{padding:.95rem 1.05rem 1.1rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.shape h4{margin:0;font-size:1.06rem}
.shape .kind{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--palm-ink)}
.shape p{margin:0;font-size:.93rem;line-height:1.5}
.shape .foot{margin-top:auto;padding-top:.4rem}

/* scales — the bar is decorative, the TEXT carries the value */
.scale{display:flex;align-items:center;gap:.55rem;font-size:.86rem;font-weight:600;flex-wrap:wrap}
.scale .bar{display:flex;gap:3px;flex:0 0 auto}
.scale .bar i{width:11px;height:7px;border-radius:2px;background:rgba(18,58,87,.16)}
.scale .bar i.on{background:var(--palm)}
.scale.coverage .bar i.on{background:var(--coral-ink)}
.scale span{font-weight:500;color:rgba(18,58,87,.86)}

/* ---------- monte seu conjunto ---------- */
.build-2col{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:1.7rem}
.build-col{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:1.2rem;box-shadow:var(--shadow)}
.build-col h3{font-size:1.1rem}
.pick-list{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.5rem}
.pick{position:relative}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick label{
  display:flex;align-items:center;gap:.75rem;cursor:pointer;border-radius:12px;
  padding:.62rem .8rem;border:1.5px solid var(--line);background:var(--salt);
  transition:border-color .2s ease,background-color .2s ease,transform .2s ease;
}
.pick label:hover{transform:translateX(3px);border-color:var(--coral-ink)}
.pick input:checked + label{border-color:var(--coral-ink);background:#FFF1F0}
.pick input:focus-visible + label{outline:3px solid var(--coral-ink);outline-offset:2px}
.pick svg{width:42px;height:42px;flex:0 0 auto}
.pick b{font-weight:600;font-size:.97rem;display:block}
.pick small{display:block;font-size:.82rem;color:rgba(18,58,87,.72)}
.pair-out{
  margin-top:1.4rem;background:var(--shell);border-radius:var(--r-lg);
  padding:1.15rem 1.3rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
}
.pair-out p{margin:0;font-size:1rem}
.pair-out .who{font-family:var(--serif);font-style:italic;font-size:1.2rem}

/* ---------- size table ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table.size{border-collapse:collapse;width:100%;min-width:560px;font-size:.94rem}
table.size caption{text-align:left;padding:.9rem 1rem;font-weight:600;color:rgba(18,58,87,.82);font-size:.9rem}
table.size th,table.size td{padding:.7rem .9rem;border-bottom:1px solid var(--line-soft);text-align:left}
table.size thead th{background:var(--deep);color:#fff;font-weight:600;white-space:nowrap}
table.size tbody th{background:var(--sand);font-weight:600;white-space:nowrap}
table.size tbody tr:hover td{background:#FFFBF2}
.measure-fig{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:1.2rem;box-shadow:var(--shadow);margin:0}
.measure-fig svg{width:100%;height:auto}

/* ---------- store cards ---------- */
.store{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:transform .26s ease,box-shadow .26s ease;
}
.store:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.store .figure{border-radius:0}
.store-body{padding:1.35rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.store dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.35rem .85rem;font-size:.94rem}
.store dt{font-weight:600;color:var(--palm-ink)}
.store dd{margin:0}
.store .foot{margin-top:auto;padding-top:.5rem;display:flex;gap:.55rem;flex-wrap:wrap}
.promise{background:var(--sand);border-radius:12px;padding:.75rem .95rem;font-size:.92rem;border-left:4px solid var(--palm)}

/* ---------- FAQ ---------- */
.faq{max-width:60rem;margin-inline:auto;display:grid;gap:.6rem}
.faq details{background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:0 1.15rem;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 2rem 1rem 0;font-weight:600;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:2px solid var(--coral-ink);border-bottom:2px solid var(--coral-ink);
  transform:rotate(45deg);transition:transform .24s 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 .28s ease}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- lookbook rail ---------- */
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,34%);
  gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;scrollbar-width:thin;
}
.rail > *{scroll-snap-align:start}
.rail-nav{display:flex;gap:.5rem;justify-content:flex-end;margin-bottom:.8rem}
.rail-btn{
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--deep);
  transition:background-color .2s ease,transform .2s ease;font-size:1.1rem;
}
.rail-btn:hover{background:var(--sand);transform:translateY(-2px)}

/* ---------- stats ---------- */
.stats{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:1.6rem}
.stat{background:rgba(251,251,249,.08);border:1px solid rgba(255,255,255,.24);border-radius:var(--r);padding:1.15rem}
.stat b{display:block;font-size:clamp(1.6rem,4vw,2.3rem);font-weight:700;line-height:1.05;letter-spacing:-.03em}
.stat span{font-size:.9rem;opacity:.92}

/* ---------- footer ---------- */
.site-foot{background:var(--g-dark);color:rgba(251,251,249,.9);padding-block:3.4rem 6.6rem;font-size:.94rem}
.site-foot h4{color:#fff;font-size:1rem;margin-bottom:.6rem}
.site-foot a{color:#FFD98A;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-grid{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.16);margin-top:2.2rem;padding-top:1.3rem;
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;font-size:.86rem;
  color:rgba(251,251,249,.76);
}
.foot-bottom .lang a{color:rgba(251,251,249,.82)}
.mock-note{
  background:rgba(255,255,255,.07);border:1px dashed rgba(255,217,138,.6);border-radius:12px;
  padding:.9rem 1.1rem;margin-top:1.8rem;font-size:.86rem;color:rgba(251,251,249,.92);
}

/* ---------- WhatsApp bubble + mobile bar ---------- */
.wa-bubble{
  position:fixed;right:1rem;bottom:1rem;z-index:90;width:58px;height:58px;border-radius:50%;
  background:#1C8C4B;color:#fff;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(11,36,52,.32);text-decoration:none;border:none;cursor:pointer;
  transition:transform .24s ease;
}
.wa-bubble:hover{transform:scale(1.07)}
.wa-bubble svg{width:29px;height:29px;fill:currentColor}
.wa-bubble::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(28,140,75,.4);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(.9);opacity:.9}70%{transform:scale(1.28);opacity:0}100%{opacity:0}}
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:88;display:none;
  background:rgba(251,251,249,.98);border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(11,36,52,.1);
}
.mobile-bar a{
  flex:1;text-align:center;padding:.85rem .4rem;font-size:.9rem;font-weight:600;
  color:var(--deep);text-decoration:none;border-right:1px solid var(--line-soft);
}
.mobile-bar a:last-child{border-right:0}
@media (max-width:820px){
  .mobile-bar{display:flex}
  .wa-bubble{bottom:4.4rem}
  .site-foot{padding-bottom:8.2rem}
}

/* ---------- LGPD sheet ---------- */
.lgpd{
  position:fixed;left:0;right:0;bottom:0;z-index:120;background:#fff;
  border-top:3px solid var(--coral-ink);box-shadow:0 -12px 40px rgba(11,36,52,.2);
  padding:1.15rem 0 1.3rem;transform:translateY(102%);transition:transform .4s cubic-bezier(.22,.7,.3,1);
}
.lgpd.show{transform:none}
.lgpd h2{font-size:1.1rem;margin-bottom:.35rem}
.lgpd p{font-size:.9rem;margin-bottom:.8rem;max-width:78ch}
.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(--palm)}
.lgpd-row b{display:block;font-size:.95rem}
.lgpd-row small{font-size:.85rem;color:rgba(18,58,87,.75)}
@media (max-width:820px){.lgpd{padding-bottom:5rem}}

/* ---------- misc lists ---------- */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ticks li{position:relative;padding-left:1.6rem;font-size:.97rem}
.ticks li::before{content:"";position:absolute;left:0;top:.52em;width:.6rem;height:.6rem;border-radius:2px;background:var(--g-hot)}
.ticks.palm li::before{background:var(--palm)}
.steps{list-style:none;counter-reset:s;margin:1.4rem 0 0;padding:0;display:grid;gap:.9rem}
.steps li{counter-increment:s;position:relative;padding-left:3rem;font-size:.99rem}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:-.1rem;width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--sand);color:var(--deep);font-weight:700;font-size:.92rem;
  display:flex;align-items:center;justify-content:center;
}
.band-water .steps li::before,.band-dark .steps li::before{background:var(--gold)}
.split{display:grid;gap:clamp(1.4rem,4vw,3rem);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center}
.prose{max-width:72ch}
.prose h2{margin-top:2.2rem}
.prose h3{margin-top:1.6rem}
.prose ul{padding-left:1.15rem}
.prose li{margin-bottom:.4rem}
.page-head{background:var(--g-section);padding-block:clamp(2.6rem,6vw,4.2rem) clamp(1.6rem,4vw,2.4rem)}
.crumbs{font-size:.85rem;color:rgba(18,58,87,.7);margin-bottom:.7rem}
.crumbs a{color:rgba(18,58,87,.8);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .nav{display:none}
  .burger{display:inline-flex}
  .head-cta .btn-primary{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .topbar{font-size:.78rem}
  .tb-left .sep{display:none}
  .card{padding:1.15rem}
}

/* ---------- reduced motion ---------- */
@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}
  .hero-flare{animation:none;opacity:.7}
  .wa-bubble::after{display:none}
  .rail{scroll-snap-type:none}
}

/* ---------- print ---------- */
@media print{
  .topbar,.site-head,.wa-bubble,.mobile-bar,.lgpd,.rail-nav{display:none !important}
  body{font-size:11pt;color:#000}
  .hero{min-height:auto;color:#000}
  .hero-scrim,.hero-flare{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}
}