/* =========================================================
   Cleanera — design system (v2, layout editorial)
   Paleta e tipografia derivadas do logo e das referências
   aprovadas pela cliente. Mobile-first.
   O layout clássico (v1) está em _versao-1-classica/.
   ========================================================= */

/* ---------- tokens ---------- */
:root {
  /* cor */
  --teal-950:#072E32;
  --teal-900:#093F44;
  --teal-800:#0B4A50;
  --teal-700:#0E5A5F;
  --teal-600:#14707A;
  --teal-300:#8FBFC1;
  --teal-100:#E3EFEF;
  --teal-50:#E6F1F1;

  --coral-700:#A84730;
  --coral-600:#C25640;
  --coral-400:#E8735C;
  --coral-200:#F5A48F;
  --coral-100:#F6EDE8;

  --paper:#FBF7F4;
  --paper-2:#F6EDE8;
  --white:#FFFFFF;
  --line:#E8DCD5;
  --line-2:#EDE2DB;

  --ink:#1C2222;
  --ink-2:#26302F;
  --body:#46504F;
  --muted:#6C7473;
  --faint:#8A918F;

  /* texto sobre o verde-petróleo */
  --on-teal:#B9D6D7;
  --on-teal-2:#A9CBCC;
  --on-teal-3:#7FA9AB;
  --teal-rule:#1F6B70;

  /* tipografia */
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Karla', 'Helvetica Neue', Arial, sans-serif;

  /* espaçamento — escala de 4 */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;   --s7:2.5rem; --s8:3rem;
  --s9:4rem;   --s10:5rem;  --s11:6rem;

  --radius:3px;
  --radius-btn:2px;
  --wrap:1200px;
  --gutter:1.375rem;

  /* movimento */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  /* brilho de 4 pontas do logo, usado como máscara */
  --spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1C12.6 7.6 16.4 11.4 23 12C16.4 12.6 12.6 16.4 12 23C11.4 16.4 7.6 12.6 1 12C7.6 11.4 11.4 7.6 12 1Z'/%3E%3C/svg%3E");
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

  /* altura da barra fixa do celular, usada no padding do body */
  --dock:84px;
}

@media (min-width:900px){
  :root{ --gutter:3rem; --dock:0px; }
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--dock);
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.02em; line-height:1.14; }
p{ margin:0; }
ul, ol{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }
a{ color:var(--coral-600); text-decoration:none; }
a:hover{ color:var(--coral-700); text-decoration:underline; }
:focus-visible{ outline:3px solid var(--coral-400); outline-offset:3px; border-radius:2px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--s4); top:-4rem; z-index:100;
  background:var(--teal-700); color:var(--paper); padding:var(--s3) var(--s4);
  border-radius:var(--radius-btn); transition:top .15s;
}
.skip-link:focus{ top:var(--s4); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(3.5rem, 8vw, 6.5rem); }
.section--paper{ background:var(--paper-2); border-block:1px solid var(--line-2); }
.section--teal{ background:var(--teal-700); color:var(--paper); }
.section--deep{ background:var(--teal-900); color:var(--paper); }
.section--teal :is(h2,h3,h4), .section--deep :is(h2,h3,h4){ color:var(--paper); }
.section--teal .eyebrow, .section--deep .eyebrow{ color:var(--coral-200); }
.section--teal .lede, .section--deep .lede{ color:var(--on-teal-2); }
.section--teal .body, .section--deep .body{ color:var(--on-teal); }
.section--teal strong, .section--deep strong{ color:var(--paper); }
.section--teal .link-more, .section--deep .link-more{ color:var(--coral-200); }

.stack > * + *{ margin-top:var(--s4); }
.grid{ display:grid; gap:var(--s4); }
@media (min-width:760px){
  .grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* cabeçalho de seção em duas colunas: título à esquerda, apoio à direita */
.cases__head, .services__head, .reviews__head, .how__head, .sec-head{ display:grid; gap:var(--s4); }
@media (min-width:900px){
  .cases__head, .services__head, .reviews__head, .how__head, .sec-head{
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:var(--s9); align-items:end;
  }
  :is(.cases__head, .services__head, .reviews__head, .how__head, .sec-head) > .eyebrow{ grid-column:1 / -1; }
}
/* âncoras não ficam escondidas atrás do cabeçalho fixo */
[id]{ scroll-margin-top:96px; }

/* ---------- tipografia utilitária ---------- */
.eyebrow{
  font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--coral-600); margin:0;
}
.eyebrow::before{
  content:''; display:inline-block; width:.85em; height:.85em; margin-right:.6em; vertical-align:-.1em;
  background:currentColor;
  -webkit-mask:var(--spark) center/contain no-repeat; mask:var(--spark) center/contain no-repeat;
}
.h1{ font-size:clamp(2.25rem,7vw,3.5rem); line-height:1.06; color:var(--teal-700); }
.h1 em{ font-style:italic; color:var(--coral-600); }
.h2{ font-size:clamp(2rem,4.6vw,3.25rem); line-height:1.06; letter-spacing:-.025em; color:var(--teal-700); }
.h3{ font-size:clamp(1.1875rem,2.4vw,1.4375rem); color:var(--teal-700); }
.lede{ font-size:clamp(1rem,1.6vw,1.125rem); line-height:1.65; color:var(--body); }
.body{ color:var(--body); }
.small{ font-size:.875rem; color:var(--muted); }
.measure{ max-width:34rem; }
.link-more{ font-weight:700; font-size:.9375rem; }

/* marcador de conteúdo pendente — sai antes do lançamento */
.todo{
  font-size:.8125rem; line-height:1.55; color:var(--faint);
  border-left:2px solid var(--coral-200); padding-left:var(--s3);
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:52px; padding:var(--s3) var(--s6);
  font-family:var(--sans); font-size:1rem; font-weight:700; line-height:1.2;
  border-radius:var(--radius-btn); border:1px solid transparent;
  cursor:pointer; text-align:center;
  transition:background-color .2s, color .2s, border-color .2s, box-shadow .25s, transform .25s var(--ease-out);
}
.btn:hover{ text-decoration:none; }
.btn:active{ transform:scale(.98); }
.btn--primary{ background:var(--teal-700); color:var(--paper); }
.btn--primary:hover{ background:var(--teal-800); color:var(--paper); }
.btn--ghost{ background:transparent; color:var(--teal-700); border-color:#CFC0B7; }
.btn--ghost:hover{ background:var(--white); color:var(--teal-800); border-color:var(--teal-700); }
.btn--coral{ background:var(--coral-200); color:var(--teal-900); }
.btn--coral:hover{ background:var(--coral-400); color:var(--white); }
.btn--onteal{ background:transparent; color:var(--paper); border-color:#2E7176; }
.btn--onteal:hover{ background:rgba(255,255,255,.08); color:var(--paper); border-color:var(--on-teal-2); }
.btn--block{ width:100%; }
.btn-row{ display:flex; flex-direction:column; gap:var(--s3); }
@media (min-width:560px){ .btn-row{ flex-direction:row; flex-wrap:wrap; } .btn--block{ width:auto; } }
@media (hover:hover){
  .btn--primary:hover, .btn--coral:hover{ transform:translateY(-1px); box-shadow:0 10px 20px -12px rgba(9,63,68,.6); }
}

.arr{ display:inline-block; transition:transform .25s var(--ease-out); }
a:hover .arr{ transform:translateX(4px); }

/* ---------- cards (página de orçamento) ---------- */
.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--s5);
}
.card--teal{ background:var(--teal-700); border-color:var(--teal-700); color:var(--paper); }
.card--teal .body{ color:var(--on-teal); }

