/* ============================================================================
   MEDICAL FILMES — landing
   Sistema: DNA.md §3 (visual) · CONCEITO.md (medidas) · .brand.json (paleta)
   Duas famílias: Anton (display, caixa alta, tracking 0) + Poppins (texto)
   Sem gradiente decorativo, sem vidro fosco, sem preto/branco puro.
   ========================================================================== */

/* ---------- fontes ---------- */
@font-face{font-family:"Anton";src:url("../fonts/Anton-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --ciano:#00C1CC;
  --ciano-claro:#33CDD6;
  --ciano-escuro:#00878F;
  --carvao:#3A4143;
  --carvao-60:rgba(58,65,67,.6);
  --carvao-12:rgba(58,65,67,.12);
  --magenta:#FF007A;
  --magenta-15:rgba(255,0,122,.15);
  --claro:#EEEEEE;
  --base:#F5F8F9;
  --campo:#E3EDEF;
  --apoio:#6E7477;
  --escuro:#1E2223;

  /* cores de sistema para interface (DNA §3.1) — o magenta nunca é erro */
  --sucesso:#16A34A;
  --atencao:#EAB308;
  --erro:#DC2626;
  --erro-10:rgba(220,38,38,.1);
  --info:#2563EB;

  --display:"Anton","Haettenschweiler","Arial Narrow",sans-serif;
  --texto:"Poppins",-apple-system,"Segoe UI",Roboto,sans-serif;

  /* margem = 10% da largura (CONCEITO.md), com piso e teto de leitura */
  --margem:clamp(22px,7.6vw,140px);
  --max:1560px;

  /* escala de raio — a mesma linguagem da pílula do botão, em três degraus */
  --r-s:10px;                    /* campo de formulário, chip */
  --r-m:clamp(12px,1.1vw,18px);  /* cartão, superfície */
  --r-l:clamp(14px,1.4vw,24px);  /* mídia: vídeo, foto */
  --r-pill:999px;                /* botão, rótulo, tag */

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur:.9s;

  --nav-h:clamp(68px,7vw,96px);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x no HTML, não no body. No body ele torna o body um scrollport, e
   toda `animation-timeline: view()` de dentro passa a medir contra um container
   que não rola — o progresso trava num valor fixo. No html o recorte propaga
   para a viewport e o rolador do documento continua sendo o dono das linhas
   do tempo. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;background:var(--base);color:var(--carvao);
  font-family:var(--texto);font-weight:400;font-size:clamp(15px,.4vw + 14px,17px);
  line-height:1.6;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%}
/* neutraliza o atributo height do HTML: sem isso ele vence o aspect-ratio e a caixa
   sai com a altura do arquivo. Quem precisa de altura fixa define por classe. */
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--ciano);color:var(--carvao)}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;border-radius:2px}

/* ---------- tipografia ---------- */
.display{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:0;margin:0;
  /* Anton nunca esticado: sem transform de escala não-uniforme */
}
/* Entrelinha medida no arquivo do Anton, não estimada: acento de caixa alta sobe a
   1,101 em acima da linha de base. Abaixo disso ele entra nas letras da linha de cima.
   1,12 dá a folga mínima; a escala do DNA §3.2 (0,95 a 1,1) não alcança. */
.d-xl{font-size:clamp(42px,7.6vw,118px);line-height:1.12}
.d-l {font-size:clamp(36px,6.2vw,96px);line-height:1.12}
.d-m {font-size:clamp(28px,4.2vw,66px);line-height:1.12}
.d-s {font-size:clamp(22px,2.6vw,44px);line-height:1.14}

.rotulo{
  font-family:var(--texto);font-weight:600;text-transform:uppercase;
  font-size:clamp(10px,.9vw,13px);letter-spacing:.14em;line-height:1.4;
}
.lead{font-size:clamp(17px,1.35vw,22px);line-height:1.62;font-weight:300;max-width:52ch}
.small{font-size:clamp(13px,.9vw,15px);line-height:1.6;color:var(--apoio)}

/* pílula magenta — rótulo de seção padrão da marca (DNA §3.3) */
.pill{
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--magenta);color:var(--claro);
  padding:.5em 1.1em;border-radius:var(--r-pill);
}
.pill--ghost{background:transparent;color:var(--claro);border:1px solid rgba(238,238,238,.34)}
.pill--carvao{background:var(--carvao);color:var(--claro)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--margem)}
.section{position:relative;padding-block:clamp(72px,9.5vw,168px)}
.section--campo{background:var(--campo)}
.section--escuro{background:var(--escuro);color:var(--claro)}
.section--escuro .small{color:rgba(238,238,238,.62)}

