/* ===================================================================
   Tarrafa Coletivo Criativo - spec mockup stylesheet
   LEAD, NOT A CLIENT. Nothing here is client work.

   PALETTE
   A proposal, not an extraction: their live site is WordPress with
   Montserrat Alternates + Roboto and no brand file exposed.
   [CONFIRM against their logo.]
     atlantic green #134E4A   primary, headers, CTAs
     rope tan       #C89B5C   fish icons, plan badges, the net motif
     oyster         #F7F3EA   page base
     restinga       #7A9E7E   chips and success states
     ink            #1A1A17   body text
     foam           #FFFFFF   cards
     deep           #0A2E2C   footer / CTA gradient stop

   MEASURED CONTRAST (WCAG 2.1, computed - not estimated)
   The brief warns that rope tan on oyster fails. It does, badly, and
   the same problem it does not mention applies to restinga:
     tan      #C89B5C on oyster #F7F3EA ....  2.29  FAILS
     tan      #C89B5C on white ............  2.53  FAILS
     tan      #C89B5C on green #134E4A ....  3.74  large text only
     tan      #C89B5C on deep  #0A2E2C ....  5.76  PASSES
     restinga #7A9E7E on oyster ...........  2.70  FAILS  (not flagged)
     white           on restinga ..........  2.99  FAILS  (not flagged)
   So:
     - tan and restinga NEVER carry small text on the light base.
       They are icon strokes, borders, badges and the net motif.
     - where a tan word is needed on oyster, --tan-ink #8A6520 is
       used: 4.79 on oyster, 5.30 on white. PASSES AA.
     - where a restinga word is needed on oyster, --res-ink #456E49
       is used: 5.30 on oyster. PASSES AA.
     - a restinga chip carries INK text, measured 5.83 - never white,
       which fails at 2.99.
     - on the green and deep fields, --tan-lit #D9B47C measures 4.86
       on green and 7.48 on deep, so it can carry normal text there.
   Structural pairs, all measured:
     green  #134E4A on oyster ............  8.56  AAA
     ink    #1A1A17 on oyster ............ 15.75  AAA
     white           on green ............  9.48  AAA
     white           on deep ............. 14.58  AAA
     oyster          on green ............  8.56  AAA
     ink             on tan fill .........  6.89  AA  (badges, CTA)
   Hero reversed type sits on a measured scrim: the bottom stop is
   rgba(10,46,44,.82).

   WHAT IS DELIBERATELY NOT BUILT
   No rating, no review, no testimonial, no member count, no founding
   year, no "X empresas" counter. Tarrafa publishes none of it, and the
   count-up engine bails out on any non-numeric value so a [CONFIRM]
   can never animate into an invented number.
   NO PRICE IS INVENTED ANYWHERE. Every price slot on this build is a
   visible R$ [CONFIRM] chip - that is the whole point of the pricing
   page, not an oversight.
   =================================================================== */

:root{
  --green:#134E4A;
  --deep:#0A2E2C;
  --tan:#C89B5C;
  --tan-ink:#8A6520;   /* text-safe tan on light */
  --tan-lit:#D9B47C;   /* text-safe tan on dark  */
  --oyster:#F7F3EA;
  --restinga:#7A9E7E;
  --res-ink:#456E49;   /* text-safe restinga on light */
  --ink:#1A1A17;
  --foam:#FFFFFF;
  --muted:#5B5B54;     /* 6.9:1 on oyster */
  --line:rgba(26,26,23,.14);
  --line-dark:rgba(247,243,234,.2);
  --maxw:1240px;
  --gut:clamp(1.1rem,4vw,2.6rem);
  --r:14px;
  --sans:'Roboto','Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --disp:'Montserrat Alternates','Montserrat',Georgia,sans-serif;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --g-cta:linear-gradient(150deg,#134E4A 0%,#0A2E2C 100%);
  --g-sea:linear-gradient(180deg,rgba(19,78,74,0) 34%,rgba(10,46,44,.82) 100%);
  --g-ribbon:linear-gradient(90deg,#C89B5C 0%,#EFD9AF 100%);
  --shadow:0 8px 26px rgba(19,78,74,.1);
  --shadow-lift:0 16px 40px rgba(19,78,74,.17);
  --ease:cubic-bezier(.22,.7,.3,1);
}

/* The net: a fine diagonal rope-grid, drawn in CSS so it costs nothing
   and scales cleanly. Used as a divider, a card border treatment and a
   low-opacity overlay on the sea photography. */
.net{
  background-image:
    repeating-linear-gradient(45deg,rgba(200,155,92,.5) 0 1px,transparent 1px 13px),
    repeating-linear-gradient(-45deg,rgba(200,155,92,.5) 0 1px,transparent 1px 13px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);font-size:1rem;line-height:1.68;color:var(--ink);
  background:var(--oyster);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--green)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--tan-ink);outline-offset:3px;border-radius:4px}