/* ---------- placeholder de foto (páginas futuras) ---------- */
.ph{
  background:var(--teal-100); border:1px solid #C9DEDF; border-radius:var(--radius);
  display:grid; place-items:center; text-align:center; padding:var(--s5);
  aspect-ratio:4/3;
}
.ph span{
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:#6E8C8E; line-height:1.9;
}

/* ---------- estrelas ---------- */
.stars{ display:flex; gap:2px; color:var(--coral-600); }
.stars svg{ width:16px; height:16px; fill:currentColor; }
.rating-line{ display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; font-size:.9375rem; color:var(--body); }

/* =========================================================
   HERO — verde-petróleo profundo, foto na casa do logo
   ========================================================= */
.hero--dark{
  position:relative; overflow:hidden; color:var(--paper);
  background:
    radial-gradient(55% 60% at 80% 40%, rgba(31,120,126,.55) 0%, rgba(14,90,95,0) 72%),
    linear-gradient(180deg, var(--teal-900) 0%, #083A3F 100%);
}
.hero__grid{ display:grid; gap:var(--s9); align-items:center; padding-block:var(--s6) var(--s10); }
@media (min-width:900px){
  .hero__grid{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:var(--s10); padding-block:var(--s9) var(--s11); }
}
.hero--dark .h1{
  font-size:clamp(2.6rem, 10.5vw, 3.4rem); font-weight:300;
  line-height:1.03; letter-spacing:-.035em; color:var(--paper);
}
@media (min-width:900px){ .hero--dark .h1{ font-size:clamp(3.4rem, 5.6vw, 5.25rem); } }
.hero--dark .h1 em{ color:var(--coral-200); font-weight:400; }
.hero--dark .eyebrow{ color:var(--coral-200); }
.hero--dark .lede{ color:var(--on-teal); max-width:34rem; font-size:clamp(1.0625rem,1.6vw,1.1875rem); }
.hero--dark .stack > .btn-row{ margin-top:var(--s6); }
.hero--dark .rating-line{ color:var(--on-teal-2); font-size:.875rem; }
.hero--dark .rating-line strong{ color:var(--paper); }
.hero--dark .rating-line a{ color:var(--coral-200); }
.hero--dark .stars{ color:var(--coral-200); }

/* foto/vídeo em formato de casa */
.hero-visual{ position:relative; width:100%; max-width:30rem; justify-self:center; }
@media (min-width:900px){ .hero-visual{ justify-self:end; } }
.hero-media{
  position:relative; z-index:1; overflow:hidden; background:var(--teal-800);
  aspect-ratio:4/3;
  clip-path:polygon(0 18%, 50% 0, 100% 18%, 100% 100%, 0 100%);
}
@media (min-width:760px){ .hero-media{ aspect-ratio:3/4; } }
.hero-media video, .hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-media figcaption{
  position:absolute; z-index:2; right:var(--s3); top:calc(18% + var(--s3));
  background:rgba(251,247,244,.92); color:var(--teal-700);
  font-size:.625rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.375rem .625rem; border-radius:var(--radius-btn);
}
/* acompanha só a foto (a proporção vem do viewBox), não o bloco todo com o card */
.hero-outline{
  position:absolute; top:0; left:0; width:100%; height:auto; overflow:visible;
  transform:translate(14px, 14px); pointer-events:none;
}
.hero-outline path{ fill:none; stroke:var(--coral-400); stroke-linecap:round; stroke-linejoin:round; }
.hero-outline--tall{ display:none; }
.hero-outline--tall path{ stroke-width:.85; }
.hero-outline--wide path{ stroke-width:1.6; }
@media (min-width:760px){
  .hero-outline--tall{ display:block; }
  .hero-outline--wide{ display:none; }
}
.spark{ position:absolute; z-index:2; fill:none; stroke:currentColor; overflow:visible; pointer-events:none; }
.spark--lg{ width:34px; height:34px; left:8%; top:-3%; color:var(--coral-200); stroke-width:1.1; }
.spark--sm{ width:18px; height:18px; left:25%; top:-1%; color:var(--teal-300); stroke-width:1.6; }

/* avaliação real flutuando sobre a foto */
/* no celular fica logo abaixo da foto, encostando na borda; no desktop flutua sobre o canto */
.float-review{
  position:relative; z-index:3; margin:-1.75rem 0 0 auto;
  width:min(18.5rem, 86%); padding:var(--s4) var(--s5);
  background:var(--paper); color:var(--ink-2); border-radius:var(--radius);
  box-shadow:0 26px 50px -26px rgba(0,0,0,.6);
}
@media (min-width:900px){ .float-review{ position:absolute; margin:0; left:-3.5rem; bottom:-2rem; } }
.float-review .stars svg{ width:14px; height:14px; }
.float-review blockquote{
  margin:var(--s2) 0; font-family:var(--serif); font-size:1.1875rem; line-height:1.35;
  letter-spacing:-.01em; color:var(--teal-700);
}
.float-review figcaption{ font-size:.8125rem; color:var(--muted); }
.float-review figcaption strong{ color:var(--ink-2); }

/* faixa com as áreas atendidas */
.marquee{ position:relative; overflow:hidden; border-top:1px solid rgba(169,203,204,.16); padding-block:var(--s4); }
.marquee__track{ display:flex; width:max-content; }
.marquee__group{ display:flex; align-items:center; flex-shrink:0; gap:var(--s5); padding-right:var(--s5); }
.marquee span{
  font-family:var(--serif); font-style:italic; white-space:nowrap;
  font-size:clamp(1.125rem,2.2vw,1.625rem); color:#CFE2E2;
}
.marquee i{
  width:.75rem; height:.75rem; flex-shrink:0; background:var(--coral-200);
  -webkit-mask:var(--spark) center/contain no-repeat; mask:var(--spark) center/contain no-repeat;
}

/* =========================================================
   ANTES E DEPOIS — visualizador com lista de trabalhos
   ========================================================= */
.cases__head{ margin-bottom:var(--s7); }

.viewer{ display:grid; gap:var(--s5); }
@media (min-width:900px){
  .viewer{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--s9); align-items:center; }
}

/* lista: chips roláveis no celular, índice vertical no desktop */
.viewer__tabs{
  display:flex; gap:var(--s2); overflow-x:auto; scroll-snap-type:x mandatory;
  margin-inline:calc(var(--gutter) * -1); padding:0 var(--gutter) var(--s2);
  scrollbar-width:none;
}
.viewer__tabs::-webkit-scrollbar{ display:none; }
.viewer__tab{
  flex:0 0 auto; scroll-snap-align:start; position:relative;
  display:grid; grid-template-columns:auto 1fr; column-gap:var(--s3); align-items:baseline;
  padding:.625rem .875rem; text-align:left; cursor:pointer;
  font:inherit; color:var(--ink-2); background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius-btn);
  transition:background-color .3s, border-color .3s, color .3s;
}
.viewer__n{ grid-row:span 2; font-family:var(--serif); font-size:.9375rem; color:var(--coral-600); }
.viewer__name{ font-weight:700; font-size:.9375rem; white-space:nowrap; }
.viewer__meta{ font-size:.75rem; color:var(--muted); white-space:nowrap; }
.viewer__tab[aria-selected="true"]{ background:var(--teal-700); border-color:var(--teal-700); color:var(--paper); }
.viewer__tab[aria-selected="true"] .viewer__n{ color:var(--coral-200); }
.viewer__tab[aria-selected="true"] .viewer__meta{ color:var(--on-teal-2); }