.sec-head{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,26px);margin-bottom:clamp(38px,4.6vw,78px)}
.sec-head__top{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.sec-head__num{font-family:var(--display);font-size:clamp(12px,1vw,15px);color:var(--apoio);letter-spacing:.08em}

/* fio: a linha de repouso da marca */
.fio{height:1px;background:var(--carvao-12);border:0;margin:0}
.section--escuro .fio{background:rgba(238,238,238,.16)}

/* ============================================================================
   REVEALS
   ========================================================================== */
.r-mask{display:block;overflow:hidden;padding-top:.18em;margin-top:-.18em}
/* folga embaixo SÓ na máscara que carrega o grifo. Se ela valesse para todas,
   as duas margens negativas de cada emenda colapsariam numa só e sobraria
   .18em de respiro entre as linhas. */
.r-mask--grifo{padding-bottom:.18em;margin-bottom:-.18em}
.r-mask > span{display:block;transform:translateY(130%);transition:transform 1.05s var(--ease)}
/* 130% e não 120%: com a folga que a máscara ganhou embaixo para o grifo caber,
   120% deixava o texto a meio pixel de espiar antes de entrar */
.is-in .r-mask > span{transform:translateY(0)}
.r-mask:nth-child(2) > span{transition-delay:.07s}
.r-mask:nth-child(3) > span{transition-delay:.14s}
.r-mask:nth-child(4) > span{transition-delay:.21s}

.r-up{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.is-in .r-up,.r-up.is-in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.08s}
[data-d="2"]{transition-delay:.16s}
[data-d="3"]{transition-delay:.24s}
[data-d="4"]{transition-delay:.32s}
[data-d="5"]{transition-delay:.40s}
[data-d="6"]{transition-delay:.48s}

.r-clip{clip-path:inset(0 0 100% 0 round var(--rc,0));transition:clip-path 1.15s var(--ease)}
.is-in .r-clip,.r-clip.is-in{clip-path:inset(0 0 0 0 round var(--rc,0))}


/* ----------------------------------------------------------------------------
   REVEAL PRESO À ROLAGEM
   Acima, cada elemento é disparado uma vez pelo observer e roda em tempo fixo:
   quem chega na tela já rolado vê o texto simplesmente aparecer, estático.
   Aqui o gatilho vira a própria rolagem — cada elemento tem sua linha do tempo
   (`view()`), e o texto se encaixa no lugar na medida em que sobe pela tela.

   Não precisa de `data-d`: sob `view()` o escalonamento é geométrico. Cada
   parágrafo está numa altura diferente da página, então entra na sua vez
   sozinho — é o próprio layout que faz o compasso.

   Fora de `@supports` nada muda: navegador sem `animation-timeline` (Safari
   antigo, Firefox) continua no observer, que segue no ar como está.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  /* o hero fica de fora: quem revela ele é o fim do preloader, não a rolagem */
  :is(.r-up, .r-clip, .mk):not(#hero *),
  :is(.r-mask):not(#hero *) > span {
    animation-timeline: view();
    animation-timing-function: linear;
    animation-fill-mode: both;
    transition: none;
  }

  /* faixa em `cover`, não em `entry`. Para um elemento de 47 px, a fase `entry`
     inteira dura 47 px de rolagem — a animação acabava antes de o olho pegar, e
     era exatamente isso que parecia estático. `cover` mede a travessia inteira
     (altura da tela + do elemento ≈ 860 px), então 30% viram ~260 px de rolagem
     de encaixe, e o texto assenta quando chega ao meio da tela. */
  .r-up:not(#hero *){animation-name:sd-sobe;animation-range:cover 3% cover 33%}
  @keyframes sd-sobe{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

  /* a máscara tem overflow:hidden, então ela é o scrollport do próprio span:
     `view()` no filho mediria contra a máscara, que não rola. A máscara publica
     a linha do tempo dela — essa sim medida contra a página — e o span consome. */
  .r-mask:not(#hero *){view-timeline-name:--sd-mask}
  .r-mask:not(#hero *) > span{animation-name:sd-mascara;animation-timeline:--sd-mask;
    animation-range:cover 1% cover 30%}
  @keyframes sd-mascara{from{transform:translateY(130%)}to{transform:translateY(0)}}

  .r-clip:not(#hero *){animation-name:sd-corta;animation-range:cover 0% cover 27%}
  @keyframes sd-corta{
    from{clip-path:inset(0 0 100% 0 round var(--rc,0))}
    to{clip-path:inset(0 0 0 0 round var(--rc,0))}}

  /* o grifo magenta entra depois da palavra: começa mais tarde na mesma subida.
     Consome a MESMA linha do tempo da máscara, pelo mesmo motivo do span: os
     dois grifos do site vivem dentro de uma .r-mask, que tem overflow:hidden e
     seria o scrollport deles. Com `view()` o pseudo ficava travado em scaleX(0)
     — o grifo simplesmente sumia. Se um dia houver .mk fora de máscara, o nome
     não resolve, a animação fica inativa e o observer assume. */
  .mk:not(#hero *)::after{
    animation-name:sd-grifo;animation-timeline:--sd-mask;animation-timing-function:var(--ease);
    animation-fill-mode:both;animation-range:cover 30% cover 58%;transition:none}
  @keyframes sd-grifo{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  /* o compasso do `data-d` não vale mais: sob rolagem ele empilharia atraso em
     cima de uma animação que já não tem duração própria */
  [data-d]{transition-delay:0s}
  .r-mask:nth-child(2) > span,
  .r-mask:nth-child(3) > span,
  .r-mask:nth-child(4) > span{transition-delay:0s}
}

@media (prefers-reduced-motion: reduce){
  @supports (animation-timeline: view()){
    :is(.r-up,.r-clip,.mk):not(#hero *),
    :is(.r-mask):not(#hero *) > span,
    .mk:not(#hero *)::after{animation:none}
  }
}

/* traço do pulso desenhando */
.pulso-draw path{stroke-dasharray:var(--len,3000);stroke-dashoffset:var(--len,3000);transition:stroke-dashoffset 1.8s var(--ease-io)}
.is-in .pulso-draw path,.pulso-draw.is-in path{stroke-dashoffset:0}

/* ============================================================================
   PRELOADER
   ========================================================================== */
#loader{
  position:fixed;inset:0;z-index:200;background:var(--base);
  display:grid;place-items:center;transition:transform 1s var(--ease) .1s;
}
#loader.done{transform:translateY(-101%)}
#loader .lo-inner{width:min(74vw,760px)}
#loader .lo-svg{width:100%;height:auto;overflow:visible;display:block}

/* A CÂMERA. Começa fechada no traço e recua até o enquadramento do logo.
   Os números saem da caixa do próprio traço dentro do viewBox do logo
   (x 3885,564→5720,031 · y −1148,4→−698,9), por isso o encaixe é exato
   por construção: a linha do preloader e a linha do logo são o mesmo path,
   no mesmo sistema de coordenadas. Quem se move é o enquadramento.
   O repouso não é scale(1): é 0,79 em torno do centro do viewBox, o que deixa
   o logo a 509 px em vez de 760 sem mexer no tamanho da linha da fase 1.
   Só o repouso muda: a fase 1 continua na mesma escala, então a linha
   grande não muda de tamanho — encolhe só o destino. */
#loader .lo-cam{
  /* sem isto o SVG usa origem 50% 50% e a conta acima erra o alvo */
  transform-box:view-box;transform-origin:0 0;
  transform:translate(-7623.31px,1428.43px) scale(2.18267);
  animation:lo-cam .90s cubic-bezier(.62,.02,.24,1) 1.15s forwards;
}
@keyframes lo-cam{ to{ transform:translate(943.81px,-193.91px) scale(0.67) } }

/* 1 — o traço se desenha sozinho. pathLength="1" dispensa medir em JS. */
#loader .lo-linha{stroke-dasharray:1;stroke-dashoffset:1;
  animation:lo-traco .95s cubic-bezier(.55,0,.25,1) .10s forwards}
@keyframes lo-traco{ to{ stroke-dashoffset:0 } }

/* 2 — as letras se formam na ordem de leitura. Entram 0,2 s ANTES de a
   câmera parar: é essa sobreposição que costura as fases num movimento só. */
#loader .lo-l{opacity:0;transform-box:view-box;transform-origin:0 0;transform:translateY(46px);
  animation:lo-letra .48s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(1.85s + var(--i) * .045s)}
@keyframes lo-letra{ to{ opacity:1;transform:none } }

@media (prefers-reduced-motion:reduce){
  #loader .lo-cam,#loader .lo-linha,#loader .lo-l{animation:none}
  #loader .lo-cam{transform:none}
  #loader .lo-linha{stroke-dashoffset:0}
  #loader .lo-l{opacity:1;transform:none}
}
html.loaded #loader{pointer-events:none}

/* barra de progresso de leitura */
#prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--ciano);z-index:120;will-change:transform}

/* ============================================================================
   CURSOR — pílula
   A mesma forma dos botões, bem menor. A cor não é fixa: cada seção declara
   `--cur-cor` (e o par `--cur-txt` para a legenda), o JS lê a propriedade do
   elemento sob o ponteiro e passa para a pílula. Como propriedade customizada
   herda, qualquer elemento devolve o valor da seção em que está — não é preciso
   marcar nada peça por peça.
   ========================================================================== */
:root{--cur-cor:var(--carvao);--cur-txt:var(--base)}
#hero,.section--escuro,.proc__i,.obra,#loader{--cur-cor:var(--base);--cur-txt:var(--carvao)}
.section--escuro .plano,.section--escuro .dep{--cur-cor:var(--carvao);--cur-txt:var(--base)}
.marq{--cur-cor:var(--carvao);--cur-txt:var(--base)}

#cur{position:fixed;top:0;left:0;z-index:150;pointer-events:none;will-change:transform;width:0;height:0}

#cur .cur-pill{
  position:absolute;left:0;top:0;display:grid;place-items:center;
  width:30px;height:13px;margin:-6.5px 0 0 -15px;
  border-radius:var(--r-pill);background:var(--cor,var(--carvao));
  transition:width .38s var(--ease),height .38s var(--ease),margin .38s var(--ease),
             background-color .3s linear;
}
#cur .cur-lbl{
  font-family:var(--texto);font-weight:600;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;color:var(--txt,var(--base));
  opacity:0;transform:scale(.86);
  transition:opacity .18s var(--ease),transform .3s var(--ease);
}

/* sobre link e botão a pílula cresce um pouco; sobre peça do portfólio ela vira
   o próprio botão, com a palavra dentro */
#cur.hot  .cur-pill{width:46px;height:19px;margin:-9.5px 0 0 -23px}
#cur.play .cur-pill{width:106px;height:34px;margin:-17px 0 0 -53px}
#cur.play .cur-lbl{opacity:1;transform:none;transition-delay:.07s}

#cur{opacity:1;transition:opacity .25s var(--ease)}
#cur.hide{opacity:0}

/* o ponteiro do sistema sai de cena, menos onde ele ainda informa melhor */
html.cursor-on,html.cursor-on *{cursor:none}
html.cursor-on input,html.cursor-on textarea{cursor:text}
html.cursor-on select{cursor:pointer}

@media (hover:none),(pointer:coarse){#cur{display:none}}

/* ============================================================================
   NAV
   ========================================================================== */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background-color .45s var(--ease),box-shadow .45s var(--ease),transform .5s var(--ease);
}
#nav.solid{background:var(--base);box-shadow:0 1px 0 var(--carvao-12)}
#nav.up{transform:translateY(-100%)}
.nav-in{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--margem);display:flex;align-items:center;gap:clamp(18px,2.4vw,44px)}
.nav-logo{display:block;width:clamp(126px,12vw,178px);flex:0 0 auto;position:relative;height:auto}
.nav-logo svg{width:100%;height:auto;display:block}
.nav-logo .lg-dark{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease)}
#nav.solid .nav-logo .lg-dark,#nav.open .nav-logo .lg-dark{opacity:1}
#nav.solid .nav-logo .lg-light,#nav.open .nav-logo .lg-light{opacity:0}
.nav-logo .lg-light{transition:opacity .4s var(--ease)}

.nav-links{display:flex;align-items:center;gap:clamp(14px,1.7vw,30px);margin-left:auto;list-style:none;padding:0;margin-block:0}
.nav-links a{
  position:relative;font-size:clamp(12.5px,.85vw,15px);font-weight:500;color:var(--claro);
  padding-block:6px;transition:color .35s var(--ease);white-space:nowrap;
}
#nav.solid .nav-links a{color:var(--carvao)}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--ciano);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease);
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:0 50%}
.nav-social{display:flex;gap:12px;align-items:center;margin-left:8px}
.nav-social a{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--claro);border:1px solid rgba(238,238,238,.26);transition:.35s var(--ease)}
#nav.solid .nav-social a{color:var(--carvao);border-color:var(--carvao-12)}
.nav-social a:hover{background:var(--ciano);border-color:var(--ciano);color:var(--carvao)}
.nav-social svg{width:16px;height:16px}

