:root{--ink:#151515;--text:#343434;--muted:#666;--paper:#fff;--soft:#f2f2f2;--line:#a9a9a9;--slot:#ddd;--content:1328px;--margin:max(20px,calc((100vw - var(--content))/2));--section:112px;--radius:2px;--heading:'Barlow Condensed',Arial,sans-serif;--body:'Inter',Arial,sans-serif;--d80:80px;--d72:72px;--h64:64px;--h56:56px;--h48:48px;--h40:40px;--h32:32px;--h24:24px;--b18:18px;--b16:16px;--b14:14px;--b12:12px;--lh-display:.94;--lh-heading:1.02;--lh-body:1.65;--tr-titulo:-.018em;--tr-etiqueta:.17em}
*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:clip}body{margin:0;background:var(--paper);color:var(--text);font-family:var(--body);font-size:var(--b16);line-height:var(--lh-body)}a{color:inherit}p{margin:0 0 18px;max-width:68ch;text-wrap:pretty}h1,h2,h3{color:var(--ink);font-family:var(--heading);font-weight:600;line-height:var(--lh-heading);letter-spacing:var(--tr-titulo);margin:0 0 18px;text-wrap:balance}h1{font-size:clamp(var(--h48),7vw,var(--d80));line-height:var(--lh-display)}h2{font-size:clamp(var(--h32),4.3vw,var(--h64))}h3{font-size:clamp(var(--h24),2vw,var(--h32))}.shell{width:calc(100% - 112px);max-width:var(--content);margin-inline:auto}.section{padding-block:var(--section)}.section--tint{background:var(--soft)}.centered{text-align:center}.centered>*{margin-inline:auto}.section-heading{margin-bottom:48px}.two-column{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:72px}.section-label{color:var(--muted);font-size:var(--b14);font-weight:500;margin-bottom:13px}.skip-link{position:fixed;z-index:10;top:8px;left:8px;background:#fff;padding:10px;transform:translateY(-160%)}.skip-link:focus{transform:none}.site-header{height:72px;display:flex;gap:24px;align-items:center;justify-content:space-between}.wordmark{color:var(--ink);font-weight:600;font-size:28px;letter-spacing:var(--tr-titulo);text-decoration:none}.wordmark span{border-left:1px solid var(--line);font-size:var(--b12);letter-spacing:var(--tr-etiqueta);margin-left:8px;padding-left:8px;vertical-align:middle}.site-nav{display:flex;gap:22px;font-size:var(--b12);font-weight:500;letter-spacing:var(--tr-etiqueta)}.site-nav a{text-decoration:none}.button{display:inline-flex;min-height:46px;align-items:center;justify-content:center;padding:10px 20px;background:var(--ink);border:1px solid var(--ink);color:var(--ink);font-size:var(--b14);font-weight:500;letter-spacing:.05em;text-decoration:none}.button--secondary{background:transparent;color:var(--ink)}.button-group{display:flex;gap:12px;flex-wrap:wrap}.hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-block:32px 36px}.hero-copy{padding:50px 0}.hero-copy h1{max-width:12ch}.hero-services{font-size:var(--b14);color:var(--muted);margin:28px 0}.photo-slot,.diagram-slot{display:grid;min-height:230px;place-items:center;border:1px dashed var(--line);background:repeating-linear-gradient(135deg,#fafafa,#fafafa 9px,#f2f2f2 9px,#f2f2f2 10px);color:var(--muted);padding:20px;text-align:center;font-size:var(--b12);font-weight:500;letter-spacing:var(--tr-etiqueta)}.photo-slot--hero{min-height:610px}.service-strip{border-block:1px solid var(--line);padding:20px;overflow:hidden;text-align:center;font-size:var(--b12);font-weight:500;letter-spacing:var(--tr-etiqueta);word-spacing:16px}.service-strip span{color:var(--muted)}.bento-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}.service-card{display:flex;min-height:290px;flex-direction:column;border:1px solid var(--line);padding:24px}.service-card--tall{grid-row:span 2}.service-card .photo-slot{min-height:110px;margin:-24px -24px 24px}.service-card--tall .photo-slot{min-height:260px}.card-number{color:var(--muted);font-size:var(--h40);font-weight:600;margin-bottom:4px}.review-note{max-width:none;border-left:3px solid var(--ink);background:#e5e5e5;color:#333;padding:13px 16px;font-size:var(--b14);margin:28px 0 0}.about-grid{display:grid;grid-template-columns:1fr;gap:112px}.about-grid>div:first-child{max-width:920px}.about-team{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}.about-team .photo-slot{min-height:430px;margin:0}.about-team__copy{min-width:0}.lead{font-weight:700;color:var(--ink)}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.tabs button{min-height:58px;border:1px solid var(--line);background:#fff;color:var(--ink);font:500 var(--b14) var(--body);letter-spacing:.06em;cursor:pointer}.tabs button[aria-selected="true"]{background:var(--ink);color:var(--ink)}.service-panel{display:grid;grid-template-columns:.75fr 1fr;gap:56px;padding:48px;border:1px solid var(--line)}.service-panel[hidden]{display:none}.icon-slot{width:62px;height:62px;border:1px solid var(--line);background:#fff}.service-panel .icon-slot{width:100%;height:260px}.service-panel h3{font-size:var(--h24);margin-bottom:4px}.process-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.diagram-slot{min-height:350px}.timeline{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}.timeline li{position:relative;padding:0 0 38px 42px}.timeline li span{position:absolute;left:-17px;top:0;display:grid;width:33px;height:33px;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--soft);font-size:var(--b12);font-weight:500}.timeline h3{font-size:var(--h24);margin:0 0 5px}.comparison-slot{display:grid;grid-template-columns:1fr 1fr;height:370px;border:1px solid var(--line)}.comparison-slot>div{display:grid;place-items:center;background:var(--slot);border-right:1px solid var(--line);padding:20px;text-align:center;font-size:var(--b12);font-weight:500;color:var(--muted)}.comparison-slot>div+div{background:#f7f7f7;border:0}.three-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.wire-card{min-height:260px;border:1px solid var(--line);padding:24px}.wire-card>span,.care-stack>article>span{display:block;color:var(--muted);font-size:var(--h32);font-weight:600;margin-bottom:40px}.care-stack{max-width:1020px;margin:auto}.care-stack article{display:grid;grid-template-columns:100px 1fr;min-height:170px;align-items:center;gap:24px;border:1px solid var(--line);padding:26px;margin-bottom:18px}.care-stack p{margin:0}.proof-slot{display:grid;min-height:200px;place-items:center;border:1px dashed var(--line);padding:30px;color:var(--muted)}.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px}.faq-list details{border-top:1px solid var(--line);padding:18px 0}.faq-list details:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer;font-weight:700}summary span{float:right}.faq-list p{padding-top:16px;margin:0}.section--cta{border-block:1px solid var(--line);text-align:center}.section--cta .button{margin-top:12px}.site-footer{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;padding-block:40px;font-size:var(--b12)}.site-footer .review-note{width:100%}
@media(max-width:900px){.site-nav{display:none}}
@media(max-width:767px){:root{--section:80px}.shell{width:calc(100% - 40px)}.site-header{height:auto;min-height:76px;padding-block:18px}.site-nav,.site-header .button{display:none}.wordmark{font-size:var(--h24)}.wordmark span{display:none}.hero,.about-grid,.process-grid,.faq-grid,.two-column,.service-panel{grid-template-columns:1fr;gap:32px}.hero-copy{padding:10px 0}.photo-slot--hero{min-height:340px}.bento-grid{grid-template-columns:1fr}.service-card--tall{grid-row:auto}.service-card--tall .photo-slot{min-height:170px}.tabs{grid-template-columns:1fr;gap:8px}.service-panel{padding:24px}.service-panel .icon-slot{height:160px}.comparison-slot{height:250px}.three-cards{grid-template-columns:1fr}.care-stack article{grid-template-columns:1fr;gap:12px}.timeline{margin-left:15px}.service-strip{font-size:var(--b12);letter-spacing:.02em;word-spacing:1px;line-height:1.8}.site-footer{display:grid;justify-content:initial}.button-group{flex-direction:column}.button-group .button{width:100%;flex:none}.hero-services{overflow-wrap:anywhere}.section-heading{margin-bottom:32px}}

/* grid da referência: 24px nas laterais e canvas útil limitado a 1520px */
:root{--page-gutter:24px;--content:1520px}
.shell{width:calc(100% - 48px);max-width:var(--content);margin-inline:auto}
.header-shell,.hero-shell{max-width:none}

/* ---------------------------------------------------------------
   v2-wireframe: só o que a v2.1 tem e a v1 não tinha.
   Mesma linguagem — traço fino, hachura, cinza, sem cor de marca.
   --------------------------------------------------------------- */

/* números / fatos */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);padding-top:32px}
.fact{border-left:1px solid var(--line);padding-left:20px}
.fact b{display:block;color:var(--ink);font-family:var(--heading);font-size:var(--h56);font-weight:600;line-height:1;letter-spacing:var(--tr-titulo)}
.fact span{display:block;color:var(--muted);font-size:var(--b12);font-weight:500;letter-spacing:var(--tr-etiqueta);margin-top:10px}