@media (min-width:900px){
  .viewer__tabs{
    flex-direction:column; gap:0; overflow:visible; margin:0; padding:0;
    border-top:1px solid var(--line);
  }
  .viewer__tab{
    grid-template-columns:2.75rem 1fr; row-gap:.15rem;
    padding:var(--s4) var(--s2) var(--s4) 0; background:none; border:0;
    border-bottom:1px solid var(--line); border-radius:0;
  }
  .viewer__tab::after{
    content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background:var(--coral-600); transform:scaleX(0); transform-origin:left;
    transition:transform .6s var(--ease-out);
  }
  .viewer__n{ font-size:1rem; align-self:start; padding-top:.45rem; }
  .viewer__name{
    font-family:var(--serif); font-weight:400; font-size:clamp(1.375rem,2.2vw,1.75rem);
    letter-spacing:-.015em; line-height:1.2; color:var(--teal-700); white-space:normal;
    transition:color .3s, transform .45s var(--ease-out);
  }
  .viewer__meta{ grid-column:2; font-size:.8125rem; }
  .viewer__tab:hover .viewer__name{ color:var(--coral-600); }
  .viewer__tab[aria-selected="true"]{ background:none; color:inherit; }
  .viewer__tab[aria-selected="true"]::after{ transform:scaleX(1); }
  .viewer__tab[aria-selected="true"] .viewer__name{ font-style:italic; color:var(--teal-700); transform:translateX(6px); }
  .viewer__tab[aria-selected="true"] .viewer__n{ color:var(--coral-600); }
  .viewer__tab[aria-selected="true"] .viewer__meta{ color:var(--muted); }
}

.viewer__stage{ position:relative; width:100%; }
@media (min-width:900px){
  .viewer__stage{ width:min(100%, calc((100svh - 150px) * .8)); justify-self:end; }
}
.viewer__panel[hidden]{ display:none; }
.viewer__count{
  margin-top:var(--s3); text-align:right; font-family:var(--serif);
  font-size:.9375rem; color:var(--muted); font-variant-numeric:tabular-nums;
}
.viewer__count span{ color:var(--teal-700); }

/* slider: a foto "depois" fica por cima, recortada a partir de --pos */
.ba{
  --pos:50%;
  position:relative; aspect-ratio:4/5; overflow:hidden;
  border-radius:var(--radius); background:var(--teal-100);
  touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:ew-resize;
}
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba__after{ clip-path:inset(0 0 0 var(--pos)); }
.ba__line{
  position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px;
  background:var(--paper); pointer-events:none;
}
.ba__knob{
  position:absolute; top:50%; left:var(--pos); transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%;
  background:var(--paper); color:var(--teal-700);
  display:grid; place-items:center; pointer-events:none;
  box-shadow:0 2px 14px rgba(9,63,68,.3);
}
.ba:focus-visible{ outline:none; }
.ba:focus-visible .ba__knob{ outline:3px solid var(--coral-400); outline-offset:2px; }
.ba-tag{
  position:absolute; top:var(--s3); z-index:1; pointer-events:none;
  font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:.3rem .55rem; border-radius:var(--radius-btn);
}
.ba-tag--before{ left:var(--s3); background:rgba(28,34,34,.74); color:var(--paper); }
.ba-tag--after{ right:var(--s3); background:var(--paper); color:var(--teal-700); }

/* brilho quando o slider chega todo no "depois" */
.ba__spark{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.ba__spark svg{
  position:absolute; width:26px; height:26px; fill:#fff; opacity:0;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.9));
}
.ba__spark svg:nth-child(1){ left:28%; top:26%; }
.ba__spark svg:nth-child(2){ left:66%; top:44%; width:16px; height:16px; }
.ba__spark svg:nth-child(3){ left:46%; top:66%; width:20px; height:20px; }
.ba.is-sparkle .ba__spark svg{ animation:sparkle 1.1s var(--ease-out) both; }
.ba.is-sparkle .ba__spark svg:nth-child(2){ animation-delay:.12s; }
.ba.is-sparkle .ba__spark svg:nth-child(3){ animation-delay:.24s; }

/* =========================================================
   A EMPRESA — números, foto e equipe
   ========================================================= */
.stats{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s7) var(--s4);
  padding-bottom:var(--s9); margin-bottom:var(--s9); border-bottom:1px solid var(--line);
}
@media (min-width:900px){ .stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stats li{ display:grid; gap:var(--s3); align-content:start; padding-left:var(--s4); border-left:1px solid var(--line); }
.stat__num{
  font-family:var(--serif); font-weight:300; font-size:clamp(2.75rem,7vw,4.5rem);
  line-height:.9; letter-spacing:-.04em; color:var(--teal-700);
  font-variant-numeric:lining-nums tabular-nums; white-space:nowrap;
}
.stat__num small{ font-size:.4em; letter-spacing:0; margin-left:.1em; vertical-align:.95em; color:var(--coral-600); }
.stat__label{ font-size:.875rem; line-height:1.45; color:var(--body); max-width:13rem; }

.photo{ position:relative; overflow:hidden; border-radius:var(--radius); background:var(--teal-100); aspect-ratio:4/3; }
.photo img{ width:100%; height:100%; object-fit:cover; }

.about__grid{ display:grid; gap:var(--s7); align-items:center; }
@media (min-width:900px){ .about__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--s9); } }

.team{ display:grid; gap:var(--s6); margin-top:var(--s10); padding-top:var(--s9); border-top:1px solid var(--line); }
@media (min-width:900px){ .team{ grid-template-columns:1fr 1fr; gap:var(--s9); } }
.team__goal{
  font-family:var(--serif); font-size:clamp(1.25rem,2.2vw,1.5rem); line-height:1.4;
  letter-spacing:-.01em; color:var(--teal-700);
  border-left:2px solid var(--coral-400); padding-left:var(--s4);
}

/* =========================================================
   AVALIAÇÕES — fundo verde-petróleo
   ========================================================= */