.nav-cta{
  display:inline-flex;align-items:center;gap:.6em;background:var(--magenta);color:var(--claro);
  font-weight:600;font-size:clamp(12px,.82vw,14px);letter-spacing:.02em;
  padding:.82em 1.5em;border-radius:var(--r-pill);overflow:hidden;position:relative;
  transition:transform .45s var(--ease);will-change:transform;
}
.nav-cta span{position:relative;z-index:1}
.nav-cta::before{content:"";position:absolute;inset:0;background:var(--carvao);transform:translateY(101%);transition:transform .5s var(--ease)}
.nav-cta:hover::before{transform:translateY(0)}

.burger{display:none;margin-left:auto;width:46px;height:46px;background:none;border:0;cursor:pointer;position:relative}
.burger i{position:absolute;left:11px;width:24px;height:1.5px;background:var(--claro);transition:.4s var(--ease)}
#nav.solid .burger i,#nav.open .burger i{background:var(--carvao)}
.burger i:nth-child(1){top:19px}
.burger i:nth-child(2){top:26px}
#nav.open .burger i:nth-child(1){top:22.5px;transform:rotate(45deg)}
#nav.open .burger i:nth-child(2){top:22.5px;transform:rotate(-45deg)}

#menu{
  position:fixed;inset:0;z-index:99;background:var(--base);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:calc(var(--nav-h) + 6vh) var(--margem) 6vh;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);
  visibility:hidden;
}
#menu.open{clip-path:inset(0 0 0 0);visibility:visible}
#menu a{font-family:var(--display);text-transform:uppercase;font-size:clamp(30px,7vw,64px);line-height:1.12;
  opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s}