/* marcas de barco: fila de slots de logotipo */
.logo-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;border-block:1px solid var(--line);padding:32px 0}
.logo-slot{display:grid;width:190px;height:76px;place-items:center;gap:6px;border:1px dashed var(--line);background:repeating-linear-gradient(135deg,#fafafa,#fafafa 9px,#f2f2f2 9px,#f2f2f2 10px);color:var(--muted);font-size:var(--b12);font-weight:500;letter-spacing:var(--tr-etiqueta);text-align:center;padding:0 8px;line-height:1.3}

/* nota do Google */
.rating-block{display:grid;grid-template-columns:220px 1fr;gap:56px;align-items:center;border:1px solid var(--line);padding:44px}
.rating-score{text-align:center;border-right:1px solid var(--line);padding-right:40px}
.rating-score b{display:block;color:var(--ink);font-family:var(--heading);font-size:var(--d80);font-weight:600;line-height:1;letter-spacing:var(--tr-titulo)}
.rating-score span{display:block;color:var(--muted);font-size:var(--b12);font-weight:500;letter-spacing:var(--tr-etiqueta);margin-top:12px}

/* cobertura */
.chip-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip-row span{border:1px solid var(--line);padding:8px 16px;font-size:var(--b14)}

/* ponte para a marca irmã */
.bridge-note{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;border:1px solid var(--line);padding:26px;margin-top:44px}
.bridge-note h3{margin:0 0 4px;font-size:var(--h24)}
.bridge-note p{margin:0;color:var(--muted);font-size:var(--b14)}

/* contato sem formulário */
.contact-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:28px}

@media(max-width:900px){
  .facts{grid-template-columns:repeat(2,1fr);gap:28px}
  .report-grid,.rating-block{grid-template-columns:1fr;gap:32px}
  .rating-score{border-right:0;border-bottom:1px solid var(--line);padding:0 0 24px}
}
@media(max-width:767px){
  .facts{grid-template-columns:1fr;gap:20px}
  .fact{border-left:0;border-top:1px solid var(--line);padding:14px 0 0}
  .fact b{font-size:var(--h48)}
  .logo-slot{width:calc(50% - 8px);height:64px}
  .rating-score b{font-size:var(--h56)}
  .bridge-note{flex-direction:column;align-items:flex-start}
  .contact-actions{flex-direction:column}
  .contact-actions .button{width:100%}
}

/* ---------------------------------------------------------------
   HERO v2 — layout de referência (AquaLux):
   moldura de imagem sangrada, texto sobreposto, números em faixa
   com divisórias, cartão flutuante no topo direito e barra no fim.
   --------------------------------------------------------------- */
.hero-v2{position:relative;padding-block:20px 0}
.hero-v2__frame{
  position:relative;display:flex;flex-direction:column;justify-content:flex-start;
  min-height:620px;border:1px dashed var(--line);
  background:repeating-linear-gradient(135deg,#fafafa,#fafafa 9px,#f2f2f2 9px,#f2f2f2 10px);
  padding:36px;gap:32px;
}
.hero-v2__frame:after{
  content:'FOTO — BARCO ATENDIDO PELA SD3, MARINA DE SAN DIEGO';
  position:absolute;right:36px;top:auto;bottom:180px;max-width:26ch;
  color:var(--muted);font-size:var(--b12);font-weight:500;letter-spacing:var(--tr-etiqueta);
  text-align:right;line-height:1.6;pointer-events:none;
}
.hero-v2__lead{font-size:var(--b16);color:var(--ink);line-height:1.6;margin:0 0 8px;max-width:34ch}
.hero-v2__services{max-width:66ch;margin:0 0 18px;color:var(--muted);font-size:var(--b14);line-height:1.5}

.hero-v2__headline{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:64px;align-items:end;margin:auto 0 0}
.hero-v2__title-group{min-width:0}
.hero-v2__title{max-width:16ch;margin:0;font-size:clamp(var(--h48),5.6vw,var(--h64))}
.hero-v2__headline .hero-v2__lead{justify-self:end}

/* CTAs logo abaixo do título, sem cartão de fundo */
.hero-v2__bar{
  position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  border:0;background:transparent;padding:0;
}
.hero-v2__bar .button{flex:none}

/* rating destacado, separado dos três fatos */
.hero-v2__badge{
  position:absolute;z-index:2;top:0;right:0;
  display:flex;align-items:center;gap:16px;
  border:1px solid var(--line);border-top:0;border-right:0;
  border-radius:0 24px 0 24px;background:var(--paper);padding:20px 24px;
}
.hero-v2__badge b{
  color:var(--ink);font-family:var(--heading);font-weight:600;
  font-size:var(--h48);line-height:1;letter-spacing:var(--tr-titulo);
}
.hero-v2__badge span{
  color:var(--muted);font-size:var(--b12);font-weight:500;
  letter-spacing:var(--tr-etiqueta);line-height:1.4;max-width:9ch;
}

@media(max-width:1024px){
  .hero-v2__frame{min-height:620px;padding:32px}
  .hero-v2__badge{padding:18px 22px}
}
@media(max-width:767px){
  .hero-v2{padding-top:44px}
  .hero-v2__frame{min-height:0;padding:24px;gap:32px}
  .hero-v2__frame:after{display:none}
  .hero-v2__badge{position:static;align-self:flex-start;border:1px solid var(--line);border-radius:0;padding:16px 20px}
  .hero-v2__badge span{max-width:none}
  .hero-v2__headline{grid-template-columns:1fr;gap:18px;margin-top:28px}
  .hero-v2__headline .hero-v2__lead{justify-self:start;margin-bottom:0}
  .hero-v2__lead{font-size:var(--b16)}
  .hero-v2__title{max-width:none}
  /* a moldura vira slot de foto próprio, empilhado */
  .hero-v2__slot-mobile{display:grid;min-height:280px;place-items:center;border:1px dashed var(--line);
    background:repeating-linear-gradient(135deg,#fafafa,#fafafa 9px,#f2f2f2 9px,#f2f2f2 10px);
    color:var(--muted);font-size:var(--b12);font-weight:500;letter-spacing:var(--tr-etiqueta);
    text-align:center;padding:20px;margin-top:8px}
  .hero-v2__bar{flex-direction:column;align-items:stretch}
  .hero-v2__bar .button{width:100%}
}
@media(min-width:768px){ .hero-v2__slot-mobile{display:none} }


/* ---------------------------------------------------------------
   FAIXA DE NÚMEROS — dentro da moldura da hero, como a fila de
   marcas da referência: linha contínua e divisórias pontilhadas.
   --------------------------------------------------------------- */
.number-band{
  display:flex;align-items:flex-start;
  border-block:1px solid var(--line);
  background:transparent;
  margin:0 -36px -36px;
  padding:24px 36px;
}
.number-band__item{flex:1;min-width:0;padding:0 40px;border-left:1px dotted var(--line);text-align:center;overflow-wrap:anywhere}
.number-band__item:first-child{border-left:0}
.number-band__item b{
  display:block;color:var(--ink);font-family:var(--heading);font-weight:600;
  font-size:var(--h48);line-height:1;letter-spacing:var(--tr-titulo);
}
.number-band__item span{display:block;color:var(--muted);font-size:13px;margin-top:8px}

/* processo: composição editorial da referência, sem o círculo de CTA */
.process-scroll-section{position:relative;overflow:visible;padding-block:0}
.process-pin{display:flex;height:100svh;min-height:620px;flex-direction:column;justify-content:center;background:var(--soft);padding-block:40px}
.process-kicker{margin-bottom:12px}
.process-stage{display:grid;grid-template-columns:90px minmax(300px,.72fr) minmax(420px,1.28fr);gap:44px;align-items:center;max-height:calc(100svh - 80px)}
.process-index{align-self:center;list-style:none;margin:0;padding:0}
.process-index li{color:#aaa;font-size:var(--b16);font-weight:500;line-height:1;padding:10px 0;transition:color .2s ease,transform .2s ease}
.process-index li.is-active{color:var(--ink);font-weight:700;transform:translateX(6px)}
.process-copy{align-self:center;min-width:0}
.process-title{max-width:13ch;font-size:clamp(var(--h40),4.3vw,var(--h64));margin-bottom:18px}
.process-description{max-width:30ch;color:var(--muted);font-size:var(--b16);line-height:1.5}
.process-number{display:block;color:var(--ink);font-family:var(--body);font-size:clamp(96px,10vw,168px);font-weight:400;line-height:.82;letter-spacing:-.075em;margin-top:48px}
.process-media{align-self:center;width:100%;margin:0}
.process-visual{width:100%;height:clamp(380px,62svh,620px);min-height:0;transition:opacity .18s ease}
.process-visual__label{max-width:28ch;color:var(--muted);font-size:var(--b12);font-weight:500;letter-spacing:var(--tr-etiqueta);line-height:1.5}
.process-media figcaption{color:var(--muted);font-size:var(--b12);line-height:1.4;margin-top:16px}
.process-data{display:none}

/* borda do hero */
.hero-v2__frame{border-radius:var(--radius)}

@media(max-width:1024px){
  .number-band{margin:0 -32px -32px;padding:26px 32px}
  .number-band__item{padding:0 22px}
  .process-stage{grid-template-columns:52px minmax(220px,.8fr) minmax(300px,1.2fr);gap:24px}
  .process-title{font-size:clamp(var(--h40),5vw,var(--h48))}
  .process-number{font-size:clamp(92px,13vw,130px);margin-top:34px}
  .process-visual{height:clamp(360px,54svh,520px)}
}
@media(max-width:767px){
  .number-band{flex-wrap:wrap;gap:26px 0;margin:0 -24px -24px;padding:24px}
  .number-band__item{flex:0 0 50%;padding:0 12px;border-left:0;text-align:left}
  .number-band__item:nth-child(2n){border-left:1px dotted var(--line)}
  .number-band__item b{font-size:var(--h40)}
  .hero-v2__frame{border-radius:var(--radius)}
  .process-pin{height:auto;min-height:auto;padding-block:80px}
  .process-stage{display:none}
  .process-data{display:grid;gap:16px}
  .process-data article{border-top:1px solid var(--line);padding:20px 0 4px}
  .process-data article:before{content:attr(data-number);display:block;color:var(--muted);font-size:var(--b12);font-weight:500;letter-spacing:var(--tr-etiqueta);margin-bottom:12px}
  .process-data h3{margin-bottom:6px}
  .process-data p{margin:0}
}

/* ===============================================================
   v3 — blocos que a copy original e a direção nova pedem
   =============================================================== */

/* 3 DIVISIONS — visão geral, antes do detalhe dos serviços */
.divisions{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.division{display:flex;flex-direction:column;border:1px solid var(--line);padding:26px;min-height:280px}
.division .photo-slot{min-height:120px;margin:-26px -26px 22px}
.division b{display:block;color:var(--muted);font-family:var(--heading);font-size:var(--h40);font-weight:600;line-height:1;margin-bottom:10px}
.division h3{font-size:var(--h24);margin-bottom:12px}
.division ul{list-style:none;margin:auto 0 0;padding:0;font-size:var(--b14);color:var(--text)}
.division ul li{border-top:1px solid var(--line);padding:9px 0}

/* marcas incorporadas ao bloco institucional */
.about-brands{border-top:1px solid var(--line);margin-top:72px;padding-top:48px}
.about-brands__heading{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:28px}
.about-brands__heading h2,.about-brands__heading p{margin-bottom:0}
.about-brands__heading>p{justify-self:end;color:var(--muted)}
.about-brands .logo-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;border:0;padding:0}
.about-brands .logo-slot{width:auto;height:64px}

/* depoimentos */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testimonial{border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;min-height:230px}
.testimonial p{font-size:var(--b16);margin:0 0 20px}
.testimonial footer{margin-top:auto;font-size:var(--b12);color:var(--muted);letter-spacing:.04em;border-top:1px solid var(--line);padding-top:14px}

/* B2B */
.b2b-block{border:1px solid var(--line);padding:44px;text-align:center;background:var(--soft)}
.b2b-block h2{margin-bottom:14px}
.b2b-block p{margin-inline:auto}

/* formulário */
.quote-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:820px;margin:44px auto 0;text-align:left}
.quote-form .field{display:flex;flex-direction:column;gap:8px}
.quote-form .field--full{grid-column:1/-1}
.quote-form label{font-size:var(--b12);font-weight:500;letter-spacing:var(--tr-etiqueta);color:var(--muted)}
.quote-form input,.quote-form select,.quote-form textarea{
  border:1px solid var(--line);background:var(--paper);padding:14px 15px;
  font:400 var(--b16)/1.5 var(--body);color:var(--ink);min-height:52px;border-radius:var(--radius);
}
.quote-form textarea{min-height:110px;resize:vertical}
.quote-form .form-foot{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.quote-form .form-consent{max-width:620px;margin:0;color:var(--muted);font-size:12px;line-height:1.5;text-align:center}.quote-form .form-consent a{color:inherit;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
.contact-intro{text-align:center}
.contact-intro>*{margin-inline:auto}
.contact-intro p{max-width:58ch}
.contact-intro p+p{margin-top:26px}

@media(max-width:900px){
  .divisions,.testimonials{grid-template-columns:1fr}
  .division .photo-slot{min-height:150px}
  .about-team{grid-template-columns:1fr;gap:48px}
  .about-team .photo-slot{min-height:360px}
  .about-brands .logo-row{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:767px){
  .about-grid{gap:80px}
  .about-team{gap:36px}
  .about-brands{margin-top:52px;padding-top:36px}
  .about-brands__heading{grid-template-columns:1fr;gap:12px}
  .about-brands__heading>p{justify-self:start}
  .about-brands .logo-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quote-form{grid-template-columns:1fr;gap:14px}
  .quote-form .form-foot{flex-direction:column;align-items:stretch}
  .quote-form .form-foot .button{width:100%}
  .b2b-block{padding:26px}
}

/* ===============================================================
   BUILD — design system aprovado SD3
   =============================================================== */
:root{
  --ink:#fff;--text:#e7e6e1;--muted:#a8a69f;--paper:#141413;
  --soft:var(--surface);--line:rgba(var(--veil-rgb),.14);--slot:var(--surface-2);
  --accent:#c60000;--line-soft:rgba(var(--veil-rgb),.07);
  /* Camada semantica partilhada com o modo claro (index-v2.html).
     --ground e o fundo da pagina; --veil e o que se poe por cima dele.
     No modo claro os dois trocam de lugar. As superficies sao os
     degraus de elevacao. Nada disto muda um pixel da v1: os valores
     sao exatamente os que estavam escritos a mao. */
  --ground-rgb:20,20,19;
  --veil-rgb:255,255,255;
  --surface:#1d1d1b;--surface-2:#242421;--surface-3:#181816;
  --surface-4:#1a1a18;--surface-5:#171716;
  --muted-2:#8f8d86;
  --on-accent:#fff;
  /* a faixa de servicos e o palco do processo tinham cor propria */
  --strip:#191918;
  --stage-a:#1f1f1d;--stage-b:#191917;
}
body{background:var(--paper);color:var(--text)}
::selection{background:var(--accent);color:var(--ink)}
.skip-link{background:var(--accent);color:var(--ink)}
.site-header{height:88px}
.wordmark{font-size:32px}.wordmark span{border-color:var(--line)}
.site-nav a{position:relative}.site-nav a:after{content:'';position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:var(--accent);transition:right .2s ease}.site-nav a:hover:after{right:0}
.button{min-height:54px;border-color:var(--accent);border-radius:10px;background:var(--accent);transition:transform .2s ease,filter .2s ease}
.button:hover{filter:brightness(1.08);transform:translateY(-2px)}
.button--secondary{border-color:var(--line);background:rgba(var(--veil-rgb),.03);color:var(--ink)}
.button--secondary:hover{border-color:rgba(var(--veil-rgb),.35)}
.hero-v2{padding-top:24px}
.hero-v2__frame{border:0;border-radius:12px;background:linear-gradient(135deg,var(--surface) 0%,var(--surface-3) 62%,var(--surface-2) 100%);box-shadow:0 24px 70px rgba(0,0,0,.33)}
.hero-v2__frame:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 76% 34%,rgba(198,0,0,.12),transparent 25%);pointer-events:none}
.hero-v2__frame:after{color:#c5c3bb}
.hero-v2__badge{top:-1px;right:-1px;border:0;border-left:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);border-radius:0 0 0 24px;box-shadow:none}
.hero-v2__badge b,.number-band__item b{color:var(--ink)}
.hero-v2__services{color:#c7c5bd;letter-spacing:.03em}
.hero-v2__lead{color:#e7e6e1}
.number-band{border:0;background:transparent}
.number-band__item,.number-band__item:first-child{border:0}
.service-strip{border-color:var(--line);color:#d2d0c8;background:#111110}
.section--tint{background:var(--soft)}
.photo-slot,.diagram-slot,.service-panel .icon-slot,.logo-slot{border-color:rgba(var(--veil-rgb),.2);background:linear-gradient(145deg,var(--surface-2),var(--surface-4));color:var(--muted-2)}
.division,.service-panel,.testimonial,.wire-card,.b2b-block{border-color:var(--line);border-radius:12px;background:var(--surface);box-shadow:0 24px 70px rgba(0,0,0,.18)}
.division{overflow:hidden}.division .photo-slot{border-width:0 0 1px;border-style:solid;border-color:var(--line)}
.tabs button{border-color:var(--line);border-radius:10px;background:var(--surface);color:var(--ink);transition:background .2s ease,border-color .2s ease}
.tabs button[aria-selected="true"]{border-color:var(--accent);background:var(--accent)}
.service-panel em{color:#c2c0b8}
.process-pin{background:var(--soft)}
.process-index li.is-active{color:var(--ink)}.process-index li.is-active:before{content:'';display:inline-block;width:18px;height:2px;background:var(--accent);margin-right:10px;vertical-align:middle}
.process-number{color:var(--ink)}.process-visual{border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.22)}
.about-brands{border-color:var(--line)}
.logo-row{border-color:var(--line)}
.rating-block,.faq-list details,.coverage-list,.coverage-list span{border-color:var(--line)}
.chip-row span{border-color:var(--line);border-radius:999px;background:rgba(var(--veil-rgb),.025)}
.review-note{border-color:var(--muted-2);background:var(--surface-2);color:#c8c6be}
.quote-form input,.quote-form select,.quote-form textarea{border-color:var(--line);border-radius:10px;background:var(--surface);color:var(--ink);outline:none}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(198,0,0,.16)}
.section--cta{border-color:var(--line);background:linear-gradient(180deg,var(--paper),var(--surface))}
.site-footer{border-color:var(--line)}
summary{color:var(--ink)}
@media(max-width:767px){
  .site-header{height:76px}.hero-v2{padding-top:16px}.hero-v2__frame{border-radius:var(--radius)}
  .hero-v2__slot-mobile{border-color:var(--line);background:linear-gradient(145deg,var(--surface-2),var(--surface-4));color:var(--muted-2)}
  .hero-v2__badge{border:0;border-left:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);border-radius:0 0 0 var(--notch)}
}

/* logo oficial */
.wordmark--logo{display:inline-flex;align-items:center;gap:12px;min-width:0}
.wordmark--logo .brand-logo{position:relative;display:block;width:112px;height:42px;overflow:hidden;border:0;margin:0;padding:0;flex:none}
.wordmark--logo .brand-logo img{position:absolute;left:0;top:-30px;width:112px;height:auto;max-width:none;mix-blend-mode:screen}
.wordmark--logo .brand-name{border-left:1px solid var(--line);margin:0;padding-left:12px;color:var(--ink);font-size:var(--b12);font-weight:500;letter-spacing:var(--tr-etiqueta);line-height:1.2}
@media(max-width:767px){
  .wordmark--logo{gap:0}
  .wordmark--logo .brand-logo{width:92px;height:35px}
  .wordmark--logo .brand-logo img{top:-25px;width:92px}
  .wordmark--logo .brand-name{display:none}
}

/* ===============================================================
   ACABAMENTO — 09/09
   Lições medidas no acervo: acento como gesto (samsoe-design),
   SVG inline com currentColor (apple), cabeçalho que reage (doxa).
   =============================================================== */

/* --- 1. grão sobre o fundo, sem data URI --- */
body:before{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(var(--veil-rgb),.55) 1px, transparent 1px);
  background-size:3px 3px;opacity:.03;
}
body > *{position:relative;z-index:2}

/* --- 2. o acento vira gesto, não superfície ---
   A aba ativa era uma barra vermelha de largura inteira: mais área de
   vermelho que todos os CTAs juntos, num elemento que não é CTA. */
.tabs button[aria-selected="true"]{
  border-color:rgba(var(--veil-rgb),.28);
  background:var(--surface-2);
  color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--accent);
}
.tabs button:hover{border-color:rgba(var(--veil-rgb),.3)}

/* --- 3. profundidade: usa o surfaceRaised que já está no tokens.json --- */
.division:hover,.testimonial:hover,.wire-card:hover{
  background:var(--surface-2);border-color:rgba(var(--veil-rgb),.22);
  transform:translateY(-3px);box-shadow:0 30px 80px rgba(0,0,0,.32);
}
.division,.testimonial,.wire-card{transition:background .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}

/* --- 4. cabeçalho que sai ao descer e volta ao primeiro gesto para cima --- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(var(--ground-rgb),.86);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:transform .32s ease,border-color .25s ease;
}
.site-header.is-stuck{border-bottom-color:var(--line)}
.site-header.is-hidden{transform:translateY(-100%)}

/* --- 5. ilustrações dos painéis: SVG inline herdando cor --- */
.service-panel .icon-slot{
  display:grid;place-items:center;padding:24px;
  border:1px solid var(--line);border-radius:10px;
  background:linear-gradient(150deg,var(--surface-2),var(--surface-5));
  color:var(--muted-2);
}
.service-panel .icon-slot svg{width:100%;height:auto;max-height:230px}

/* --- 6. ícone por item de serviço --- */
.service-panel h3{display:flex;align-items:center;gap:12px}
.service-panel h3 svg{
  width:22px;height:22px;flex:none;color:var(--accent);
  stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ===============================================================
   BADGE DO HERO — recorte na moldura
   Sobe 1px e vai 1px para a direita para COBRIR a borda da moldura:
   sem isso aparece um filete em cima do cartão. A borda existe só
   nas duas arestas internas (esquerda e baixo), que são as do corte.
   A cor vem de --paper, o fundo da seção.
   =============================================================== */
.hero-v2__badge{
  --notch:26px;
  position:absolute;z-index:3;
  top:0;right:0;
  display:flex;align-items:center;gap:16px;
  border:0;
  border-radius:0 12px 0 var(--notch);
  background:var(--paper);
  padding:20px 26px;
  box-shadow:none;
}
/* a concavidade que liga a borda de cima da moldura ao corte */
.hero-v2__badge:before{
  content:'';position:absolute;pointer-events:none;
  left:calc(var(--notch) * -1);top:-1px;
  width:var(--notch);height:var(--notch);
  background:var(--paper);
  -webkit-mask:radial-gradient(circle at 0 100%, transparent 0 var(--notch), #000 calc(var(--notch) + .5px));
          mask:radial-gradient(circle at 0 100%, transparent 0 var(--notch), #000 calc(var(--notch) + .5px));
}
/* segundo recorte: liga a base do badge à borda direita da moldura */
.hero-v2__badge:after{
  content:'';position:absolute;pointer-events:none;
  right:0;bottom:calc(var(--notch) * -1);
  width:var(--notch);height:var(--notch);
  background:var(--paper);
  -webkit-mask:radial-gradient(circle at 0 100%, transparent 0 var(--notch), #000 calc(var(--notch) + .5px));
          mask:radial-gradient(circle at 0 100%, transparent 0 var(--notch), #000 calc(var(--notch) + .5px));
}
.hero-v2__badge b{color:var(--ink)}
.hero-v2__badge span{color:var(--muted)}

@media(max-width:1024px){ .hero-v2__badge{padding:16px 20px} }
@media(max-width:767px){
  .hero-v2__badge{position:static;border:0;border-radius:10px;background:transparent;padding:16px 20px}
  .hero-v2__badge:before,.hero-v2__badge:after{content:none}
}

/* ===============================================================
   FOTO DO HERO
   Entra dentro da moldura, atrás do conteúdo. O véu é assimétrico:
   denso onde o texto vive, quase transparente onde está o barco —
   assim a foto respira e a headline continua legível.
   =============================================================== */
.hero-v2__frame{position:relative;overflow:hidden;isolation:isolate}
/* a moldura tem isolation:isolate, então z-index negativo fica contido:
   pinta acima do fundo da moldura e abaixo do conteúdo em fluxo.
   Assim nenhum filho precisa ser reposicionado. */
.hero-v2__photo{position:absolute;inset:0;z-index:-2;display:block}
.hero-v2__photo img{
  width:100%;height:100%;object-fit:cover;
  object-position:72% 58%;      /* o barco está à direita e abaixo do centro */
  filter:saturate(.82) brightness(.9);
}
/* véu — o texto está à esquerda, então o escuro pesa desse lado */
.hero-v2__frame:before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(96deg, rgba(var(--ground-rgb),.94) 0%, rgba(var(--ground-rgb),.86) 26%, rgba(var(--ground-rgb),.42) 58%, rgba(var(--ground-rgb),.22) 100%),
    linear-gradient(180deg, rgba(var(--ground-rgb),.55) 0%, transparent 26%, transparent 62%, rgba(var(--ground-rgb),.72) 100%);
}

.hero-v2__frame:after{display:none}   /* a etiqueta de slot não faz mais sentido */

@media(max-width:767px){
  .hero-v2__photo img{object-position:68% 60%}
  .hero-v2__frame:before{
    background:linear-gradient(180deg, rgba(var(--ground-rgb),.62) 0%, rgba(var(--ground-rgb),.9) 46%, rgba(var(--ground-rgb),.96) 100%);
  }
}

/* ===============================================================
   SEPARADORES E FAIXA
   As linhas de seção estavam em --line (14%), a mesma das bordas de
   cartão: forte demais para separar faixa, e a soma de duas linhas
   vizinhas lia como uma borda grossa. Passam a --line-soft (7%).
   =============================================================== */
.service-strip,.marquee,.section--cta,.faq-list details,.timeline{border-color:var(--line-soft)}
.review-note{border-left-color:var(--line-soft)}

/* a faixa de serviços passa a rolar, como no index-v2-antigo */
.service-strip{
  border-block:1px solid var(--line-soft);
  background:var(--strip);
  padding:22px 0;
  overflow:hidden;
  white-space:nowrap;
  word-spacing:normal;
  text-align:left;
}
.service-strip__track{display:flex;width:max-content;will-change:transform}
.service-strip__track > div{
  display:flex;align-items:center;gap:44px;padding-right:44px;
  white-space:nowrap;font-size:var(--b12);font-weight:500;
  letter-spacing:var(--tr-etiqueta);color:#d2d0c8;
}
.service-strip__track b{font-weight:600;color:var(--accent);font-size:var(--b14)}
@media(prefers-reduced-motion:reduce){ .service-strip__track{transform:none!important} }

/* ===============================================================
   ALINHAMENTO COM O index-v2-antigo
   =============================================================== */

/* --- faixa: os valores exatos do arquivo antigo --- */
.service-strip{
  border-block:1px solid var(--line-soft);
  background:var(--strip);
  padding:22px 0;
}
.service-strip__track > div{
  display:flex;align-items:center;gap:44px;padding-right:44px;white-space:nowrap;
  font-family:var(--heading);font-size:var(--h24);font-weight:600;
  letter-spacing:.04em;color:#c3c1b9;
  text-transform:none;
}
.service-strip__track b{font-weight:600;color:var(--accent);font-size:var(--b18)}

/* --- menu: peso normal e cinza claro, não branco --- */
.site-nav{gap:30px;font-size:var(--b14);font-weight:400;letter-spacing:normal}
.site-nav a{color:#c9c7c0;transition:color .2s ease}
.site-nav a:hover{color:var(--ink)}

/* ===============================================================
   RAIOS PADRONIZADOS
   Estavam em 10, 12, 14, 18 e 24 espalhados. Passam a dois degraus:
   --radius (12) para superfícies e --radius-sm (10) para controles.
   Círculo e pill continuam, porque são forma, não raio.
   =============================================================== */
:root{--radius:12px;--radius-sm:10px}

.hero-v2__frame,
.division,.service-panel,.testimonial,.wire-card,.b2b-block,
.photo-slot,.diagram-slot,.service-panel .icon-slot,.logo-slot,
.comparison-slot,.care-stack article,.proof-slot{border-radius:var(--radius)}

.button,.tabs button,
.quote-form input,.quote-form select,.quote-form textarea{border-radius:var(--radius-sm)}

/* o badge é recorte: canto externo acompanha a moldura, interno é o corte */


@media(max-width:767px){

  .service-strip__track > div{font-size:var(--b18);gap:26px;padding-right:26px}
}

/* --- véu recalibrado para a foto clara ---
   A anterior tinha casco escuro e a frase da direita assentava sozinha.
   Nesta, o casco é branco: sem este reforço na base o contraste cai a 1.2. */
.hero-v2__frame:before{
  background:
    linear-gradient(96deg, rgba(var(--ground-rgb),.94) 0%, rgba(var(--ground-rgb),.84) 26%, rgba(var(--ground-rgb),.40) 58%, rgba(var(--ground-rgb),.20) 100%),
    linear-gradient(180deg, rgba(var(--ground-rgb),.58) 0%, transparent 24%, transparent 44%, rgba(var(--ground-rgb),.62) 74%, rgba(var(--ground-rgb),.86) 100%);
}

/* ===============================================================
   RITMO VERTICAL — o padrão do estúdio
   80px quando a cor muda, 120px quando a vizinha é da mesma cor.
   Duas seções encostadas somam os dois lados, então cada lado
   leva metade. Ver _sistema/processo/espacamento.md
   =============================================================== */
:root{--sp-troca:80px;--sp-mesma:120px}
@media(max-width:900px){:root{--sp-troca:48px;--sp-mesma:64px}}

.section{padding-block:calc(var(--sp-troca) / 2)}
.sp-t-mesma{padding-top:calc(var(--sp-mesma) / 2)}
.sp-b-mesma{padding-bottom:calc(var(--sp-mesma) / 2)}
.sp-t-troca{padding-top:calc(var(--sp-troca) / 2)}
.sp-b-troca{padding-bottom:calc(var(--sp-troca) / 2)}

/* o pin do process zerava o padding; volta a respeitar o ritmo */
.process-scroll-section{padding-top:calc(var(--sp-troca) / 2)}
.process-pin{padding-block:0}

/* ===============================================================
   ESCALA DOS TÍTULOS
   O h2 vinha em 4.3vw, o que dá 62px em 1440 — perto do h1 e
   pesado demais. Passa a fechar em 48px, o degrau da escala.
   =============================================================== */
h2{font-size:clamp(var(--h32), 3.4vw, var(--h48))}
.process-title{font-size:clamp(var(--h32), 3.4vw, var(--h48))}
.section-heading{margin-bottom:40px}

/* ===============================================================
   CANTOS ANINHADOS
   Caixa dentro de caixa não repete o raio do pai: o canto interno
   é sempre um degrau abaixo, senão lê como erro de alinhamento.
   =============================================================== */
:root{--notch:calc(var(--radius) * 2)}
.division .photo-slot,
.service-panel .icon-slot,
.about-team .photo-slot,
.card .photo-slot{border-radius:var(--radius-sm)}

/* ===============================================================
   ÍCONES DO PROCESSO — SVG inline, currentColor, traço que desenha
   =============================================================== */
.p-ico-stage{position:relative;display:grid;place-items:center;width:100%;height:100%}
.p-ico{
  position:absolute;
  width:clamp(96px,14vw,168px);height:auto;
  color:var(--muted);
  opacity:0;visibility:hidden;
  transform:translateY(10px) scale(.96);
  transition:opacity .32s ease, transform .42s cubic-bezier(.22,1,.36,1);
}
.p-ico.is-on{opacity:1;visibility:visible;transform:none;color:var(--text)}
.p-ico .d{
  stroke-dasharray:var(--len,240);
  stroke-dashoffset:var(--len,240);
}
.p-ico.is-on .d{
  animation:ico-traco .9s cubic-bezier(.4,0,.2,1) forwards;
}
.p-ico.is-on .s1{animation-delay:.18s}
.p-ico.is-on .s2{animation-delay:.34s}
@keyframes ico-traco{to{stroke-dashoffset:0}}

/* o acento entra depois do traço fechar — um gesto, não um enfeite */
.p-ico.is-on .s2{stroke:var(--accent)}

/* a linha de água do 05 continua viva em loop suave */
.p-ico.is-on .w{animation:ico-traco .9s cubic-bezier(.4,0,.2,1) .34s forwards, ico-onda 3.2s ease-in-out 1.3s infinite}
@keyframes ico-onda{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}

/* microinteração: o palco responde ao ponteiro */
.process-visual{cursor:default}
.process-visual:hover .p-ico.is-on{transform:translateY(-4px) scale(1.03);color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  .p-ico,.p-ico.is-on{transition:none;transform:none}
  .p-ico.is-on .d,.p-ico.is-on .w{animation:none;stroke-dashoffset:0}
}

/* o palco deixou de ser slot de foto: borda cheia, não tracejada */
.process-visual{
  border:1px solid var(--line-soft);
  background:linear-gradient(160deg,var(--stage-a) 0%,var(--stage-b) 100%);
}

/* ===============================================================
   CANTO DO BADGE — o entalhe estava fora da padronização
   O 26px vinha declarado no próprio .hero-v2__badge, que ganha
   do :root. Passa a herdar o token, como todo o resto.
   E a moldura ganha fundo próprio: transparente deixava a página
   aparecer na curva do canto, como uma costura clara.
   =============================================================== */



/* ===============================================================
   ESPAÇAMENTO DA FAIXA
   A faixa é uma banda de cor própria: dos dois lados a cor muda,
   então leva o intervalo de troca, metade de cada lado.
   O padding interno de 22px é o desenho da banda, não o ritmo.
   =============================================================== */
.hero-v2{padding-bottom:calc(var(--sp-troca) / 2)}
.service-strip{margin-block:calc(var(--sp-troca) / 2)}

/* o gradiente da moldura era mais claro que o paper e escapava como
   um fio de 1px na curva do canto, por baixo do badge. A foto cobre
   a moldura inteira, então ele não tem função nenhuma. */


/* O canto externo do badge é reto: quem arredonda ali é o
   overflow da moldura. Arredondar nos dois sobrepõe duas curvas
   iguais e deixa escapar um fio da foto entre elas. */


/* o badge transborda 1px para cima e para a direita; o overflow da
   moldura apara. Sem isso, as duas curvas coincidentes deixam uma
   costura antialiasada por onde a foto aparece. */


/* a foto recebe o mesmo raio da moldura: sem isso a borda dela cai
   exatamente sobre a curva do recorte e sobra um fio antialiasado. */


/* ===============================================================
   O entalhe passa a ser o próprio raio: uma curvatura só na página.
   24px ao lado de 12px lia como dois sistemas diferentes.
   =============================================================== */


/* ===============================================================
   FOTO — véu aliviado
   O reforço anterior foi calibrado para o pior ponto do casco branco
   e acabou escurecendo a imagem inteira. Como havia folga larga sobre
   o mínimo de AA, o véu recua e a foto volta a respirar.
   =============================================================== */
.hero-v2__photo img{filter:saturate(1) brightness(1.14)}
.hero-v2__frame:before{
  background:
    linear-gradient(96deg, rgba(var(--ground-rgb),.90) 0%, rgba(var(--ground-rgb),.74) 28%, rgba(var(--ground-rgb),.26) 60%, rgba(var(--ground-rgb),.06) 100%),
    linear-gradient(180deg, rgba(var(--ground-rgb),.44) 0%, transparent 22%, transparent 48%, rgba(var(--ground-rgb),.44) 76%, rgba(var(--ground-rgb),.72) 100%);
}

/* a frase da direita cai sobre o casco branco, o ponto mais claro da
   foto. Em vez de escurecer a imagem inteira, um scrim só ali. */
.hero-v2__frame:before{
  background:
    radial-gradient(54% 40% at 84% 86%, rgba(var(--ground-rgb),.46) 0%, rgba(var(--ground-rgb),.20) 55%, transparent 78%),
    linear-gradient(96deg, rgba(var(--ground-rgb),.78) 0%, rgba(var(--ground-rgb),.56) 28%, rgba(var(--ground-rgb),.14) 60%, rgba(var(--ground-rgb),.02) 100%),
    linear-gradient(180deg, rgba(var(--ground-rgb),.20) 0%, transparent 22%, transparent 52%, rgba(var(--ground-rgb),.20) 78%, rgba(var(--ground-rgb),.38) 100%);
}

/* ===============================================================
   SOMBRA E BORDA — um sistema, dois degraus de cada
   Antes: uma sombra só (0 24px 70px) em cartão, painel e hero.
   Num fundo escuro esse deslocamento vira mancha, não profundidade.
   Passa a ser sombra de contato curta + ambiente larga e fraca.
   =============================================================== */
:root{
  /* superfície apoiada: cartão, painel, depoimento */
  --sombra-1:0 1px 2px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.16);
  /* elemento em destaque: o hero */
  --sombra-2:0 2px 6px rgba(0,0,0,.32), 0 16px 40px rgba(0,0,0,.22);

  /* a borda em fundo escuro é um fio de luz, não um traço */
  --line:rgba(var(--veil-rgb),.09);
  --line-soft:rgba(var(--veil-rgb),.055);
  --line-forte:rgba(var(--veil-rgb),.16);
}

.hero-v2__frame{box-shadow:var(--sombra-2)}
.division,.service-panel,.testimonial,.b2b-block,.diagram-slot,
.process-visual,.wire-card,.care-stack article{box-shadow:var(--sombra-1)}

/* o tracejado era marcação de wireframe; vira fio contínuo */
.photo-slot,.logo-slot,.diagram-slot,.proof-slot{border-style:solid;border-color:var(--line-soft)}

/* só o que responde ao ponteiro usa a borda mais firme */
.tabs button[aria-selected="true"]{border-color:var(--line-forte)}
.button--secondary:hover,.tabs button:hover{border-color:var(--line-forte)}

/* o palco do processo acompanha o mesmo fio */
.process-visual{border-color:var(--line-soft)}

/* ===============================================================
   REFINO FINAL — MARCAS, AVALIAÇÕES, RITMO E CONTORNOS
   O espaçamento segue _sistema/processo/espacamento.md:
   80/120px no desktop e 48/64px até 900px.
   =============================================================== */
:root{
  --line:rgba(var(--veil-rgb),.055);
  --line-soft:rgba(var(--veil-rgb),.032);
  --line-forte:rgba(var(--veil-rgb),.11);
}

/* uma única origem para o intervalo interno entre About e marcas */
.about-brands{
  border-top:0;
  margin-top:var(--sp-mesma);
  padding-top:0;
}
.about-grid{gap:var(--sp-mesma)}
.about-brands__heading{margin-bottom:32px}

/* esteira contínua inspirada na faixa de marcas do Design Boost */
.logo-marquee{
  --logo-gap:24px;
  --logo-duration:80s;
  display:flex;
  gap:var(--logo-gap);
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.about-brands .logo-row{
  display:flex;
  flex:none;
  list-style:none;
  margin:0;
  padding:0;
  gap:var(--logo-gap);
  width:max-content;
  animation:logo-marquee var(--logo-duration) linear infinite;
  will-change:transform;
}
.about-brands .logo-slot{
  display:flex;
  flex:0 0 176px;
  height:76px;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  overflow:hidden;
  border:0;
  background:transparent;
}
.logo-slot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:grayscale(1) brightness(0) invert(1);
  opacity:.7;
  transition:opacity .2s ease,transform .2s ease;
}
.logo-slot:hover img{opacity:1;transform:scale(1.025)}

@keyframes logo-marquee{
  to{transform:translateX(calc(-100% - var(--logo-gap)))}
}

@media(prefers-reduced-motion:reduce){
  .logo-marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
  .about-brands .logo-row{animation:none;will-change:auto}
  .logo-marquee .logo-row[aria-hidden="true"]{display:none}
}

/* avaliações: superfície discreta, hierarquia pelo texto e pelas estrelas */
.reviews-count{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:var(--b14);
  text-underline-offset:4px;
}
.testimonial{
  min-height:250px;
  padding:28px;
  border:0;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line-soft),var(--sombra-1);
}
.testimonial__stars{
  margin-bottom:26px;
  color:var(--accent);
  font-size:var(--b14);
  letter-spacing:.18em;
}
.testimonial blockquote{
  margin:0 0 24px;
  color:var(--ink);
  font-size:clamp(var(--b18),1.45vw,var(--h24));
  line-height:1.45;
}
.testimonial footer{
  border-top-color:var(--line-soft);
  line-height:1.6;
}
.testimonial footer a{color:inherit;text-decoration:none}
.testimonial footer a:hover{color:var(--ink)}

/* cartões e controles usam um fio curto; nenhuma borda compete com o conteúdo */
.division,.service-panel,.wire-card,.b2b-block,.process-visual,
.quote-form input,.quote-form select,.quote-form textarea,.tabs button,
.chip-row span,.faq-list details{
  border-color:var(--line);
}
.division,.service-panel,.wire-card,.b2b-block,.process-visual{
  border:0;
  box-shadow:inset 0 0 0 1px var(--line-soft),var(--sombra-1);
}

@media(max-width:900px){
  .about-brands{margin-top:var(--sp-mesma)}
  .about-brands__heading{margin-bottom:32px}
  .logo-marquee{--logo-gap:16px;--logo-duration:58s}
  .about-brands .logo-slot{flex-basis:142px;height:68px;padding:12px 14px}
}

@media(max-width:767px){
  .testimonial{min-height:0;padding:24px}
  .testimonial__stars{margin-bottom:20px}
}

/* ===============================================================
   MARCAS NA BASE DA HERO
   CTAs ficam acima das marcas, ambos dentro da moldura.
   =============================================================== */
.hero-v2__bottom{
  position:relative;
  z-index:1;
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:stretch;
  gap:18px;
}
.hero-v2__bottom .hero-brands{
  position:relative;
  min-width:0;
  height:76px;
  margin:0;
  padding:0;
  overflow:hidden;
}
.hero-v2__bottom .logo-marquee{
  display:block;
  height:100%;
  overflow:visible;
  -webkit-mask-image:none;
  mask-image:none;
}
.hero-v2__bottom .logo-row:first-child{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  width:100%;
  height:100%;
  gap:0;
  animation:none;
  transform:none;
}
.hero-v2__bottom .logo-row:first-child .logo-slot:nth-child(n+9),
.hero-v2__bottom .logo-row + .logo-row{
  display:none;
}
.hero-v2__bottom .logo-slot{
  width:auto;
  min-width:0;
  height:64px;
  padding:12px 20px;
}
.hero-v2__frame{
  height:auto;
  min-height:calc(100vh - 112px);
  min-height:calc(100svh - 112px);
}

@media(max-width:1024px){
  .hero-v2__bottom .logo-slot{padding-inline:14px}
}

@media(max-width:767px){
  .hero-v2__bottom .hero-brands{height:104px;margin-top:2px}
  .hero-v2__bottom .logo-row:first-child{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero-v2__bottom .logo-slot{height:52px;padding:9px 12px}
  .hero-v2__frame{
    height:auto;
    min-height:calc(100vh - 88px);
    min-height:calc(100svh - 88px);
  }
}

/* O badge usa a mesma trama do fundo da página, em vez de uma chapa sólida. */


/* Fotografias reais das três divisões. */
.division__photo{
  display:block;
  aspect-ratio:3/2;
  margin:-26px -26px 22px;
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
.division__photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.division:nth-child(1) .division__photo img{object-position:center 52%}
.division:nth-child(2) .division__photo img{object-position:center 48%}
.division:nth-child(3) .division__photo img{object-position:center 48%}

/* ===============================================================
   v18 — ajustes da revisão no browser
   =============================================================== */

/* Os serviços começam logo depois do título em todos os cartões. */
.division ul{margin:18px 0 0}

/* A faixa volta a ser contínua e sangra até as bordas reais da hero. */
.hero-v2__bottom .hero-brands{
  width:calc(100% + 72px);
  height:78px;
  margin:4px -36px -22px;
  overflow:hidden;
}
.hero-v2__bottom .logo-marquee{
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  -webkit-mask-image:none;
  mask-image:none;
}
.hero-v2__bottom .logo-row:first-child{
  display:flex;
  flex:none;
  width:max-content;
  height:100%;
  gap:var(--logo-gap);
  animation:hero-logo-marquee var(--logo-duration) linear infinite;
  transform:none;
  will-change:transform;
}
.hero-v2__bottom .logo-row + .logo-row{display:none}
.hero-v2__bottom .logo-row:first-child .logo-slot:nth-child(n+9){display:flex}
.hero-v2__bottom .logo-slot{
  flex:0 0 176px;
  width:176px;
  height:100%;
  padding:12px 20px;
}
@keyframes hero-logo-marquee{
  to{transform:translateX(calc(-50% - (var(--logo-gap) / 2)))}
}

/* Avaliações e área atendida formam uma única superfície clara. */
.proof-coverage{background:#fff;color:#363633}
.proof-coverage h2,.proof-coverage .testimonial blockquote{color:#151514}
.proof-coverage .section-label,
.proof-coverage .reviews-count,
.proof-coverage .testimonial footer{color:#676762}
.proof-coverage .testimonial{
  background:#f4f4f1;
  box-shadow:inset 0 0 0 1px rgba(var(--ground-rgb),.08),0 18px 48px rgba(var(--ground-rgb),.07);
}
.proof-coverage .testimonial footer{border-top-color:rgba(var(--ground-rgb),.1)}
.proof-coverage .testimonial footer a:hover{color:#151514}
.coverage-merged{
  padding:64px 0 80px;
  border-top:1px solid rgba(var(--ground-rgb),.1);
}
.proof-coverage .chip-row span{border-color:rgba(var(--ground-rgb),.13);background:#fff}

@media(max-width:1024px){
  .hero-v2__bottom .hero-brands{width:calc(100% + 64px);margin-inline:-32px}
  .hero-v2__bottom .logo-slot{flex-basis:154px;width:154px;padding-inline:16px}
}
@media(max-width:767px){
  .hero-v2__bottom .hero-brands{
    width:calc(100% + 48px);
    height:72px;
    margin:4px -24px -14px;
  }
  .hero-v2__bottom .logo-slot{flex-basis:136px;width:136px;height:100%;padding:10px 14px}
  .coverage-merged{padding:48px 0}
}

@media(prefers-reduced-motion:reduce){
  .hero-v2__bottom .logo-marquee{overflow-x:auto}
  .hero-v2__bottom .logo-row:first-child,
  .hero-v2__bottom .logo-row + .logo-row{animation:none;will-change:auto}
}

/* ===============================================================
   v19 — ritmo vertical e área atendida em marquee
   =============================================================== */

/* O último elemento de cada grupo não acrescenta margem ao padding da seção. */
.section-heading > :last-child,
.contact-intro > :last-child,
.b2b-block > :last-child,
.about-team__copy > :last-child{margin-bottom:0}

/* Mesma cor: 60 + 60 = 120px. Mudança de cor: 40 + 40 = 80px. */
.proof-coverage #reviews{padding-bottom:calc(var(--sp-mesma) / 2)}
.coverage-merged{
  padding:calc(var(--sp-mesma) / 2) 0 calc(var(--sp-troca) / 2);
  border-top:0;
}
.coverage-box{
  overflow:hidden;
  padding:48px 0 40px;
  border:1px solid rgba(var(--ground-rgb),.1);
  border-radius:var(--radius);
  background:#f4f4f1;
  box-shadow:0 18px 48px rgba(var(--ground-rgb),.06);
}
.coverage-box .section-label{margin-bottom:13px}
.coverage-box h2{margin:0 auto 32px;padding-inline:40px}
.coverage-marquee{
  width:100%;
  overflow:hidden;
}
.coverage-marquee__track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:coverage-marquee 34s linear infinite;
}
.coverage-marquee__group{
  display:flex;
  flex:none;
  align-items:center;
  gap:12px;
  padding-right:12px;
}
.coverage-marquee__group span{
  flex:none;
  padding:10px 18px;
  border:1px solid rgba(var(--ground-rgb),.13);
  border-radius:999px;
  background:#fff;
  color:#363633;
  font-size:var(--b14);
  white-space:nowrap;
}
.coverage-note{margin:24px auto 0}

@keyframes coverage-marquee{
  to{transform:translateX(-50%)}
}

@media(max-width:900px){
  .coverage-box{padding:32px 0}
  .coverage-box h2{margin-bottom:32px;padding-inline:24px}
  .coverage-marquee__track{animation-duration:28s}
  .coverage-note{padding-inline:20px}
}

@media(prefers-reduced-motion:reduce){
  .coverage-marquee{overflow-x:auto}
  .coverage-marquee__track{animation:none;will-change:auto}
  .coverage-marquee__group[aria-hidden="true"]{display:none}
}

/* ===============================================================
   RODAPÉ — a única fronteira que fugia do padrão
   O contato fecha em 60 e o rodapé abria com 40: dava 100 onde a
   regra pede 120, por serem da mesma cor.
   =============================================================== */
.site-footer{padding-top:calc(var(--sp-mesma) / 2)}

/* ===============================================================
   BOX DA COBERTURA
   70% da largura, centralizado, e as etiquetas centradas dentro.
   O marquee cortava nome no meio nas duas pontas — a 70% cortaria
   mais ainda. Com sete marinas elas cabem paradas, centradas.
   =============================================================== */
.coverage-box{
  width:70%;
  margin-inline:auto;
  padding:40px 40px 36px;
}
.coverage-box h2{padding-inline:0}

.coverage-marquee{overflow:visible}
.coverage-marquee__track{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  width:auto;
  animation:none;
  transform:none;
  will-change:auto;
}
.coverage-marquee__group{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  padding:0;
}
/* o grupo duplicado só existia para o loop do marquee */
.coverage-marquee__group[aria-hidden="true"]{display:none}
.coverage-note{margin:28px auto 0;text-align:center}

@media(max-width:900px){
  .coverage-box{width:100%;padding:32px 20px 28px}
}

/* ===============================================================
   RITMO — correção: valor cheio por lado, não metade
   O padrão diz "o lado que toca uma vizinha da mesma cor leva
   --space-same-color, o resto leva --space-color-change". Eu estava
   dividindo por dois, e por isso a faixa branca abria com 40 e não 80.
   =============================================================== */
.section{padding-block:var(--sp-troca)}
.sp-t-mesma{padding-top:var(--sp-mesma)}
.sp-b-mesma{padding-bottom:var(--sp-mesma)}
.sp-t-troca{padding-top:var(--sp-troca)}
.sp-b-troca{padding-bottom:var(--sp-troca)}
.hero-v2{padding-bottom:var(--sp-troca)}
.service-strip{margin-block:var(--sp-troca)}
.site-footer{padding-top:var(--sp-mesma)}
.process-scroll-section{padding-top:var(--sp-troca)}

/* A faixa branca é um bloco só, com duas partes dentro. O ritmo de
   seção fica nas bordas dela; entre as partes, 48px. */
.proof-coverage{padding-block:var(--sp-troca)}
.proof-coverage #reviews{padding:0 0 48px}
.proof-coverage .coverage-merged{padding:0}

/* ===============================================================
   LOGOS DAS MARCAS — 110px
   =============================================================== */
.hero-v2__bottom .logo-slot{flex-basis:110px;width:110px}

/* ===============================================================
   ETIQUETAS DE MARINA — com o asterisco da faixa
   =============================================================== */
.coverage-marquee__group span{
  display:inline-flex;align-items:center;gap:9px;
}
.coverage-marquee__group i{
  font-style:normal;
  color:var(--accent);
  font-size:.78em;
  line-height:1;
  flex:none;
  transform:translateY(.5px);
}

/* FAQ — expansão sincronizada com o movimento dos cartões ao redor. */
.faq-stack{max-width:820px;margin-inline:auto}
.faq-stack .section-heading{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:34px}
.faq-support{margin:0;color:var(--muted);font-size:var(--b16)}
.faq-support a{color:var(--accent);font-weight:600;text-underline-offset:3px}
.faq-list{display:grid;gap:12px;overflow-anchor:none}
.faq-item{
  border:1px solid var(--line-soft);
  border-radius:24px;
  background:rgba(255,255,255,.62);
  overflow:hidden;
}
.faq-question{
  width:100%;border:0;background:transparent;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:22px;text-align:left;
  min-height:82px;
  padding:24px 28px;
  font-size:var(--b18);
  font-weight:600;
}
.faq-question i{
  position:relative;width:18px;height:18px;flex:none;color:var(--muted);
  transform:rotate(0deg) scale(1);
  transition:transform .46s cubic-bezier(.22,1,.36,1);
}
.faq-question i::before,.faq-question i::after{
  content:"";position:absolute;top:50%;left:50%;width:14px;height:1.5px;
  border-radius:2px;background:currentColor;transform:translate(-50%,-50%);
  transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .18s ease;
}
.faq-question i::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(1);opacity:1}
.faq-panel{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .46s cubic-bezier(.22,1,.36,1),opacity .25s ease;
}
.faq-answer{min-height:0;overflow:hidden;transform:translateY(-7px);transition:transform .46s cubic-bezier(.22,1,.36,1)}
.faq-answer p{
  max-width:62ch;
  margin:0;
  padding:0 28px 26px;
  font-size:var(--b16);
  color:var(--muted);
  line-height:1.62;
}
.faq-item.is-open .faq-panel{grid-template-rows:1fr;opacity:1}
.faq-item.is-open .faq-answer{transform:translateY(0)}
.faq-item.is-open .faq-question i{transform:rotate(180deg) scale(1.05)}
.faq-item.is-open .faq-question i::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0);opacity:0}
@media(max-width:767px){
  .faq-stack .section-heading{margin-bottom:28px}
  .faq-list{gap:10px}
  .faq-item{border-radius:18px}
  .faq-question{min-height:72px;padding:18px 20px;font-size:var(--b16)}
  .faq-answer p{padding:0 20px 21px;font-size:var(--b14)}
}
@media(prefers-reduced-motion:reduce){.faq-panel,.faq-answer,.faq-question i::before,.faq-question i::after{transition-duration:.01ms}}

/* o grupo é item flex: sem min-width:0 ele guarda a largura de
   max-content e estoura o box em vez de quebrar a linha. */
.coverage-marquee__group{min-width:0;max-width:100%}
.coverage-marquee__track{width:100%;max-width:100%}
.coverage-marquee__group span{white-space:nowrap}

/* ===============================================================
   PARTE 1 — hero e faixa de serviços: 80px de intervalo visível
   O padding do hero e a margem da faixa somavam 80+80=160.
   Cada lado passa a levar metade, para o vão ler 80.
   =============================================================== */
.hero-v2{padding-bottom:calc(var(--sp-troca) / 2)}
.service-strip{margin-block:calc(var(--sp-troca) / 2)}

/* a seção logo após a faixa abre com metade, para o vão abaixo da
   faixa ler os mesmos 80 do vão acima */
.service-strip + .shell > .section{padding-top:calc(var(--sp-troca) / 2)}

/* ===============================================================
   PARTE 2 — divisões e serviços: 80px de intervalo
   Eram vizinhas da mesma cor, com 120 de cada lado = 240 no vão.
   =============================================================== */
.section.sp-b-mesma{padding-bottom:calc(var(--sp-troca) / 2)}
.section.sp-t-mesma{padding-top:calc(var(--sp-troca) / 2)}

/* ===============================================================
   WHY SD3 + ABOUT US — preto puro, não a tinta
   =============================================================== */
.section--preto{background:var(--paper)}

/* ===============================================================
   COBERTURA — etiqueta e nota centradas de verdade
   Elas herdavam text-align:center, mas a caixa do parágrafo tinha
   max-width de 68ch alinhada à esquerda: o texto centrava dentro
   da caixa, não dentro do box. Daí o desalinho da etiqueta.
   =============================================================== */
.coverage-box .section-label,
.coverage-box h2,
.coverage-box .coverage-note{
  max-width:none;
  margin-inline:auto;
  text-align:center;
}

/* ===============================================================
   MARINAS — de volta ao marquee, com as pontas esmaecidas
   Sem a máscara os nomes cortam a seco na borda do box.
   =============================================================== */
.coverage-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.coverage-marquee__track{
  display:flex;
  flex-wrap:nowrap;
  width:max-content;
  max-width:none;
  gap:0;
  animation:coverage-marquee 34s linear infinite;
  will-change:transform;
}
.coverage-marquee__group{
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-start;
  gap:12px;
  padding-right:12px;
  min-width:0;
  max-width:none;
}
.coverage-marquee__group--eco{display:flex}
.coverage-marquee:hover .coverage-marquee__track{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){
  .coverage-marquee__track{animation:none}
  .coverage-marquee{overflow-x:auto}
}

/* o grupo eco precisa vencer o [aria-hidden="true"]{display:none}
   que ficou da versão estática — sem ele o loop não fecha */
.coverage-marquee__group--eco[aria-hidden="true"]{display:flex}

/* ===============================================================
   MARQUEE DAS MARINAS — sem máscara, loop contínuo
   =============================================================== */
.coverage-marquee{
  -webkit-mask-image:none;
          mask-image:none;
  overflow:hidden;
}

/* ===============================================================
   FAIXA DE SERVIÇOS — sem o asterisco; ele passa a ser só das tags
   O <b> vira apenas o espaço entre os termos.
   =============================================================== */
.service-strip__track b{display:none}

/* ===============================================================
   WHY SD3 + ABOUT US — 80px do topo ao primeiro texto e da base
   =============================================================== */
#about-why{padding-top:var(--sp-troca);padding-bottom:var(--sp-troca)}

/* ===============================================================
   FAIXA DE SERVIÇOS — o asterisco volta (foi removido por engano)
   =============================================================== */
.service-strip__track b{
  display:inline;
  width:auto;
  font-weight:600;
  color:var(--accent);
  font-size:var(--b18);
}

/* ===============================================================
   MARQUEE DAS MARINAS
   Largura total do box: sai do padding lateral por margem negativa
   e quem corta é a borda do próprio box, não o marquee.
   =============================================================== */
.coverage-box{overflow:hidden}
.coverage-marquee{
  width:auto;
  margin-inline:-40px;
  overflow:visible;
}
.coverage-marquee__group i{display:none}

@media(max-width:900px){
  .coverage-marquee{margin-inline:-20px}
}

/* ===============================================================
   FORMULÁRIO — campos novos, identidade do projeto
   =============================================================== */
.field__legend{
  display:block;
  margin-bottom:10px;
  color:var(--muted);
  font-size:var(--b12);
  font-weight:500;
  letter-spacing:var(--tr-etiqueta);
}
.check-row{
  display:flex;flex-wrap:wrap;gap:12px;
  list-style:none;margin:0;padding:0;
}
.check-row label{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--slot);
  color:var(--text);
  font-size:var(--b14);
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.check-row label:hover{border-color:var(--line-forte)}
.check-row input{
  width:16px;height:16px;margin:0;flex:none;
  accent-color:var(--accent);
  cursor:pointer;
}
.check-row label:has(input:checked){
  border-color:var(--accent);
  background:rgba(198,0,0,.08);
}
.check-row label:focus-within{outline:2px solid var(--accent);outline-offset:2px}

.quote-form input::placeholder,
.quote-form textarea::placeholder{color:var(--muted);opacity:.7}

/* o texto do checkbox é corpo, não etiqueta: herdava o tracking
   largo dos labels do formulário */
.check-row label,.check-row span{
  letter-spacing:normal;
  text-transform:none;
  font-weight:400;
  color:var(--text);
}

/* ===============================================================
   ETIQUETAS DE SEÇÃO — asterisco + traço de 30%
   A etiqueta vira inline-flex para a caixa medir exatamente
   ícone + texto: é sobre essa largura que os 30% incidem.
   =============================================================== */
.section-label{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding-bottom:12px;
}
.section-label:before{
  content:'\2731';
  color:var(--accent);
  font-size:.85em;
  line-height:1;
  letter-spacing:0;
  flex:none;
}
.section-label:after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:30%;
  height:2px;
  background:var(--accent);
}

/* onde o cabeçalho é centralizado, o traço acompanha o centro */
.centered .section-label:after,
.coverage-box .section-label:after,
.faq-stack .section-label:after,
.section-heading.centered .section-label:after{
  left:50%;
  transform:translateX(-50%);
}

/* ===============================================================
   ETIQUETAS — traço mais perto do texto e mais largo (45%)
   =============================================================== */
.section-label{padding-bottom:7px}
.section-label:after{width:45%}

/* ===============================================================
   SERVICES — sem caixa; a marca é o próprio check
   =============================================================== */
.check-row{gap:14px 28px}
.check-row label{
  padding:0;
  border:0;
  background:none;
  border-radius:0;
  gap:11px;
  font-size:var(--b16);
}
.check-row label:hover{border:0}
.check-row label:has(input:checked){
  border:0;
  background:none;
  color:var(--ink);
}
.check-row label:focus-within{outline:0}

.check-row input{
  -webkit-appearance:none;appearance:none;
  position:relative;
  width:20px;height:20px;
  border:1.5px solid var(--line-forte);
  border-radius:6px;
  background:transparent;
  transition:background-color .18s ease, border-color .18s ease;
}
.check-row label:hover input{border-color:var(--accent)}
.check-row input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.check-row input:checked{
  background-color:var(--accent);
  border-color:var(--accent);
  animation:check-pop .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes check-pop{
  0%{transform:scale(1)}
  45%{transform:scale(1.2)}
  100%{transform:scale(1)}
}

/* o tique: dois lados de uma caixa girados 45°, desenhados ao marcar */
.check-row input:after{
  content:'';
  position:absolute;
  left:6px;top:2px;
  width:5px;height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);
  transform-origin:center;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1) .04s;
}
.check-row input:checked:after{transform:rotate(45deg) scale(1)}

@media(prefers-reduced-motion:reduce){
  .check-row input:checked{animation:none}
  .check-row input:after{transition:none}
}

/* o checkbox herdava padding 14/15 e min-height 52 dos campos de
   texto do formulário — com box-sizing:border-box isso virava uma
   caixa de 32x52. Aqui ele deixa de ser um "input" e vira controle. */
.quote-form .check-row input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;
  box-sizing:border-box;
  width:20px;min-width:20px;
  height:20px;min-height:0;
  padding:0;
  margin:0;
  border:1.5px solid var(--line-forte);
  border-radius:6px;
  background:transparent;
  flex:none;
  transition:background-color .18s ease, border-color .18s ease;
}
.quote-form .check-row label:hover input[type="checkbox"]{border-color:var(--accent)}
.quote-form .check-row input[type="checkbox"]:checked{
  background-color:var(--accent);
  border-color:var(--accent);
  animation:check-pop .28s cubic-bezier(.34,1.56,.64,1);
}
.quote-form .check-row input[type="checkbox"]:after{
  content:'';
  position:absolute;
  left:5px;top:1px;
  width:6px;height:11px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);
  transform-origin:center;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1) .04s;
}
.quote-form .check-row input[type="checkbox"]:checked:after{transform:rotate(45deg) scale(1)}

/* ===============================================================
   SERVICES — a caixa deixa de ser o input
   O checkbox nativo ignora background-color mesmo com appearance:none
   e !important. Então o input some (continua focável e acessível) e
   a caixa é desenhada nos pseudo-elementos do texto ao lado.
   Só seletor irmão adjacente, sem :has(), para não depender de suporte.
   =============================================================== */
.quote-form .check-row input[type="checkbox"]{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  margin:0;padding:0;border:0;
  pointer-events:none;
}
.check-row label{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:0;
  cursor:pointer;
}
.check-row label > span{
  position:relative;
  display:inline-block;
  padding-left:31px;
  line-height:1.4;
}
/* a caixa */
.check-row label > span:before{
  content:'';
  position:absolute;
  /* O reset da folha é *{box-sizing:border-box}, e o * não alcança
     pseudo-elementos. Sem isto a caixa media 20px mais 1,5px de borda de
     cada lado — 23px — enquanto o margin-top:-10px centrava como se
     fossem 20, e ela assentava 0,75px abaixo do centro do texto. */
  box-sizing:border-box;
  left:0;top:50%;
  width:20px;height:20px;
  margin-top:-10px;
  border:1.5px solid var(--line-forte);
  border-radius:6px;
  background:transparent;
  transition:background-color .18s ease, border-color .18s ease;
}
/* o tique, desenhado ao marcar */
.check-row label > span:after{
  content:'';
  position:absolute;
  left:7px;top:50%;
  width:5px;height:10px;
  margin-top:-7px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);
  transform-origin:center;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1) .04s;
}
.check-row label:hover > span:before{border-color:var(--accent)}
.check-row input:checked + span:before{
  background-color:var(--accent);
  border-color:var(--accent);
  animation:check-pop .28s cubic-bezier(.34,1.56,.64,1);
}
.check-row input:checked + span:after{transform:rotate(45deg) scale(1)}
.check-row input:focus-visible + span:before{outline:2px solid var(--accent);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .check-row input:checked + span:before{animation:none}
  .check-row label > span:after{transition:none}
}

/* ===============================================================
   CTA FINAL — marca acima do título
   Ritmo: 32px da linha da marca para o título, o mesmo intervalo
   de grupo de texto que o padrão usa.
   =============================================================== */
.contact-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-bottom:32px;
}
.contact-brand img{
  width:132px;height:auto;
  display:block;
  mix-blend-mode:screen;
}
.contact-brand__line{
  margin:0;
  max-width:none;
  color:var(--muted);
  font-size:var(--b12);
  font-weight:500;
  letter-spacing:var(--tr-etiqueta);
  opacity:.75;
}
.contact-intro h2{margin-top:0}

/* ===============================================================
   BOTÃO DE ENVIO — centralizado, com ícone
   =============================================================== */
.form-foot{
  display:flex;
  justify-content:center;
  margin-top:8px;
}
.button--enviar{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.button--enviar svg{
  flex:none;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.button--enviar:hover svg{transform:translate(2px,-2px)}

@media(prefers-reduced-motion:reduce){
  .button--enviar:hover svg{transform:none}
}

/* ===============================================================
   HEADER — telefone no lugar do CTA
   =============================================================== */
.header-tel{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#c9c7c0;
  font-size:var(--b14);
  text-decoration:none;
  transition:color .2s ease;
}
.header-tel:hover{color:var(--ink)}
.header-tel svg{color:var(--accent);flex:none}

@media(max-width:767px){
  .site-header .header-tel{display:inline-flex}
  .contact-brand img{width:104px}
}

/* a regra base é .quote-form .form-foot, de especificidade maior:
   o centro precisa vir pelo mesmo caminho */
.quote-form .form-foot{
  justify-content:center;
  margin-top:8px;
}

/* ===============================================================
   PROVA SOCIAL — ícone do Google e seta do Heroicons
   =============================================================== */
.reviews-count{display:inline-flex;align-items:center;gap:9px}
.ico-google{flex:none;display:block}
.ico-seta{flex:none;display:inline-block;vertical-align:-2px;margin-left:5px;
  transition:transform .2s ease}
.testimonial footer a:hover .ico-seta{transform:translate(2px,-2px)}

/* as estrelas na cor original da avaliação do Google */
.testimonial__stars{color:#FBBC04;letter-spacing:.12em}

/* ===============================================================
   CTA — a linha faz parte da marca: aproxima e peso 400
   =============================================================== */
.contact-brand{gap:6px}
.contact-brand__line{font-weight:400}

@media(prefers-reduced-motion:reduce){
  .testimonial footer a:hover .ico-seta{transform:none}
}

/* ===============================================================
   LOGOTIPO — asset recortado
   O JPG original tinha 266px de margem em cima e 355 embaixo: só
   33% da altura era desenho. O header contornava com uma janela de
   overflow e deslocamento de -30px; com o arquivo limpo isso cai.
   =============================================================== */
.wordmark--logo .brand-logo{width:112px;height:auto;overflow:visible}
.wordmark--logo .brand-logo img{position:static;top:auto;left:auto;width:112px;height:auto}
@media(max-width:767px){
  .wordmark--logo .brand-logo{width:92px;height:auto}
  .wordmark--logo .brand-logo img{width:92px}
}
.contact-brand{gap:8px}

/* ===============================================================
   CTA — marca em linha: logo, divisor, texto em duas linhas
   =============================================================== */
.contact-brand{
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin-bottom:32px;
}
.contact-brand img{width:118px}
.contact-brand__divisor{
  width:1px;
  align-self:stretch;
  min-height:44px;
  background:rgba(var(--veil-rgb),.14);
  flex:none;
}
.contact-brand__line{
  text-align:left;
  margin:0;
  font-weight:400;
  font-size:var(--b12);
  letter-spacing:var(--tr-etiqueta);
  line-height:1.6;
  color:var(--muted);
  opacity:.75;
}

/* ===============================================================
   HERO — o segundo botão sem fundo, sublinhado, alinhado ao primeiro
   =============================================================== */
.hero-v2 .button--secondary,
.hero-v2__bar .button--secondary{
  background:none;
  border:0;
  padding-inline:4px;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(var(--veil-rgb),.45);
  transition:text-decoration-color .2s ease,color .2s ease;
}
.hero-v2 .button--secondary:hover{
  text-decoration-color:var(--ink);
  color:var(--ink);
}
.hero-v2 .button-group{align-items:center}

@media(max-width:900px){
  .contact-brand{gap:16px}
  .contact-brand img{width:96px}
}

/* os botões do hero ficam em .hero-v2__bar, não em .button-group */
.hero-v2__bar{align-items:center}
.hero-v2__bar .button--secondary{
  background:none;
  border:0;
  min-height:0;
  padding:10px 4px;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(var(--veil-rgb),.45);
  transition:text-decoration-color .2s ease,color .2s ease;
}
.hero-v2__bar .button--secondary:hover{text-decoration-color:var(--ink);color:var(--ink)}

/* ===============================================================
   BOTÃO DE TELEFONE — ícone + número
   =============================================================== */
.button--tel{display:inline-flex;align-items:center;gap:9px}
.button--tel svg{flex:none}

/* ===============================================================
   RODAPÉ — frase à esquerda, colunas à direita, base com o logo
   =============================================================== */
.site-footer{
  display:block;
  padding-top:var(--sp-mesma);
  padding-bottom:48px;
  font-size:var(--b14);
  border-top:1px solid var(--line-soft);
}
.rodape-topo{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:72px;
  align-items:start;
}
.rodape-frase{
  margin:0;
  max-width:20ch;
  color:var(--ink);
  font-family:var(--heading);
  font-size:var(--h32);
  font-weight:600;
  line-height:1.14;
  letter-spacing:var(--tr-titulo);
}
.rodape-colunas{
  display:grid;
  grid-template-columns:repeat(3,minmax(140px,auto));
  gap:40px 56px;
}
.rodape-colunas ul{list-style:none;margin:0;padding:0}
.rodape-colunas li + li{margin-top:14px}
.rodape-colunas a{
  color:var(--text);
  text-decoration:none;
  transition:color .2s ease;
}
.rodape-colunas a:hover{color:var(--ink)}

.rodape-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:96px;
  padding-top:32px;
  border-top:1px solid var(--line-soft);
}
.rodape-logo img{width:118px;height:auto;display:block;mix-blend-mode:screen}
.rodape-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:28px;
  color:var(--muted);
  font-size:var(--b12);
}
.footer-made{
  display:inline-flex;
  gap:10px;
  align-items:center;
  color:inherit;
  text-decoration:none;
}
.footer-made-mark{display:block;width:22px;height:22px;flex:none}
.footer-made-icon{fill:currentColor}
.footer-made:hover,.footer-made:focus-visible{color:var(--ink)}
/* páginas ainda inexistentes: texto, não link */
.rodape-pendente{opacity:.55;cursor:default}

@media(max-width:900px){
  .rodape-topo{grid-template-columns:1fr;gap:40px}
  .rodape-colunas{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .rodape-frase{font-size:var(--h24);max-width:none}
  .rodape-base{margin-top:56px;flex-direction:column;align-items:flex-start}
}

/* ===============================================================
   RODAPÉ — terceira coluna em ícones
   =============================================================== */
.rodape-icones{display:flex;align-items:center;gap:20px}
.rodape-icones li + li{margin-top:0}
.rodape-icones a{
  display:inline-flex;
  align-items:center;
  color:var(--muted);
  transition:color .2s ease,transform .2s ease;
}
.rodape-icones a:hover{color:var(--ink);transform:translateY(-2px)}
.rodape-icones a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}

/* ===============================================================
   v48 — botões preenchidos com luz e deslocamento de gradiente
   A interação da referência foi trazida para os vermelhos da SD3.
   =============================================================== */
.button:not(.button--secondary){
  --btn-bg-1:#ff3b32;
  --btn-bg-2:#9f0000;
  --btn-ring:#c60000;
  cursor:pointer;
  border:0;
  color:var(--ink);
  background-color:var(--accent);
  background-size:280% auto;
  background-position:left center;
  background-image:linear-gradient(
    325deg,
    var(--btn-bg-2) 0%,
    var(--btn-bg-1) 55%,
    var(--accent) 90%
  );
  box-shadow:
    0 0 18px rgba(198,0,0,.28),
    0 7px 10px -5px rgba(0,0,0,.58),
    inset 4px 4px 8px rgba(255,145,138,.24),
    inset -4px -4px 8px rgba(92,0,0,.36);
  transition:
    background-position .8s ease,
    box-shadow .28s ease,
    transform .22s ease,
    filter .22s ease;
}
.button:not(.button--secondary):hover{
  background-position:right top;
  box-shadow:
    0 0 24px rgba(198,0,0,.4),
    0 9px 14px -6px rgba(0,0,0,.62),
    inset 4px 4px 8px rgba(255,145,138,.3),
    inset -4px -4px 8px rgba(92,0,0,.3);
}
.button:not(.button--secondary):is(:focus,:focus-visible){
  outline:0;
  box-shadow:
    0 0 0 3px var(--paper),
    0 0 0 6px var(--btn-ring),
    0 8px 16px rgba(0,0,0,.45);
}
.button:not(.button--secondary):active{
  transform:translateY(0) scale(.985);
}

@media(prefers-reduced-motion:reduce){
  .button:not(.button--secondary){transition:filter .15s linear,box-shadow .15s linear}
}
/* o ícone do Google tem cor própria e não segue o currentColor */
.rodape-icones a[aria-label="Google Reviews"]:hover{transform:translateY(-2px)}

/* a frase do rodapé, um degrau acima */
.rodape-frase{font-size:clamp(var(--h32), 3vw, var(--h48));max-width:22ch}

@media(prefers-reduced-motion:reduce){
  .rodape-icones a:hover{transform:none}
}
@media(max-width:900px){
  .rodape-frase{font-size:var(--h32)}
}

/* ===============================================================
   RODAPÉ — ajustes
   =============================================================== */
/* o vão acima somava 40 do contato + 120 do rodapé = 162 medidos.
   Passa a ler 80 no total. */
.site-footer{padding-top:calc(var(--sp-troca) / 2)}

/* a frase, mais um degrau */
.rodape-frase{font-size:clamp(var(--h40), 4vw, var(--h64));max-width:19ch}

/* ícones empilhados, alinhados ao topo, com o texto ao lado */
.rodape-icones{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
}
.rodape-icones li + li{margin-top:14px}
.rodape-icones a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  text-decoration:none;
  transition:color .2s ease;
}
.rodape-icones a:hover{color:var(--ink);transform:none}
.rodape-icones svg{flex:none;color:var(--muted);transition:color .2s ease}
.rodape-icones a:hover svg{color:var(--ink)}
/* o G do Google tem cor própria */
.rodape-icones a:hover svg[viewBox="0 0 48 48"]{color:inherit}

/* o fio de 1px do rodapé entra na conta do vão */
.site-footer{padding-top:calc(var(--sp-troca) / 2 - 1px)}

/* ===============================================================
   RODAPÉ — ritmo, escala e contraste
   =============================================================== */
/* 80px de cada lado: a seção de contato fecha com 80 e o rodapé
   abre com 80, como manda o padrão (valor cheio por lado) */
.section--cta.sp-b-mesma{padding-bottom:var(--sp-troca)}
.site-footer{padding-top:var(--sp-troca)}

/* a frase volta a um degrau da escala do DS: h48, sem valor solto */
.rodape-frase{font-size:var(--h48);max-width:17ch}
@media(max-width:900px){
  .rodape-frase{font-size:var(--h32);max-width:none}
}

/* menu, colunas do rodapé e redes ficam um passo mais apagados */
.site-nav a{color:var(--muted)}
.site-nav a:hover{color:var(--ink)}
.rodape-colunas a{color:var(--muted)}
.rodape-colunas a:hover{color:var(--ink)}
.rodape-icones a{color:var(--muted)}
.rodape-icones a:hover{color:var(--ink)}

/* ===============================================================
   LOGO TRANSPARENTE
   O PNG novo tem alpha de verdade, então o mix-blend-mode:screen
   deixa de ser necessário — ele era a gambiarra para o fundo preto
   do JPG e quebrava sobre qualquer fundo que não fosse escuro.
   =============================================================== */
.wordmark--logo .brand-logo img,
.contact-brand img,
.rodape-logo img{mix-blend-mode:normal}

/* ===============================================================
   WHY SD3 — marca ao lado do texto, com parallax
   =============================================================== */
.why-bloco{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);
  gap:72px;
  align-items:center;
}
.why-texto{min-width:0}
.why-marca{
  min-width:0;
  display:flex;
  justify-content:center;
  will-change:transform;
}
.why-marca img{
  width:100%;
  max-width:420px;
  height:auto;
  display:block;
  opacity:.9;
}

/* estado inicial da microanimação; o JS solta ao entrar na seção */
.why-marca img{
  opacity:0;
  transform:translateY(26px) scale(.94);
}
.why-marca.is-on img{
  opacity:.9;
  transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}

@media(max-width:900px){
  .why-bloco{grid-template-columns:1fr;gap:40px}
  .why-marca img{max-width:280px}
}
@media(prefers-reduced-motion:reduce){
  .why-marca img{opacity:.9;transform:none;transition:none}
}

/* v50 — overrides finais (mantidos no fim por causa do legado acumulado) */
.site-header{
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom-color:transparent;
  transition:transform .32s ease,background-color .25s ease,
    border-color .25s ease,backdrop-filter .25s ease;
}
.site-header.is-stuck{
  background:rgba(var(--ground-rgb),.76);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
  border-bottom-color:rgba(var(--veil-rgb),.1);
}
.why-marca{will-change:auto}
.why-marca img,
.why-marca.is-on img{
  opacity:.9;
  transform:none;
  transition:none;
}

@media(max-width:900px){
  .why-marca{align-items:center;justify-content:flex-start}
  .why-marca img{
    width:min(100%,420px);
    max-width:420px;
    margin-inline:0;
  }
}
@media(max-width:767px){
  .header-shell{width:calc(100% - 32px)}
  .site-header{gap:14px}
  .wordmark--logo .brand-logo img{width:92px}
  .site-header .button--tel{
    min-width:0;
    min-height:42px;
    padding:9px 13px;
    font-size:12px;
    letter-spacing:.02em;
  }
  .why-marca img{width:min(100%,340px);max-width:340px}
}
@media(max-width:390px){
  .site-header .button--tel{padding-inline:11px}
  .site-header .button--tel svg{display:none}
}

/* ===============================================================
   v54 — refinamento exclusivo para mobile
   =============================================================== */
.rating-mobile-break{display:none}
@media(max-width:767px){
  .rating-mobile-break{display:block}
  /* Hero contida na viewport, com rating mais compacto em duas linhas. */
  .hero-v2{padding-top:12px}
  .hero-v2__frame{
    height:calc(100svh - 88px);
    min-height:0;
    max-height:none;
    padding:82px 20px 16px;
    gap:12px;
  }
  .hero-v2__badge{
    --notch:18px;
    gap:11px;
    min-height:70px;
    padding:13px 16px;
  }
  .hero-v2__badge b{font-size:36px}
  .hero-v2__badge span{
    width:10ch;
    max-width:10ch;
    font-size:10px;
    line-height:1.3;
    letter-spacing:.13em;
  }
  .hero-v2__headline{gap:10px;margin:auto 0 0}
  .hero-v2__services{margin-bottom:10px;font-size:12px;line-height:1.35}
  .hero-v2__title{font-size:clamp(32px,9.4vw,42px);line-height:.98}
  .hero-v2__lead{max-width:31ch;font-size:14px;line-height:1.42}
  .hero-v2__bottom{gap:8px}
  .hero-v2__bottom .hero-brands{height:56px;margin-top:0}
  .hero-v2__bottom .logo-slot{height:56px;padding:8px 11px}

  /* Processo visual fixo, com as cinco etapas comandadas pelo scroll. */
  .process-scroll-section{padding-top:0}
  .process-pin{
    height:100svh;
    min-height:0;
    padding-block:22px;
    justify-content:center;
  }
  .process-stage{
    height:100%;
    max-height:none;
    grid-template-rows:auto auto minmax(150px,1fr);
    align-content:center;
    gap:14px;
  }
  .process-index{gap:6px}
  .process-index li{min-height:38px;font-size:13px}
  .process-kicker{margin-bottom:8px}
  .process-title{font-size:clamp(30px,8vw,38px);line-height:1;margin-bottom:9px}
  .process-description{font-size:14px;line-height:1.4}
  .process-number{display:none}
  .process-media{min-height:0;align-self:stretch}
  .process-visual{height:min(30svh,220px);min-height:150px}
  .process-media figcaption{margin-top:8px;font-size:10px}

  /* A marca ocupa o eixo central da seção. */
  .why-marca{justify-content:center}
  .why-marca img{
    width:100%;
    max-width:430px;
    margin-inline:auto;
  }

  /* Carrossel sangrado: o próximo cartão aparece sem máscara lateral. */
  .proof-coverage,
  #reviews{overflow:visible}
  #reviews .testimonials{
    width:calc(100% + 48px);
    margin-inline:-24px;
    padding:2px 24px 18px;
    scroll-padding-inline:24px;
  }
  #reviews .testimonial{flex-basis:calc(100vw - 72px)}
  .testimonial-controls{gap:12px;margin-top:10px}
  .testimonial-controls button{transition:border-color .2s ease,color .2s ease,background-color .2s ease}
  .testimonial-controls button:hover,
  .testimonial-controls button:focus-visible{border-color:var(--accent);background:var(--accent);color:var(--ink)}
  .testimonial-controls svg{display:block}
}