.reviews__grid{ display:grid; gap:var(--s4); margin-top:var(--s7); }
@media (min-width:900px){
  .reviews__grid{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
  .review--lead{ grid-row:span 2; }
}
.review{
  position:relative; display:flex; flex-direction:column; gap:var(--s4);
  padding:var(--s6); border:1px solid var(--teal-rule); border-radius:var(--radius);
  background:rgba(9,63,68,.4);
}
.review .stars{ color:var(--coral-200); }
.review blockquote{ margin:0; font-family:var(--serif); font-size:1.125rem; line-height:1.6; color:#E4EFEF; }
.review figcaption{ margin-top:auto; display:grid; gap:2px; font-size:.875rem; }
.review figcaption strong{ color:var(--paper); }
.review figcaption span{ color:var(--on-teal-3); }
.review--lead{ padding:var(--s7) var(--s6); background:var(--teal-900); border-color:var(--teal-900); overflow:hidden; }
.review--lead::before{
  content:'\201C'; display:block; height:2.6rem; margin-bottom:-.25rem;
  font-family:var(--serif); font-size:6rem; line-height:.85; color:var(--coral-200);
}
.review--lead blockquote{
  font-size:clamp(1.375rem,2.5vw,2rem); font-weight:300; line-height:1.35;
  letter-spacing:-.012em; color:var(--paper);
}
.reviews__foot{
  display:flex; flex-wrap:wrap; gap:var(--s4) var(--s6); align-items:center; justify-content:space-between;
  margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--teal-rule);
}
.tags{ display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }
.tags__label{ width:100%; font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--on-teal-3); }
@media (min-width:760px){ .tags__label{ width:auto; margin-right:var(--s2); } }
.tag{
  font-size:.875rem; font-weight:700; color:var(--teal-700);
  background:var(--teal-50); padding:.375rem .875rem; border-radius:var(--radius-btn);
}
.section--teal .tag{ background:rgba(255,255,255,.08); color:var(--paper); }

/* =========================================================
   SERVIÇOS — índice editorial
   ========================================================= */
.svc{ margin-top:var(--s8); border-top:1px solid var(--line); }
.svc__row{
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:2.25rem minmax(0,1fr) auto; column-gap:var(--s3); row-gap:var(--s2);
  align-items:baseline; padding:var(--s5) 0; border-bottom:1px solid var(--line);
  color:inherit;
}
.svc__n{ grid-row:1; font-family:var(--serif); font-size:.9375rem; color:var(--coral-600); transition:color .35s; }
.svc__name{
  grid-row:1; font-family:var(--serif); font-size:clamp(1.5rem,4.4vw,2.5rem);
  line-height:1.08; letter-spacing:-.02em; color:var(--teal-700); transition:color .35s;
}
.svc__desc{ grid-column:2 / -1; font-size:.9375rem; color:var(--body); max-width:34rem; transition:color .35s; }
.svc__go{
  grid-row:1; grid-column:3; align-self:center;
  width:44px; height:44px; border-radius:50%; border:1px solid #CFC0B7;
  display:grid; place-items:center; color:var(--teal-700);
  transition:background-color .35s, border-color .35s, color .35s, transform .5s var(--ease-out);
}
@media (min-width:900px){
  .svc__row{
    grid-template-columns:3.5rem minmax(0,1.1fr) minmax(0,1fr) 3rem; column-gap:var(--s6);
    align-items:center; padding:var(--s6) var(--s5);
  }
  .svc__desc{ grid-column:3; grid-row:1; }
  .svc__go{ grid-column:4; }
}
/* faixa que varre da esquerda pra direita no hover, como uma passada de rodo */
a.svc__row::before{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--teal-700);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-out);
}
a.svc__row:hover{ text-decoration:none; color:inherit; }
@media (hover:hover){
  a.svc__row:hover::before{ transform:scaleX(1); }
  a.svc__row:hover .svc__name{ color:var(--paper); }
  a.svc__row:hover .svc__n{ color:var(--coral-200); }
  a.svc__row:hover .svc__desc{ color:var(--on-teal); }
  a.svc__row:hover .svc__go{ background:var(--coral-200); border-color:var(--coral-200); color:var(--teal-900); transform:rotate(-45deg); }
}
.svc__dont{
  display:flex; gap:var(--s4); align-items:flex-start; margin-top:var(--s7);
  padding:var(--s5); border:1px dashed #D8C6BC; border-radius:var(--radius); color:var(--faint);
}
.svc__dont svg{ flex-shrink:0; margin-top:4px; }
.svc__dont .body{ font-size:.9375rem; }
.svc__dont strong{ color:var(--ink-2); }

/* =========================================================
   COMO FUNCIONA — linha do tempo
   ========================================================= */
.steps{ position:relative; display:grid; gap:var(--s8); margin-top:var(--s8); }
.steps::before{
  content:''; position:absolute; left:9px; top:10px; bottom:10px; width:1px;
  background:var(--coral-400); transform-origin:top;
}
.steps li{ position:relative; display:grid; gap:var(--s3); align-content:start; padding-left:var(--s8); }
.steps__dot{
  position:absolute; left:0; top:4px; width:19px; height:19px; border-radius:50%;
  background:var(--paper-2); border:1.5px solid var(--coral-600);
}
.steps__dot::after{ content:''; position:absolute; inset:4px; border-radius:50%; background:var(--coral-600); }
.steps__n{
  font-family:var(--serif); font-weight:300; font-size:clamp(3rem,7vw,4.5rem);
  line-height:.9; letter-spacing:-.04em; color:var(--teal-700);
}
@media (min-width:760px){
  .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s6); }
  .steps::before{ left:0; right:0; top:9px; bottom:auto; width:auto; height:1px; transform-origin:left; }
  .steps li{ padding-left:0; padding-top:var(--s8); }
  .steps__dot{ top:0; }
}

/* =========================================================
   O QUE ESTÁ INCLUÍDO — um cômodo por "casinha"
   ========================================================= */
.included__head{ display:grid; gap:var(--s6); }
@media (min-width:900px){ .included__head{ grid-template-columns:1fr 1fr; gap:var(--s9); align-items:end; } }
.included__products{
  font-size:.9375rem; line-height:1.65; color:var(--on-teal);
  border:1px solid var(--teal-rule); border-radius:var(--radius); padding:var(--s4) var(--s5);
}
.rooms{ display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); margin-top:var(--s8); }
.room{
  position:relative; padding:calc(3.25rem + var(--s5)) var(--s5) var(--s6);
  background:var(--teal-800);
  clip-path:polygon(0 3.25rem, 50% 0, 100% 3.25rem, 100% 100%, 0 100%);
}
.room::before{
  content:''; position:absolute; left:50%; top:1.4rem; width:14px; height:14px; margin-left:-7px;
  background:var(--coral-200);
  -webkit-mask:var(--spark) center/contain no-repeat; mask:var(--spark) center/contain no-repeat;
}
.room h3{
  font-family:var(--sans); font-size:.75rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--coral-200); margin-bottom:var(--s3); text-align:center;
}
.room li{ font-size:.9375rem; color:#D6E7E7; padding-block:.45rem; border-top:1px solid rgba(169,203,204,.14); }
.room li:first-child{ border-top:0; }

.deep{ display:grid; gap:var(--s7); margin-top:var(--s9); padding-top:var(--s8); border-top:1px solid var(--teal-rule); }
@media (min-width:900px){ .deep{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--s9); } }
.deep__title{ font-size:clamp(1.75rem,3.4vw,2.375rem); }
.addons{ align-self:start; background:var(--teal-800); border-radius:var(--radius); padding:var(--s6); }
.addons h4{ font-family:var(--serif); font-size:1.375rem; margin-bottom:var(--s3); color:var(--paper); }
.addons li{
  display:flex; gap:var(--s3); align-items:center; padding-block:.6rem;
  border-top:1px solid rgba(169,203,204,.14); color:#D6E7E7; font-size:.9375rem;
}
.addons li::before{
  content:''; width:15px; height:15px; flex-shrink:0; background:var(--coral-200);
  -webkit-mask:var(--check) center/contain no-repeat; mask:var(--check) center/contain no-repeat;
}
.addons .small{ color:var(--on-teal-3); margin-top:var(--s4); }

