/* =====================================================================
   Security Floripa - Florianopolis, SC  -  spec mockup stylesheet

   THE BUILD IS FOR THE OWNER WHO IS NOT THERE. Every competing CCTV
   installer on this island sells to someone standing in the house. This
   one sells to someone in Sao Paulo, Lisbon or Miami whose actual
   purchase is the ability to look. That inversion drives every section.

   STATUS: speculative pitch build. NOTHING about this business could be
   verified: the only public source is an Instagram profile behind a login
   wall. Every business fact carries a visible [CONFIRM].

   DEFAULT SCOPE: INSTALLATION ONLY. Monitoring - a staffed centre
   watching feeds and coordinating a response - is regulated private
   security activity authorised and supervised by the Policia Federal.
   This build says explicitly that it describes installation and
   configuration, and ships no monitoring language at all.

   ---------------------------------------------------------------------
   PALETTE  [CONFIRM against their logo - Instagram-only lead, no brand
   file could be retrieved. This palette is proposed, not read.]
   ---------------------------------------------------------------------
     Deep navy      #101C2E   hero, dark bands, footer
     Midnight steel #1D2E45   secondary dark
     Cool white     #FFFFFF   cards
     Pale mist      #F2F5F8   page field
     Body ink       #17202B   text on light
     Slate blue     #4C6785   secondary UI
     Live teal      #17A2B8   the single accent - reads as connected /
                              recording / online, and does not shout
     Signal amber   #E0A52E   reserved for ONE thing: an out-of-hours
                              contact strip, and only if [CONFIRM] returns
                              that they offer one. It is not used here.

   AlarmX's crimson is deliberately dropped: crimson reads as
   alarm-panic-retail, and the register this build needs is calm
   competence for someone 8,000 km away who wants reassurance, not
   adrenaline. The four price cards are dropped too - there are no
   verified prices, and a "BUY NOW" badge repels this buyer.

   ---------------------------------------------------------------------
   MEASURED CONTRAST (WCAG 2.2 AA / eMAG / Lei 13.146/2015 art. 63)
   ---------------------------------------------------------------------
     Ink   #17202B on Pale mist ....... 15.02  PASS AAA
     Navy  #101C2E on Pale mist ....... 15.63  PASS AAA
     Slate #4C6785 on Pale mist ........ 5.35  PASS AA
     Mist  #F2F5F8 on Navy ............ 15.63  PASS AAA
     Mist  #F2F5F8 on Steel ........... 12.55  PASS AAA
     Teal  #17A2B8 on Navy ............. 5.62  PASS AA
     Navy  #101C2E on Teal ............. 5.62  PASS AA
     Navy  #101C2E on Amber ............ 7.81  PASS AAA

   FAILURES FOUND, AND WHAT IS USED INSTEAD
     Teal  #17A2B8 on Pale mist ........ 2.78  FAIL
     Teal  #17A2B8 on White ............ 3.04  FAIL
     White on Teal ..................... 3.04  FAIL - a teal button with
                                          white text does not pass
     Amber #E0A52E on Pale mist ........ 2.00  FAIL
     White on Amber .................... 2.19  FAIL
       The brief proposed #12808F as the light-background substitute. It
       was measured and it ALSO fails for body text: 4.26 on Pale mist.
       So this build goes deeper:
       -> --teal-ink  #0F6B78 on Pale mist    5.65  PASS AA
       -> white on --teal-ink                 6.19  PASS AA
       -> --teal-bright #4FC9DA on Navy       8.72  PASS AAA (small text
                                                     on the dark bands)
       -> --amber-ink #6B4F04 on Pale mist    6.99  PASS AAA
       Teal is a GROUND carrying navy, or the darkened #0F6B78 carrying
       white. It is never #17A2B8 type on a light field.
   ===================================================================== */