#menu.open a{opacity:1;transform:none}
#menu.open a:nth-child(1){transition-delay:.16s}
#menu.open a:nth-child(2){transition-delay:.22s}
#menu.open a:nth-child(3){transition-delay:.28s}
#menu.open a:nth-child(4){transition-delay:.34s}
#menu.open a:nth-child(5){transition-delay:.40s}
#menu.open a:nth-child(6){transition-delay:.46s}
#menu a:hover{color:var(--ciano)}
#menu .menu-foot{margin-top:auto;padding-top:32px;display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center}

/* ============================================================================
   HERO
   ========================================================================== */
#hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--escuro);isolation:isolate}
.hero-wall{position:absolute;inset:-1% -2% -15%;z-index:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,.7vw,14px)}
.hero-col{display:flex;flex-direction:column;gap:clamp(6px,.7vw,14px);will-change:transform}
.hero-col video,.hero-col img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r-m);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:saturate(.86) contrast(1.03)}
.hero-v--mob{display:none}
/* Duas camadas se somam: o véu chapado e o degradê. O alívio foi no véu e no
   miolo do degradê, onde a parede aparece; os dois pontos de baixo quase não
   mudaram, porque são eles que sustentam a leitura do texto. */
.hero-scrim{position:absolute;inset:0;z-index:1;background:rgba(30,34,35,.53)}
.hero-scrim::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,34,35,.4) 0%,rgba(30,34,35,.06) 32%,rgba(30,34,35,.79) 86%,rgba(30,34,35,.92) 100%)}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--max);margin-inline:auto;padding:calc(var(--nav-h) + 4.5vh) var(--margem) clamp(52px,7vh,92px);color:var(--claro)}
.hero-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:clamp(16px,2.4vh,32px)}
#hero h1{max-width:15ch;margin-bottom:clamp(18px,2.4vh,32px)}
#hero .lead{color:rgba(238,238,238,.86);max-width:46ch}
.hero-pulso{width:min(300px,42vw);margin:clamp(14px,2vh,26px) 0 clamp(16px,2.4vh,30px)}
.hero-pulso svg{width:100%;height:auto;overflow:visible}
.hero-acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.btn{
  --bg:var(--magenta);--fg:var(--claro);--hv:var(--carvao);
  position:relative;display:inline-flex;align-items:center;gap:.7em;overflow:hidden;
  background:var(--bg);color:var(--fg);border:0;cursor:pointer;border-radius:var(--r-pill);
  font-weight:600;font-size:clamp(13px,.9vw,15.5px);letter-spacing:.015em;
  padding:1.05em 2em;white-space:nowrap;transition:transform .45s var(--ease),color .35s var(--ease);will-change:transform;
}
.btn > *{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--hv);transform:translateY(101%);transition:transform .55s var(--ease);z-index:0}
.btn:hover::before{transform:translateY(0)}
.btn svg{width:16px;height:16px}
.btn--ghost{--bg:transparent;--fg:var(--claro);--hv:var(--claro);box-shadow:inset 0 0 0 1px rgba(238,238,238,.4)}
.btn--ghost:hover{color:var(--carvao)}
.btn--ciano{--bg:var(--ciano);--fg:var(--carvao);--hv:var(--carvao)}
.btn--ciano:hover{color:var(--claro)}
.btn--carvao{--bg:var(--carvao);--fg:var(--claro);--hv:var(--ciano)}
.btn--carvao:hover{color:var(--carvao)}

.hero-foot{position:absolute;left:var(--margem);right:var(--margem);bottom:clamp(14px,2vh,26px);z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;color:rgba(238,238,238,.66)}
.scroll-cue{display:flex;align-items:center;gap:10px}
.scroll-cue i{display:block;width:1px;height:38px;background:rgba(238,238,238,.3);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--ciano);animation:cue 2.1s var(--ease-io) infinite}
/* de baixo para cima: o traço acompanha o sentido do gesto que ele pede */
@keyframes cue{0%{transform:translateY(100%)}55%,100%{transform:translateY(-100%)}}

/* ============================================================================
   MARQUEE — assinatura verbal (DNA §6)
   ========================================================================== */
.marq{background:var(--ciano);color:var(--carvao);overflow:hidden;padding-block:clamp(14px,1.6vw,26px);display:flex}
.marq__track{display:flex;flex:0 0 auto;gap:0;animation:slide 34s linear infinite;will-change:transform}
.marq:hover .marq__track{animation-play-state:paused}
/* Caixa alta e baixa, mantendo a Anton. A entreletra de 2% é o que torna isso
   possível: a Anton é condensada e nasce muito fechada — em caixa alta isso é
   a graça dela, em caixa mista fecha demais. line-height 1,12 porque agora há
   descendente (g, p, ç) e o .marq tem overflow:hidden. */
.marq span{font-family:var(--display);text-transform:none;letter-spacing:.02em;
  font-size:clamp(17px,2.15vw,33px);
  line-height:1.12;padding-inline:clamp(8px,1vw,17px);display:inline-flex;align-items:center;gap:clamp(16px,2vw,34px);white-space:nowrap}
/* A pílula é um ::after DENTRO do span, então ela fica a `gap` do texto do
   próprio span e a 2x`padding-inline` do texto do span seguinte. Com gap e
   padding iguais ela encostava numa palavra e ficava ao dobro da distância da
   outra. Padding = gap/2 deixa as duas folgas idênticas e a pílula centrada. */
.marq span::after{content:"";width:clamp(18px,2vw,29px);height:clamp(8px,.9vw,13px);background:var(--carvao);border-radius:999px;flex:0 0 auto;align-self:center}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============================================================================
   PORTFÓLIO
   ========================================================================== */