/* =========================================================
   PREÇO
   ========================================================= */
.pricing__grid{ display:grid; gap:var(--s8); align-items:center; }
@media (min-width:900px){ .pricing__grid{ grid-template-columns:1fr 1fr; gap:var(--s9); } }
.price{ display:flex; align-items:flex-start; line-height:.8; padding-block:var(--s3); }
.price__cur{ font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); color:var(--coral-600); padding-top:.3em; margin-right:.08em; }
.price__num{
  font-family:var(--serif); font-weight:300; font-size:clamp(6rem,17vw,10rem);
  letter-spacing:-.05em; color:var(--teal-700); font-variant-numeric:tabular-nums; min-width:3ch;
}
.price__label{
  align-self:flex-end; margin-left:var(--s4); padding-bottom:.7em;
  font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; line-height:1.5; color:var(--muted);
}
.price-rows li{ display:flex; gap:var(--s4); padding-block:var(--s5); border-top:1px solid var(--line); }
.price-rows li:last-child{ border-bottom:1px solid var(--line); }
.price-rows svg{ color:var(--coral-600); flex-shrink:0; margin-top:3px; }

/* =========================================================
   ÁREAS — lista tipográfica
   ========================================================= */
.areas__list{
  display:flex; flex-wrap:wrap; align-items:center; row-gap:.1em; margin-top:var(--s6);
  font-family:var(--serif); font-size:clamp(1.625rem,4.6vw,3rem); line-height:1.25;
  letter-spacing:-.02em; color:var(--teal-700);
}
.areas__list li{ display:inline-flex; align-items:center; }
.areas__list li:first-child{ font-style:italic; color:var(--coral-600); }
.areas__list li:not(:last-child)::after{
  content:''; width:.34em; height:.34em; margin-inline:.42em; background:var(--coral-400);
  -webkit-mask:var(--spark) center/contain no-repeat; mask:var(--spark) center/contain no-repeat;
}

/* =========================================================
   FAQ (details/summary, sem JS)
   ========================================================= */
.faq-layout{ display:grid; gap:var(--s7); }
@media (min-width:900px){
  .faq-layout{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--s9); align-items:start; }
  .faq-layout__head{ position:sticky; top:110px; }
}
.faq details{ border-bottom:1px solid var(--line); }
.faq details:first-child{ border-top:1px solid var(--line); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding-block:var(--s5); cursor:pointer; list-style:none;
  font-weight:700; font-size:1.0625rem; color:var(--ink-2); transition:color .2s;
}
.faq summary:hover{ color:var(--teal-700); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; flex-shrink:0; width:18px; height:18px;
  background:currentColor; color:var(--coral-600);
  -webkit-mask:var(--plus) center/contain no-repeat; mask:var(--plus) center/contain no-repeat;
  transition:transform .3s var(--ease-out);
}
.faq{ --plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details > .body{ max-width:44rem; }
.faq details > .body:last-child{ padding-bottom:var(--s5); }

/* =========================================================
   GARANTIA — selo
   ========================================================= */
.guarantee__grid{ display:grid; gap:var(--s7); align-items:center; }
@media (min-width:760px){ .guarantee__grid{ grid-template-columns:auto minmax(0,1fr); gap:var(--s9); } }
.guarantee .h2{ font-size:clamp(1.625rem,3.4vw,2.375rem); max-width:36rem; }
.guarantee .body, .guarantee .small{ max-width:42rem; }
.seal{ position:relative; width:184px; height:184px; color:var(--teal-700); }
.seal__ring{ width:100%; height:100%; overflow:visible; }
.seal__ring text{ font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:.2em; fill:currentColor; }
.seal__core{
  position:absolute; inset:26%; border-radius:50%; background:var(--teal-700); color:var(--paper);
  display:grid; place-items:center;
}

/* =========================================================
   CTA FINAL — a casa se desenha ao fundo
   ========================================================= */
.cta-final{ position:relative; overflow:hidden; isolation:isolate; }
.cta-final__inner{ position:relative; z-index:1; display:grid; gap:var(--s5); justify-items:start; }
.cta-final__title{
  font-family:var(--serif); font-weight:300; font-size:clamp(2.5rem,7.5vw,5.5rem);
  line-height:1; letter-spacing:-.035em; color:var(--paper); max-width:13ch;
}
.cta-final .btn-row{ margin-top:var(--s3); }
.cta-mark{
  position:absolute; right:-36px; bottom:-56px; z-index:0;
  width:clamp(220px, 36vw, 460px); height:auto; pointer-events:none;
  color:#4A9399; fill:none; stroke:currentColor; stroke-width:.7;
  stroke-linecap:round; stroke-linejoin:round; opacity:.5;
}

/* =========================================================
   Header, navegação e barra fixa
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:40;
  background:var(--paper); border-bottom:1px solid var(--line-2);
  transition:box-shadow .35s, background-color .35s, border-color .35s;
}
.site-header__bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding-block:var(--s3);
}
.brand{ position:relative; display:flex; align-items:flex-end; gap:.625rem; text-decoration:none; }
.brand:hover{ text-decoration:none; }
.brand__logo{ display:block; height:28px; width:auto; transition:opacity .35s; }
.brand__logo--light{ position:absolute; left:0; top:0; opacity:0; }
.brand__tag{
  font-size:.5625rem; letter-spacing:.22em; text-transform:uppercase; line-height:1;
  font-weight:700; color:var(--coral-600); padding-bottom:3px; transition:color .35s;
}
@media (max-width:399px){ .brand__tag{ display:none; } }
@media (min-width:900px){ .brand__logo{ height:32px; } }

.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; background:none; border:0; color:var(--teal-700); cursor:pointer;
}
.header-actions{ display:flex; align-items:center; gap:var(--s3); }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border:1px solid #CFC0B7; border-radius:var(--radius-btn);
  color:var(--teal-700); transition:color .35s, border-color .35s;
}
.icon-btn:hover{ text-decoration:none; border-color:var(--teal-700); }

.site-nav ul{ display:flex; gap:var(--s5); align-items:center; }
.site-nav a{ color:#3D4746; font-size:.9375rem; font-weight:500; white-space:nowrap; transition:color .25s; }
.site-nav a:hover{ color:var(--teal-700); }
.site-nav a[aria-current="page"]{ color:var(--teal-700); font-weight:700; border-bottom:2px solid var(--coral-600); padding-bottom:2px; }
.site-header .btn{ white-space:nowrap; padding-inline:var(--s5); }

.header-desk{ display:none; }
@media (min-width:900px){
  .header-desk{ display:flex; align-items:center; gap:var(--s5); }
  .nav-toggle{ display:none; }
  .header-actions .icon-btn{ display:none; }
}
/* entre tablet e desktop largo não cabe tudo numa linha: sai o botão de texto e a tag */
@media (min-width:900px) and (max-width:1179px){
  .header-desk .btn--ghost, .brand__tag{ display:none; }
}

.site-header.is-scrolled{
  background:rgba(251,247,244,.92);
  -webkit-backdrop-filter:saturate(1.3) blur(10px); backdrop-filter:saturate(1.3) blur(10px);
  box-shadow:0 12px 32px -24px rgba(9,63,68,.5);
}
/* sobre o hero escuro da home (classe posta pelo JS enquanto o hero está atrás do header) */
.site-header.is-over{
  background:var(--teal-900); border-bottom-color:rgba(169,203,204,.12); box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.is-over .brand__logo--dark{ opacity:0; }
.is-over .brand__logo--light{ opacity:1; }
.is-over .brand__tag{ color:var(--coral-200); }
.is-over .site-nav a{ color:#CFE2E2; }
.is-over .site-nav a:hover{ color:var(--paper); }
.is-over .btn--ghost{ color:var(--paper); border-color:#2E7176; }
.is-over .btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:var(--on-teal-2); color:var(--paper); }
.is-over .btn--primary{ background:var(--coral-200); color:var(--teal-900); }
.is-over .btn--primary:hover{ background:var(--coral-400); color:var(--white); }
.is-over .icon-btn{ color:var(--paper); border-color:#2E7176; }
.is-over .nav-toggle{ color:var(--paper); }

/* menu mobile */
.mobile-nav{
  display:none; border-top:1px solid var(--line-2); background:var(--paper);
  padding-block:var(--s3) var(--s5);
}
.mobile-nav[data-open="true"]{ display:block; }
@media (min-width:900px){ .mobile-nav{ display:none!important; } }
.mobile-nav li + li{ border-top:1px solid var(--line-2); }
.mobile-nav a{
  display:block; padding-block:var(--s4); font-size:1.0625rem;
  font-weight:600; color:var(--ink-2);
}
.mobile-nav a:hover{ color:var(--teal-700); text-decoration:none; }

/* barra fixa do celular */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; gap:var(--s3);
  padding:var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));
  background:var(--paper); border-top:1px solid var(--line);
  box-shadow:0 -6px 20px rgba(14,90,95,.07);
}
.dock .btn{ flex:1; min-height:50px; padding-inline:var(--s3); font-size:.9375rem; }
@media (min-width:900px){ .dock{ display:none; } }
/* só aparece depois que os botões do hero saem da tela */
html.js .dock{ transform:translateY(calc(100% + 12px)); transition:transform .5s var(--ease-out); }
html.js .dock.is-on{ transform:none; }

/* =========================================================
   Rodapé
   ========================================================= */
.site-footer{ background:var(--teal-950); color:var(--on-teal-2); padding-block:var(--s9) var(--s6); }
.site-footer h2{ font-family:var(--serif); font-size:1.375rem; color:var(--paper); margin:0 0 var(--s4); }
.footer-logo{ display:block; width:168px; height:auto; }
.site-footer h3{
  font-family:var(--sans); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--coral-200); margin:0 0 var(--s3);
}
.site-footer a{ color:var(--on-teal-2); }
.site-footer a:hover{ color:var(--paper); }
.site-footer li{ padding-block:.22rem; font-size:.9375rem; }
.footer-grid{ display:grid; gap:var(--s6); }
@media (min-width:760px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; } }
.footer-bottom{
  margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid #154E53;
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); justify-content:space-between;
  font-size:.8125rem; color:#5D8E90;
}
.footer-links{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); }