@media(max-width:390px) and (max-height:720px){
  .hero-v2__frame{padding-top:70px;padding-bottom:12px}
  .hero-v2__badge{min-height:62px;padding:10px 14px}
  .hero-v2__badge b{font-size:32px}
  .hero-v2__services{font-size:11px}
  .hero-v2__title{font-size:30px}
  .hero-v2__lead{font-size:13px}
  .hero-v2__bottom .hero-brands{height:48px}
  .hero-v2__bottom .logo-slot{height:48px}
  .process-pin{padding-block:16px}
  .process-stage{gap:10px}
  .process-visual{height:min(25svh,180px)}
}

/* v51 — revisão responsiva de tablet e mobile */
.header-shell{
  position:sticky;
  top:0;
  z-index:60;
}
.site-header{position:relative;top:auto;z-index:auto}

@media(max-width:900px){
  .why-bloco{gap:48px}
  .why-marca{justify-content:flex-start}
  .why-marca img{margin-inline:0}
}

@media(max-width:767px){
  .site-header .button--tel{display:inline-flex}
  .hero-shell,
  .hero-v2,
  .hero-v2__frame,
  .hero-v2__frame > *,
  .hero-v2__headline,
  .hero-v2__title-group,
  .hero-v2__bottom{
    min-width:0;
    max-width:100%;
  }
  .hero-v2__title{
    max-width:100%;
    font-size:clamp(40px,11.5vw,46px);
    overflow-wrap:break-word;
  }
  .hero-v2__services,
  .hero-v2__lead{max-width:100%;overflow-wrap:break-word}
  .hero-v2__badge{max-width:100%}
  .hero-v2__bar .button{max-width:100%}
  .division,
  .service-panel,
  .testimonial,
  .coverage-box,
  .quote-form,
  .rodape-topo,
  .rodape-colunas{min-width:0;max-width:100%}
  .why-bloco{gap:40px}
  .why-marca img{width:min(100%,320px);max-width:320px}
}

