/* Tornalli — base. Só tokens: nenhum hex aqui. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--font-body);
     font-size:var(--fs-body);line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.08;
  letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--px)}
.eyebrow{font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--c-muted);
  display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--c-n400);flex:none}
.on-dark .eyebrow{color:var(--c-accent)}
.on-dark .eyebrow::before{background:var(--c-accent)}
section{padding:clamp(72px,9vw,128px) 0;position:relative}
.on-dark{background:var(--c-dark);color:var(--c-white)}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--c-white)}
.lead{font-size:var(--fs-lead);color:var(--c-muted)}
.on-dark .lead{color:var(--c-n200)}

/* ---- botão de conversão ---- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:17px 30px;
  background:var(--c-primary);color:var(--c-white);font-family:var(--font-body);
  font-weight:600;font-size:var(--fs-small);letter-spacing:.04em;text-transform:uppercase;
  border-radius:var(--r-sm);transition:background .32s var(--ease), transform .28s var(--ease)}
.btn:hover{background:var(--c-primary-dark);transform:translateY(-2px)}
.btn--light{background:var(--c-white);color:var(--c-primary)}
.btn--light:hover{background:var(--c-n200)}
.btn__arrow{transition:transform .28s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ---- header ---- */
.header{position:fixed;inset:0 0 auto;height:var(--header-h);z-index:60;
  display:flex;align-items:center;transition:background .32s var(--ease), box-shadow .32s var(--ease)}
.header.is-stuck{background:var(--c-bg);box-shadow:var(--shadow-sm)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:24px}
/* O logo trocava por display:none/block, que NAO anima: ele piscava junto com o
   fundo. Agora os dois ficam empilhados e a troca e por opacidade. */
.header__logo{position:relative;display:inline-block;line-height:0}
.header__logo img{height:34px;width:auto;transition:opacity .32s var(--ease)}
.header__logo .logo-dark{position:absolute;inset:0;opacity:0}
.header.is-stuck .logo-dark{opacity:1}
.header.is-stuck .logo-light{opacity:0}
@media (prefers-reduced-motion:reduce){
  .header,.header__logo img{transition:none}
}

/* ---- media ---- */
.media{display:block;position:relative;overflow:hidden;background:var(--c-n500)}
.media img{width:100%;height:100%;object-fit:cover}

/* ---- footer ---- */
.footer{background:var(--c-dark);color:var(--c-n200);padding:72px 0 32px}
.footer a:hover{color:var(--c-white)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;align-items:start}
.footer__logo img{height:40px;width:auto;margin-bottom:20px}
.footer__bottom{margin-top:56px;padding-top:24px;border-top:1px solid var(--c-n500);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:var(--fs-small)}

/* ---- cookies: SEMPRE à esquerda (o canto direito é do widget de conversão) ---- */
/* Faixa de uma linha, ancorada no rodapé esquerdo.
   Antes era um cartão de 280px e cobria o H1 do hero em todos os viewports curtos
   (medido em 1440x900, 1280x720, 1024x768 e 1366x640). O H1 de /obras-residenciais/
   é ancorado no rodapé do hero, então QUALQUER cartão alto ali embaixo o cobre.
   O canto direito segue reservado ao botão de conversão. */
.cookie{position:fixed;left:24px;bottom:24px;z-index:80;max-width:min(680px,calc(100vw - 180px));
  background:var(--c-surface);color:var(--c-text);padding:14px 18px;border-radius:var(--r-md);
  box-shadow:var(--shadow-md);border:1px solid var(--c-n200);
  font-size:var(--fs-eyebrow);line-height:1.4;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  transform:translateY(160%);transition:transform .4s var(--ease)}
.cookie.is-open{transform:none}
.cookie__t{display:none}                     /* o título vira ruído numa faixa */
.cookie__p{margin:0;flex:1 1 300px;min-width:220px;color:var(--c-muted)}
.cookie__actions{display:flex;gap:8px;margin:0;flex:none}
.cookie .btn{padding:9px 16px;font-size:var(--fs-eyebrow)}
.cookie__link{margin:0;flex:none}
.cookie__link a{text-decoration:underline;color:var(--c-muted)}