/* =========================================================
   Página de orçamento
   ========================================================= */
.quote-layout{ display:grid; gap:var(--s8); align-items:start; }
@media (min-width:900px){ .quote-layout{ grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:var(--s9); } }
.quote-aside{ position:relative; }
@media (min-width:900px){ .quote-aside{ position:sticky; top:96px; } }

.form{ display:grid; gap:var(--s5); }
.form fieldset{ border:0; padding:0; margin:0; min-width:0; }
.field{ display:grid; gap:var(--s2); }
.field > label, .form legend{ font-weight:700; font-size:.9375rem; color:var(--ink-2); padding:0; }
.opt-label{ font-weight:400; color:var(--muted); font-size:.8125rem; }
.row-2{ display:grid; gap:var(--s5) var(--s4); }
@media (min-width:560px){ .row-2{ grid-template-columns:1fr 1fr; } }

.input{
  width:100%; min-height:50px; padding:.75rem .875rem;
  font:inherit; color:var(--ink); background:var(--white);
  border:1px solid #CFC0B7; border-radius:var(--radius-btn);
  transition:border-color .15s, box-shadow .15s;
}
.input:focus{ outline:none; border-color:var(--teal-700); box-shadow:0 0 0 3px rgba(14,90,95,.16); }
.input[aria-invalid="true"]{ border-color:var(--coral-600); }
select.input{
  appearance:none; -webkit-appearance:none; padding-right:2.5rem; cursor:pointer;
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E5A5F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .875rem center/18px no-repeat;
}
textarea.input{ min-height:120px; resize:vertical; line-height:1.55; }
.field-err{ color:var(--coral-700); font-size:.8125rem; font-weight:700; }
.field-err:empty{ display:none; }

/* opções em "chips" — radio de verdade por baixo */
.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s2); }
.chip{ position:relative; }
.chip input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.chip span{
  display:inline-flex; align-items:center; min-height:44px; padding:.5rem 1rem;
  border:1px solid #CFC0B7; border-radius:var(--radius-btn); background:var(--white);
  font-weight:700; font-size:.9375rem; color:var(--ink-2); transition:background-color .15s, border-color .15s, color .15s;
}
.chip:hover span{ border-color:var(--teal-700); }
.chip input:checked + span{ background:var(--teal-700); border-color:var(--teal-700); color:var(--paper); }
.chip input:focus-visible + span{ outline:3px solid var(--coral-400); outline-offset:2px; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note{ font-size:.8125rem; color:var(--muted); }
.form-msg{ font-size:.9375rem; padding:var(--s3) var(--s4); border-left:3px solid var(--coral-600); background:var(--coral-100); color:var(--ink-2); }
.form-msg:empty{ display:none; }
.btn[aria-busy="true"]{ opacity:.7; cursor:progress; }

.done{ border:1px solid var(--line); background:var(--white); border-radius:var(--radius); padding:var(--s6); }
.done svg{ color:var(--teal-700); }

.step__n{ font-family:var(--serif); font-size:2.5rem; line-height:1; color:var(--coral-200); }
.next-steps{ display:grid; gap:var(--s5); margin-top:var(--s5); }
.next-steps li{ display:grid; grid-template-columns:2.75rem 1fr; gap:var(--s3); align-items:start; }
.next-steps .step__n{ font-size:1.75rem; }
.next-steps h3{ font-family:var(--sans); font-weight:700; font-size:1rem; letter-spacing:0; line-height:1.35; color:var(--paper); }
.next-steps p{ color:var(--on-teal); font-size:.9375rem; line-height:1.55; margin-top:.25rem; }
.quote-trust{ display:grid; gap:var(--s2); padding-top:var(--s2); }
.quote-trust li{
  display:flex; align-items:center; gap:var(--s3);
  font-size:.875rem; font-weight:700; color:var(--ink-2);
}
.quote-trust li::before{
  content:''; width:16px; height:16px; flex-shrink:0; background:var(--coral-600);
  -webkit-mask:var(--check) center/contain no-repeat; mask:var(--check) center/contain no-repeat;
}

/* =========================================================
   PÁGINAS INTERNAS
   Mesmo hero escuro da home, mais baixo. Com foto, a foto vai
   na casa do logo; sem foto (hero--solo), a casa se desenha
   no canto. O resto reaproveita os blocos da home.
   ========================================================= */
.hero--page .hero__grid{ gap:var(--s8); padding-block:var(--s6) var(--s9); }
@media (min-width:900px){
  .hero--page .hero__grid{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); padding-block:var(--s9) var(--s10); }
}
.hero--dark.hero--page .h1{ font-size:clamp(2.4rem, 9vw, 3rem); }
@media (min-width:900px){ .hero--dark.hero--page .h1{ font-size:clamp(3rem, 4.6vw, 4.25rem); } }
.hero--page .hero-visual{ max-width:24rem; }