.band-green a:focus-visible,.band-green button:focus-visible,.site-foot a:focus-visible,
.site-head:not(.solid) a:focus-visible,.cta-band a:focus-visible{outline-color:var(--tan-lit)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.14;margin:0 0 .6rem;
  letter-spacing:-.01em;color:var(--green)}
h1{font-size:clamp(2rem,5.4vw,3.6rem)}
h2{font-size:clamp(1.55rem,3.4vw,2.5rem)}
h3{font-size:clamp(1.08rem,1.9vw,1.35rem)}
p{margin:0 0 1rem}

.wrap{width:min(100% - (var(--gut) * 2),var(--maxw));margin-inline:auto}
.wide{width:min(100% - (var(--gut) * 2),1480px);margin-inline:auto}
section{padding-block:clamp(3rem,7vw,5.6rem)}
.band-oyster{background:var(--oyster)}
.band-foam{background:var(--foam)}
.band-green{background:var(--g-cta);color:rgba(247,243,234,.92)}
.band-green h1,.band-green h2,.band-green h3{color:var(--foam)}
.band-green a{color:var(--tan-lit)}
.band-green .lede{color:rgba(247,243,234,.9)}

.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tan-ink);margin:0 0 .8rem}
.band-green .eyebrow{color:var(--tan-lit)}
.lede{font-size:clamp(1rem,1.5vw,1.16rem);color:var(--muted);max-width:62ch}
.small{font-size:.86rem;color:var(--muted)}
.band-green .small{color:rgba(247,243,234,.78)}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* the net used as a section divider */
.netrule{height:14px;opacity:.55}
.band-green .netrule{opacity:.4}

/* [CONFIRM] markers stay loud - on this build they ARE the deliverable */
.cfm{background:#FFF6E4;color:#5A3F12;border:1px dashed var(--tan-ink);border-radius:4px;
  padding:0 .34em;font-size:.9em;font-weight:600;white-space:normal}