.obra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,26px)}
.obra{--rc:var(--r-l);position:relative;overflow:hidden;border-radius:var(--r-l);
  background:var(--escuro);aspect-ratio:9/16;cursor:none}
/* o vídeo carrega a própria capa como poster E como fundo. Sem isso ele pinta
   PRETO em qualquer instante sem quadro decodificado — inclusive na volta do
   loop, que foi o piscar preto no fim da peça. Não havia quadro preto no
   arquivo: era o elemento sem imagem de espera. */
.obra video{background-size:cover;background-position:center}
.obra video,.obra img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transition:transform 1.1s var(--ease),opacity .5s var(--ease),filter .6s var(--ease)}
/* a cor volta junto com o play: no mouse pelo hover, no toque pela classe .on */
.obra:hover video,.obra:hover img,.obra.on video,.obra.on img{filter:grayscale(0) contrast(1)}
.obra video{opacity:0}
.obra.on video{opacity:1}
.obra.on img{opacity:0}
.obra:hover video,.obra:hover img{transform:scale(1.045)}
.obra__tag{position:absolute;left:14px;top:14px;z-index:2;background:var(--claro);color:var(--carvao);
  padding:.42em .85em;border-radius:var(--r-pill);font-family:var(--texto);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
/* encostada no canto inferior esquerdo, saindo da borda do vídeo, e com a mesma
   largura nos seis cards. O canto arredondado fica só onde a caixa não encosta. */
.obra__cap{position:absolute;left:0;bottom:0;right:auto;z-index:2;
  width:78%;min-height:var(--cap-h,0);display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--ciano);border-radius:0 var(--r-m) 0 0;padding:11px 16px 12px;
  opacity:.94;transition:opacity .5s var(--ease)}
.obra:hover .obra__cap{transform:none;opacity:1}
/* sobre ciano, tudo em carvão (DNA, regra 1) */
.obra__cap strong{display:block;font-family:var(--display);text-transform:uppercase;color:var(--carvao);
  font-size:clamp(14px,1.35vw,20px);line-height:1.12;font-weight:400}
.obra__cap em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(58,65,67,.72);margin-top:2px}

/* declaração — a frase aprovada do DNA, com sublinhado magenta */
.decl{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,52px);align-items:end;margin-top:clamp(48px,6vw,104px)}
.decl h3{max-width:16ch}
.mk{position:relative;display:inline-block;white-space:nowrap}
/* a linha de base fica a 0,073em do fundo da caixa; o grifo tem de pendurar
   abaixo dela, senão corta as letras */
.mk::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:.1em;background:var(--magenta);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease) .35s}
.is-in .mk::after{transform:scaleX(1)}

/* ============================================================================
   DIRETOR
   ========================================================================== */
.dir{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:clamp(26px,4vw,84px);align-items:center}
.dir__ph{--rc:var(--r-l);position:relative}
/* razão do arquivo original: o retrato entra sem recorte, como foi enquadrado.
   Preto e branco fixo — o único ponto de cor da peça é o crédito em ciano. */
.dir__ph img{width:100%;aspect-ratio:1403/2289;object-fit:cover;border-radius:var(--r-l);
  filter:grayscale(1) contrast(1.04)}
.dir__ph .badge{position:absolute;left:0;right:22%;bottom:0;background:var(--ciano);color:var(--carvao);
  padding:clamp(14px,1.4vw,22px) clamp(16px,1.7vw,26px);
  border-radius:0 var(--r-m) var(--r-m) var(--r-l)}
.dir__ph .badge strong{display:block;font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(17px,1.8vw,26px);line-height:1.02;margin-bottom:.25em}
.dir__ph .badge span{font-size:clamp(11.5px,.85vw,13.5px);line-height:1.45;display:block}
/* A headline do Quem somos tem sua própria trava de corpo, menor que a d-l.
   Motivo: no d-l cheio (96 px) "GRANDES MARCAS" ocupa 96% da coluna de texto e
   vai de ponta a ponta — sem ar, e a um triz de quebrar sozinha. No celular a
   mesma frase ocupa 76%. Travar em 76 px devolve essa proporção ao desktop.
   A inclinação também cai de 6,2vw para 5,4vw: sem isso, em 1280 px — largura
   de notebook comum — a frase voltava a 93% da coluna. Medido de 1024 a 1920,
   a linha mais longa agora fica entre 50% e 84%, sempre em uma linha só. */
.dir__tx h2{margin-bottom:clamp(16px,2vw,30px);font-size:clamp(36px,5.4vw,76px)}
.dir__tx p + p{margin-top:1.05em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,32px);margin-top:clamp(28px,3.4vw,52px);
  border-top:1px solid var(--carvao-12);padding-top:clamp(20px,2.4vw,34px)}
.stat b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(26px,3vw,46px);line-height:1;color:var(--ciano)}
.stat span{display:block;margin-top:.5em;font-size:clamp(11.5px,.82vw,13.5px);line-height:1.45;color:var(--apoio)}

/* Os três formam um quadrado: Estúdio e Gravação empilhados na ponta esquerda,
   Consultório inteiro na direita. Com as duas colunas iguais, os dois da esquerda
   saem quadrados e o da direita fica 1:2 — vertical de verdade, sem achatar
   ninguém e sem sobrar buraco na composição. */
.bts{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  aspect-ratio:1;width:100%;max-width:clamp(430px,66vw,880px);
  gap:clamp(10px,1.4vw,22px);margin:clamp(40px,5.4vw,92px) auto 0}
.bts figure{--rc:var(--r-l);margin:0;overflow:hidden;border-radius:var(--r-l);position:relative;background:var(--campo)}
.bts img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.bts figure:hover img{transform:scale(1.06)}
.bts .b1{grid-column:1;grid-row:1}
.bts .b2{grid-column:1;grid-row:2}
.bts .b3{grid-column:2;grid-row:1 / span 2}

/* O consultório é UM card com as duas fotos dentro, não dois cards colados: o
   figure mantém o próprio fundo, recorte e raio (vindos de `.bts figure`), e os
   blocos internos não têm raio nenhum. Assim os cantos arredondados ficam só na
   borda de fora e o meio é uma fenda reta. Ela mostra o fundo do card, que é o
   mesmo da seção — o mesmo princípio do vão da parede da hero. */