.hero--solo .hero__grid{ grid-template-columns:minmax(0,1fr); }
.hero--solo .hero__copy{ position:relative; z-index:1; max-width:46rem; }
.page-mark{
  position:absolute; right:-28px; bottom:-44px; z-index:0;
  width:clamp(150px, 30vw, 380px); height:auto; pointer-events:none;
  color:#4A9399; fill:none; stroke:currentColor; stroke-width:.7;
  stroke-linecap:round; stroke-linejoin:round; opacity:.45;
}

/* colunas com fio no topo — o mesmo desenho dos números e da lista de preços */
.cols{ display:grid; gap:var(--s7) var(--s6); margin-top:var(--s8); }
@media (min-width:760px){ .cols{ grid-template-columns:repeat(3,minmax(0,1fr)); } .cols--2, .cols--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .cols--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.cols > li{ display:grid; gap:var(--s3); align-content:start; padding-top:var(--s5); border-top:1px solid var(--line); }
.cols__n{ font-family:var(--serif); font-size:.9375rem; color:var(--coral-600); }
.cols h3{ font-size:clamp(1.375rem,2.4vw,1.75rem); color:var(--teal-700); }
.cols p{ color:var(--body); font-size:.9375rem; }
.section--deep .cols > li, .section--teal .cols > li{ border-top-color:var(--teal-rule); }
.section--deep .cols p, .section--teal .cols p{ color:var(--on-teal); }
.section--deep .cols__n, .section--teal .cols__n{ color:var(--coral-200); }

/* lista com check */
.ticks{ border-bottom:1px solid var(--line); }
.ticks li{ display:flex; gap:var(--s3); align-items:flex-start; padding-block:.7rem; border-top:1px solid var(--line); color:var(--body); }
.ticks li::before{
  content:''; width:16px; height:16px; flex-shrink:0; margin-top:.3em; background:var(--coral-600);
  -webkit-mask:var(--check) center/contain no-repeat; mask:var(--check) center/contain no-repeat;
}
.ticks strong{ color:var(--ink-2); }
.cols .ticks{ margin-top:var(--s2); }
.cols .ticks li{ font-size:.9375rem; }

/* texto de um lado, foto ou lista do outro */
.split{ display:grid; gap:var(--s7); align-items:center; }
@media (min-width:900px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s9); }
  .split--top{ align-items:start; }
}
.split__media{ width:min(100%, 28rem); justify-self:center; }
@media (min-width:900px){ .split__media{ justify-self:end; } }

/* antes e depois fora do visualizador da home */
.ba-pair{ display:grid; gap:var(--s6); margin-top:var(--s8); }
@media (min-width:760px){ .ba-pair{ grid-template-columns:1fr 1fr; gap:var(--s5); } }
.ba-fig figcaption{ margin-top:var(--s3); font-size:.875rem; color:var(--muted); }
.ba-fig figcaption strong{ color:var(--ink-2); }

/* avaliação em destaque, em fundo claro */
.quote-pull{ border-left:2px solid var(--coral-400); padding-left:var(--s5); }
.quote-pull blockquote{
  margin:0; font-family:var(--serif); font-weight:300; font-size:clamp(1.375rem,2.6vw,1.875rem);
  line-height:1.35; letter-spacing:-.012em; color:var(--teal-700);
}
.quote-pull figcaption{ margin-top:var(--s3); font-size:.875rem; color:var(--muted); }
.quote-pull figcaption strong{ color:var(--ink-2); }

/* lista de serviços compacta (sem número) */
.svc--compact .svc__row{ grid-template-columns:minmax(0,1fr) auto; }
.svc--compact .svc__name{ font-size:clamp(1.375rem,3.4vw,2rem); }
.svc--compact .svc__desc{ grid-column:1 / -1; }
.svc--compact .svc__go{ grid-column:2; }
@media (min-width:900px){
  .svc--compact .svc__row{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 3rem; }
  .svc--compact .svc__desc{ grid-column:2; }
  .svc--compact .svc__go{ grid-column:3; }
}
.svc li:has(> [aria-current="page"]){ display:none; }
.more .svc{ margin-top:var(--s6); }
/* duas seções claras seguidas ganham um fio entre elas */
.section:not(.section--paper, .section--teal, .section--deep) + .more{ border-top:1px solid var(--line-2); }

/* FAQ em grupos */
.faq-group{
  font-family:var(--sans); font-size:.75rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--coral-600); margin:var(--s9) 0 var(--s2);
}
.faq-group:first-child{ margin-top:0; }
.jump{ display:grid; gap:var(--s2); margin-top:var(--s5); }
.jump a{ font-weight:700; }

/* áreas atendidas, por região */
.area-groups{ display:grid; gap:var(--s8) var(--s6); margin-top:var(--s8); }
@media (min-width:760px){ .area-groups{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.area-group h3{
  font-family:var(--sans); font-size:.75rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--coral-600); margin-bottom:var(--s3);
}
.area-group li{
  font-family:var(--serif); font-size:clamp(1.625rem,3.2vw,2.25rem); line-height:1.2;
  letter-spacing:-.02em; color:var(--teal-700); padding-block:var(--s3); border-top:1px solid var(--line);
}
.area-group .small{ margin-top:var(--s3); }

/* formas de contato */
.ways{ border-top:1px solid var(--line); }
.ways li{ display:grid; gap:var(--s2); padding-block:var(--s6); border-bottom:1px solid var(--line); }
@media (min-width:760px){ .ways li{ grid-template-columns:11rem minmax(0,1fr); column-gap:var(--s6); align-items:baseline; } }
.ways__label{ font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--coral-600); }
.ways__value{
  font-family:var(--serif); font-size:clamp(1.625rem,4vw,2.5rem); line-height:1.1;
  letter-spacing:-.02em; color:var(--teal-700); overflow-wrap:anywhere;
}
.ways__value a{ color:inherit; }
.ways__value a:hover{ color:var(--coral-600); text-decoration:none; }
@media (min-width:760px){ .ways .small{ grid-column:2; } }

