/* =====================================================================
   Sollar Sul - Florianopolis, SC  -  spec mockup stylesheet

   NOTE THE DOUBLE L. "Sollar Sul" reads as a deliberate portmanteau of
   solar and sol. It is spelled the way they spell it everywhere on this
   build and is never silently "corrected" to Solar Sul.

   THIS IS A COMPLIANCE-LED BUILD. Solar in Florianopolis is sold badly and
   identically by everyone: a savings percentage on the hero, a payback
   number nobody can substantiate, a stock family, a form that goes
   nowhere. That is also a consumer-law liability, because those figures
   depend on tariff, consumption, orientation, shading and a compensation
   framework that changed under Lei 14.300/2022 and will change again.

   So this build sells the opposite: the ART, NBR 5410, and a CELESC
   homologacao carried by the contractor rather than handed to the
   customer. There is NO savings percentage, NO payback period and NO
   generation figure anywhere on this site.

   STATUS: speculative pitch build. NOTHING could be verified - the only
   public source is an Instagram profile behind a login wall.

   ---------------------------------------------------------------------
   PALETTE  [CONFIRM against their logo - Instagram-only lead, no brand
   file could be retrieved. Proposed, not read.]
   ---------------------------------------------------------------------
     Deep slate    #0E2A38   hero band, footer, dark sections
     Steel         #1F4256   secondary dark
     White         #FFFFFF   cards
     Cool haze     #EFF3F5   page field
     Solar amber   #F2A81D   the SOLAR half and the primary CTA
     Circuit green #2BB673   the ELECTRICAL half and secondary UI
     Ink           #16202A   body text

   Two accents that split the two halves of one business: amber is solar,
   green is electrical. They are never mixed inside one component, because
   the whole structural point of this build is that these are two
   different purchases with two different urgencies.

   ---------------------------------------------------------------------
   MEASURED CONTRAST (WCAG 2.2 AA / eMAG / Lei 13.146/2015 art. 63)
   ---------------------------------------------------------------------
     Ink   #16202A on Cool haze ....... 14.76  PASS AAA
     Slate #0E2A38 on Cool haze ....... 13.37  PASS AAA
     Steel #1F4256 on Cool haze ........ 9.54  PASS AAA
     Cool haze on Slate ............... 13.37  PASS AAA
     Amber #F2A81D on Slate ............ 7.39  PASS AAA
     Ink   #16202A on Amber ............ 8.16  PASS AAA
     Green #2BB673 on Slate ............ 5.72  PASS AA
     Ink   #16202A on Green ............ 6.31  PASS AA

   FAILURES FOUND, AND WHAT IS USED INSTEAD
     Amber #F2A81D on Cool haze ........ 1.81  FAIL
     Amber #F2A81D on White ............ 2.02  FAIL
     White on Amber .................... 2.02  FAIL - an amber button with
                                         white text does not pass
     Green #2BB673 on Cool haze ........ 2.34  FAIL
     White on Green .................... 2.61  FAIL
       The brief proposed #C9860C as the light-background amber. It was
       measured and it ALSO fails: 2.73 on Cool haze. So this build goes
       deeper, and says so:
       -> --amber-ink #7A5002 on Cool haze     6.32  PASS AAA
       -> white on --amber-ink                 7.06  PASS AAA
       -> --green-ink #146341 on Cool haze     6.51  PASS AAA
       -> white on --green-ink                 7.26  PASS AAA
       -> --amber-bright #FFC24A on Slate      9.29  PASS AAA
       -> --green-bright #7FD9AE on Slate      8.84  PASS AAA
       Amber and green are GROUNDS carrying ink, or bright variants used
       as type on the dark bands. Neither is ever set as type on a light
       field; the darkened inks do that job.

   DELIBERATELY NOT BUILT, from the Solix reference: the stats row, the
   years badge and the percentage progress bars. A bar reading "90%" beside
   the words "Solar Panels" will be read as an efficiency or a savings
   figure, and publishing an unsubstantiated performance number here is a
   real CDC exposure. That panel is replaced by the compliance block.
   ===================================================================== */