@media (max-width:900px){
  .footer__grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:560px){
  /* No mobile o banner ocupa a largura toda, então ele sobe para NÃO cobrir o botão
     flutuante de conversão, que mora no canto inferior direito (64px + margem).
     Medido: sem isso o banner passava por cima do launcher do widget. */
  .cookie{left:12px;right:12px;bottom:96px;max-width:none}
  .cookie__actions .btn{flex:1 1 auto;justify-content:center}
}

/* ---- ganchos de movimento (a etapa 7 pluga a camada rica) ---- */
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{opacity:0;transform:translateY(22px);
    transition:opacity .7s var(--ease), transform .7s var(--ease)}
  [data-reveal].is-in{opacity:1;transform:none}
  [data-reveal][data-delay="1"]{transition-delay:.09s}
  [data-reveal][data-delay="2"]{transition-delay:.18s}
  [data-reveal][data-delay="3"]{transition-delay:.27s}
  [data-reveal][data-delay="4"]{transition-delay:.36s}
  [data-reveal][data-delay="5"]{transition-delay:.45s}
  /* em pilha sticky a entrada é SÓ opacidade (transform faz o elemento saltar ao colar) */
  .is-sticky-stack [data-reveal]{transform:none}
}

/* ---- FAIL-SAFE: sem JS, nada de conteúdo pode ficar invisível ----
   Os estados de entrada escondem o bloco e só o JS revela. Se o JS não rodar,
   o antídoto abaixo devolve tudo ao estado final. */
html:not(.js) [data-reveal],
html:not(.js) [data-underline],
html:not(.js) [data-timeline],
html:not(.js) .hero-media{opacity:1 !important;transform:none !important;
  clip-path:none !important;background-size:100% 2px !important}
html:not(.js) [data-timeline] .line,
html:not(.js) [data-timeline] .tl__line{transform:scaleY(1) !important}

/* ---- nav aberto: o botao tem de ficar ACIMA do painel, senao nao ha como fechar ---- */
html.nav-aberto .header{z-index:90}
html.nav-aberto [data-burger]{position:relative;z-index:95}

/* ---- linha de CTA no fim de seção (pontos de intenção alta) ----
   Sem white-space:nowrap: rótulo longo ("Falar com quem assina a ART") estourava
   +31px em 360px, medido. O botão pode quebrar em duas linhas no mobile. */
.cta-linha{margin-top:clamp(36px,4.5vw,60px);display:flex;justify-content:flex-start}
.cta-linha .btn{max-width:100%}
@media (max-width:560px){
  .cta-linha{justify-content:stretch}
  .cta-linha .btn{flex:1 1 auto;justify-content:center;text-align:center;
    white-space:normal;line-height:1.3;padding-inline:20px}
}

/* ---- loader de entrada (portado do institucional) ----
   O símbolo da marca se desenha por stroke-dashoffset e a tela some.
   Sem JS, o antídoto abaixo nunca deixa o loader preso na frente do conteúdo. */
.loader{position:fixed;inset:0;z-index:300;background:var(--c-dark);
  display:grid;place-items:center;
  transition:opacity .6s var(--ease),visibility .6s}
.loader svg{width:64px;height:72px;color:var(--c-accent)}
.loader path{stroke:currentColor;fill:none;stroke-width:14;
  stroke-dasharray:420;stroke-dashoffset:420;
  animation:tor-draw 1.1s var(--ease) forwards}
.loader path:nth-child(2){animation-delay:.18s}
.loader path:nth-child(3){animation-delay:.36s}
@keyframes tor-draw{to{stroke-dashoffset:0}}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
/* fail-safe: sem JS ou com reduced-motion o loader não existe */
html:not(.js) .loader{display:none}
@media (prefers-reduced-motion:reduce){
  .loader{display:none}
}