@media(max-width:390px){
  .header-shell{width:calc(100% - 24px)}
  .site-header{gap:10px}
  .wordmark--logo .brand-logo,
  .wordmark--logo .brand-logo img{width:84px}
  .site-header .button--tel{font-size:11px}
}

/* v52 — a marca começa na mesma linha da coluna About Us */
@media(min-width:901px){
  .why-bloco{grid-template-columns:1fr 1fr}
  .why-marca{justify-content:flex-start}
  .why-marca img{margin-inline:0}
}

/* ===============================================================
   v50 — header contextual e alinhamento estável da marca
   =============================================================== */
.site-header{
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom-color:transparent;
  transition:transform .32s ease,background-color .25s ease,
    border-color .25s ease,backdrop-filter .25s ease;
}
.site-header.is-stuck{
  background:rgba(var(--ground-rgb),.76);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
  border-bottom-color:rgba(var(--veil-rgb),.1);
}

/* A marca permanece visível e alinhada; não há entrada animada. */
.why-marca{will-change:auto}
.why-marca img,
.why-marca.is-on img{
  opacity:.9;
  transform:none;
  transition:none;
}

@media(max-width:900px){
  .why-marca{
    align-items:center;
    justify-content:flex-start;
  }
  .why-marca img{
    width:min(100%,420px);
    max-width:420px;
    margin-inline:0;
  }
}

