/* © 2026 Ex.Teve · todos os direitos reservados.
   Ex.Teve · sistema visual (out/2026). Laranja da marca abre e fecha as páginas; o meio é escuro e calmo.
   Regras: nada de etiqueta em caixa alta em cima de seção, nada de palavra pintada no título, nada de card
   numerado com ícone. Prova (tela de verdade) antes de promessa. Ver PRODUCT.md. */
:root{
  --laranja:#ff5e2b;
  --tinta:#140803;          /* texto e superfícies sobre o laranja */
  --preto:#0b0b0c;
  --sup:#141416;
  --sup2:#1b1b1e;
  --linha:#27272b;
  --tx:#f2efe9;
  --tx2:#a4a19b;            /* 7,9:1 sobre --preto */
  --ease:cubic-bezier(.2207,1,.3613,1);
  --gut:clamp(20px,4vw,56px);
  --larg:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--preto);color:var(--tx);font:400 17px/1.6 'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.d{font-family:'Bricolage Grotesque',system-ui,sans-serif}
h1,h2,h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;text-wrap:balance}
h2{font-size:clamp(36px,4.6vw,60px);line-height:1;letter-spacing:-.03em}
p{text-wrap:pretty}
.wrap{max-width:var(--larg);margin:0 auto;padding:0 var(--gut)}
::selection{background:var(--laranja);color:var(--tinta)}
:focus-visible{outline:2px solid var(--laranja);outline-offset:3px;border-radius:4px}
.laranja :focus-visible{outline-color:var(--tinta)}
.pular{position:absolute;left:-9999px;top:8px;z-index:30;background:var(--tinta);color:#fff;padding:10px 16px;border-radius:8px}
.pular:focus{left:12px}

/* ---------- navegação ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0}
.marca{display:inline-flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque';font-weight:800;font-size:21px;letter-spacing:-.02em}
.marca svg{width:30px;height:30px}
.nav ul{display:flex;gap:30px;list-style:none;font-size:15px;font-weight:600}
.nav ul a{opacity:.82;transition:opacity .2s}
.nav ul a:hover{opacity:1}
@media(max-width:860px){.nav{flex-wrap:wrap;row-gap:14px}.nav ul{order:3;width:100%;gap:22px;overflow-x:auto;scrollbar-width:none;font-size:14.5px;white-space:nowrap;padding-bottom:2px;contain:inline-size}.nav ul::-webkit-scrollbar{display:none}}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:700;font-size:15.5px;line-height:1;white-space:nowrap;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;touch-action:manipulation}
.btn:active{transform:scale(.97)}
.btn-tinta{background:var(--tinta);color:var(--tx)}
.btn-tinta:hover{background:#2a1209}
.btn-laranja{background:var(--laranja);color:var(--tinta)}
.btn-laranja:hover{background:#ff7a4f}
.btn-contorno{border:2px solid currentColor;padding:13px 22px}
.seta{transition:transform .25s var(--ease)}
.btn:hover .seta,.link:hover .seta{transform:translateX(3px)}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--laranja);border-bottom:1px solid transparent;transition:border-color .2s}
.link:hover{border-color:currentColor}

/* ---------- bloco laranja (abre e fecha a página) ---------- */
.laranja{background:var(--laranja);color:var(--tinta)}

/* ---------- Steve ---------- */
.steve{position:relative;width:100%;aspect-ratio:1}
.steve svg{width:100%;height:100%;overflow:visible}
.steve .olho{transition:transform .35s var(--ease)}
.balao{position:absolute;background:var(--tinta);color:var(--tx);font-size:15px;line-height:1.4;padding:12px 15px;border-radius:16px 16px 4px 16px;max-width:220px}

/* ---------- títulos de seção ---------- */
.cabeca{display:grid;grid-template-columns:1fr minmax(0,46ch);gap:24px 56px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.cabeca p{color:var(--tx2);font-size:17.5px}
@media(max-width:860px){.cabeca{grid-template-columns:1fr}}

/* ---------- lista de serviços (no lugar de card numerado) ---------- */
.lista{border-top:1px solid var(--linha)}
.item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) auto;gap:20px 48px;align-items:baseline;padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--linha)}
.item h3{font-size:clamp(24px,2.5vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.item p{color:var(--tx2);max-width:58ch}
.item .link{justify-self:end;font-size:15px}
@media(max-width:860px){.item{grid-template-columns:1fr;gap:10px}.item .link{justify-self:start}}

/* ---------- mídia dos cases ---------- */
.midia{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--sup)}
.midia video,.midia img,.midia iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.legenda{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;margin-top:14px}
.legenda h3{font-size:clamp(20px,1.9vw,25px);font-weight:700;letter-spacing:-.015em}
.legenda span{color:var(--tx2);font-size:14.5px;white-space:nowrap}
.case p{color:var(--tx2);font-size:16px;margin-top:6px;max-width:56ch}
.case .link{margin-top:10px;font-size:15px}

/* ---------- etapas (sequência real, aqui o número informa) ---------- */
.etapas{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:etapa;list-style:none}
.etapas li{position:relative;padding:28px 28px 0 0;border-top:2px solid var(--linha)}
.etapas li::before{counter-increment:etapa;content:counter(etapa);position:absolute;top:-17px;left:0;width:32px;height:32px;border-radius:50%;background:var(--preto);border:2px solid var(--laranja);color:var(--laranja);font:800 14px/28px 'Bricolage Grotesque';text-align:center}
.etapas h3{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:6px 0 8px}
.etapas p{color:var(--tx2);font-size:16px;max-width:30ch}
@media(max-width:860px){.etapas{grid-template-columns:1fr 1fr;row-gap:44px}}
@media(max-width:520px){.etapas{grid-template-columns:1fr}}

/* ---------- fecho laranja ---------- */
.fecho{padding:clamp(72px,10vw,128px) 0}
.fecho .grade{display:grid;grid-template-columns:minmax(0,1fr) clamp(140px,16vw,210px);gap:40px;align-items:center}
.fecho h2{font-size:clamp(40px,6vw,80px);letter-spacing:-.035em;max-width:13ch}
.fecho p{font-size:19px;font-weight:500;max-width:48ch;margin-top:18px}
.fecho .acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.fecho .email{margin-top:18px;font-size:15px}
.fecho .email a{border-bottom:2px solid var(--tinta)}
@media(max-width:640px){.fecho .grade{grid-template-columns:1fr}.fecho .steve{width:140px}}

/* ---------- rodapé ---------- */
.rodape{padding:56px 0 36px;border-top:1px solid var(--linha)}
.rodape .topo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px}
.rodape .sobre{max-width:34ch;color:var(--tx2);font-size:15px;margin-top:12px}
.rodape .cols{display:flex;flex-wrap:wrap;gap:56px}
.rodape h3{font-family:inherit;font-size:13px;font-weight:600;color:var(--tx2);margin-bottom:12px}
.rodape .cols a{display:block;font-size:15px;margin-bottom:8px;opacity:.9}
.rodape .cols a:hover{color:var(--laranja);opacity:1}
.rodape .fim{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:44px;padding-top:20px;border-top:1px solid var(--linha);color:var(--tx2);font-size:13.5px}