.band-green .cfm{background:rgba(200,155,92,.22);color:#FBEFD9;border-color:var(--tan-lit)}
.cfm-block{background:#FFF6E4;border:1px dashed var(--tan-ink);border-left-width:5px;
  border-radius:10px;padding:1rem 1.15rem;font-size:.92rem;color:#5A3F12;margin:1.4rem 0}
.cfm-block p:last-child{margin-bottom:0}
.band-green .cfm-block{background:rgba(200,155,92,.14);color:rgba(247,243,234,.94);
  border-color:var(--tan-lit)}
.mock-note{background:rgba(247,243,234,.08);border:1px dashed rgba(217,180,124,.65);
  border-radius:10px;padding:1rem 1.15rem;font-size:.88rem;color:rgba(247,243,234,.92)}
.note-block{background:var(--foam);border:1px solid var(--line);border-left:5px solid var(--res-ink);
  border-radius:10px;padding:1rem 1.15rem;font-size:.93rem;color:var(--muted);margin:1.3rem 0}
.note-block p:last-child{margin-bottom:0}
.warn-block{background:#FFF1E4;border:1px solid rgba(138,101,32,.3);border-left:5px solid var(--tan-ink);
  border-radius:10px;padding:1.05rem 1.2rem;font-size:.93rem;margin:1.3rem 0}
.warn-block p:last-child{margin-bottom:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;
  font-size:.93rem;font-weight:700;text-decoration:none;padding:.85rem 1.5rem;border:2px solid transparent;
  border-radius:999px;cursor:pointer;
  transition:background .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease),
             transform .24s var(--ease),box-shadow .24s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn .ar{transition:transform .22s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-green{background:var(--green);color:var(--foam);box-shadow:0 6px 18px rgba(19,78,74,.28)}
.btn-green:hover{background:var(--deep);box-shadow:var(--shadow-lift)}
.btn-tan{background:var(--tan);color:var(--ink);box-shadow:0 6px 18px rgba(200,155,92,.32)}
.btn-tan:hover{background:#EFD9AF}
.btn-ghost{background:transparent;color:var(--green);border-color:var(--green)}
.btn-ghost:hover{background:var(--green);color:var(--foam)}
.btn-light{background:transparent;color:var(--foam);border-color:rgba(247,243,234,.7)}
.btn-light:hover{background:var(--foam);color:var(--green)}
.btn-sm{padding:.6rem 1.1rem;font-size:.86rem}
.btn-block{width:100%}

.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:var(--foam);
  padding:.7rem 1.1rem;z-index:220}
.skip:focus{left:.6rem;top:.6rem}

/* ---------- utility bar + header ---------- */
.utility{background:var(--deep);color:rgba(247,243,234,.9);font-size:.82rem;padding:.4rem 0}
.utility .wide{display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;align-items:center}
.utility a{color:var(--tan-lit);text-decoration:none}
.utility a:hover{text-decoration:underline}
.u-left,.u-right{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.site-head{position:sticky;top:0;z-index:120;background:rgba(247,243,234,.96);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease),padding .3s var(--ease)}
.site-head.solid{box-shadow:0 2px 18px rgba(19,78,74,.12)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.85rem;transition:padding .3s var(--ease)}
.site-head.solid .head-in{padding-block:.5rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--green);
  font-family:var(--disp);font-weight:700;font-size:1.2rem;line-height:1.05}
.brand svg{width:2.1rem;height:2.1rem;flex:0 0 auto}
.brand span small{display:block;font-family:var(--sans);font-size:.6rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--tan-ink)}
.nav{display:flex;align-items:center;gap:1.35rem}
.nav a{font-size:.88rem;font-weight:600;text-decoration:none;color:var(--green);
  position:relative;padding-block:.3rem}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--tan);transition:right .28s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.head-right{display:flex;align-items:center;gap:.7rem}
.lang{display:flex;align-items:center;font-size:.76rem;font-weight:700}
.lang a{text-decoration:none;color:var(--muted);padding:.2rem .4rem}
.lang a.on{color:var(--tan-ink)}
.burger{display:none;width:2.7rem;height:2.7rem;background:transparent;border:0;cursor:pointer;
  padding:0;position:relative}
.burger span{position:absolute;left:.55rem;right:.55rem;height:2px;background:var(--green);
  border-radius:2px;transition:transform .3s var(--ease),opacity .2s linear}
.burger span:nth-child(1){top:.9rem}
.burger span:nth-child(2){top:1.3rem}
.burger span:nth-child(3){top:1.7rem}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.4rem) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.4rem) rotate(-45deg)}
.mobile-nav{position:fixed;inset:0;z-index:115;background:var(--g-cta);display:flex;
  flex-direction:column;justify-content:center;gap:.25rem;padding:5rem var(--gut) 3rem;
  opacity:0;visibility:hidden;transform:translateY(-1rem);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s}