@media(max-width:767px){
  .header-shell{width:calc(100% - 32px)}
  .site-header{gap:14px}
  .wordmark--logo .brand-logo img{width:92px}
  .site-header .button--tel{
    min-width:0;
    min-height:42px;
    padding:9px 13px;
    font-size:12px;
    letter-spacing:.02em;
  }
  .why-marca img{width:min(100%,340px);max-width:340px}
}

@media(max-width:390px){
  .site-header .button--tel{padding-inline:11px}
  .site-header .button--tel svg{display:none}
}

/* ===============================================================
   v53 — experiência mobile
   =============================================================== */
.menu-toggle{display:none}
.mobile-menu{display:none}
.testimonial-controls{display:none}

@media(max-width:900px){
  .menu-toggle{
    display:inline-flex;
    width:46px;
    height:46px;
    padding:11px;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:5px;
    border:1px solid rgba(var(--veil-rgb),.14);
    border-radius:10px;
    background:rgba(var(--veil-rgb),.04);
    color:var(--ink);
    cursor:pointer;
  }
  .menu-toggle span{display:block;height:2px;border-radius:2px;background:currentColor}
  .mobile-menu[open]{
    display:flex;
    position:fixed;
    inset:16px;
    width:auto;
    max-width:none;
    height:auto;
    max-height:none;
    margin:0;
    padding:24px;
    flex-direction:column;
    border:1px solid rgba(var(--veil-rgb),.12);
    border-radius:16px;
    background:rgba(var(--ground-rgb),.94);
    color:var(--ink);
    -webkit-backdrop-filter:blur(20px) saturate(130%);
    backdrop-filter:blur(20px) saturate(130%);
    box-shadow:0 32px 100px rgba(0,0,0,.55);
  }
  .mobile-menu::backdrop{background:rgba(0,0,0,.66);backdrop-filter:blur(4px)}
  .mobile-menu__top{display:flex;align-items:center;justify-content:space-between;gap:24px}
  .mobile-menu__top img{width:112px;height:auto;display:block}
  .mobile-menu__close{
    width:44px;height:44px;border:1px solid rgba(var(--veil-rgb),.15);border-radius:50%;
    background:transparent;color:var(--ink);font:300 32px/1 var(--body);cursor:pointer;
  }
  .mobile-menu__nav{display:grid;margin:auto 0;gap:0}
  .mobile-menu__nav a{
    padding:14px 0;border-bottom:1px solid rgba(var(--veil-rgb),.1);
    color:var(--ink);font-family:var(--heading);font-size:clamp(32px,8vw,48px);
    line-height:1;text-decoration:none;
  }
  .mobile-menu__phone{width:100%;gap:10px}
}