:root{
  --slate:#0E2A38;
  --steel:#1F4256;
  --haze:#EFF3F5;
  --ink:#16202A;
  --muted:#4A5762;
  --amber:#F2A81D;
  --amber-ink:#7A5002;
  --amber-bright:#FFC24A;
  --green:#2BB673;
  --green-ink:#146341;
  --green-bright:#7FD9AE;
  --line:rgba(22,32,42,.14);
  --line-soft:rgba(22,32,42,.08);
  --line-dark:rgba(239,243,245,.18);
  --shadow:0 1px 3px rgba(14,42,56,.07),0 10px 26px rgba(14,42,56,.09);
  --shadow-lift:0 6px 14px rgba(14,42,56,.12),0 24px 50px rgba(14,42,56,.18);
  --r:14px;
  --maxw:1200px;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --disp:"Barlow","Arial Narrow",var(--sans);
  --g-scrim:linear-gradient(180deg,rgba(14,42,56,0) 0%,rgba(14,42,56,.78) 100%);
  --g-cta:linear-gradient(115deg,#0E2A38 0%,#1F4256 100%);
  --g-solar:linear-gradient(90deg,#F2A81D,#FFCE5C);
  --g-elec:linear-gradient(90deg,#2BB673,#7FD9AE);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--haze);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(--green-ink);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.08;margin:0 0 .5em;font-weight:700;
  letter-spacing:-.02em;color:var(--slate)}
h1{font-size:clamp(2.2rem,5.8vw,4rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.08rem,1.9vw,1.3rem)}
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(--green-ink);margin:0 0 .8rem}
.eyebrow.solar{color:var(--amber-ink)}
.lede{font-size:clamp(1rem,1.6vw,1.16rem);max-width:66ch;color:var(--muted)}
.center{text-align:center}
.center .lede{margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--slate);color:#fff;padding:.7rem 1.1rem;z-index:200}
.skip:focus{left:.6rem;top:.6rem}
:focus-visible{outline:3px solid var(--green-ink);outline-offset:3px;border-radius:4px}

.cfm{display:inline-block;background:#FFF3D9;color:var(--amber-ink);border:1px dashed #B08118;
  border-radius:5px;padding:.04em .4em;font-size:.85em;font-weight:600}
.cfm-block{background:#FFF8EC;border:1px dashed #B08118;border-left-width:5px;border-radius:10px;
  padding:.95rem 1.15rem;color:#6B4502;font-size:.95rem;margin:0 0 1.15rem}
.note-block{background:#fff;border:1px solid var(--line-soft);border-left:5px solid var(--green-ink);
  border-radius:10px;padding:.95rem 1.15rem;font-size:.95rem;margin:0 0 1.15rem}
.warn-block{background:#FFF1E8;border:1px solid rgba(122,80,2,.28);border-left:5px solid var(--amber-ink);
  border-radius:10px;padding:.95rem 1.15rem;font-size:.95rem;margin:0 0 1.15rem;color:#5C3B02}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.86rem 1.55rem;border-radius:10px;border:2px solid transparent;
  font:inherit;font-size:1rem;font-weight:700;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)}
/* an amber button carries INK: white on #F2A81D is 2.02 */
.btn-amber{background:var(--amber);color:var(--ink);box-shadow:0 6px 18px rgba(242,168,29,.32)}
.btn-amber:hover{background:var(--amber-bright);box-shadow:0 10px 26px rgba(242,168,29,.4)}
.btn-green{background:var(--green);color:var(--ink);box-shadow:0 6px 18px rgba(43,182,115,.28)}
.btn-green:hover{background:var(--green-bright)}
.btn-slate{background:var(--slate);color:#fff}
.btn-slate:hover{background:var(--steel)}
.btn-ghost{background:transparent;color:var(--slate);border-color:var(--line)}
.btn-ghost:hover{background:rgba(14,42,56,.05)}
.btn-ghost-light{background:rgba(239,243,245,.1);color:#fff;border-color:rgba(239,243,245,.62)}
.btn-ghost-light:hover{background:rgba(239,243,245,.22)}
.btn-sm{padding:.55rem 1.05rem;font-size:.92rem}
.btn .ar{transition:transform .22s ease}
.btn:hover .ar{transform:translateX(4px)}
[data-unconfirmed]{opacity:.62;cursor:not-allowed;filter:grayscale(.35)}

/* ---------- utility bar: the CREA credential lives here, not the footer ---------- */
.utility{background:var(--slate);color:rgba(239,243,245,.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(--amber-bright)}
.u-left,.u-right{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.crea{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,194,74,.18);
  border:1px solid rgba(255,194,74,.5);color:var(--amber-bright);border-radius:6px;
  padding:.14rem .6rem;font-weight:700;font-size:.78rem}
.lang{display:inline-flex;gap:.15rem;align-items:center;background:rgba(239,243,245,.12);border-radius:6px;padding:.14rem}
.lang a{padding:.14rem .55rem;border-radius:4px;text-decoration:none;font-weight:700;font-size:.78rem;color:rgba(239,243,245,.85)}
.lang a.on{background:var(--amber);color:var(--ink)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:70;background:#fff;border-bottom:1px solid var(--line-soft);
  transition:padding .26s ease,box-shadow .26s ease;padding-block:.8rem}
.site-head.condensed{padding-block:.45rem;box-shadow:0 6px 22px rgba(14,42,56,.1)}
.head-in{display:flex;align-items:center;gap:1rem}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--slate);line-height:1.02}
.brand b{font-family:var(--disp);font-size:1.42rem;font-weight:700;letter-spacing:-.02em}
.brand span{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green-ink);font-weight:700;margin-top:.15rem}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.05rem}
.nav a{color:var(--slate);text-decoration:none;font-size:.93rem;font-weight:600;padding:.15rem 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:3px;background:var(--amber);transition:right .24s 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);border-radius:10px;width:44px;height:44px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2.3px;background:var(--slate);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2.3px;background:var(--slate);transition:transform .24s ease,top .24s ease}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.mobile-nav{display:none;background:#fff;border-top:1px solid var(--line-soft)}
.mobile-nav.open{display:block;animation:drop .28s ease}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mobile-nav a{display:block;padding:.78rem 0;border-bottom:1px solid var(--line-soft);color:var(--slate);text-decoration:none;font-weight:600}
.mobile-nav a:last-child{border-bottom:0}
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:inline-flex}
  .head-cta .btn-amber{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(460px,72vh,650px);display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.hero-scrim{position:absolute;inset:0;z-index:1;background:var(--g-scrim)}
.hero-in{position:relative;z-index:2;padding-block:clamp(2.4rem,6vw,4rem) clamp(3rem,7vw,4.6rem)}
.hero h1{color:#fff;max-width:17ch}
.hero .eyebrow{color:var(--amber-bright)}
.hero .lede{color:rgba(255,255,255,.94);max-width:56ch}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}

/* ---------- the two-track split ---------- */
.tracks{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:-3rem;position:relative;z-index:6}
.track{background:#fff;border:2px solid transparent;border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-lift);
  transition:transform .26s ease,box-shadow .26s ease}
.track:hover{transform:translateY(-4px)}
.track.solar{border-color:var(--amber)}
.track.elec{border-color:var(--green)}
.track .media{position:relative}
.track .media img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s cubic-bezier(.22,.7,.3,1)}
.track:hover .media img{transform:scale(1.04)}
.track-body{padding:1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.track .tag{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.2rem .7rem;
  font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;align-self:flex-start}
.track.solar .tag{background:var(--amber);color:var(--ink)}
.track.elec .tag{background:var(--green);color:var(--ink)}
.track h3{margin:0;font-size:clamp(1.3rem,2.4vw,1.75rem)}
.track p{margin:0;color:var(--muted)}
.track .foot{margin-top:auto;padding-top:.6rem;display:flex;gap:.5rem;flex-wrap:wrap}
@media (max-width:820px){.tracks{margin-top:1.4rem}}

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

/* ---------- bands / cards ---------- */
.band-white{background:#fff}
.band-slate{background:var(--g-cta);color:rgba(239,243,245,.9)}
.band-slate h2,.band-slate h3{color:#fff}
.band-slate .eyebrow{color:var(--amber-bright)}
.band-slate .eyebrow.elec{color:var(--green-bright)}
.band-slate .lede{color:rgba(239,243,245,.88)}
.band-slate a{color:var(--amber-bright)}
.grid{display:grid;gap:1.1rem}
.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);padding:1.35rem;
  box-shadow:var(--shadow);transition:transform .24s ease,box-shadow .24s ease;
  border-top:4px solid transparent}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card.solar{border-top-color:var(--amber)}
.card.elec{border-top-color:var(--green)}
.card h3{margin-bottom:.35rem}
.card p:last-child{margin-bottom:0}
.card .foot{margin-top:.8rem;display:flex;gap:.45rem;flex-wrap:wrap}
.band-slate .card{background:rgba(239,243,245,.06);border-color:var(--line-dark);color:rgba(239,243,245,.9)}
.band-slate .card p{color:rgba(239,243,245,.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);overflow:hidden;background:var(--steel);position:relative;margin:0}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.7,.3,1)}
.figure:hover img{transform:scale(1.04)}
.figure figcaption{font-size:.8rem;color:var(--muted);padding:.5rem .1rem 0}
.band-slate .figure figcaption{color:rgba(239,243,245,.75)}
.ph-tag{position:absolute;left:.6rem;top:.6rem;z-index:2;background:rgba(14,42,56,.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-16x9 img{aspect-ratio:16/9}
.ratio-1x1 img{aspect-ratio:1/1}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ticks li{position:relative;padding-left:1.65rem;font-size:.96rem}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:.72rem;height:.72rem;border-radius:3px;background:var(--green-ink)}
.ticks.solar li::before{background:var(--amber-ink)}
.band-slate .ticks li::before{background:var(--green-bright)}
.band-slate .ticks.solar li::before{background:var(--amber-bright)}
.ticks.two{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ---------- keyword marquee ---------- */
.marquee{background:var(--slate);color:#fff;overflow:hidden;padding:.85rem 0;border-block:1px solid var(--line-dark)}
.marquee-track{display:flex;gap:2.4rem;width:max-content;animation:slide 38s linear infinite}
.marquee span{font-family:var(--disp);font-size:1.05rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;color:rgba(239,243,245,.86)}
.marquee span::after{content:"\00b7";margin-left:2.4rem;color:var(--amber)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}

/* ---------- the homologacao rail ---------- */
.rail{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:2rem;counter-reset:st}
.stage{counter-increment:st;background:rgba(239,243,245,.06);border:1px solid var(--line-dark);
  border-radius:var(--r);padding:1.3rem;position:relative}
.stage::before{content:counter(st);display:inline-flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;border-radius:10px;background:var(--amber);color:var(--ink);
  font-family:var(--disp);font-size:1.2rem;font-weight:700;margin-bottom:.7rem}
.stage h3{margin:0 0 .35rem;color:#fff;font-size:1.04rem}
.stage p{margin:0 0 .6rem;font-size:.92rem;color:rgba(239,243,245,.86)}
.who{display:inline-flex;align-items:center;gap:.3rem;border-radius:999px;padding:.16rem .6rem;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.who.us{background:var(--green-bright);color:var(--ink)}
.who.util{background:rgba(239,243,245,.16);color:#fff}
.who.you{background:var(--amber-bright);color:var(--ink)}

/* ---------- compliance panel ---------- */
.comply{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:2rem}
.comply .item{background:rgba(239,243,245,.06);border:1px solid var(--line-dark);border-radius:var(--r);padding:1.35rem}
.comply .item h3{margin:0 0 .4rem;color:#fff}
.comply .item p{margin:0;font-size:.94rem;color:rgba(239,243,245,.88)}
.comply .std{display:inline-block;font-family:var(--disp);font-weight:700;letter-spacing:.06em;
  background:var(--amber);color:var(--ink);border-radius:6px;padding:.12rem .55rem;font-size:.82rem;margin-bottom:.6rem}

/* ---------- projects: dark gallery band ---------- */
.gallery{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:1.9rem}
.shot{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s cubic-bezier(.22,.7,.3,1)}
.shot:hover img{transform:scale(1.05)}
.shot .cap{position:absolute;left:0;right:0;bottom:0;padding:2rem .9rem .8rem;color:#fff;
  background:linear-gradient(180deg,rgba(14,42,56,0) 0%,rgba(14,42,56,.9) 100%);font-size:.88rem}
.shot .cap b{display:block;font-weight:700}

/* ---------- quote form ---------- */
.quote-wrap{display:grid;gap:clamp(1.4rem,4vw,2.6rem);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.form-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  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:.82rem;font-weight:700;color:var(--slate)}
.field input,.field select,.field textarea{font:inherit;font-size:.97rem;padding:.66rem .8rem;
  border:2px solid var(--line);border-radius:10px;background:var(--haze);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-ink);outline:none;
  box-shadow:0 0 0 3px rgba(20,99,65,.18)}
.field .hint{font-size:.8rem;color:var(--muted)}
.field input[aria-invalid="true"]{border-color:#A3341A}
.consent{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem;font-size:.9rem;color:var(--muted)}
.consent input{margin-top:.28rem;width:1.15rem;height:1.15rem;accent-color:var(--green-ink);flex:0 0 auto}
.kwh-help{background:var(--haze);border-left:5px solid var(--amber);border-radius:10px;
  padding:.8rem 1rem;font-size:.9rem;margin:.4rem 0 0}

/* ---------- 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);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(170px,1fr));list-style:none;margin:1rem 0 0;padding:0}
.area-list li span{display:block;background:#fff;border:1px solid var(--line-soft);border-radius:10px;
  padding:.55rem .8rem;font-size:.94rem;font-weight:600;color:var(--slate)}

/* ---------- 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:700;color:var(--slate);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.15rem;top:1.35rem;width:9px;height:9px;
  border-right:2.4px solid var(--amber-ink);border-bottom:2.4px solid var(--amber-ink);
  transform:rotate(45deg);transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details > *:not(summary){padding-bottom:1rem;margin-top:-.25rem}
.faq details[open] > *:not(summary){animation:fadein .26s ease}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

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

/* ---------- 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(239,243,245,.92)}
.cta-band .phone{display:block;margin-top:1rem;font-family:var(--disp);font-size:1.2rem;font-weight:700;color:var(--amber-bright)}

/* ---------- footer ---------- */
.site-foot{background:var(--slate);color:rgba(239,243,245,.85);padding-block:3.2rem 6.4rem;font-size:.94rem}
.site-foot h4{color:#fff;font-family:var(--disp);font-size:1rem;margin-bottom:.6rem}
.site-foot a{color:var(--amber-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(239,243,245,.7)}
.mock-note{background:rgba(239,243,245,.06);border:1px dashed rgba(255,194,74,.55);border-radius:12px;
  padding:.9rem 1.1rem;margin-top:1.6rem;font-size:.86rem;color:rgba(239,243,245,.92)}

/* ---------- WhatsApp + mobile bar ----------
   On the electrical track this bar is the primary conversion path: an
   electrical fault is an urgent, phone-first problem. */
.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(14,42,56,.34);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:pulse 2.8s ease-out infinite}
@keyframes pulse{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(--slate);
  box-shadow:0 -6px 22px rgba(14,42,56,.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(--amber);color:var(--ink)}
@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:4px solid var(--amber);
  box-shadow:0 -12px 40px rgba(14,42,56,.26);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(--green-ink)}
.lgpd-row b{display:block;font-size:.95rem;color:var(--slate)}
.lgpd-row small{font-size:.85rem;color:var(--muted)}
@media (max-width:768px){.lgpd{padding-bottom:5.4rem}}

/* ---------- page heads / prose ---------- */
.page-head{background:var(--g-cta);color:rgba(239,243,245,.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(239,243,245,.88)}
.crumbs{font-size:.85rem;color:rgba(239,243,245,.7);margin-bottom:.7rem}
.crumbs a{color:var(--amber-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}
  .wa-bubble::after{display:none}
}
@media print{
  .utility,.site-head,.wa-bubble,.mobile-bar,.lgpd,.marquee{display:none !important}
  body{font-size:11pt;color:#000;background:#fff}
  .hero{min-height:auto;color:#000}
  .hero-scrim{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}
}