.mobile-nav.open{opacity:1;visibility:visible;transform:none}
.mobile-nav a{font-family:var(--disp);font-size:clamp(1.4rem,6.5vw,2.2rem);color:var(--foam);
  text-decoration:none;padding:.35rem 0;border-bottom:1px solid var(--line-dark);font-weight:700}
.mobile-nav a:hover{color:var(--tan-lit)}
.mobile-nav .m-foot{margin-top:1.6rem;font-size:.88rem;color:rgba(247,243,234,.82)}
@media (max-width:1080px){.nav{display:none}.burger{display:block}.head-right .btn{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(520px,82vh,720px);display:flex;align-items:flex-end;
  overflow:hidden;color:var(--foam);background:var(--green)}
.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-sea)}
.hero-net{position:absolute;inset:-10% -20%;z-index:1;opacity:.2;
  animation:tide 44s linear infinite}
.hero-in{position:relative;z-index:2;padding-block:0 clamp(2.4rem,7vw,4.4rem)}
.hero h1{color:var(--foam);max-width:17ch;margin-bottom:.9rem}
.hero .eyebrow{color:var(--tan-lit)}
.hero .lede{color:rgba(255,255,255,.95);max-width:48ch}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}
@keyframes tide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-13px,-13px,0)}}
@media (max-width:720px){.hero{min-height:78svh}}

.rev{opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rev.in{opacity:1;transform:none}

/* ---------- the lexicon block: the brand's whole thesis ---------- */
.lexicon{display:grid;gap:clamp(1.4rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center}
.entry{background:var(--foam);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.3rem,3vw,2rem);box-shadow:var(--shadow);position:relative;overflow:hidden}
.entry::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--g-ribbon)}
.entry .word{font-family:var(--disp);font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:700;
  color:var(--green);margin:.4rem 0 .1rem;letter-spacing:.02em}
.entry .syll{font-family:var(--serif);font-size:1.02rem;color:var(--tan-ink);margin:0 0 .9rem;
  font-style:italic}
.entry ol{margin:0;padding-left:1.3rem;font-family:var(--serif);font-size:1.02rem;line-height:1.7}
.entry ol li{margin-bottom:.5rem}
.entry .pos{font-style:italic;font-weight:700;color:var(--res-ink);margin-right:.35rem}
.netart{display:flex;align-items:center;justify-content:center}
.netart svg{width:100%;max-width:340px;height:auto}

/* ---------- plan pricing: the core of the pitch ---------- */
.segbar{display:flex;gap:.4rem;flex-wrap:wrap;margin:1.8rem 0 1.6rem;padding-bottom:.4rem}
.segbar button{font:inherit;font-size:.86rem;font-weight:700;background:var(--foam);
  border:2px solid var(--line);color:var(--green);padding:.6rem 1.1rem;border-radius:999px;
  cursor:pointer;white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s}
.segbar button:hover{border-color:var(--tan)}
.segbar button[aria-pressed="true"]{background:var(--green);border-color:var(--green);
  color:var(--foam)}
@media (max-width:720px){
  .segbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;padding-bottom:.7rem}
}
.plans{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.plan{background:var(--foam);border:1px solid var(--line);border-radius:var(--r);
  padding:1.4rem;display:flex;flex-direction:column;gap:.7rem;box-shadow:var(--shadow);
  position:relative;overflow:hidden;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease)}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.plan[hidden]{display:none}