:root{
  --navy:#101C2E;
  --steel:#1D2E45;
  --mist:#F2F5F8;
  --ink:#17202B;
  --slate:#4C6785;
  --teal:#17A2B8;
  --teal-ink:#0F6B78;
  --teal-bright:#4FC9DA;
  --amber:#E0A52E;
  --amber-ink:#6B4F04;
  --line:rgba(23,32,43,.14);
  --line-soft:rgba(23,32,43,.08);
  --line-dark:rgba(242,245,248,.18);
  --shadow:0 1px 3px rgba(16,28,46,.07),0 10px 26px rgba(16,28,46,.09);
  --shadow-lift:0 6px 14px rgba(16,28,46,.12),0 24px 50px rgba(16,28,46,.18);
  --r:12px;
  --r-lg:20px;
  --maxw:1180px;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --disp:"Barlow Condensed","Arial Narrow",var(--sans);
  --g-hero:radial-gradient(120% 100% at 70% 30%,#1D2E45 0%,#101C2E 70%);
  --g-scrim:linear-gradient(180deg,rgba(16,28,46,0) 0%,rgba(16,28,46,.80) 100%);
  --g-cta:linear-gradient(115deg,#101C2E 0%,#17A2B8 130%);
  --g-pulse:linear-gradient(90deg,#17A2B8,rgba(23,162,184,0));
  --g-dark:linear-gradient(165deg,#101C2E 0%,#1D2E45 100%);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--mist);color:var(--ink);
  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(--teal-ink);text-underline-offset:3px}
h1,h2,h3,h4{line-height:1.12;margin:0 0 .5em;font-weight:700;letter-spacing:-.015em;color:var(--navy)}
h1{font-family:var(--disp);font-size:clamp(2.3rem,6vw,4.1rem);font-weight:600;letter-spacing:0;line-height:1.02}
h2{font-family:var(--disp);font-size:clamp(1.8rem,3.8vw,2.8rem);font-weight:600;letter-spacing:0}
h3{font-size:clamp(1.08rem,1.9vw,1.28rem)}
p{margin:0 0 1em}
.wrap{width:min(100% - 2.4rem,var(--maxw));margin-inline:auto}
section{padding-block:clamp(3.2rem,7vw,5.6rem)}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-ink);margin:0 0 .8rem}
.lede{font-size:clamp(1rem,1.6vw,1.16rem);max-width:66ch;color:var(--slate)}
.center{text-align:center}
.center .lede{margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);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:#FFF6DF;color:var(--amber-ink);border:1px dashed #B08A25;
  border-radius:5px;padding:.04em .4em;font-size:.85em;font-weight:600}
.cfm-block{background:#FFFAF0;border:1px dashed #B08A25;border-left-width:5px;border-radius:10px;
  padding:.95rem 1.15rem;color:#5B4712;font-size:.95rem;margin:0 0 1.15rem}
.note-block{background:#fff;border:1px solid var(--line-soft);border-left:5px solid var(--teal-ink);
  border-radius:10px;padding:.95rem 1.15rem;font-size:.95rem;margin:0 0 1.15rem}
.scope-block{background:#EAF6F8;border:1px solid rgba(15,107,120,.28);border-left:5px solid var(--teal-ink);
  border-radius:10px;padding:1.05rem 1.25rem;font-size:.98rem;margin:0 0 1.15rem;color:#123B42}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:8px;border:2px 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)}
/* a teal button carries WHITE only at the darkened value: white on #17A2B8 is 3.04 */
.btn-teal{background:var(--teal-ink);color:#fff;box-shadow:0 6px 18px rgba(15,107,120,.26)}
.btn-teal:hover{background:#0D5C67;box-shadow:0 10px 26px rgba(15,107,120,.32)}
.btn-teal-lt{background:var(--teal);color:var(--navy)}
.btn-teal-lt:hover{background:var(--teal-bright)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--steel)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{background:rgba(16,28,46,.05)}
.btn-ghost-light{background:rgba(242,245,248,.1);color:#fff;border-color:rgba(242,245,248,.6)}
.btn-ghost-light:hover{background:rgba(242,245,248,.2)}
.btn-sm{padding:.55rem 1.05rem;font-size:.92rem}
[data-unconfirmed]{opacity:.62;cursor:not-allowed;filter:grayscale(.35)}
.btn .ar{transition:transform .22s ease}
.btn:hover .ar{transform:translateX(4px)}

/* ---------- utility bar ---------- */
.utility{background:var(--navy);color:rgba(242,245,248,.9);font-size:.84rem;padding:.45rem 0}
.utility .wrap{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between}
.utility a{color:var(--teal-bright)}
.u-left,.u-right{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
/* the PT/EN toggle is prominent by design: a large share of visitors need it immediately */
.lang{display:inline-flex;gap:.2rem;align-items:center;background:rgba(242,245,248,.12);border-radius:6px;padding:.15rem}
.lang a{padding:.16rem .6rem;border-radius:4px;text-decoration:none;font-weight:700;font-size:.8rem;color:rgba(242,245,248,.85)}
.lang a.on{background:var(--teal);color:var(--navy)}
.lang a:hover{color:#fff}

/* ---------- header: navy nav strip, boxed CTA right (AlarmX spine) ---------- */
.site-head{position:sticky;top:0;z-index:70;background:var(--steel);transition:box-shadow .28s ease,padding .28s ease;padding-block:.65rem}
.site-head.condensed{box-shadow:0 8px 26px rgba(16,28,46,.35);padding-block:.4rem}
.head-in{display:flex;align-items:center;gap:1.1rem}
.brand{display:flex;flex-direction:column;text-decoration:none;color:#fff;line-height:1.02}
.brand b{font-family:var(--disp);font-size:1.5rem;font-weight:600;letter-spacing:.01em}
.brand span{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal-bright);font-weight:700;margin-top:.15rem}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.6rem,1.1vw,1.05rem);flex-wrap:nowrap}
.nav a{color:rgba(242,245,248,.94);text-decoration:none;font-size:.92rem;font-weight:500;padding:.15rem 0;position:relative;
  white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--teal);transition:right .26s ease}
.nav a:hover::after{right:0}
.head-cta{display:flex;align-items:center;gap:.5rem}
.burger{display:none;background:none;border:2px solid var(--line-dark);border-radius:8px;width:44px;height:44px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:#fff;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff;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:var(--navy)}
.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:.78rem 0;border-bottom:1px solid var(--line-dark);color:#fff;text-decoration:none;font-weight:500}
.mobile-nav a:last-child{border-bottom:0}
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:inline-flex}
  .head-cta .btn-teal-lt{display:none}
}

/* ---------- hero: the cutout ---------- */
.hero{background:var(--g-hero);color:#fff;position:relative;overflow:hidden;
  padding-block:clamp(4rem,11vw,8rem)}
/* Photographic hero. The scrim keeps the copy at full contrast over any
   part of the image: bone on the darkened ground stays well clear of AA. */
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(16,28,46,.95) 0%,rgba(16,28,46,.86) 34%,rgba(16,28,46,.34) 78%,rgba(16,28,46,.12) 100%),
             linear-gradient(180deg,rgba(16,28,46,.28) 0%,rgba(16,28,46,.55) 100%)}
.hero::before{content:"";position:absolute;width:54rem;height:54rem;right:-18rem;top:-16rem;border-radius:50%;
  background:radial-gradient(circle,rgba(23,162,184,.18) 0%,rgba(23,162,184,0) 66%);pointer-events:none;
  animation:breathe 14s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(1);opacity:.7}to{transform:scale(1.12) translate(-3%,3%);opacity:1}}
.hero .wrap{position:relative;z-index:2;max-width:min(1240px,92vw)}
.hero h1{color:#fff;max-width:15ch}
.hero .eyebrow{color:var(--teal-bright)}
.hero .lede{color:rgba(242,245,248,.92);max-width:50ch}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}
/* the status pill replaces AlarmX's price circle */
.live{display:inline-flex;align-items:center;gap:.5rem;background:rgba(23,162,184,.16);
  border:1px solid rgba(23,162,184,.5);color:var(--teal-bright);border-radius:999px;
  padding:.28rem .85rem;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.live .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--teal);position:relative}