/* ---- vídeo do hero + grafismo de chevron (portados do institucional) ---- */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s var(--ease);z-index:0}
.hero__video.is-ready{opacity:1}
.hero-chev{position:absolute;right:-4%;top:14%;width:min(44vw,680px);
  opacity:.16;pointer-events:none;mix-blend-mode:screen;z-index:1}
@media (max-width:900px){
  .hero-chev{right:-18%;top:auto;bottom:12%;width:78vw;opacity:.12}
}
@media (prefers-reduced-motion:reduce){
  .hero__video{transition:none}
}

/* ---- o banner reserva o próprio espaço ----
   Os heroes ancoram conteúdo no rodapé esquerdo, onde o banner mora. Encolher o
   banner não resolveu, e padding no #hero só fazia a seção CRESCER (min-height nos
   wrappers internos). Quem recebe a reserva é o bloco que contém o H1, achado por
   JS, porque o nome da classe muda de página para página. */
[data-cookie-reserva]{transition:padding-bottom .4s var(--ease)}
@media (prefers-reduced-motion:reduce){[data-cookie-reserva]{transition:none}}


/* ---- seção de equipe em split (portada do institucional) ---- */
/* Cores em claro-primeiro: 3 das 4 páginas têm #equipe sobre fundo claro.
   O institucional desenhou essa seção em dark; o bloco .on-dark abaixo é que
   restaura aquelas cores, só onde a seção realmente é escura. */
.eq-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(32px,5vw,80px);align-items:center}
.eq-text{display:grid;gap:20px}
.eq-text h2{max-width:24ch}
.eq-lay{width:16px;height:11px;flex:none;color:var(--c-n400)}
.eq-lay svg{width:100%;height:100%}
.roster{display:grid;list-style:none;border-top:1px solid var(--c-n200);margin:0;padding:0}
.roster li{display:grid;grid-template-columns:20px 1fr;gap:14px;padding:15px 0;
  border-bottom:1px solid var(--c-n200)}
.roster .eq-lay{margin-top:6px}
.roster li div{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline}
.roster b{display:block;font-family:var(--font-display);font-weight:500;
  font-size:var(--fs-body);line-height:1.35;color:var(--c-text)}
.roster span{font-size:var(--fs-small);color:var(--c-muted)}
.eq-art{display:grid;gap:8px;padding:20px 22px;border:1px solid var(--c-n200);margin-top:6px}
.eq-art p{color:var(--c-muted);font-size:var(--fs-small)}
/* mesma seção sobre fundo escuro — inverte só as cores, nunca a estrutura */
.on-dark .eq-lay{color:var(--c-accent)}
.on-dark .roster,.on-dark .roster li{border-color:color-mix(in srgb,var(--c-n200) 26%,transparent)}
.on-dark .roster b{color:var(--c-white)}
.on-dark .roster span{color:var(--c-accent)}
.on-dark .eq-art{border-color:color-mix(in srgb,var(--c-accent) 35%,transparent)}
.on-dark .eq-art p{color:var(--c-n200)}
.eq-fig{position:relative;aspect-ratio:4/5;width:100%;overflow:hidden;
  background:var(--c-dark);margin:0}
.eq-fig img,.eq-fig video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eq-fig video{opacity:0;transition:opacity 1s var(--ease)}
.eq-fig video.is-ready{opacity:1}
.eq-fig figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;
  padding:14px 18px;color:var(--c-n200);font-family:var(--font-display);font-weight:500;
  font-size:var(--fs-eyebrow);letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(0deg,color-mix(in srgb,var(--c-dark) 85%,transparent),transparent)}
.eq-fig .dot{width:8px;height:8px;border-radius:50%;background:var(--c-accent);flex:none;
  animation:eq-pulse 2.2s var(--ease) infinite}
@keyframes eq-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (max-width:900px){
  .eq-split{grid-template-columns:1fr}
  .eq-fig{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  .eq-fig video{transition:none}
  .eq-fig .dot{animation:none}
}