.plan .fish{width:3.4rem;height:3.4rem;color:var(--tan-ink)}
.plan .fam{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--res-ink);margin:0}
.plan h3{margin:0}
.plan .price{display:inline-flex;align-items:baseline;gap:.4rem;border:2px dashed var(--tan-ink);
  border-radius:10px;background:#FFF6E4;padding:.55rem .85rem;font-family:var(--disp);
  font-weight:700;color:#5A3F12;align-self:flex-start}
.plan .price .per{font-family:var(--sans);font-size:.82rem;font-weight:500;color:var(--muted)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem;font-size:.92rem}
.plan ul li{position:relative;padding-left:1.5rem}
.plan ul li::before{content:"";position:absolute;left:0;top:.55em;width:.6rem;height:.6rem;
  border-radius:2px;background:var(--tan)}
.plan .foot{margin-top:auto;padding-top:.7rem}
.ribbon{position:absolute;right:-2.6rem;top:1.1rem;transform:rotate(38deg);
  background:var(--g-ribbon);color:var(--ink);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:.3rem 2.8rem}

/* ---------- comparison table ---------- */
.tablewrap{overflow-x:auto;margin-top:2rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--foam)}
table.cmp{border-collapse:collapse;width:100%;min-width:760px;font-size:.9rem}
table.cmp caption{text-align:left;padding:1rem 1.1rem;font-weight:700;color:var(--green);
  font-family:var(--disp)}
table.cmp th,table.cmp td{padding:.75rem .9rem;border-bottom:1px solid var(--line);text-align:left;
  vertical-align:top}
table.cmp thead th{background:var(--green);color:var(--foam);font-weight:700;
  position:sticky;top:0;z-index:1}
table.cmp tbody th{font-weight:700;color:var(--green);white-space:nowrap}
table.cmp tbody tr:nth-child(even){background:rgba(122,158,126,.08)}
table.cmp td.na{color:var(--muted)}

/* ---------- rooms ---------- */
.rooms{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.room{background:var(--foam);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease)}
.room:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.room .media{position:relative}
.room .media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease)}
.room:hover .media img{transform:scale(1.04)}
.room .body{padding:1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.room h3{margin:0}
.room .m2{font-family:var(--disp);font-weight:700;color:var(--tan-ink);font-size:1.05rem}
.room ul{list-style:none;margin:0;padding:0;display:grid;gap:.38rem;font-size:.9rem}
.room ul li{position:relative;padding-left:1.4rem}
.room ul li::before{content:"";position:absolute;left:0;top:.55em;width:.55rem;height:.55rem;
  border-radius:50%;background:var(--restinga)}
.room .foot{margin-top:auto;padding-top:.6rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--restinga);color:var(--ink);
  border-radius:999px;padding:.22rem .7rem;font-size:.76rem;font-weight:700}
.chip.tan{background:var(--tan)}

/* ---------- split editorial ---------- */
.split{display:grid;gap:clamp(1.5rem,4.5vw,3.4rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center}
.split.top{align-items:start}
.figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:var(--restinga)}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.figure:hover img{transform:scale(1.04)}
.figure figcaption{font-size:.79rem;color:var(--muted);padding:.5rem .1rem 0}
.band-green .figure figcaption{color:rgba(247,243,234,.76)}
.imgpair{display:grid;gap:.85rem;grid-template-columns:1fr 1fr}
.imgpair figure:first-child{grid-column:1 / -1}
.r-3x2{aspect-ratio:3/2}
.r-4x3{aspect-ratio:4/3}
.r-16x9{aspect-ratio:16/9}
.r-1x1{aspect-ratio:1/1}
.r-21x9{aspect-ratio:21/9}
.ph-tag{position:absolute;left:.6rem;top:.6rem;z-index:2;background:rgba(10,46,44,.88);
  color:var(--oyster);font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:.24rem .58rem;border-radius:5px}

/* ---------- full-bleed feature (Palquinho) ---------- */
.feature{position:relative;overflow:hidden;color:var(--foam);background:var(--deep);
  min-height:clamp(420px,66vh,620px);display:flex;align-items:flex-end}
.feature-media{position:absolute;inset:0;z-index:0}
.feature-media img{width:100%;height:100%;object-fit:cover}
.feature-scrim{position:absolute;inset:0;z-index:1;background:var(--g-sea)}
.feature-net{position:absolute;inset:-10% -20%;z-index:1;opacity:.16}
.feature-in{position:relative;z-index:2;padding-block:0 clamp(2.2rem,6vw,4rem)}
.feature h2{color:var(--foam);max-width:18ch}
.feature .lede{color:rgba(255,255,255,.94);max-width:52ch}