/* ---------- movimento: entrada do topo (o conteúdo já nasce visível; só anima se puder) ---------- */
@media (prefers-reduced-motion: no-preference){
  .entra{animation:entra .9s var(--ease) both}
  .entra.d1{animation-delay:.08s}.entra.d2{animation-delay:.18s}.entra.d3{animation-delay:.3s}
  @keyframes entra{from{opacity:0;transform:translateY(18px)}}
  .surge{animation:surge 1s var(--ease) .25s both}
  @keyframes surge{from{opacity:0;transform:scale(.86) rotate(-6deg)}}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.btn,.seta,.steve .olho{transition:none}}

/* Steve: cores por contexto, piscar e piscadela */
.steve{--corpo:var(--tinta);--rosto:var(--laranja)}
.steve.claro{--corpo:var(--laranja);--rosto:var(--tinta)}
.steve .corpo{fill:var(--corpo)}
.steve .rosto{fill:var(--rosto)}
.steve .boca,.steve .fecha{stroke:var(--rosto);fill:none;stroke-linecap:round}
.steve .olho circle{transform-box:fill-box;transform-origin:center;transition:transform .12s ease-out,opacity .12s}
.steve.pisca .olho circle{transform:scaleY(.12)}
.steve .fecha{opacity:0;transition:opacity .12s}
.steve.piscadela .olho-esq circle{opacity:0}
.steve.piscadela .fecha{opacity:1}

/* destino de atalho (site.js): o trecho onde a pessoa caiu acende em laranja por uns segundos */
article[id]{scroll-margin-top:40px}
.destino{border-radius:10px;animation:destino 4.6s var(--ease) both}
.destino :is(h2,h3){animation:destino-tx 4.6s var(--ease) both}
@keyframes destino{8%,70%{background-color:rgba(255,94,43,.13);box-shadow:0 0 0 clamp(10px,1.4vw,16px) rgba(255,94,43,.13)}}
@keyframes destino-tx{8%,70%{color:var(--laranja)}}
.laranja .destino{animation-name:destino-escuro}.laranja .destino :is(h2,h3){animation:none}
@keyframes destino-escuro{8%,70%{background-color:rgba(20,8,3,.1);box-shadow:0 0 0 clamp(10px,1.4vw,16px) rgba(20,8,3,.1)}}
@media (prefers-reduced-motion:reduce){.destino,.destino :is(h2,h3){animation-timing-function:steps(1,end)}}