.bts--duo{display:flex;flex-direction:column;gap:0}
.bts--duo > span{flex:1 1 0;min-height:0;position:relative;display:block;overflow:hidden}
/* Linha carvão de ponta a ponta. Vai até as bordas, mas em carvão ela lê como
   régua desenhada sobre a foto, não como fenda deixando o fundo aparecer — que
   era o que fazia o card parecer dois quando a linha tinha a cor da seção. */
.bts--duo > span + span::before{content:"";position:absolute;top:0;z-index:2;
  left:0;right:0;height:3px;background:var(--carvao)}
.bts figcaption{position:absolute;left:12px;bottom:12px;background:var(--base);color:var(--carvao);
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.42em .8em;border-radius:var(--r-pill)}

/* ============================================================================
   SOLUÇÕES / PROCESSO
   ========================================================================== */
/* clip-path, NÃO overflow:hidden. O recorte é o mesmo, mas `overflow` faria da
   grade um container de rolagem — e aí a `animation-timeline: view()` de cada
   card mediria contra ela, que não rola. Os quatro travavam num valor fixo
   conforme a altura dentro da grade: os três de cima passavam da faixa e
   ficavam opacos, o quarto congelava em 0,54 e o fundo cinza da grade aparecia
   através dele. Era o card cinza no celular. */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(238,238,238,.16);
  border:1px solid rgba(238,238,238,.16);border-radius:var(--r-m);
  clip-path:inset(0 round var(--r-m))}
.proc__i{background:var(--escuro);padding:clamp(24px,2.6vw,44px) clamp(18px,1.8vw,32px);position:relative;overflow:hidden}
.proc__i::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ciano);transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease)}
.proc__i:hover::before{transform:scaleX(1)}
.proc__n{font-family:var(--display);font-size:12px;letter-spacing:.1em;color:var(--ciano);display:block;margin-bottom:clamp(28px,3vw,56px)}
.proc__ic{width:clamp(26px,2.2vw,34px);height:clamp(26px,2.2vw,34px);color:var(--ciano);margin-bottom:clamp(14px,1.4vw,22px)}
.proc__i h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(18px,1.7vw,26px);line-height:1.04;margin:0 0 .5em}
.proc__i p{margin:0;font-size:clamp(13px,.9vw,15px);line-height:1.6;color:rgba(238,238,238,.66)}

/* ============================================================================
   PLANOS
   ========================================================================== */
.planos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,26px);align-items:start}
.plano{background:var(--base);border-radius:var(--r-m);text-align:center;
  padding:clamp(24px,2.4vw,42px) clamp(20px,2vw,34px) clamp(26px,2.6vw,44px);
  position:relative;display:flex;flex-direction:column;
  /* a camada sem deslocamento é a que desenha o topo: o contorno fecha por igual */
  box-shadow:0 1px 2px rgba(30,34,35,.06),
             0 0 22px -6px rgba(30,34,35,.15),
             0 16px 38px -22px rgba(30,34,35,.34);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.plano:hover{transform:translateY(-8px);
  box-shadow:0 1px 2px rgba(30,34,35,.07),
             0 0 30px -6px rgba(30,34,35,.19),
             0 30px 58px -26px rgba(30,34,35,.4)}
/* o profissional se destaca pela etiqueta e pelo campo, não por contorno */
.plano--pop{background:var(--claro);
  box-shadow:0 1px 2px rgba(30,34,35,.07),
             0 0 26px -6px rgba(30,34,35,.19),
             0 22px 46px -24px rgba(30,34,35,.4)}
.plano__flag{position:absolute;left:0;right:0;top:0;transform:translateY(-100%);background:var(--ciano);color:var(--carvao);
  border-radius:var(--r-m) var(--r-m) 0 0;box-shadow:0 -8px 22px -12px rgba(30,34,35,.26);
  text-align:center;padding:.62em;font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.plano__nome{font-family:var(--texto);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(14.5px,1.18vw,19px);margin:0 0 clamp(18px,2vw,30px)}
.plano__preco{display:flex;align-items:baseline;justify-content:center;gap:.2em;font-family:var(--display);color:var(--ciano);line-height:1;margin-bottom:.35em}
.plano__preco .cur{font-size:clamp(15px,1.2vw,20px)}
.plano__preco .val{font-size:clamp(38px,4.2vw,64px)}
.plano__preco .per{font-family:var(--texto);font-weight:500;font-size:clamp(12px,.95vw,15px);color:var(--apoio)}
.plano__ent{font-size:clamp(13.5px,.95vw,15.5px);line-height:1.5;color:var(--carvao);min-height:3em}
.plano__ciclo{margin:clamp(18px,2vw,28px) 0 clamp(12px,1.4vw,18px);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--apoio);text-align:center}
/* o botão não precisa ocupar a largura toda: recuado, ele fica mais leve e
   conversa melhor com o bloco centralizado acima dele */
.plano .btn{width:82%;align-self:center;justify-content:center;margin-bottom:clamp(20px,2.2vw,32px)}
/* do Contratar para cima o cartão é centralizado; a lista abaixo dele ancora à esquerda,
   que é onde a comparação item a item se lê melhor e a coluna de ✓/✗ se alinha */
.plano ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:clamp(10px,1.1vw,16px);text-align:left}
.plano li{display:flex;justify-content:flex-start;gap:11px;font-size:clamp(13px,.9vw,15px);line-height:1.45}
.plano li svg{width:17px;height:17px;flex:0 0 auto;margin-top:.15em}
.plano li.yes svg{color:var(--ciano)}
.plano li.no{color:var(--apoio)}
.plano li.no svg{color:var(--magenta)}
.planos-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;margin-top:clamp(24px,2.6vw,42px)}

/* ============================================================================
   DEPOIMENTOS
   ========================================================================== */
.dep-car{--gap:clamp(18px,2.4vw,44px);
  /* o desbotamento é bem menor que a sangria, senão ele engole a fatia inteira */
  --fade:clamp(10px,1.8vw,40px);
  position:relative}