/* ---------- infra chips ---------- */
.infra{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin-top:2rem}
.infra .it{background:var(--foam);border:1px solid var(--line);border-radius:12px;
  padding:1rem;display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;font-weight:600;
  color:var(--green);transition:transform .24s var(--ease),box-shadow .24s var(--ease)}
.infra .it:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.infra .it svg{width:1.5rem;height:1.5rem;flex:0 0 auto;color:var(--tan-ink)}

/* ---------- distance rail ---------- */
.rail{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  margin-top:1.8rem}
.rail .d{background:var(--foam);border:1px solid var(--line);border-radius:12px;padding:1.1rem;
  text-align:center}
.rail .d b{display:block;font-family:var(--disp);font-size:clamp(1.5rem,3.4vw,2.1rem);
  color:var(--green);line-height:1}
.rail .d span{display:block;font-size:.88rem;color:var(--muted);margin-top:.3rem}

/* ---------- FAQ ---------- */
.faq{max-width:62rem;margin-inline:auto;display:grid;gap:.55rem;margin-top:2rem}
.faq details{background:var(--foam);border:1px solid var(--line);border-radius:12px;
  padding:0 1.15rem;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 2.2rem 1rem 0;font-weight:700;
  color:var(--green);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.2rem;top:1.3rem;width:9px;height:9px;
  border-right:2px solid var(--tan-ink);border-bottom:2px solid var(--tan-ink);
  transform:rotate(45deg);transition:transform .26s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details > *:not(summary){padding-bottom:1rem;margin-top:-.2rem;color:var(--muted)}
.faq details[open] > *:not(summary){animation:fadein .26s ease}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:clamp(1.5rem,4.5vw,3.4rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.nap{font-style:normal;line-height:1.85}
.nap dt{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tan-ink);margin-top:1.1rem}
.nap dd{margin:0}
.nap a{color:var(--green);text-decoration:none;border-bottom:1px solid var(--tan)}
.mapthumb{display:block;margin-top:1.6rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--foam);overflow:hidden}
.mapthumb svg{width:100%;height:auto;display:block}
.mapthumb .cap{padding:.7rem .95rem;font-size:.82rem;color:var(--muted);
  border-top:1px solid var(--line)}
.form-card{background:var(--foam);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.2rem,3vw,2rem);box-shadow:var(--shadow)}
.form-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.field{display:flex;flex-direction:column;gap:.32rem;min-width:0}
.field.full{grid-column:1 / -1}
.field label{font-size:.8rem;font-weight:700;color:var(--green)}
.field input,.field select,.field textarea{font:inherit;font-size:.97rem;padding:.65rem .8rem;
  border:2px solid var(--line);border-radius:10px;background:var(--oyster);color:var(--ink);width:100%}
.field textarea{min-height:6rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);outline:none}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#A5301F}
.consent{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem;font-size:.89rem;
  color:var(--muted)}
.consent input{margin-top:.28rem;width:1.12rem;height:1.12rem;accent-color:var(--green);flex:0 0 auto}
.form-status{margin-top:1rem;font-size:.9rem;min-height:1.4em}

/* ---------- CTA band ---------- */
.cta-band{background:var(--g-cta);color:var(--foam);text-align:center;position:relative;
  overflow:hidden}
.cta-band .cta-net{position:absolute;inset:-10% -20%;opacity:.14}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{color:var(--foam);max-width:22ch;margin-inline:auto}
.cta-band .lede{color:rgba(247,243,234,.92)}
.cta-band .acts{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:1.6rem}

/* ---------- page head ---------- */
.page-head{background:var(--g-cta);color:rgba(247,243,234,.9);
  padding-block:clamp(2.4rem,5vw,3.6rem) clamp(1.5rem,3.4vw,2.2rem);position:relative;
  overflow:hidden}