/* texto corrido (política de privacidade) */
.prose{ max-width:44rem; }
.prose h2{ font-size:clamp(1.5rem,3vw,1.875rem); color:var(--teal-700); margin:var(--s8) 0 var(--s3); }
.prose h2:first-child{ margin-top:0; }
.prose p, .prose li{ color:var(--body); }
.prose p + p, .prose p + ul, .prose ul + p{ margin-top:var(--s3); }
.prose ul{ list-style:disc; padding-left:1.25rem; }
.prose li + li{ margin-top:var(--s2); }
.prose li::marker{ color:var(--coral-600); }
.prose strong{ color:var(--ink-2); }

@media (prefers-reduced-motion:no-preference){
  html.js .page-mark path{ stroke-dasharray:1; stroke-dashoffset:1; animation:draw 2.4s .4s var(--ease-in-out) forwards; }
  html.js .page-mark use{ transform-box:fill-box; transform-origin:center; animation:spark-in .9s 1.9s var(--ease-out) both; }
  html.js .page-mark use:last-child{ animation-delay:2.15s; }
}

/* =========================================================
   Movimento
   A ideia é uma passada de rodo: as coisas entram "limpando"
   da esquerda pra direita, e o brilho de 4 pontas do logo
   aparece onde algo ficou limpo. Toda entrada animada depende
   de html.js (posto no <head>) e de não haver movimento reduzido.
   ========================================================= */
@keyframes rise{ to{ transform:none; } }
@keyframes fade-up{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pop{ from{ opacity:0; transform:scale(.3); } to{ opacity:1; transform:none; } }
@keyframes wipe-off{ to{ transform:scaleX(0); } }
@keyframes squeegee{ 0%{ transform:translateX(-100%); opacity:1; } 92%{ opacity:1; } 100%{ transform:translateX(0); opacity:0; } }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes spark-in{ from{ opacity:0; transform:scale(0) rotate(-60deg); } to{ opacity:1; transform:none; } }
@keyframes twinkle{ 0%, 100%{ transform:none; opacity:1; } 50%{ transform:scale(.7) rotate(25deg); opacity:.5; } }
@keyframes sparkle{
  0%{ opacity:0; transform:scale(0) rotate(-40deg); }
  45%{ opacity:1; transform:scale(1) rotate(0); }
  100%{ opacity:0; transform:scale(.5) rotate(30deg); }
}
@keyframes marquee{ to{ transform:translateX(-50%); } }
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:no-preference){
  /* --- hero, na carga da página --- */
  html.js .hero .h1:not(.is-split){ visibility:hidden; }
  .hero .h1 .w{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .08em .14em 0; margin:0 -.08em -.14em 0; }
  .hero .h1 .w__in{
    display:inline-block; transform:translateY(112%);
    animation:rise 1s var(--ease-out) forwards; animation-delay:calc(.1s + var(--i, 0) * 45ms);
  }
  html.js .hero .eyebrow, html.js .hero .lede, html.js .hero .btn-row, html.js .hero .rating-line{
    animation:fade-up .9s var(--ease-out) both;
  }
  html.js .hero .lede{ animation-delay:.5s; }
  html.js .hero .btn-row{ animation-delay:.62s; }
  html.js .hero .rating-line{ animation-delay:.74s; }
  html.js .hero .rating-line .stars svg{ animation:pop .5s var(--ease-out) both; }
  html.js .hero .rating-line .stars svg:nth-child(1){ animation-delay:.95s; }
  html.js .hero .rating-line .stars svg:nth-child(2){ animation-delay:1.02s; }
  html.js .hero .rating-line .stars svg:nth-child(3){ animation-delay:1.09s; }
  html.js .hero .rating-line .stars svg:nth-child(4){ animation-delay:1.16s; }
  html.js .hero .rating-line .stars svg:nth-child(5){ animation-delay:1.23s; }

  /* a passada de rodo: cobertura recolhe pra direita, com o filete de brilho na ponta */
  html.js .hero-media::after{
    content:''; position:absolute; inset:0; z-index:3; background:var(--teal-800);
    transform-origin:100% 50%; animation:wipe-off 1.2s .3s var(--ease-in-out) both;
  }
  html.js .hero-media::before{
    content:''; position:absolute; inset:0; z-index:4;
    background:linear-gradient(90deg, transparent calc(100% - 3px), rgba(255,255,255,.95) calc(100% - 3px));
    animation:squeegee 1.2s .3s var(--ease-in-out) both;
  }
  html.js .hero-outline path{ stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.7s .9s var(--ease-in-out) forwards; }
  html.js .hero .spark{ animation:spark-in .8s var(--ease-out) both, twinkle 4.4s ease-in-out infinite; }
  html.js .hero .spark--lg{ animation-delay:1.45s, 2.4s; }
  html.js .hero .spark--sm{ animation-delay:1.6s, 3.3s; }
  html.js .hero .float-review{ animation:fade-up 1s 1.35s var(--ease-out) both; }
  html.js .hero .marquee{ animation:fade-in 1.2s 1.1s ease both; }
  .marquee__track{ animation:marquee 55s linear infinite; }
  .marquee:hover .marquee__track{ animation-play-state:paused; }

  /* --- entradas ao rolar --- */
  html.js [data-reveal="up"]:not(.is-in), html.js [data-reveal="stagger"]:not(.is-in) > *{ opacity:0; }
  html.js [data-reveal="up"].is-in, html.js [data-reveal="stagger"].is-in > *{
    animation:fade-up .9s var(--ease-out) backwards; animation-delay:calc(var(--i, 0) * 80ms);
  }
  html.js [data-reveal="wipe"]::after{
    content:''; position:absolute; inset:0; z-index:2; background:var(--paper-2);
    transform-origin:100% 50%; transition:transform 1.2s var(--ease-in-out);
  }
  html.js [data-reveal="wipe"].is-in::after{ transform:scaleX(0); }
  html.js [data-reveal="draw"] path{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 2.4s .1s var(--ease-in-out); }
  html.js [data-reveal="draw"].is-in path{ stroke-dashoffset:0; }
  html.js [data-reveal="draw"] use{ opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.4) rotate(-45deg); transition:opacity .8s 1.6s, transform 1s 1.6s var(--ease-out); }
  html.js [data-reveal="draw"] use:last-child{ transition-delay:1.85s; }
  html.js [data-reveal="draw"].is-in use{ opacity:1; transform:none; }

  /* linha do tempo se desenha antes dos passos */
  html.js .steps::before{ transform:scale(0); transition:transform 1.4s .1s var(--ease-in-out); }
  html.js .steps.is-in::before{ transform:none; }

  /* troca de trabalho no visualizador: a passada de rodo de novo */
  .viewer__panel.is-entering .ba::after{
    content:''; position:absolute; inset:0; z-index:5; background:var(--paper);
    transform-origin:100% 50%; animation:wipe-off .85s var(--ease-in-out) both;
  }

  /* selo da garantia gira devagar */
  .seal__ring{ animation:spin 40s linear infinite; }

  /* FAQ abre deslizando onde o navegador suporta (Chrome 131+); nos outros, abre seco */
  :root{ interpolate-size:allow-keywords; }
  .faq details::details-content{
    block-size:0; overflow:hidden;
    transition:block-size .4s var(--ease-out), content-visibility .4s allow-discrete;
  }
  .faq details[open]::details-content{ block-size:auto; }
}