.dep-track{
  display:flex;gap:var(--gap);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* o avatar sobe 50% para fora do cartão e a sombra desce: os paddings dão o espaço,
     porque overflow-x:auto força overflow-y:auto e cortaria os dois */
  padding-top:clamp(40px,3.4vw,52px);padding-bottom:clamp(26px,2.6vw,40px);
  /* a faixa sangra até a margem: o depoimento vizinho aparece dos dois lados */
  margin-inline:calc(var(--margem) * -1);
  padding-inline:var(--margem);scroll-padding-inline:var(--margem);
  /* e desbota na ponta, para o vizinho ler como continuação e não como cartão cortado */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
  scrollbar-width:none;-ms-overflow-style:none;
}
/* durante o salto do laço o encaixe sai do caminho, senão ele briga com o reposicionamento */
.dep-track.sem-encaixe{scroll-snap-type:none;scroll-behavior:auto}
.dep-track::-webkit-scrollbar{display:none}
.dep-track:focus-visible{outline:2px solid var(--magenta);outline-offset:4px;border-radius:4px}
.dep-track > .dep{flex:0 0 calc((100% - var(--gap)) / 2);scroll-snap-align:start}
/* enquanto arrasta, o encaixe sai do caminho e o conteúdo não intercepta o ponteiro */
.dep-track.arrastando{scroll-behavior:auto;scroll-snap-type:none;user-select:none}
.dep-track.arrastando *{pointer-events:none}
html.cursor-on .dep-track{cursor:grab}
html.cursor-on .dep-track.arrastando{cursor:grabbing}

.dep-seta{
  position:absolute;top:50%;z-index:3;width:clamp(46px,3.6vw,58px);aspect-ratio:1;
  border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--base);color:var(--carvao);
  box-shadow:0 1px 2px rgba(30,34,35,.07),0 0 20px -6px rgba(30,34,35,.22);
  transition:background-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.dep-seta svg{width:20px;height:20px}
.dep-seta--ant{left:0;transform:translate(-52%,-50%)}
.dep-seta--prox{right:0;transform:translate(52%,-50%)}
.dep-seta--ant svg{transform:rotate(180deg)}
.dep-seta:hover{background:var(--ciano);color:var(--carvao)}
.dep{background:var(--base);margin:0;border-radius:var(--r-m);padding:clamp(52px,4.4vw,70px) clamp(24px,2.4vw,44px) clamp(26px,2.6vw,44px);position:relative;
  box-shadow:0 1px 0 var(--carvao-12), 0 18px 44px -36px rgba(30,34,35,.45)}
.dep__av{position:absolute;top:0;left:clamp(24px,2.4vw,44px);transform:translateY(-50%);
  width:clamp(66px,5.4vw,92px);aspect-ratio:1;border-radius:50%;background:var(--ciano);
  border:4px solid var(--magenta);display:grid;place-items:center;overflow:hidden}
.dep__av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* sem retrato liberado, o disco da marca entra no lugar — sobre ciano, texto em carvão */
.dep__av span{font-family:var(--display);font-size:clamp(20px,1.8vw,28px);color:var(--carvao);line-height:1;padding-top:.06em}
.dep__q{width:clamp(26px,2.4vw,38px);height:clamp(26px,2.4vw,38px);color:var(--ciano);margin-bottom:clamp(12px,1.4vw,20px)}
.dep blockquote{margin:0;font-style:italic;font-size:clamp(15.5px,1.15vw,20px);line-height:1.55}
.dep cite{display:block;margin-top:clamp(14px,1.6vw,24px);font-style:normal;font-weight:600;
  font-size:clamp(12px,.85vw,14px);letter-spacing:.06em;text-transform:uppercase;color:var(--apoio)}

/* ============================================================================
   CONTATO
   ========================================================================== */
.cta-split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(32px,4.4vw,92px)}
.cta-info dl{margin:clamp(26px,3vw,46px) 0 0;display:flex;flex-direction:column;gap:clamp(18px,2vw,30px)}
.cta-info dt{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--apoio);margin-bottom:.4em}
.cta-info dd{margin:0;font-size:clamp(15px,1.1vw,19px);line-height:1.4}
.cta-info dd a{position:relative;display:inline-block}
.cta-info dd a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ciano);transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.cta-info dd a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.cta-info .tel{font-family:var(--display);font-size:clamp(26px,2.6vw,42px);line-height:1;letter-spacing:0}

form{display:grid;gap:clamp(14px,1.5vw,22px)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.5vw,22px)}
.field{position:relative}
.field input,.field textarea,.field select{
  width:100%;background-color:var(--campo);border:1.5px solid transparent;
  padding:1.6em 1.1em .68em;font-size:clamp(14px,.95vw,16px);border-radius:var(--r-s);
  transition:background-color .35s var(--ease),border-color .35s var(--ease);appearance:none;
}
/* seta do seletor: appearance:none tira a nativa, então ela volta desenhada */
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7477' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1em center;background-size:15px;
  padding-right:3em;cursor:pointer;
}
.field textarea{min-height:132px;resize:vertical}
.field label{position:absolute;left:1.1em;top:1.16em;font-size:clamp(14px,.95vw,16px);color:var(--apoio);
  pointer-events:none;transform-origin:0 0;transition:transform .3s var(--ease),color .3s var(--ease)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;background-color:var(--claro);border-color:var(--ciano)}
.field input:focus + label,.field textarea:focus + label,.field select:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label,.field select.filled + label{
  transform:translateY(-.82em) scale(.74);color:var(--apoio)}
.field.err input,.field.err textarea,.field.err select{border-color:var(--erro);background-color:var(--erro-10)}
.f-err{display:block;min-height:1.2em;margin-top:.4em;font-size:12.5px;color:var(--erro);opacity:0;transform:translateY(-4px);transition:.3s var(--ease)}
.field.err .f-err{opacity:1;transform:none}
.f-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:.4em}
.f-ok{background:var(--ciano);color:var(--carvao);border-radius:var(--r-m);padding:1.1em 1.4em;font-weight:500;display:none}
.f-ok.on{display:block;animation:fadeUp .6s var(--ease) both}
.f-ok--erro{background:var(--magenta);color:var(--base)}

/* ============================================================================
   FOOTER
   ========================================================================== */
footer{background:var(--ciano);color:var(--carvao)}
.foot-top{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,3vw,56px);align-items:center;
  padding-block:clamp(38px,4.4vw,72px)}