.page-head .ph-net{position:absolute;inset:-10% -20%;opacity:.13}
.page-head .wrap{position:relative;z-index:2}
.page-head h1{color:var(--foam)}
.page-head .lede{color:rgba(247,243,234,.88)}
.crumbs{font-size:.83rem;color:rgba(247,243,234,.74);margin-bottom:.7rem}
.crumbs a{color:var(--tan-lit);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.prose{max-width:70ch}
.prose h2{margin-top:2.2rem}
.prose ul{padding-left:1.15rem}
.prose li{margin-bottom:.42rem}

/* ---------- floating WhatsApp ---------- */
.wa-bubble{position:fixed;right:1rem;bottom:1rem;z-index:130;width:3.5rem;height:3.5rem;
  border-radius:50%;background:#25D366;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(10,46,44,.3);transition:transform .24s var(--ease)}
.wa-bubble:hover{transform:scale(1.07)}
.wa-bubble svg{width:1.95rem;height:1.95rem;fill:#0B2E17}
@media (max-width:720px){.wa-bubble{bottom:4.6rem}}

.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:125;display:none;background:var(--green);
  border-top:1px solid var(--line-dark)}
.mobile-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.95rem .5rem;color:var(--foam);text-decoration:none;font-size:.86rem;font-weight:700}
.mobile-bar a + a{border-left:1px solid var(--line-dark)}
@media (max-width:720px){.mobile-bar{display:flex}body{padding-bottom:3.4rem}}

/* ---------- footer ---------- */
.site-foot{background:var(--g-cta);color:rgba(247,243,234,.84);
  padding-block:clamp(2.8rem,6vw,4.4rem) 2rem;position:relative;overflow:hidden}
.site-foot .f-net{position:absolute;inset:-10% -20%;opacity:.12}
.site-foot .wide{position:relative;z-index:2}
.site-foot .brand{color:var(--foam)}
.site-foot .brand span small{color:var(--tan-lit)}
.foot-grid{display:grid;gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(205px,1fr));margin-top:2rem}
.foot-grid h4{color:var(--foam);font-size:.7rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 .8rem;font-family:var(--sans)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem;font-size:.9rem}
.site-foot a{color:rgba(247,243,234,.84);text-decoration:none}
.site-foot a:hover{color:var(--tan-lit)}
.foot-bottom{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line-dark);
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;font-size:.8rem;
  color:rgba(247,243,234,.66)}

/* ---------- LGPD: rebuilt in pt-BR, reject as easy as accept ---------- */
.lgpd{position:fixed;left:0;right:0;bottom:0;z-index:140;background:var(--foam);
  border-top:3px solid var(--green);box-shadow:0 -10px 30px rgba(10,46,44,.2);padding:1.1rem 0;
  transform:translateY(112%);transition:transform .4s var(--ease)}
.lgpd.show{transform:none}
.lgpd[aria-hidden="true"]{visibility:hidden}
.lgpd.show[aria-hidden="false"]{visibility:visible}
.lgpd h2{font-size:1.06rem;margin:0 0 .4rem}
.lgpd p{font-size:.88rem;color:var(--muted);margin:0 0 .85rem;max-width:76ch}
.lgpd-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.lgpd-prefs{margin-top:1rem;border-top:1px solid var(--line);padding-top:.9rem;display:grid;gap:.6rem}
.lgpd-row{display:flex;gap:.72rem;align-items:flex-start;font-size:.86rem}
.lgpd-row input{margin-top:.25rem;width:1.05rem;height:1.05rem;accent-color:var(--green);flex:0 0 auto}
.lgpd-row b{display:block}
.lgpd-row small{color:var(--muted)}
@media (max-width:720px){.lgpd{bottom:3.4rem;max-height:76svh;overflow-y:auto}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .rev{opacity:1;transform:none}
  .hero-net,.cta-band .cta-net,.page-head .ph-net,.site-foot .f-net,.feature-net{animation: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}
}