@media(max-width:767px){
  .site-header>.button--tel{display:none}

  /* Rating com o mesmo recorte, fundo e posição do desktop. */
  .hero-v2__frame{padding-top:132px}
  .hero-v2__badge{
    position:absolute;
    top:-1px;
    right:-1px;
    align-self:auto;
    gap:16px;
    padding:20px 26px;
    border:0;
    border-radius:0 0 0 var(--notch);
    background:var(--paper);
  }
  .hero-v2__badge:before{
    content:'';
    position:absolute;
    left:calc(var(--notch) * -1);
    top:0;
    width:var(--notch);
    height:var(--notch);
    background:var(--paper);
    -webkit-mask:radial-gradient(circle at 0 100%,transparent 0 var(--notch),#000 calc(var(--notch) + .5px));
    mask:radial-gradient(circle at 0 100%,transparent 0 var(--notch),#000 calc(var(--notch) + .5px));
  }
  .hero-v2__badge:after{
    content:'';
    position:absolute;
    right:0;
    bottom:calc(var(--notch) * -1);
    width:var(--notch);
    height:var(--notch);
    background:var(--paper);
    -webkit-mask:radial-gradient(circle at 0 100%,transparent 0 var(--notch),#000 calc(var(--notch) + .5px));
    mask:radial-gradient(circle at 0 100%,transparent 0 var(--notch),#000 calc(var(--notch) + .5px));
  }

  /* CTAs compactos, lado a lado. */
  .hero-v2__bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
  .hero-v2__bar .button{
    width:100%;
    min-width:0;
    min-height:44px;
    padding:9px 7px;
    white-space:nowrap;
    font-size:10px;
    letter-spacing:.035em;
  }
  .hero-v2__bar .button--secondary{min-height:44px;padding-inline:2px}

  /* Processo: uma etapa visual por vez, com a mesma linguagem do desktop. */
  .process-pin{height:auto;min-height:0;padding-block:64px}
  .process-stage{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
    max-height:none;
  }
  .process-data{display:none}
  .process-index{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    width:100%;
    gap:7px;
    order:0;
  }
  .process-index li{
    display:grid;
    min-width:0;
    min-height:42px;
    place-items:center;
    padding:0;
    border:1px solid var(--line-soft);
    border-radius:8px;
    cursor:pointer;
  }
  .process-index li.is-active{
    transform:none;
    border-color:var(--accent);
    background:var(--accent);
    color:var(--ink);
  }
  .process-index li.is-active:before{content:none}
  .process-copy{order:1}
  .process-title{max-width:13ch;font-size:var(--h40);margin-bottom:12px}
  .process-description{max-width:32ch}
  .process-number{font-size:84px;margin-top:24px}
  .process-media{order:2}
  .process-visual{height:260px;min-height:260px}
  .process-media figcaption{margin-top:12px}

  /* No mobile, a marca apresenta a seção antes do texto. */
  .why-marca{order:-1}

  /* Carrossel de avaliações com swipe e snap. */
  .testimonials{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding:2px 1px 18px;
  }
  .testimonials::-webkit-scrollbar{display:none}
  .testimonial{
    flex:0 0 calc(100% - 22px);
    min-width:0;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  .testimonial-controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-top:12px;
  }
  .testimonial-controls button{
    display:grid;
    width:44px;height:44px;place-items:center;
    border:1px solid rgba(var(--ground-rgb),.16);border-radius:50%;
    background:#fff;color:#151514;font-size:20px;cursor:pointer;
  }
  .testimonial-status{min-width:42px;color:#676762;font-size:var(--b12);text-align:center}

  /* Base legal do rodapé centralizada. */
  .rodape-base{align-items:center;text-align:center}
  .rodape-logo{margin-inline:auto}
  .rodape-legal{width:100%;justify-content:center;text-align:center}
}

/* ===============================================================
   v49 — marca institucional e CTA secundário da hero
   =============================================================== */
.why-marca{
  align-self:stretch;
  align-items:center;
  justify-content:center;
}
#about>.why-bloco{
  width:100%;
  max-width:none;
}
.why-marca img{
  width:min(100%,560px);
  max-width:560px;
  margin-inline:auto;
}

@media(max-width:900px){
  .why-bloco{grid-template-columns:1fr;gap:40px}
  .why-marca img{width:min(100%,360px);max-width:360px}
}

/* Texto discreto no repouso; no hover entra o branco e o traço SD3. */
.hero-v2__bar .button--secondary{
  position:relative;
  overflow:visible;
  color:rgba(var(--veil-rgb),.7);
  text-decoration:none;
  filter:none;
  transform:none;
  transition:color .25s ease;
}
.hero-v2__bar .button--secondary:after{
  content:'';
  position:absolute;
  left:4px;
  right:4px;
  bottom:5px;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.hero-v2__bar .button--secondary:hover{
  color:var(--ink);
  text-decoration:none;
  filter:none;
  transform:none;
}
.hero-v2__bar .button--secondary:hover:after,
.hero-v2__bar .button--secondary:focus-visible:after{transform:scaleX(1)}
.hero-v2__bar .button--secondary:focus-visible{
  color:var(--ink);
  outline:2px solid rgba(var(--veil-rgb),.75);
  outline-offset:5px;
}

@media(prefers-reduced-motion:reduce){
  .hero-v2__bar .button--secondary,
  .hero-v2__bar .button--secondary:after{transition:none}
}

/* a transição vive no estado base, não no .is-on: declarada junto
   com os valores finais, ela não tem de onde partir */
.why-marca img{
  opacity:0;
  transform:scale(.94);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.why-marca.is-on img{opacity:.9;transform:none;transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){
  .why-marca img{opacity:.9;transform:none;transition:none}
}

/* v50 — overrides finais */
.site-header{
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom-color:transparent;
  transition:transform .32s ease,background-color .25s ease,
    border-color .25s ease,backdrop-filter .25s ease;
}
.site-header.is-stuck{
  background:rgba(var(--ground-rgb),.76);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
  border-bottom-color:rgba(var(--veil-rgb),.1);
}
.why-marca{will-change:auto}
.why-marca img,
.why-marca.is-on img{opacity:.9;transform:none;transition:none}

@media(min-width:901px){
  .why-bloco{grid-template-columns:1fr 1fr}
  .why-marca{justify-content:flex-start}
  .why-marca img{margin-inline:0}
}

@media(max-width:900px){
  .why-marca{align-items:center;justify-content:flex-start}
  .why-marca img{
    width:min(100%,420px);
    max-width:420px;
    margin-inline:0;
  }
}
@media(max-width:767px){
  .header-shell{width:calc(100% - 32px)}
  .site-header{gap:14px}
  .wordmark--logo .brand-logo img{width:92px}
  .site-header .button--tel{
    min-width:0;
    min-height:42px;
    padding:9px 13px;
    font-size:12px;
    letter-spacing:.02em;
  }
  .why-marca img{width:min(100%,340px);max-width:340px}
}
@media(max-width:390px){
  .site-header .button--tel{padding-inline:11px}
  .site-header .button--tel svg{display:none}
}

/* ===============================================================
   v54 — refinamento exclusivo para mobile
   =============================================================== */
@media(max-width:767px){
  /* Hero contida na viewport, com rating mais compacto em duas linhas. */
  .hero-v2{padding-top:12px}
  .hero-v2__frame{
    height:calc(100svh - 88px);
    min-height:0;
    max-height:none;
    padding:82px 20px 16px;
    gap:12px;
  }
  .hero-v2__badge{
    --notch:18px;
    gap:11px;
    min-height:70px;
    padding:13px 16px;
  }
  .hero-v2__badge b{font-size:36px}
  .hero-v2__badge span{
    width:10ch;
    max-width:10ch;
    font-size:10px;
    line-height:1.3;
    letter-spacing:.13em;
  }
  .hero-v2__headline{gap:10px;margin:auto 0 0}
  .hero-v2__services{margin-bottom:10px;font-size:12px;line-height:1.35}
  .hero-v2__title{font-size:clamp(32px,9.4vw,42px);line-height:.98}
  .hero-v2__lead{max-width:31ch;font-size:14px;line-height:1.42}
  .hero-v2__bottom{gap:8px}
  .hero-v2__bottom .hero-brands{height:56px;margin-top:0}
  .hero-v2__bottom .logo-slot{height:56px;padding:8px 11px}

  /* Processo visual fixo, com as cinco etapas comandadas pelo scroll. */
  .process-scroll-section{padding-top:0}
  .process-pin{
    height:100svh;
    min-height:0;
    padding-block:22px;
    justify-content:center;
  }
  .process-stage{
    height:100%;
    max-height:none;
    grid-template-rows:auto auto minmax(150px,1fr);
    align-content:center;
    gap:14px;
  }
  .process-index{gap:6px}
  .process-index li{min-height:38px;font-size:13px}
  .process-kicker{margin-bottom:8px}
  .process-title{font-size:clamp(30px,8vw,38px);line-height:1;margin-bottom:9px}
  .process-description{font-size:14px;line-height:1.4}
  .process-number{display:none}
  .process-media{min-height:0;align-self:stretch}
  .process-visual{height:min(30svh,220px);min-height:150px}
  .process-media figcaption{margin-top:8px;font-size:10px}

  /* A marca ocupa o eixo central da seção. */
  .why-marca{justify-content:center}
  .why-marca img{
    width:100%;
    max-width:430px;
    margin-inline:auto;
  }

  /* Carrossel sangrado: o próximo cartão aparece sem máscara lateral. */
  .proof-coverage,
  #reviews{overflow:visible}
  #reviews .testimonials{
    width:calc(100% + 48px);
    margin-inline:-24px;
    padding:2px 24px 18px;
    scroll-padding-inline:24px;
  }
  #reviews .testimonial{flex-basis:calc(100vw - 72px)}
  .testimonial-controls{gap:12px;margin-top:10px}
  .testimonial-controls button{transition:border-color .2s ease,color .2s ease,background-color .2s ease}
  .testimonial-controls button:hover,
  .testimonial-controls button:focus-visible{border-color:var(--accent);background:var(--accent);color:var(--ink)}
  .testimonial-controls svg{display:block}
}

@media(max-width:390px) and (max-height:720px){
  .hero-v2__frame{padding-top:70px;padding-bottom:12px}
  .hero-v2__badge{min-height:62px;padding:10px 14px}
  .hero-v2__badge b{font-size:32px}
  .hero-v2__services{font-size:11px}
  .hero-v2__title{font-size:30px}
  .hero-v2__lead{font-size:13px}
  .hero-v2__bottom .hero-brands{height:48px}
  .hero-v2__bottom .logo-slot{height:48px}
  .process-pin{padding-block:16px}
  .process-stage{gap:10px}
  .process-visual{height:min(25svh,180px)}
}

/* ===============================================================
   v55 — cabeçalho fixo completo e refinamentos do processo mobile
   =============================================================== */
.header-shell{isolation:isolate}
.site-header{position:relative;isolation:isolate}
.site-header:before{
  content:'';
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:rgba(var(--ground-rgb),.76);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
  border-bottom:1px solid rgba(var(--veil-rgb),.1);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.site-header.is-stuck{background:transparent;border-bottom-color:transparent}
.site-header.is-stuck:before{opacity:1}
.site-header.is-process-hidden{
  transform:translateY(-110%)!important;
  pointer-events:none;
}

@media(max-width:767px){
  /* Uma hero mais curta mostra melhor a fotografia e antecipa a seção seguinte. */
  .hero-v2__frame{
    height:min(680px,calc(100svh - 138px));
    min-height:620px;
  }

  /* Números leves, como no desktop, e composição centralizada. */
  .process-stage{gap:16px}
  .process-index{
    margin-bottom:22px;
    gap:10px;
  }
  .process-index li{
    display:block;
    min-height:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--muted-2);
    text-align:center;
    cursor:pointer;
    transform:none;
  }
  .process-index li:before{
    content:'';
    display:block;
    width:18px;
    height:2px;
    margin:0 auto 9px;
    background:transparent;
  }
  .process-index li.is-active{
    border-color:transparent;
    background:transparent;
    color:var(--ink);
    transform:none;
  }
  .process-index li.is-active:before{content:'';background:var(--accent)}
  .process-copy{text-align:center}
  .process-kicker{margin:0 auto 18px}
  .process-title{
    max-width:14ch;
    margin:0 auto 12px;
    font-size:40px;
    line-height:1;
  }
  .process-description{margin-inline:auto;text-align:center}
}

@media(max-width:390px) and (max-height:720px){
  .hero-v2__frame{height:calc(100svh - 112px);min-height:570px}
  .process-title{font-size:38px}
}

/* ===============================================================
   v56 — processo mobile estável, sem pin wrapper do GSAP
   =============================================================== */
.process-scroll-section{isolation:isolate}
.process-pin{position:relative;z-index:2;background:var(--soft)}

@media(max-width:767px){
  .process-scroll-section.is-mobile-scroll{
    height:390svh;
    padding-block:0;
    background:var(--soft);
    isolation:isolate;
  }
  .process-scroll-section.is-mobile-scroll>.shell{
    width:calc(100% - 48px);
    height:100%;
    position:relative;
  }
  .process-scroll-section.is-mobile-scroll .process-pin{
    position:sticky;
    top:0;
    width:100%;
    height:100svh;
    overflow:hidden;
    z-index:5;
    background:var(--soft);
    transform:none!important;
  }
}

/* ===============================================================
   v57 — composição final do processo somente no mobile
   =============================================================== */
@media(max-width:767px){
  .process-scroll-section.is-mobile-scroll .process-pin{
    display:flex;
    align-items:stretch;
    justify-content:center;
    padding-block:28px;
  }
  .process-stage{
    width:100%;
    height:auto;
    max-height:100%;
    grid-template-rows:auto auto auto;
    align-content:center;
    gap:0;
  }
  .process-index{
    margin:0 0 52px;
    gap:10px;
  }
  .process-index li:before,
  .process-index li.is-active:before{
    display:block;
    width:18px;
    height:2px;
    margin:0 auto 10px;
    vertical-align:initial;
  }
  .process-copy{
    width:100%;
    margin:0 0 38px;
    text-align:center;
  }
  .process-kicker{margin:0 auto 26px}
  .process-title{
    max-width:15ch;
    margin:0 auto 14px;
    font-size:48px;
    line-height:.98;
  }
  .process-description{
    max-width:34ch;
    margin:0 auto;
    text-align:center;
  }
  .process-media{
    width:100%;
    margin:0;
    align-self:auto;
    text-align:center;
  }
  .process-visual{
    width:100%;
    height:clamp(230px,32svh,340px);
    min-height:230px;
  }
  .process-visual .p-ico{width:clamp(132px,24vw,190px)}
  .process-media figcaption{margin-top:12px;text-align:center}
}

@media(max-width:390px) and (max-height:720px){
  .process-scroll-section.is-mobile-scroll .process-pin{padding-block:18px}
  .process-index{margin-bottom:30px}
  .process-copy{margin-bottom:22px}
  .process-kicker{margin-bottom:16px}
  .process-title{font-size:44px}
  .process-visual{height:230px;min-height:210px}
  .process-visual .p-ico{width:132px}
}

/* ===============================================================
   v58 — imagem da hero e composição mobile do processo
   =============================================================== */
@media(max-width:767px){
  /* Imagem vertical própria, clara com proteção de contraste no texto. */
  .hero-v2__photo img{
    object-position:center center;
    filter:saturate(1.02) brightness(1.06);
  }
  .hero-v2__frame:before{
    background:
      linear-gradient(180deg,rgba(var(--ground-rgb),.18) 0%,rgba(var(--ground-rgb),.12) 32%,rgba(var(--ground-rgb),.48) 58%,rgba(var(--ground-rgb),.78) 100%),
      linear-gradient(90deg,rgba(var(--ground-rgb),.34) 0%,rgba(var(--ground-rgb),.10) 72%,rgba(var(--ground-rgb),.04) 100%);
  }

  /* Os números ficam no topo; o conteúdo restante centra sozinho. */
  .process-scroll-section.is-mobile-scroll .process-pin{padding-block:0}
  .process-stage{
    position:relative;
    display:flex;
    height:100%;
    max-height:none;
    flex-direction:column;
    justify-content:center;
    gap:0;
    padding-block:92px 28px;
  }
  .process-index{
    position:absolute;
    top:28px;
    left:0;
    right:0;
    width:100%;
    margin:0;
  }
  .process-copy{flex:none;margin-bottom:32px}
  .process-kicker{margin-bottom:22px}
  .process-title{font-size:40px;line-height:1}
  .process-media{flex:none}
  .process-visual{height:clamp(240px,32svh,340px)}

  /* Reserva interna para que a sombra dos cards não seja aparada. */
  #reviews .testimonials{
    padding-block:26px 48px;
    margin-top:-26px;
    margin-bottom:-36px;
  }
  #reviews .testimonial{
    box-shadow:inset 0 0 0 1px rgba(var(--ground-rgb),.08),0 20px 48px rgba(var(--ground-rgb),.12);
  }
}

@media(max-width:390px) and (max-height:720px){
  .process-stage{padding-block:76px 16px}
  .process-index{top:18px}
  .process-copy{margin-bottom:20px}
  .process-kicker{margin-bottom:14px}
  .process-title{font-size:38px}
  .process-visual{height:220px;min-height:200px}
}

/* ===============================================================
   v59 — composição superior da hero e menu móvel animado
   =============================================================== */
@media(max-width:900px){
  .menu-toggle{
    background:transparent;
    overflow:hidden;
    transition:border-color .22s ease,color .22s ease;
  }
  .menu-toggle:hover,.menu-toggle:focus-visible{border-color:rgba(var(--veil-rgb),.38)}
  .menu-toggle span{
    transform-origin:center;
    transition:transform .24s cubic-bezier(.22,1,.36,1),opacity .16s ease;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-menu[open]{animation:mobile-menu-in .24s cubic-bezier(.22,1,.36,1) both}
  .mobile-menu[open]::backdrop{animation:mobile-backdrop-in .24s ease both}
  .mobile-menu.is-closing{animation:mobile-menu-out .2s ease both}
  .mobile-menu.is-closing::backdrop{animation:mobile-backdrop-out .2s ease both}
}
@keyframes mobile-menu-in{
  from{opacity:0;transform:translateY(-12px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes mobile-menu-out{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-10px) scale(.985)}
}
@keyframes mobile-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes mobile-backdrop-out{from{opacity:1}to{opacity:0}}

@media(max-width:767px){
  /* Texto e CTAs sobem; o marquee continua ancorado na base. */
  .hero-v2__headline{
    margin:0;
    align-content:start;
  }
  .hero-v2__bottom{
    flex:1;
    min-height:0;
    justify-content:flex-start;
  }
  .hero-v2__bottom .hero-brands{margin-top:auto}

  /* O traço mede a etiqueta e fica centralizado sob ela. */
  .process-kicker:after{
    left:50%;
    transform:translateX(-50%);
  }
}

@media(prefers-reduced-motion:reduce){
  .menu-toggle span,.mobile-menu[open],.mobile-menu[open]::backdrop{animation:none;transition:none}
}

/* ===============================================================
   v60 — serviços 2x2 na hero e continuidade visual do menu mobile
   =============================================================== */
.hero-v2__services span:not(:last-child):after{content:' · '}

@media(max-width:767px){
  .hero-v2__frame{padding-top:72px}
  .hero-v2__headline{
    position:static;
    padding-top:42px;
  }
  .hero-v2__services{
    position:absolute;
    z-index:1;
    top:72px;
    left:20px;
    right:20px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:3px 12px;
    width:auto;
    max-width:none;
    margin:0;
    color:rgba(var(--veil-rgb),.82);
    font-size:11px;
    line-height:1.25;
  }
  .hero-v2__services span{min-width:0;white-space:nowrap}
  .hero-v2__services span:not(:last-child):after{content:none}

  .hero-v2__photo img{
    object-position:60% center;
    filter:saturate(1.04) brightness(1.12);
  }
  .hero-v2__frame:before{
    background:
      linear-gradient(180deg,rgba(var(--ground-rgb),.12) 0%,rgba(var(--ground-rgb),.08) 34%,rgba(var(--ground-rgb),.40) 58%,rgba(var(--ground-rgb),.70) 100%),
      linear-gradient(90deg,rgba(var(--ground-rgb),.28) 0%,rgba(var(--ground-rgb),.07) 74%,rgba(var(--ground-rgb),.02) 100%);
  }
  .hero-v2__title,.hero-v2__lead{text-shadow:0 2px 18px rgba(0,0,0,.38)}

  .hero-v2__bar{
    grid-template-columns:44% 56%;
    gap:4px;
  }
  .hero-v2__bar .button,
  .hero-v2__bar .button--secondary{font-size:12px}

  /* O topo do popup coincide com o header e parece continuar dele. */
  .mobile-menu[open]{
    inset:0;
    padding:15px 16px 24px;
    border:0;
    border-radius:0;
  }
  .mobile-menu__top{height:46px}
  .mobile-menu__top img{width:84px}
  .mobile-menu__close{
    display:flex;
    width:46px;
    height:46px;
    padding:11px;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:5px;
    border:1px solid rgba(var(--veil-rgb),.18);
    border-radius:10px;
    background:transparent;
    font-size:0;
  }
  .mobile-menu__close span{
    display:block;
    height:2px;
    border-radius:2px;
    background:currentColor;
    transform-origin:center;
  }
  .mobile-menu__close span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mobile-menu__close span:nth-child(2){opacity:0;transform:scaleX(0)}
  .mobile-menu__close span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

@media(max-width:390px) and (max-height:720px){
  .hero-v2__frame{padding-top:64px}
  .hero-v2__services{top:62px;font-size:10px}
  .hero-v2__headline{padding-top:38px}
  .hero-v2__bar .button,
  .hero-v2__bar .button--secondary{font-size:11px}
}

/* ===============================================================
   v61 — tags ao lado do rating e transição imperceptível do header
   =============================================================== */
@media(max-width:767px){
  /* Grid 2x2 ocupa apenas o recorte livre à esquerda do rating. */
  .hero-v2__services{
    top:18px;
    left:14px;
    right:auto;
    width:calc(100% - 164px);
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px 6px;
    color:rgba(var(--veil-rgb),.84);
    font-size:9px;
    line-height:1.15;
  }
  .hero-v2__headline{padding-top:18px}

  /* O botão e o X são apenas traços, sem fundo ou moldura. */
  .menu-toggle,
  .menu-toggle:hover,
  .menu-toggle:focus-visible,
  .mobile-menu__close,
  .mobile-menu__close:hover,
  .mobile-menu__close:focus-visible{
    border-color:transparent;
    background:transparent;
    box-shadow:none;
  }
  .menu-toggle:focus-visible,
  .mobile-menu__close:focus-visible{outline:2px solid rgba(var(--veil-rgb),.72);outline-offset:2px}

  /* Logo clonada nas mesmas coordenadas e dimensões do header. */
  .mobile-menu[open]{animation:none}
  .mobile-menu.is-closing{animation:none}
  .mobile-menu__top{height:46px}
  .mobile-menu__top img{width:92px;height:auto}
  .mobile-menu[open] .mobile-menu__nav,
  .mobile-menu[open] .mobile-menu__phone{animation:mobile-content-in .24s cubic-bezier(.22,1,.36,1) both}
  .mobile-menu.is-closing .mobile-menu__nav,
  .mobile-menu.is-closing .mobile-menu__phone{animation:mobile-content-out .2s ease both}
}
@keyframes mobile-content-in{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@keyframes mobile-content-out{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(8px)}
}

@media(max-width:390px){
  .mobile-menu__top img{width:84px}
}

@media(max-width:390px) and (max-height:720px){
  .hero-v2__services{top:14px;font-size:8.5px}
  .hero-v2__headline{padding-top:16px}
}

/* ===============================================================
   v62 — detalhes da hero e um único header durante o menu móvel
   =============================================================== */
@media(max-width:900px){
  /* O header original continua visível sobre o menu: logo e botão não trocam. */
  .mobile-menu[open]{
    z-index:55;
    inset:0;
    width:auto;
    max-width:none;
    height:auto;
    max-height:none;
    padding:104px 24px 24px;
    border:0;
    border-radius:0;
  }
  .mobile-menu__top{display:none}
}

@media(max-width:767px){
  /* O diálogo começa abaixo do header, preservando fisicamente o mesmo logo e toggle. */
  .mobile-menu[open]{
    top:76px;
    padding:16px 16px 24px;
  }

  .hero-v2__services span{
    display:flex;
    min-width:0;
    align-items:center;
    gap:4px;
  }
  .hero-v2__services span:before{
    content:'✱';
    flex:none;
    color:var(--ink);
    font-size:6px;
    line-height:1;
  }

  .hero-v2__bottom .hero-brands{
    transform:translateY(-16px);
  }

  /* Repete no mobile a trama do rating usada no desktop. */

}

/* ===============================================================
   v65 — hero mais clara, menu travado e fotografia da LP original
   =============================================================== */
.about-team__photo{
  padding:0;
  overflow:hidden;
}
.about-team__photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}

@media(max-width:900px){
  html.menu-open,
  body.menu-open{
    overflow:hidden;
    overscroll-behavior:none;
  }
  .site-header.is-menu-open{
    transform:none!important;
    pointer-events:auto;
  }
  .mobile-menu[open]{
    overflow-y:auto;
    overscroll-behavior:contain;
    background:var(--paper);
  }
}

@media(max-width:767px){
  .hero-v2__photo img{
    filter:saturate(1.03) brightness(1.18);
  }
  .hero-v2__frame:before{
    background:
      linear-gradient(180deg,rgba(var(--ground-rgb),.10) 0%,rgba(var(--ground-rgb),.06) 34%,rgba(var(--ground-rgb),.25) 58%,rgba(var(--ground-rgb),.44) 100%),
      linear-gradient(90deg,rgba(var(--ground-rgb),.20) 0%,rgba(var(--ground-rgb),.04) 74%,rgba(var(--ground-rgb),0) 100%);
  }
  .about-team__photo{min-height:430px}
}

/* ===============================================================
   v68 — hero mobile: texto legível e barco mais claro
   O véu estava claro no topo e escuro na base, o inverso do que
   este layout pede: o texto ocupa os primeiros ~45% da moldura e o
   barco vive na metade de baixo. O gradiente inverte, e o brilho da
   foto sobe — o escurecimento fica só onde há texto.
   =============================================================== */
@media(max-width:767px){
  .hero-v2__photo img{
    filter:saturate(1.06) brightness(1.24);
  }
  .hero-v2__frame:before{
    background:
      linear-gradient(180deg,
        rgba(var(--ground-rgb),.86) 0%,
        rgba(var(--ground-rgb),.80) 30%,
        rgba(var(--ground-rgb),.58) 44%,
        rgba(var(--ground-rgb),.20) 56%,
        rgba(var(--ground-rgb),.04) 68%,
        rgba(var(--ground-rgb),0) 86%,
        rgba(var(--ground-rgb),.30) 100%),
      linear-gradient(90deg,
        rgba(var(--ground-rgb),.34) 0%,
        rgba(var(--ground-rgb),.10) 62%,
        rgba(var(--ground-rgb),0) 100%);
  }

  /* o rating volta a ser um bloco chapado: a trama de pontos era o
     que lia como borda e fundo próprio */
  .hero-v2__badge,
  .hero-v2__badge:before,
  .hero-v2__badge:after{
    background-image:none;
    background-color:var(--paper);
  }
}

/* o topo tinha ficado quase opaco (15:1 quando AA pede 4,5).
   Alivia para o pôr do sol voltar a aparecer atrás do texto,
   mantendo folga confortável sobre o mínimo. */
@media(max-width:767px){
  .hero-v2__frame:before{
    background:
      linear-gradient(180deg,
        rgba(var(--ground-rgb),.72) 0%,
        rgba(var(--ground-rgb),.66) 30%,
        rgba(var(--ground-rgb),.46) 44%,
        rgba(var(--ground-rgb),.16) 56%,
        rgba(var(--ground-rgb),.03) 68%,
        rgba(var(--ground-rgb),0) 86%,
        rgba(var(--ground-rgb),.30) 100%),
      linear-gradient(90deg,
        rgba(var(--ground-rgb),.30) 0%,
        rgba(var(--ground-rgb),.08) 62%,
        rgba(var(--ground-rgb),0) 100%);
  }
}

/* a faixa dos botões (38–45% da moldura) ficava em 3,6:1, abaixo do
   mínimo de AA para texto de 14px. Reforça só essa banda. */
@media(max-width:767px){
  .hero-v2__frame:before{
    background:
      linear-gradient(180deg,
        rgba(var(--ground-rgb),.72) 0%,
        rgba(var(--ground-rgb),.68) 32%,
        rgba(var(--ground-rgb),.62) 46%,
        rgba(var(--ground-rgb),.24) 58%,
        rgba(var(--ground-rgb),.05) 70%,
        rgba(var(--ground-rgb),0) 86%,
        rgba(var(--ground-rgb),.30) 100%),
      linear-gradient(90deg,
        rgba(var(--ground-rgb),.30) 0%,
        rgba(var(--ground-rgb),.08) 62%,
        rgba(var(--ground-rgb),0) 100%);
  }
}

/* ===============================================================
   v71 — entradas por scroll (padrão do acervo)
   A transição vive na classe de chegada: assim o elemento nunca
   anima *para* invisível, só a partir do estado inicial.
   =============================================================== */
html.js [data-reveal]{
  opacity:0;
  transform:translate3d(0,20px,0);
  will-change:opacity,transform;
}
html.js [data-reveal].is-revealed{
  opacity:1;
  transform:none;
  will-change:auto;
  transition:opacity .85s cubic-bezier(.22,1,.36,1),
             transform .85s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay,0ms);
}
@media(prefers-reduced-motion:reduce){
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ===============================================================
   v71 — hero mais clara e rating com a mesma trama da página
   O badge ficava em z-index 3, acima do grain (z-index 1), então
   nunca recebia as bolinhas: era essa a diferença que lia como
   fundo próprio e como borda no encontro com a página.
   =============================================================== */


@media(max-width:767px){
  .hero-v2__photo img{filter:saturate(1.08) brightness(1.34)}
  .hero-v2__frame:before{
    background:
      linear-gradient(180deg,
        rgba(var(--ground-rgb),.70) 0%,
        rgba(var(--ground-rgb),.66) 32%,
        rgba(var(--ground-rgb),.60) 46%,
        rgba(var(--ground-rgb),.20) 58%,
        rgba(var(--ground-rgb),.03) 70%,
        rgba(var(--ground-rgb),0) 86%,
        rgba(var(--ground-rgb),.28) 100%),
      linear-gradient(90deg,
        rgba(var(--ground-rgb),.28) 0%,
        rgba(var(--ground-rgb),.06) 62%,
        rgba(var(--ground-rgb),0) 100%);
  }
}

/* ===============================================================
   v72 — foto dos sócios acompanha a altura do texto
   Ela era um retrato alto com min-height fixo, então esticava muito
   além da coluna ao lado. Agora as duas colunas esticam juntas e a
   foto recorta pelo centro.
   =============================================================== */
.about-team{align-items:stretch}
.about-team__photo{
  min-height:0;
  height:100%;
  overflow:hidden;
  border-radius:var(--radius);
}
.about-team__photo picture,
.about-team__photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 28%;
}
@media(max-width:900px){
  .about-team{align-items:start}
  .about-team__photo{height:auto;aspect-ratio:4/5}
}

/* ===============================================================
   v72 — topo do hero mobile mais claro
   Havia folga: o título estava em 7,0:1 e o mínimo de AA é 4,5.
   =============================================================== */
@media(max-width:767px){
  .hero-v2__frame:before{
    background:
      linear-gradient(180deg,
        rgba(var(--ground-rgb),.54) 0%,
        rgba(var(--ground-rgb),.50) 32%,
        rgba(var(--ground-rgb),.48) 46%,
        rgba(var(--ground-rgb),.16) 58%,
        rgba(var(--ground-rgb),.02) 70%,
        rgba(var(--ground-rgb),0) 86%,
        rgba(var(--ground-rgb),.28) 100%),
      linear-gradient(90deg,
        rgba(var(--ground-rgb),.26) 0%,
        rgba(var(--ground-rgb),.05) 62%,
        rgba(var(--ground-rgb),0) 100%);
  }
}

/* v74 — o topo fica claro (a lista de serviços tem folga de sobra),
   e o escurecimento concentra-se entre 28% e 48% da moldura, que é
   onde ficam o parágrafo e os botões. */
@media(max-width:767px){
  .hero-v2__frame:before{
    background:
      linear-gradient(180deg,
        rgba(var(--ground-rgb),.40) 0%,
        rgba(var(--ground-rgb),.44) 14%,
        rgba(var(--ground-rgb),.60) 28%,
        rgba(var(--ground-rgb),.64) 48%,
        rgba(var(--ground-rgb),.18) 60%,
        rgba(var(--ground-rgb),.02) 72%,
        rgba(var(--ground-rgb),0) 86%,
        rgba(var(--ground-rgb),.28) 100%),
      linear-gradient(90deg,
        rgba(var(--ground-rgb),.24) 0%,
        rgba(var(--ground-rgb),.05) 62%,
        rgba(var(--ground-rgb),0) 100%);
  }
}

/* o título ficou em 3,23 contra o mínimo de 3,0 — margem curta demais
   para confiar em telas reais. Sobe só a parada dos 14%. */
@media(max-width:767px){
  .hero-v2__frame:before{
    background:
      linear-gradient(180deg,
        rgba(var(--ground-rgb),.40) 0%,
        rgba(var(--ground-rgb),.52) 14%,
        rgba(var(--ground-rgb),.62) 28%,
        rgba(var(--ground-rgb),.64) 48%,
        rgba(var(--ground-rgb),.18) 60%,
        rgba(var(--ground-rgb),.02) 72%,
        rgba(var(--ground-rgb),0) 86%,
        rgba(var(--ground-rgb),.28) 100%),
      linear-gradient(90deg,
        rgba(var(--ground-rgb),.24) 0%,
        rgba(var(--ground-rgb),.05) 62%,
        rgba(var(--ground-rgb),0) 100%);
  }
}

/* ===============================================================
   v76 — o grão do rating passa a ser idêntico ao da página
   O badge é opaco, então tapava o body:before. A réplica anterior
   errava por dois motivos, ambos medidos: a grade partia da caixa
   dele (fase x%3=0 contra x%3=1 da página) e o ponto era chapado
   em .0165, enquanto o grão desenha a .55 e só depois multiplica
   por 3% — o que suaviza e reduz a densidade pela metade.
   Aqui repete-se o mesmo processo de dois passos, ancorado na
   viewport, dentro de uma camada própria.
   =============================================================== */
.hero-v2__badge,
.hero-v2__badge:before,
.hero-v2__badge:after{
  background-image:none;
  background-color:var(--paper);
}
/* sem overflow:hidden aqui: os recortes concavos ficam fora da caixa */
.hero-v2__badge{position:absolute}



/* ===============================================================
   v78 — troca de etapa do processo com entrada em cascata
   Mesma curva das revelações do acervo. Cada linha entra com um
   atraso próprio, para o bloco não aparecer todo de uma vez.
   =============================================================== */
.process-copy.is-trocando > *{
  animation:etapa-entra .55s cubic-bezier(.22,1,.36,1) both;
}
.process-copy.is-trocando > *:nth-child(1){animation-delay:0ms}
.process-copy.is-trocando > *:nth-child(2){animation-delay:60ms}
.process-copy.is-trocando > *:nth-child(3){animation-delay:110ms}
.process-copy.is-trocando > *:nth-child(4){animation-delay:150ms}
@keyframes etapa-entra{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .process-copy.is-trocando > *{animation:none}
}

/* ===============================================================
   v78 — foto dos sócios mais baixa
   Acompanhava a altura inteira da coluna de texto; agora tem teto
   e fica centralizada nela.
   =============================================================== */
.about-team{align-items:center}
.about-team__photo{
  height:auto;
  max-height:500px;
  aspect-ratio:4/5;
}
.about-team__photo picture,
.about-team__photo img{height:100%;object-fit:cover;object-position:50% 26%}
@media(max-width:900px){
  .about-team__photo{max-height:none;aspect-ratio:4/5}
}

/* ===============================================================
   v80 — RATING POR RECORTE (clip-path via mask)
   Em vez de o badge imitar o fundo da página, a moldura passa a ter
   um buraco com a forma dele. Pelo buraco vê-se o fundo real —
   grão incluído — porque main é transparente e o grão do body fica
   por baixo. Nada é replicado, logo nada pode divergir.

   O buraco é composto por camadas de máscara:
     1. tudo visível
     2. menos o retângulo do badge, ancorado no canto superior direito
     3. mais o quarto de disco que arredonda o canto interno
   =============================================================== */
.hero-v2__frame{
  --bw:185px;
  --bh:90px;
  --corte:24px;
  background:transparent;

  -webkit-mask-image:
    linear-gradient(#000,#000),
    linear-gradient(#000,#000),
    radial-gradient(circle at 100% 100%, #000 0 var(--corte), transparent calc(var(--corte) + .5px));
          mask-image:
    linear-gradient(#000,#000),
    linear-gradient(#000,#000),
    radial-gradient(circle at 100% 100%, #000 0 var(--corte), transparent calc(var(--corte) + .5px));

  -webkit-mask-repeat:no-repeat,no-repeat,no-repeat;
          mask-repeat:no-repeat,no-repeat,no-repeat;
  -webkit-mask-position:0 0, top right, right var(--bw) top calc(var(--bh) - var(--corte));
          mask-position:0 0, top right, right var(--bw) top calc(var(--bh) - var(--corte));
  -webkit-mask-size:100% 100%, var(--bw) var(--bh), var(--corte) var(--corte);
          mask-size:100% 100%, var(--bw) var(--bh), var(--corte) var(--corte);
  -webkit-mask-composite:source-over, xor, source-over;
          mask-composite:add, exclude, add;
}

/* o badge deixa de pintar fundo: agora ele é só o texto sobre o buraco */


/* ===============================================================
   v80 — foto dos sócios ocupa a largura da coluna
   O aspect-ratio junto do max-height estrangulava a largura; a
   altura passa a ser fixa e a largura acompanha a coluna.
   =============================================================== */
.about-team__photo{
  width:100%;
  height:500px;
  max-height:none;
  aspect-ratio:auto;
}
@media(max-width:900px){
  .about-team__photo{height:auto;aspect-ratio:4/5;width:100%}
}

/* v81 — só o conjunto padrão de mask-composite.
   Misturar -webkit-mask-composite (xor, source-over) com o padrão
   (add, subtract) fazia os dois brigarem e o buraco não abria. */
.hero-v2__frame{
  -webkit-mask-image:none;
  -webkit-mask-composite:initial;
  mask-image:
    linear-gradient(#000,#000),
    linear-gradient(#000,#000),
    radial-gradient(circle at 100% 100%, #000 0 var(--corte), transparent calc(var(--corte) + .5px));
  mask-repeat:no-repeat;
  mask-position:0 0, top right, right var(--bw) top calc(var(--bh) - var(--corte));
  mask-size:100% 100%, var(--bw) var(--bh), var(--corte) var(--corte);
  mask-composite:add, subtract, add;
}

/* ===============================================================
   v82 — o recorte, agora com a ordem de camadas certa
   As camadas de máscara empilham como as de background: a PRIMEIRA
   é a de cima. A composição acumula de baixo para cima, e cada
   camada aplica o seu próprio operador sobre o que já existe.
     base (tudo)  ->  exclui o retângulo  ->  devolve o quarto de disco
   =============================================================== */
.hero-v2__frame{
  --bw:185px;
  --bh:90px;
  --corte:24px;
  background:transparent;
  -webkit-mask-image:unset;
  mask-image:
    radial-gradient(circle at 100% 100%, #000 0 var(--corte), transparent calc(var(--corte) + .5px)),
    linear-gradient(#000,#000),
    linear-gradient(#000,#000);
  mask-repeat:no-repeat;
  mask-position:
    right var(--bw) top calc(var(--bh) - var(--corte)),
    top right,
    0 0;
  mask-size:
    var(--corte) var(--corte),
    var(--bw) var(--bh),
    100% 100%;
  mask-composite:add, exclude, add;
}

@media(max-width:767px){
  .hero-v2__frame{--bw:143px;--bh:70px;--corte:18px}
}

/* ===============================================================
   v83 — o badge sai de dentro da moldura
   A máscara recorta toda a subárvore, então o texto do rating
   desaparecia junto com o buraco. Ele passa a ser irmão da
   moldura, posicionado sobre o recorte.
   =============================================================== */
.hero-v2{position:relative}


@media(max-width:767px){

}

/* ===============================================================
   v85 — o recorte sai da moldura e passa para a foto
   Mascarar a moldura inteira matava o border-radius dela e o
   recorte ficava com cara de retângulo colado. Agora a moldura
   volta a ser só moldura — raio e overflow intactos — e quem
   leva o buraco são a fotografia e o véu. Pelo buraco vê-se o
   fundo real da página, porque a moldura não pinta fundo.
   =============================================================== */
.hero-v2__frame{
  mask-image:none;
  -webkit-mask-image:none;
  background:transparent;
  border-radius:var(--radius);
  overflow:hidden;
}

.hero-v2__photo,
.hero-v2__frame:before{
  --bw:185px;
  --bh:90px;
  --corte:24px;
  mask-image:
    radial-gradient(circle at 100% 100%, transparent 0 var(--corte), #000 calc(var(--corte) + .5px)),
    linear-gradient(#000,#000),
    linear-gradient(#000,#000);
  mask-repeat:no-repeat;
  mask-position:
    right var(--bw) top var(--bh),
    top right,
    0 0;
  mask-size:
    var(--corte) var(--corte),
    var(--bw) var(--bh),
    100% 100%;
  mask-composite:intersect, exclude, add;
}

@media(max-width:767px){
  .hero-v2__photo,
  .hero-v2__frame:before{--bw:143px;--bh:70px;--corte:18px}
}

/* v86 — duas camadas apenas: tudo, menos o retângulo do rating.
   O terceiro layer com intersect apagava o acumulado inteiro. */
.hero-v2__photo,
.hero-v2__frame:before{
  mask-image:
    linear-gradient(#000,#000),
    linear-gradient(#000,#000);
  mask-repeat:no-repeat;
  mask-position:top right, 0 0;
  mask-size:var(--bw) var(--bh), 100% 100%;
  mask-composite:exclude, add;
}

/* v87 — foto dos sócios em 300px, enquadrada nos rostos */
.about-team__photo{
  width:100%;
  height:300px;
  max-height:none;
  aspect-ratio:auto;
}
.about-team__photo picture,
.about-team__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 22%;
}
@media(max-width:900px){
  .about-team__photo{height:300px;aspect-ratio:auto}
}

/* v88 — o badge acompanha o topo da moldura em cada breakpoint
   Estava cravado em 24px, o padding do hero no desktop; no mobile
   o padding é 12 e ele descia 12px em relação ao recorte. */
.hero-v2{--hero-pt:24px}

@media(max-width:767px){
  .hero-v2{--hero-pt:12px}
}

/* v89 — havia um min-height:360px no mobile segurando a altura */
.about-team__photo{min-height:0}
@media(max-width:900px){
  .about-team__photo{height:300px;min-height:0;aspect-ratio:auto}
}

/* v90 — a regra que segurava era .about-team .photo-slot, de
   especificidade maior. Vem-se pelo mesmo caminho. */
.about-team .about-team__photo,
.about-team .photo-slot.about-team__photo{
  height:300px;
  min-height:0;
  max-height:none;
  aspect-ratio:auto;
  width:100%;
}
@media(max-width:900px){
  .about-team .about-team__photo,
  .about-team .photo-slot.about-team__photo{height:300px;min-height:0}
}

/* ===============================================================
   RATING — bloco único e definitivo
   ---------------------------------------------------------------
   Regra que orientou o desenho, do CSS-Tricks:
   border-radius e clip-path não compõem no mesmo elemento — o
   clip-path vence e o raio é ignorado. Foi o que apagou o raio da
   moldura quando mascarei ela inteira.

   Por isso a divisão de papéis:
     • a MOLDURA mantém border-radius + overflow, e não pinta fundo
     • a FOTO e o VÉU levam a máscara com o buraco do rating
     • o BADGE é irmão da moldura, sem fundo: só o texto sobre o buraco

   Pelo buraco vê-se o fundo real da página, grão incluído. Nada é
   replicado, então nada pode divergir.
   =============================================================== */
.hero-v2{position:relative;--hero-pt:24px}

.hero-v2__frame{
  background:transparent;
  border:0;
  border-radius:var(--radius);
  overflow:hidden;
  mask-image:none;
  -webkit-mask-image:none;
}

/* o recorte: tudo, menos o retângulo do rating, com o canto
   interno filetado. Camadas de máscara empilham como as de
   background — a PRIMEIRA é a de cima — e a composição acumula
   de baixo para cima. */
.hero-v2__photo,
.hero-v2__frame:before{
  --bw:185px;
  --bh:90px;
  --corte:22px;
  mask-image:
    radial-gradient(circle at 100% 100%, transparent 0 var(--corte), #000 calc(var(--corte) + .5px)),
    linear-gradient(#000,#000),
    linear-gradient(#000,#000);
  mask-repeat:no-repeat;
  mask-position:
    right calc(var(--bw) - var(--corte)) top var(--bh),
    top right,
    0 0;
  mask-size:
    var(--corte) var(--corte),
    var(--bw) var(--bh),
    100% 100%;
  mask-composite:exclude, exclude, add;
}

/* o badge: sem fundo, sem borda, sem pseudo-elementos */



@media(max-width:767px){
  .hero-v2{--hero-pt:12px}
  .hero-v2__photo,
  .hero-v2__frame:before{--bw:143px;--bh:70px;--corte:16px}

}

/* ===============================================================
   RATING — versão final: container absoluto, sem máscara
   ---------------------------------------------------------------
   As máscaras foram abandonadas: elas não compõem com o
   border-radius da moldura (o clip-path vence e o raio é ignorado)
   e o recorte saía deslocado.

   Volta o desenho simples — o rating é um bloco absoluto dentro da
   moldura, opaco na cor da página, com os dois filetes côncavos
   feitos por radial-gradient nos pseudo-elementos.

   O que faltava antes era só o grão: o badge é opaco e ficava por
   cima da camada de grão da página (z-index 1), então saía chapado
   enquanto o resto tinha bolinhas. Em vez de replicar a trama —
   três tentativas, sempre com fase ou densidade diferente — a
   camada de grão sobe para cima dele. Passa a ser literalmente a
   mesma trama, no mesmo alinhamento.
   =============================================================== */

/* 1. desliga as máscaras */
.hero-v2__frame,
.hero-v2__photo,
.hero-v2__frame:before{
  mask-image:none;
  -webkit-mask-image:none;
}

/* 2. a moldura volta a ser opaca e arredondada */
.hero-v2__frame{
  position:relative;
  background:var(--paper);
  border-radius:var(--radius);
  overflow:hidden;
  isolation:isolate;
}

/* 3. o rating, absoluto no canto, com os filetes côncavos */
.hero-v2__frame > .hero-v2__badge{
  --notch:22px;
  position:absolute;
  z-index:3;
  top:0;
  right:0;
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 26px;
  background:var(--paper);
  background-image:none;
  border:0;
  border-radius:0 var(--radius) 0 var(--notch);
  box-shadow:none;
}
.hero-v2__frame > .hero-v2__badge:before,
.hero-v2__frame > .hero-v2__badge:after{
  content:'';
  position:absolute;
  display:block;
  width:var(--notch);
  height:var(--notch);
  background:var(--paper);
  pointer-events:none;
  -webkit-mask:radial-gradient(circle at 0 100%, transparent 0 var(--notch), #000 calc(var(--notch) + .5px));
          mask:radial-gradient(circle at 0 100%, transparent 0 var(--notch), #000 calc(var(--notch) + .5px));
}
.hero-v2__frame > .hero-v2__badge:before{left:calc(var(--notch) * -1);top:0}
.hero-v2__frame > .hero-v2__badge:after{right:0;bottom:calc(var(--notch) * -1)}

/* 4. o grão passa a cobrir o rating, em vez de ficar por baixo */
body:before{z-index:4}

@media(max-width:767px){
  .hero-v2__frame > .hero-v2__badge{--notch:16px;padding:10px 14px}
}

/* ===============================================================
   O que desenhava o retângulo do rating era a SOMBRA da moldura
   ---------------------------------------------------------------
   A box-shadow escurece a página em volta da moldura em 1 tom
   (19,19,18 contra 20,20,19). O rating fica dentro da moldura,
   logo não recebe essa sombra — e esse degrau de 1 unidade,
   repetido ponto a ponto pelo grão, lê como um bloco de fundo
   diferente com borda.

   Medido com a sombra desligada, os dois passam a ser idênticos:
   mesma base, mesmo ponto, mesma fase.

   A moldura perde a sombra. Ela já se destaca pela fotografia e
   pelo raio; a sombra custava a coerência do recorte.
   =============================================================== */
.hero-v2__frame{box-shadow:none}

/* ===============================================================
   Foto dos sócios: alturas diferentes por tamanho de tela
   Desktop — acompanha a coluna de texto, as duas esticam juntas.
   Mobile  — 300px fixos, porque ali as colunas viram uma pilha e
             não há texto ao lado para acompanhar.
   =============================================================== */
.about-team{align-items:stretch}
.about-team .about-team__photo,
.about-team .photo-slot.about-team__photo{
  height:auto;
  align-self:stretch;
  min-height:0;
  max-height:none;
  aspect-ratio:auto;
  width:100%;
}
.about-team .about-team__photo picture,
.about-team .about-team__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 22%;
}
@media(max-width:900px){
  .about-team{align-items:start}
  .about-team .about-team__photo,
  .about-team .photo-slot.about-team__photo{
    height:300px;
    align-self:auto;
    min-height:0;
  }
}

/* ===============================================================
   Foto dos sócios — quem manda na altura é o texto
   ---------------------------------------------------------------
   A imagem é retrato (1120x1400). Em align-items:stretch era ELA
   que definia a altura da linha — 660px de largura viravam 825 de
   altura — e o texto é que esticava para acompanhar, deixando um
   vazio embaixo dele.
   Tirando a imagem do fluxo (absoluta dentro do contentor), ela
   deixa de contribuir para a altura: a linha passa a medir o texto
   e a foto preencha exatamente isso.
   =============================================================== */
.about-team .about-team__photo,
.about-team .photo-slot.about-team__photo{
  position:relative;
  height:auto;
  align-self:stretch;
  min-height:0;
  overflow:hidden;
  border-radius:var(--radius);
}
.about-team .about-team__photo picture{
  position:absolute;
  inset:0;
  display:block;
}
.about-team .about-team__photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 22%;
}

@media(max-width:900px){
  .about-team .about-team__photo,
  .about-team .photo-slot.about-team__photo{
    height:300px;
    align-self:auto;
  }
}

/* ===============================================================
   Frase da direita no hero — scrim local (só desktop)
   Ela cai sobre o casco branco, o ponto mais claro da fotografia:
   2,68 de contraste médio e 1,03 no pior ponto, contra os 4,5 que
   AA pede para 16px. Em vez de escurecer a foto toda, um scrim
   centralizado nela — ocupa 73–97% na horizontal e 63–70% na vertical
   da moldura, daí o centro em 85% 66%.
   =============================================================== */
@media(min-width:768px){
  .hero-v2__frame:before{
    background:
      radial-gradient(38% 30% at 85% 66%, rgba(var(--ground-rgb),.82) 0%, rgba(var(--ground-rgb),.58) 52%, rgba(var(--ground-rgb),0) 80%),
      radial-gradient(54% 40% at 84% 86%, rgba(var(--ground-rgb),.46) 0%, rgba(var(--ground-rgb),.20) 55%, rgba(var(--ground-rgb),0) 78%),
      linear-gradient(96deg, rgba(var(--ground-rgb),.78) 0%, rgba(var(--ground-rgb),.56) 28%, rgba(var(--ground-rgb),.14) 60%, rgba(var(--ground-rgb),.02) 100%),
      linear-gradient(180deg, rgba(var(--ground-rgb),.20) 0%, rgba(var(--ground-rgb),0) 22%, rgba(var(--ground-rgb),0) 52%, rgba(var(--ground-rgb),.20) 78%, rgba(var(--ground-rgb),.38) 100%);
  }
}

/* a coluna esquerda (etiqueta de serviços e título) também caía
   sobre o céu claro: 1,90 na etiqueta. Scrim próprio para ela. */
@media(min-width:768px){
  .hero-v2__frame:before{
    background:
      radial-gradient(38% 30% at 85% 66%, rgba(var(--ground-rgb),.82) 0%, rgba(var(--ground-rgb),.58) 52%, rgba(var(--ground-rgb),0) 80%),
      radial-gradient(50% 50% at 22% 46%, rgba(var(--ground-rgb),.78) 0%, rgba(var(--ground-rgb),.46) 58%, rgba(var(--ground-rgb),0) 86%),
      radial-gradient(54% 40% at 84% 86%, rgba(var(--ground-rgb),.46) 0%, rgba(var(--ground-rgb),.20) 55%, rgba(var(--ground-rgb),0) 78%),
      linear-gradient(96deg, rgba(var(--ground-rgb),.80) 0%, rgba(var(--ground-rgb),.58) 28%, rgba(var(--ground-rgb),.14) 60%, rgba(var(--ground-rgb),.02) 100%),
      linear-gradient(180deg, rgba(var(--ground-rgb),.20) 0%, rgba(var(--ground-rgb),0) 22%, rgba(var(--ground-rgb),0) 52%, rgba(var(--ground-rgb),.20) 78%, rgba(var(--ground-rgb),.38) 100%);
  }
}

/* ===============================================================
   OUR PROCESS — a entrada é da própria seção
   O .process-copy tinha data-reveal e ficava em opacidade 0: dentro
   de uma seção com pin do ScrollTrigger o IntersectionObserver não
   dispara de forma confiável, e o bloco nunca aparecia. A entrada
   dele já é feita pela animação de troca de etapa (.is-trocando),
   então o reveal por scroll sai — dois sistemas no mesmo elemento
   é o que quebrava.
   Rede de segurança: se o JS não correr, o bloco fica visível.
   =============================================================== */
.process-copy{opacity:1}
html.js .process-copy[data-reveal]{opacity:1;transform:none}

/* ===============================================================
   HERO — véu do desktop de volta ao que era antes dos scrims
   Os dois scrims radiais (v98–v100) resolviam o contraste do texto,
   mas escureciam a fotografia a ponto de a descaracterizar.
   Volta o véu do v97, exatamente como estava.
   =============================================================== */
@media(min-width:768px){
  .hero-v2__frame:before{
    background:
      radial-gradient(54% 40% at 84% 86%, rgba(var(--ground-rgb),.46) 0%, rgba(var(--ground-rgb),.20) 55%, rgba(var(--ground-rgb),0) 78%),
      linear-gradient(96deg, rgba(var(--ground-rgb),.78) 0%, rgba(var(--ground-rgb),.56) 28%, rgba(var(--ground-rgb),.14) 60%, rgba(var(--ground-rgb),.02) 100%),
      linear-gradient(180deg, rgba(var(--ground-rgb),.20) 0%, rgba(var(--ground-rgb),0) 22%, rgba(var(--ground-rgb),0) 52%, rgba(var(--ground-rgb),.20) 78%, rgba(var(--ground-rgb),.38) 100%);
  }
}

/* o que já está no tela ao carregar aparece sem transição */
html.js [data-reveal].sem-anim{transition:none !important}

/* ===============================================================
   LENIS — o CSS que a documentação exige, e que faltava
   ---------------------------------------------------------------
   O html tinha scroll-behavior:smooth. Com o Lenis ativo isso é
   veneno: ele escreve scrollTop a cada quadro, e o navegador anima
   cada escrita — os dois puxam a página ao mesmo tempo. Medido em
   tempo real no mobile: um scrollTo imediato levou 2,5s a chegar e
   trocou de etapa duas vezes sozinho pelo caminho. No desktop o pin
   do ScrollTrigger forçava auto e mascarava o problema; ao recarregar,
   antes de o pin existir, o smooth animava a restauração da posição
   e a página passava pela seção — o "efeito a atualizar".

   Regra: com JS vivo, quem suaviza é o Lenis. O smooth nativo fica só
   como fallback sem JS, para as âncoras.
   =============================================================== */
html.js{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ===============================================================
   MENU MOBILE — rede de segurança fora da faixa
   As regras do menu vivem todas em max-width:900px. Se o dialog
   ficasse aberto acima disso — ao alargar a janela — caía no desenho
   por omissão do browser e a imagem ia ao tamanho natural do arquivo.
   O JS fecha-o ao sair da faixa; isto é o cinto de segurança para o
   caso de o JS não correr.
   =============================================================== */
@media(min-width:901px){
  .mobile-menu,
  .mobile-menu[open]{display:none !important}
}
/* o topo do menu está oculto na faixa mobile; se alguma vez aparecer,
   o logotipo tem um teto em vez do tamanho natural do arquivo */
.mobile-menu__top img{max-width:112px;height:auto}

/* O showModal foca o primeiro elemento focável — o link HOME ganhava
   um anel azul assim que o menu abria. Com autofocus + tabindex no
   próprio diálogo, o foco fica nele (correto para um modal) e sem anel. */
.mobile-menu:focus,
.mobile-menu:focus-visible{outline:none}

/* ===============================================================
   MENU MOBILE — cobre a tela inteira, com topo próprio
   ---------------------------------------------------------------
   O diálogo abria com inset:76px 0 0 0, deixando uma faixa no topo
   por onde o cabeçalho da página aparecia — e, como o menu é modal,
   essa faixa via-se ATRAVÉS do backdrop: desfocada e escurecida. Um
   cabeçalho fantasma, com o logotipo borrado.

   O menu passa a cobrir tudo e a usar o topo que já existia no
   markup — o mesmo logotipo e o botão de fechar, que estavam
   escondidos. Sem faixa, sem fantasma, e o fechar fica dentro do
   menu em vez de depender do botão da página por baixo.
   =============================================================== */
@media(max-width:900px){
  .mobile-menu[open]{
    inset:0;
    padding:18px 24px 24px;
  }
  .mobile-menu__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    height:40px;
    flex:none;
  }
  .mobile-menu__top img{width:92px;max-width:92px;height:auto;display:block}
  .mobile-menu__close{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:44px;
    height:44px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--ink);
    cursor:pointer;
    flex:none;
  }
  .mobile-menu__close span{display:block;width:22px;height:2px;border-radius:2px;background:currentColor}
}
@media(max-width:390px){
  .mobile-menu[open]{padding:14px 20px 20px}
  .mobile-menu__top img{width:84px;max-width:84px}
}

/* ===============================================================
   v108 — header full bleed e orientação das abas no mobile
   =============================================================== */
.services-mobile-hint{display:none}

@media(max-width:767px){
  /* O fundo ocupa a viewport; o respiro passa para dentro do header. */
  .header-shell{
    width:100%;
    max-width:none;
  }
  .site-header{
    width:100%;
    padding-inline:24px;
  }
  .site-header:before{
    left:0;
    width:100%;
    transform:none;
  }

  .services-mobile-hint{
    display:block;
    max-width:32ch;
    margin:14px auto 0;
    color:var(--muted);
    font-size:14px;
    line-height:1.45;
    text-align:center;
  }
}

@media(max-width:390px){
  .site-header{padding-inline:24px}
}

/* ===============================================================
   v109 — base do preloader SD3
   =============================================================== */
html.preloader-active,
html.preloader-active body{
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
.sd3-preloader{
  position:fixed;
  z-index:99999;
  inset:0;
  display:grid;
  place-items:center;
  width:100vw;
  height:100vh;
  height:100svh;
  overflow:hidden;
  background:#000;
  isolation:isolate;
}
/* A luz, o rastro e a revelação vivem dentro do MESMO svg do logotipo,
   no mesmo viewBox — por isso a posição da luz e a borda que revela as
   letras podem ser o mesmo número, sem conversão entre espaços de
   coordenadas diferentes. Numa versão anterior a luz vivia numa camada à
   parte, maior, e as duas animações só coincidiam no tempo, não na
   posição — lia-se como dois efeitos soltos, não como a luz a revelar
   a marca. */
.sd3-preloader__mark{
  display:block;
  width:min(66vw,720px);
  height:auto;
  overflow:visible;
  opacity:0;
  transform:scale(.96);
  transform-origin:50% 50%;
  will-change:transform,opacity;
}

@media(max-width:767px){
  .sd3-preloader__mark{width:min(78vw,440px)}
}

@media(prefers-reduced-motion:reduce){
  .sd3-preloader__mark{opacity:1;transform:none}
}

/* ===============================================================
   v110 — elimina a fresta no canto do recorte do rating
   O raio da foto e o raio do bloco eram rasterizados em bordas
   coincidentes. No Safari mobile, o antialias deixava aparecer um
   filete da fotografia entre as duas camadas. O badge ultrapassa
   2px e é recortado pela própria moldura, sem mudar o desenho.
   =============================================================== */
.hero-v2__frame > .hero-v2__badge{
  top:-2px;
  right:-2px;
  padding-right:28px;
}

@media(max-width:767px){
  .hero-v2__frame > .hero-v2__badge{padding-right:16px}
}

/* v113 — proporção do preloader refinada pela referência náutica */
.sd3-preloader__mark{width:min(40vw,460px)}
@media(max-width:767px){
  .sd3-preloader__mark{width:min(54vw,270px)}
}

/* ===============================================================
   v114 — um único header nos dois estados do menu
   O diálogo deixa de desenhar uma segunda logo e um segundo botão.
   O header real permanece acima do painel; assim não há troca de
   coordenadas e os mesmos três traços se transformam no X.
   =============================================================== */
@media(max-width:900px){
  .header-shell{
    width:100%;
    max-width:none;
  }
  .site-header{
    z-index:60;
    padding-inline:24px;
  }
  .site-header.is-menu-open{
    background:var(--paper);
  }
  .site-header.is-menu-open:before{
    opacity:1;
    background:var(--paper);
  }
  .mobile-menu[open]{
    z-index:55;
    inset:0;
    width:auto;
    max-width:none;
    height:auto;
    max-height:none;
    padding:104px 24px 24px;
    border:0;
    border-radius:0;
    background:var(--paper);
  }
  .mobile-menu__top{display:none!important}
  .menu-toggle span{
    width:100%;
    flex:none;
    transform-origin:50% 50%;
  }
}

@media(max-width:767px){
  .mobile-menu[open]{padding-top:92px}
}

/* ===============================================================
   v115 — corrente contínua do preloader e alinhamento ótico mobile
   =============================================================== */
.sd3-preloader__mark{width:min(34vw,390px)}

@media(max-width:767px){
  .sd3-preloader__mark{width:min(47vw,235px)}

  /* Os traços têm respiro dentro dos 46px de toque. A compensação
     alinha o desenho à borda e ao centro ótico da marca. */
  .menu-toggle{
    margin-right:-10px;
    transform:translateY(-4px);
  }
}

/* ===============================================================
   Canto superior direito do rating — quem arredonda é a moldura
   ---------------------------------------------------------------
   O badge tinha raio próprio de 12px nesse canto E transbordava 2px
   para fora da moldura. O transbordo existia para tapar a emenda,
   mas com raio próprio ele afasta a curva do badge da curva do
   recorte da moldura: em vez de fechar, abria uma nesga de 2px por
   onde se via a fotografia — o arco fino no canto.

   Com o canto externo reto, o badge cobre inteiramente o canto e
   quem desenha a curva é o overflow da moldura, uma vez só.
   =============================================================== */
.hero-v2__frame > .hero-v2__badge{
  border-top-right-radius:0;
}

/* ===============================================================
   O canto do rating: a foto recua para fora da costura
   ---------------------------------------------------------------
   A moldura tem overflow:hidden com raio 12. O badge cobre o canto
   superior direito com fundo da cor da pagina e ate transborda 1px.
   Mesmo assim via-se um arco fino do ceu ali.
   A causa e dupla composicao: a curva da moldura e a borda da foto
   caem no mesmo sitio, e o recorte antisserrilhado e aplicado a cada
   camada, entao sobra alpha por onde a foto passa.
   A correcao nao e cobrir melhor — e tirar a foto de baixo da curva.
   Raio 20 no canto superior direito, maior que os 12 da moldura,
   faz a foto acabar antes da costura. Medido: 21 pixels de ceu -> 0.
   So no desktop: abaixo de 900px o badge deixa de ser absoluto e
   esse canto da foto fica a vista.
   =============================================================== */
.hero-v2__photo,
.hero-v2__photo img{
  border-radius:var(--radius);
  overflow:hidden;
}
@media (min-width:901px){
  .hero-v2__photo,
  .hero-v2__photo img{ border-top-right-radius:20px; }
}


/* ===============================================================
   v125 — reveal da marca pelo brilho
   O logotipo original permanece intacto. Um feixe atravessa a marca e
   expande a área visível na mesma direção, sobre fundo preto.
   =============================================================== */
.sd3-preloader{
  background:#000;
}
.sd3-preloader__stage{
  position:relative;
  width:min(38vw,500px);
  aspect-ratio:1968 / 790;
  opacity:0;
  transform:scale(.985);
  isolation:isolate;
  will-change:opacity,transform;
}
.sd3-preloader__ghost,
.sd3-preloader__logo{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
}
.sd3-preloader__ghost{
  opacity:.075;
  filter:brightness(.48) saturate(.7);
}
.sd3-preloader__reveal{
  position:absolute;
  z-index:2;
  inset:0;
  overflow:hidden;
  clip-path:inset(0 100% 0 0);
  will-change:clip-path;
}
.sd3-preloader__logo{
  filter:drop-shadow(0 0 0 rgba(255,255,255,0));
  will-change:filter;
}
.sd3-preloader__halo{
  position:absolute;
  z-index:1;
  top:50%;
  left:-20%;
  width:42%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,255,255,.32) 0,
    rgba(255,255,255,.12) 24%,
    rgba(255,255,255,0) 70%);
  filter:blur(14px);
  opacity:0;
  transform:translate(-50%,-50%) scale(.7);
  mix-blend-mode:screen;
  will-change:left,opacity,transform;
}
.sd3-preloader__beam{
  position:absolute;
  z-index:3;
  top:-44%;
  bottom:-44%;
  left:-22%;
  width:13%;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,.16) 23%,
    rgba(255,255,255,.98) 50%,
    rgba(255,255,255,.14) 77%,
    rgba(255,255,255,0) 100%);
  filter:blur(6px);
  opacity:0;
  transform:skewX(-17deg) translateX(-40%);
  mix-blend-mode:screen;
  will-change:left,opacity,transform;
}
.sd3-preloader.is-running{
  animation:sd3-preloader-exit .46s cubic-bezier(.4,0,1,1) 2.12s forwards;
}
.sd3-preloader.is-running .sd3-preloader__stage{
  animation:sd3-stage-in .32s ease-out forwards;
}
.sd3-preloader.is-running .sd3-preloader__ghost{
  animation:sd3-ghost-out .75s ease-out 1.18s forwards;
}
.sd3-preloader.is-running .sd3-preloader__reveal{
  animation:sd3-logo-reveal 1.18s cubic-bezier(.34,.05,.15,1) .34s forwards;
}
.sd3-preloader.is-running .sd3-preloader__logo{
  animation:sd3-logo-settle 1.3s ease-out .62s forwards;
}
.sd3-preloader.is-running .sd3-preloader__halo{
  animation:sd3-halo-pass 1.35s cubic-bezier(.35,.04,.15,1) .22s forwards;
}
.sd3-preloader.is-running .sd3-preloader__beam{
  animation:sd3-beam-pass 1.28s cubic-bezier(.35,.04,.15,1) .26s forwards;
}
@keyframes sd3-stage-in{
  from{opacity:0;transform:scale(.985)}
  to{opacity:1;transform:scale(1)}
}
@keyframes sd3-logo-reveal{
  0%{clip-path:inset(0 100% 0 0)}
  100%{clip-path:inset(0 0 0 0)}
}
@keyframes sd3-beam-pass{
  0%{left:-22%;opacity:0;transform:skewX(-17deg) translateX(-40%)}
  12%{opacity:.9}
  78%{opacity:.82}
  100%{left:112%;opacity:0;transform:skewX(-17deg) translateX(40%)}
}
@keyframes sd3-halo-pass{
  0%{left:-18%;opacity:0;transform:translate(-50%,-50%) scale(.65)}
  16%{opacity:.65}
  70%{opacity:.38}
  100%{left:118%;opacity:0;transform:translate(-50%,-50%) scale(1.15)}
}
@keyframes sd3-logo-settle{
  0%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
  45%{filter:drop-shadow(0 0 13px rgba(255,255,255,.2))}
  100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
}
@keyframes sd3-ghost-out{
  to{opacity:0}
}
@keyframes sd3-preloader-exit{
  to{opacity:0;visibility:hidden}
}
@media(max-width:767px){
  .sd3-preloader__stage{width:min(68vw,300px)}
  .sd3-preloader__beam{width:16%;filter:blur(5px)}
}
@media(prefers-reduced-motion:reduce){
  .sd3-preloader__stage{opacity:1;transform:none}
  .sd3-preloader__reveal{clip-path:none}
  .sd3-preloader__ghost,
  .sd3-preloader__beam,
  .sd3-preloader__halo{display:none}
}