.foot-logo{width:clamp(160px,15vw,236px)}
.foot-mid{text-align:center;display:flex;flex-direction:column;gap:.42em;font-size:clamp(13.5px,.95vw,16px)}
.foot-mid .tel{font-family:var(--display);font-size:clamp(24px,2.4vw,38px);line-height:1;letter-spacing:0}
.foot-soc{display:flex;gap:12px}
.foot-soc a{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(58,65,67,.28);transition:.35s var(--ease)}
.foot-soc a:hover{background:var(--carvao);color:var(--ciano);border-color:var(--carvao)}
.foot-soc svg{width:18px;height:18px}
.foot-bot{border-top:1px solid rgba(58,65,67,.22);padding-block:clamp(16px,1.6vw,24px);
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;font-size:12.5px}
/* a linha da holding ocupa a faixa inteira: espremida entre a assinatura e o
   copyright ela quebrava em três pedaços desalinhados */
.foot-holding{flex:1 0 100%;order:3;margin-top:.7em;opacity:.78;line-height:1.5}
.foot-holding a{text-decoration:underline;text-underline-offset:.22em}
.foot-holding a:hover{text-decoration-thickness:2px}

/* whatsapp flutuante */
#wa{position:fixed;right:clamp(16px,2vw,30px);bottom:clamp(16px,2vw,30px);z-index:95;
  display:inline-flex;align-items:center;gap:.6em;background:var(--ciano);color:var(--carvao);
  padding:.9em 1.25em;border-radius:var(--r-pill);font-weight:600;font-size:13.5px;
  box-shadow:0 14px 34px -14px rgba(30,34,35,.5);
  transform:translateY(24px) scale(.9);opacity:0;pointer-events:none;
  transition:transform .6s var(--ease),opacity .6s var(--ease),background-color .3s}
/* --wa-sobe é escrito pelo JS: o quanto o botão precisa subir para não passar
   da linha que abre o rodapé. Zero no resto da página. */
#wa.on{transform:translateY(calc(-1 * var(--wa-sobe,0px)));opacity:1;pointer-events:auto}
#wa:hover{background:var(--carvao);color:var(--ciano)}
#wa svg{width:19px;height:19px}
#wa .lbl{display:inline}

/* ============================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:1080px){
  /* No iPad a parede de 4 colunas dava quadros de 208px: dois deles somavam 753px
     numa hero de 1112px e sobravam 448px de fundo vazio sob o texto. Com 3 colunas
     e uma sangria lateral maior, cada quadro passa de 208 para ~315px e os dois
     cobrem a altura inteira — o mesmo efeito de parede cheia da versão web. */
  .hero-wall{grid-template-columns:repeat(3,1fr);inset:-1% -10% -15%}
  .hero-col:nth-child(2){display:none}
  .nav-links,.nav-social{display:none}
  .nav-cta{display:none}
  .burger{display:block}
  .proc{grid-template-columns:repeat(2,1fr)}
  .dir{grid-template-columns:1fr;gap:clamp(34px,5vw,54px)}
  .dir__ph{max-width:460px}
  .cta-split{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr;justify-items:center;text-align:center}
  .foot-mid{text-align:center}
  /* a tabela de planos vale mais comparável do que larga */
  .plano{padding-inline:clamp(16px,1.9vw,34px)}
  .plano li{font-size:13px}
}

@media (max-width:880px){
  .obra-grid{grid-template-columns:repeat(2,1fr)}
  .planos{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .plano--pop{margin-top:34px}
  .plano li{font-size:clamp(13px,.9vw,15px)}
  /* estreito: um por vez, encaixe centralizado e cartão menor que a faixa,
     para sobrar fatia do vizinho dos DOIS lados, do mesmo tamanho */
  .dep-track > .dep{flex:0 0 calc(100% - clamp(26px,7vw,54px));scroll-snap-align:center}
  .dep-track{scroll-padding-inline:0}
  .dep-car{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px}
  /* a base do flex precisa incluir a sangria, senão ela trava a faixa na largura do
     conteúdo e a fatia da esquerda para antes da borda da tela */
  .dep-track{order:-1;flex:0 0 calc(100% + var(--margem) * 2)}
  .dep-seta{position:static;transform:none;top:auto}
}
@media (max-width:680px){
  .hero-wall{grid-template-columns:repeat(2,1fr);inset:-2% -6% -26%}
  /* No celular sobram duas colunas das quatro. Ficam a 1 e a 4 — não a 1 e a 2 —
     porque a Yasmin está no alto da 4 e ela precisa aparecer na hero.
     No lugar do clipe dela entra hero-mob.mp4, que emenda a Yasmin com os quatro
     vídeos das colunas escondidas: nada do que existe na parede da versão web
     deixa de aparecer no celular. */
  .hero-col:nth-child(2),.hero-col:nth-child(3){display:none}
  .hero-v--web{display:none}
  .hero-v--mob{display:block}
  .obra-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  /* no celular o quadrado usa a largura toda, senão os cards ficam minúsculos */
  .bts{max-width:100%}
  .proc{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:18px}
  .stat{display:flex;align-items:baseline;gap:14px}
  .stat span{margin:0}
  #hero{flex-direction:column;justify-content:flex-end;align-items:stretch}
  /* no celular a parede vira uma janela no topo e o texto ganha campo escuro */
  .hero-scrim{background:rgba(30,34,35,.44)}
  .hero-scrim::after{background:linear-gradient(180deg,rgba(30,34,35,.4) 0%,rgba(30,34,35,.08) 16%,rgba(30,34,35,.77) 40%,rgba(30,34,35,.94) 62%,rgba(30,34,35,.96) 100%)}
  .hero-in{padding-bottom:clamp(22px,3vh,34px)}
  .hero-col{justify-content:stretch}
  .hero-col video,.hero-col img{aspect-ratio:auto;flex:1 1 0;min-height:0}
  .hero-foot{position:static;width:100%;padding:0 var(--margem) clamp(20px,3.4vh,34px);flex-direction:column;align-items:flex-start;gap:12px}
  #hero .lead{font-size:16px;line-height:1.55}
  .btn{padding:.95em 1.6em}
  #wa .lbl{display:none}
  #wa{padding:1em}

}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .r-mask > span{transform:none}.r-up{opacity:1;transform:none}.r-clip{clip-path:none}
  .pulso-draw path{stroke-dashoffset:0}
  #cur{display:none}
  html.cursor-on,html.cursor-on *{cursor:auto}
  #loader{display:none}
}

@media print{#nav,#loader,#cur,#wa,#prog{display:none}}