.live .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(23,162,184,.6);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.8);opacity:.9}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}

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

/* ---------- bands ---------- */
.band-white{background:#fff}
.band-dark{background:var(--g-dark);color:rgba(242,245,248,.9)}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark .eyebrow{color:var(--teal-bright)}
.band-dark .lede{color:rgba(242,245,248,.88)}
.band-dark a{color:var(--teal-bright)}
.grid{display:grid;gap:1.2rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:1.35rem;
  box-shadow:var(--shadow);transition:transform .26s ease,box-shadow .26s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card h3{margin-bottom:.35rem}
.card p:last-child{margin-bottom:0}
.band-dark .card{background:rgba(242,245,248,.06);border-color:var(--line-dark);color:rgba(242,245,248,.9)}
.band-dark .card p{color:rgba(242,245,248,.86)}
.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-lg);overflow:hidden;background:var(--steel);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:.8rem;color:var(--slate);padding:.5rem .1rem 0}
.band-dark .figure figcaption{color:rgba(242,245,248,.75)}
.ph-tag{position:absolute;left:.6rem;top:.6rem;z-index:2;background:rgba(16,28,46,.86);color:#fff;
  font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:.22rem .55rem;border-radius:5px}
.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:.55rem}
.ticks li{position:relative;padding-left:1.65rem;font-size:.97rem}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:.72rem;height:.72rem;border-radius:3px;background:var(--teal-ink)}
.band-dark .ticks li::before{background:var(--teal)}
.ticks.two{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

/* ---------- capability cards (AlarmX four-across, prices removed) ---------- */
.caps{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:2rem}
.cap{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}
.cap:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.cap .art{background:linear-gradient(160deg,#F7FAFB 0%,#E7EEF2 100%);padding:1.1rem}
.cap .art svg{width:100%;height:auto;display:block}
.cap-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.cap-body h3{margin:0}
.cap-body p{margin:0;font-size:.94rem;color:var(--slate)}
.cap .foot{margin-top:auto;padding-top:.5rem}

/* ---------- the four-part remote-access explainer ---------- */
.explain{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:2rem;counter-reset:ex}
.ex{background:rgba(242,245,248,.06);border:1px solid var(--line-dark);border-radius:var(--r-lg);
  padding:1.35rem;counter-increment:ex;position:relative}
.ex::before{content:counter(ex);display:inline-flex;align-items:center;justify-content:center;
  width:2.2rem;height:2.2rem;border-radius:8px;background:var(--teal);color:var(--navy);
  font-family:var(--disp);font-size:1.15rem;font-weight:600;margin-bottom:.7rem}
.ex h3{margin:0 0 .35rem;color:#fff}
.ex p{margin:0;font-size:.94rem;color:rgba(242,245,248,.86)}

/* ---------- projects gallery (drawn plates) ---------- */
.plates{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:1.9rem}
.plate{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .26s ease,box-shadow .26s ease}
.plate:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.plate svg{width:100%;height:auto;display:block}
.plate figcaption{padding:.85rem 1rem 1rem;font-size:.9rem}
.plate figcaption b{display:block;font-weight:600;color:var(--navy)}
.plate figcaption span{color:var(--slate);font-size:.85rem}

/* ---------- circular collage (AlarmX about band) ---------- */
.collage{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:26rem;margin:0}
.collage figure{margin:0;border-radius:50%;overflow:hidden;aspect-ratio:1/1;border:3px solid rgba(23,162,184,.35);position:relative}
.collage img{width:100%;height:100%;object-fit:cover}
.collage figure:nth-child(2){transform:translateY(1.6rem)}
.collage figure:nth-child(3){transform:translateY(-1.6rem)}
@media (max-width:520px){.collage figure:nth-child(2),.collage figure:nth-child(3){transform:none}}

/* ---------- service area ---------- */
.area-wrap{display:grid;gap:clamp(1.4rem,4vw,2.6rem);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.map-fig{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:1.1rem;box-shadow:var(--shadow);margin:0}
.map-fig svg{width:100%;height:auto}
.area-list{display:grid;gap:.45rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));list-style:none;margin:1rem 0 0;padding:0}
.area-list a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:#fff;
  border:1px solid var(--line-soft);border-radius:8px;padding:.58rem .8rem;text-decoration:none;
  color:var(--navy);font-weight:600;font-size:.94rem;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.area-list a:hover{transform:translateX(3px);border-color:var(--teal-ink);box-shadow:var(--shadow)}
.area-list a .ar{color:var(--teal-ink)}
.area-list li.plain span{display:block;background:rgba(255,255,255,.6);border:1px dashed var(--line);
  border-radius:8px;padding:.58rem .8rem;font-size:.94rem;color:var(--slate)}

/* ---------- form ---------- */
.form-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:clamp(1.3rem,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:.3rem;min-width:0}
.field.full{grid-column:1 / -1}
.field label{font-size:.85rem;font-weight:600;color:var(--navy)}
.field input,.field select,.field textarea{font:inherit;font-size:.97rem;padding:.66rem .8rem;
  border:1.5px solid var(--line);border-radius:8px;background:var(--mist);color:var(--ink);width:100%}
.field textarea{min-height:6rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal-ink);outline:none;
  box-shadow:0 0 0 3px rgba(15,107,120,.18)}
.field .hint{font-size:.8rem;color:var(--slate)}
.consent{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem;font-size:.9rem;color:var(--slate)}
.consent input{margin-top:.28rem;width:1.15rem;height:1.15rem;accent-color:var(--teal-ink);flex:0 0 auto}

/* ---------- FAQ ---------- */
.faq{max-width:62rem;margin-inline:auto;display:grid;gap:.55rem}
.faq details{background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:0 1.15rem;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 2rem 1rem 0;font-weight:600;color:var(--navy);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(--teal-ink);border-bottom:2px solid var(--teal-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}}

/* ---------- testimonial placeholders ---------- */
.quotes{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:1.8rem}
.quote{background:#fff;border:1px dashed #B08A25;border-radius:var(--r-lg);padding:1.3rem}
.quote blockquote{margin:0 0 .7rem;font-size:1.02rem;color:var(--ink)}
.quote figcaption{font-size:.88rem;color:var(--slate);font-weight:600}

/* ---------- CTA band ---------- */
.cta-band{background:var(--g-cta);color:#fff;text-align:center}
.cta-band h2{color:#fff;max-width:22ch;margin-inline:auto}
.cta-band .lede{color:rgba(255,255,255,.92)}

/* ---------- footer ---------- */
.site-foot{background:var(--navy);color:rgba(242,245,248,.85);padding-block:3.2rem 6.4rem;font-size:.94rem}
.site-foot h4{color:#fff;font-size:1rem;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.7rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.34rem}
.foot-bottom{border-top:1px solid var(--line-dark);margin-top:2.2rem;padding-top:1.3rem;display:flex;
  gap:1rem;flex-wrap:wrap;justify-content:space-between;font-size:.86rem;color:rgba(242,245,248,.7)}
.mock-note{background:rgba(242,245,248,.06);border:1px dashed rgba(23,162,184,.55);border-radius:12px;
  padding:.9rem 1.1rem;margin-top:1.7rem;font-size:.86rem;color:rgba(242,245,248,.92)}

/* ---------- WhatsApp + mobile bar ----------
   The +55 matters more here than anywhere else in the batch: a large
   share of this audience dials internationally. */
.wa-bubble{position:fixed;right:1rem;bottom:1rem;z-index:90;width:56px;height:56px;border-radius:50%;
  background:#1C8C4B;color:#fff;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(16,28,46,.36);text-decoration:none;border:none;cursor:pointer;transition:transform .24s ease}
.wa-bubble:hover{transform:scale(1.07)}
.wa-bubble svg{width:28px;height:28px;fill:currentColor}
.wa-bubble::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(28,140,75,.45);animation:pulse2 2.8s ease-out infinite}
@keyframes pulse2{0%{transform:scale(.9);opacity:.9}70%{transform:scale(1.26);opacity:0}100%{opacity:0}}
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:88;display:none;background:var(--steel);
  box-shadow:0 -6px 22px rgba(16,28,46,.36);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:.98rem;font-weight:700;color:#fff;text-decoration:none;border-right:1px solid var(--line-dark)}
.mobile-bar a:last-child{border-right:0;background:var(--teal);color:var(--navy)}
@media (max-width:768px){
  .mobile-bar{display:flex}
  .wa-bubble{bottom:4.6rem}
  .site-foot{padding-bottom:8.4rem}
}

/* ---------- LGPD ---------- */
.lgpd{position:fixed;left:0;right:0;bottom:0;z-index:120;background:#fff;border-top:3px solid var(--teal-ink);
  box-shadow:0 -12px 40px rgba(16,28,46,.28);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.08rem;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}
.lgpd-row small{font-size:.85rem;color:var(--slate)}
@media (max-width:768px){.lgpd{padding-bottom:5.4rem}}

/* ---------- page heads / prose ---------- */
.page-head{background:var(--g-dark);color:rgba(242,245,248,.9);padding-block:clamp(2.4rem,5vw,3.6rem) clamp(1.5rem,3.5vw,2.2rem)}
.page-head h1{color:#fff}
.page-head .lede{color:rgba(242,245,248,.88)}
.crumbs{font-size:.85rem;color:rgba(242,245,248,.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:.76rem}
  .card{padding:1.15rem}
}
@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::before{animation:none}
  .wa-bubble::after,.live .dot::after{display:none}
}
@media print{
  .utility,.site-head,.wa-bubble,.mobile-bar,.lgpd{display:none !important}
  body{font-size:11pt;color:#000;background:#fff}
  .hero{color:#000;background:#fff}
}

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

/* head-cta-nowrap: keep the header CTA on one line beside the nav. */
.site-head .btn,.hdr .btn{white-space:nowrap}

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