/* =========================================================
   Henzo · Portfólio
   Preto, vermelho e tipografia condensada gigante.
   ========================================================= */

:root {
  /* cor */
  --bg: #0A0A0B;
  --bg-2: #111113;
  --bg-3: #19191C;
  --bg-4: #232327;
  --ink: #F3EFEC;
  --ink-2: #BDB6B2;
  --ink-3: #8E8784;
  --red: #E3191F;
  --red-deep: #A80F16;
  --red-ink: #FF4C3F;           /* vermelho para texto pequeno sobre o preto (contraste AA) */
  --line: rgba(243, 239, 236, .12);

  /* tipo */
  --text: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Mrs Saint Delafield", "Brush Script MT", cursive;

  /* espaço */
  --m: clamp(16px, 3.2vw, 48px);
  --topbar-h: 76px;
  --section-gap: clamp(104px, 11vw, 192px);

  /* movimento: uma curva assinatura para entradas, uma para movimento na tela */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-float: cubic-bezier(.4, 0, .2, 1);
  --ease-sine: cubic-bezier(.37, 0, .63, 1);
  --t-press: 160ms;
  --t-ui: 240ms;

  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--bg-4) var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--red-ink);
  overflow-x: hidden;
}

::selection { background: var(--red); color: #fff; }

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-4); border: 3px solid var(--bg); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #34343A; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
b { font-weight: 700; }

:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 4px; border-radius: 2px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon .fill, #i-spark .fill { fill: currentColor; stroke: none; }

.skip {
  position: absolute; z-index: 50; left: var(--m); top: -80px;
  padding: 12px 18px; background: var(--red); color: #fff; font-weight: 700;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1680px; margin-inline: auto; padding-inline: var(--m); }

.display {
  font-weight: 900;
  font-stretch: 62%;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -.005em;
}

/* ---------- botões e links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 24px;
  background: var(--red); color: #fff;
  font-size: 16px; font-weight: 700; letter-spacing: .01em;
  border-radius: 999px;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-ui) ease;
}
.btn .icon { font-size: 20px; transition: transform var(--t-ui) var(--ease-out); }
.btn:active { transform: scale(.97); }

.link {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 600; color: var(--ink);
  padding-block: 6px;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; /* taste-skill-ignore: sublinhado de link */
  background: currentColor; transform-origin: left; transform: scaleX(.35);
  transition: transform var(--t-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #F2262B; }
  .btn:hover .icon { transform: translateX(4px); }
  .link:hover::after { transform: scaleX(1); }
}

/* ---------- topo ---------- */
.topbar {
  position: absolute; inset: 0 0 auto; z-index: 10;
  height: var(--topbar-h);
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 28px;
  padding-inline: var(--m);
}
.wordmark {
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: 32px; line-height: 1; letter-spacing: .01em;
}
.wordmark span { color: var(--red); }
.topbar-role { font-size: 14px; color: var(--ink-2); }

.topnav { display: flex; justify-content: center; gap: 32px; }
.topnav a {
  position: relative; font-size: 15px; font-weight: 500; color: var(--ink-2);
  padding-block: 8px; transition: color var(--t-ui) ease;
}
.topnav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .topnav a:hover { color: var(--ink); }
  .topnav a:hover::after { transform: scaleX(1); }
}

.status {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600;
  padding: 10px 16px; border-radius: 999px; background: var(--bg-3);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-ui) ease;
}
.status:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .status:hover { background: var(--bg-4); } }

.status-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3BD16F; }
.status-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3BD16F;
  animation: ping 2.4s var(--ease-out) infinite;
}
@keyframes ping {
  0% { transform: scale(1); opacity: .6; }
  70%, 100% { transform: scale(2.8); opacity: 0; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(700px, 100svh, 1000px);
}

.hero-word {
  position: absolute; z-index: -1;
  left: var(--m); right: var(--m); top: calc(56px - .19em);  /* o acento do Ó fica abaixo do menu */
  font-size: 21vw;                       /* o JS ajusta para preencher a largura exata */
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  line-height: .8; letter-spacing: -.005em; white-space: nowrap;
  padding-bottom: .25em;  /* espaço para as letras esticarem dentro da máscara */
  color: var(--red);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, rgba(0, 0, 0, .3) 100%); /* taste-skill-ignore: PORTFÓLIO escurece embaixo, como no exemplo */
          mask-image: linear-gradient(to bottom, #000 60%, rgba(0, 0, 0, .3) 100%); /* taste-skill-ignore: idem */
}
.hw { display: inline-flex; overflow: clip; padding-top: .34em; }
.hero.is-interactive .hw { overflow: visible; }  /* depois da entrada, as letras podem esticar */  /* espaço para o acento do Ó */
.hw > span { display: inline-block; }

.hero-glow {
  position: absolute; z-index: -2;
  left: 53%; top: 56%; width: min(72vh, 64vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(227, 25, 31, .5), rgba(227, 25, 31, 0)); /* taste-skill-ignore: luz vermelha atrás do retrato, como no exemplo */
  animation: breathe 7s var(--ease-sine) infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.94); }
  50% { opacity: .9; transform: translate(-50%, -50%) scale(1.05); }
}

.hero-portrait {
  position: absolute; z-index: 1;
  left: 53%; bottom: 0; height: 94%;
  aspect-ratio: 3 / 4;
  transform: translateX(-50%);
  pointer-events: none;
}
.pp, .pi { width: 100%; height: 100%; }
.hero-portrait img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
.portrait-fallback { display: none; width: 100%; height: 100%; }
.hero-portrait.is-fallback .portrait-fallback { display: block; }

.hero-intro {
  position: absolute; z-index: 2;
  left: var(--m); bottom: clamp(72px, 12vh, 132px);
  width: min(500px, 36vw);
}
.hero-intro h1 { font-weight: inherit; }
.hello {
  display: block;
  font-family: var(--script); font-weight: 400;
  font-size: clamp(46px, min(4.8vw, 8.4vh), 84px); line-height: 1;
  margin: 0 0 -.18em .05em;
  transform: rotate(-5deg); transform-origin: left bottom;
}
.name {
  display: block;
  font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  font-size: clamp(96px, min(12vw, 21vh), 210px); line-height: .82; letter-spacing: -.005em;
}
.hero-role {
  margin-top: 18px;
  font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; font-stretch: 87.5%;
  text-transform: uppercase; letter-spacing: .02em; color: var(--red-ink);
}
.hero-lede { margin-top: 14px; max-width: 42ch; font-size: 17px; color: var(--ink-2); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 28px; }

.hero-side {
  position: absolute; z-index: 2;
  right: var(--m); top: 0; bottom: clamp(40px, 7vh, 80px);
  width: clamp(230px, 19vw, 290px);
  display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(32px, 9vh, 120px);
}
.claim { display: flex; align-items: center; gap: 16px; font-size: 16px; line-height: 1.4; color: var(--ink); }
.claim-icon {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: var(--red-ink); font-size: 20px;
  border: 1px solid rgba(255, 76, 63, .45); /* taste-skill-ignore: círculo do ícone, como no exemplo */
}
.spin { animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.stats { display: grid; }
.stat {
  display: flex; align-items: center; gap: 18px;
  padding-block: 14px; border-top: 1px solid var(--line); /* taste-skill-ignore: divisórias dos números, como no exemplo */
}
.stat:first-child { border-top: 0; }
.stat dd {
  order: -1; min-width: 2.2em;
  font-weight: 900; font-stretch: 62%; font-size: 56px; line-height: .9;
  color: var(--red); font-variant-numeric: tabular-nums;
}
.stat dt { font-size: 16px; line-height: 1.3; color: var(--ink-2); }

.hero-where {
  position: absolute; z-index: 2; left: var(--m); bottom: clamp(24px, 4vh, 44px);
  display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2);
}
.hero-where .icon { font-size: 18px; color: var(--red-ink); }

/* entrada do hero (só com JS; sem JS tudo aparece) */
.js .hw > span { transform: translateY(110%); }
.js .pi { opacity: 0; transform: translateY(40px) scale(1.03); }
.js .hi { opacity: 0; transform: translateY(22px); }
.js .hello { clip-path: inset(-40% 100% -40% -10%); }

.is-loaded .hw > span {
  transform: none;
  transition: transform 1100ms var(--ease-out) calc(var(--i) * 45ms);
}
.is-loaded .pi {
  opacity: 1; transform: none;
  transition: opacity 900ms ease-out 260ms, transform 1400ms var(--ease-out) 260ms;
}
.is-loaded .hello {
  clip-path: inset(-40% -10% -40% -10%);
  transition: clip-path 1000ms var(--ease-in-out) 520ms;
}
.is-loaded .hi {
  opacity: 1; transform: none;
  transition: opacity 700ms ease-out calc(640ms + var(--i) * 80ms),
              transform 900ms var(--ease-out) calc(640ms + var(--i) * 80ms);
}

/* =========================================================
   SEÇÕES
   ========================================================= */
.section { padding-top: var(--section-gap); }

.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.sec-title { font-size: clamp(52px, 7.2vw, 120px); }
.more {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  font-size: 16px; font-weight: 600; color: var(--ink-2);
  padding-bottom: .4em; transition: color var(--t-ui) ease;
}
.more .icon { font-size: 20px; color: var(--red-ink); transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .more:hover { color: var(--ink); }
  .more:hover .icon { transform: translateX(4px); }
}

/* revelação ao rolar */
.js [data-reveal] > * { opacity: 0; transform: translateY(28px); }
.js [data-reveal].is-in > * {
  opacity: 1; transform: none;
  transition: opacity 700ms ease-out calc(var(--d, 0) * 80ms),
              transform 1000ms var(--ease-out) calc(var(--d, 0) * 80ms);
}

/* ---------- projetos: print do site real numa janela de navegador, texto ao lado ---------- */
.cases { display: grid; gap: clamp(80px, 9vw, 160px); }
.case {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(32px, 4.5vw, 80px); align-items: center;
}
.case--flip { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.case--flip .case-shot { order: 2; }

.case-shot { display: block; border-radius: 10px; }
.browser {
  background: var(--bg-3); border-radius: 10px; overflow: hidden;
  transition: transform 400ms var(--ease-out);
}
.browser-bar {
  height: 32px; display: flex; align-items: center; gap: 6px; padding-inline: 14px;
  background: #1F1F23;
}
.browser-bar i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #3A3A41; }
.browser-bar span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-left: 12px; padding: 3px 12px; border-radius: 6px;
  font-size: 13px; color: var(--ink-3); background: var(--bg-2);
}
.screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: size; background: var(--bg-2); }
.screen.is-empty::before {
  content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center;
  font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: 9cqw; line-height: .9; color: var(--bg-4);
}
.site {
  position: absolute; inset: 0 0 auto; width: 100%; height: auto; min-height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform 700ms var(--ease-out);
}
.case-shot:focus-visible .site { transform: translateY(calc(-100% + 100cqh)); transition: transform var(--scroll-time, 4s) var(--ease-float); }
.case-shot:active .browser { transform: scale(.99); }

@media (hover: hover) and (pointer: fine) {
  /* passe o mouse: o site rola até o fim, devagar; ao sair volta rápido */
  .case-shot:hover .site { transform: translateY(calc(-100% + 100cqh)); transition: transform var(--scroll-time, 4s) var(--ease-float); }
  .screen::after {
    content: "Passe o mouse para ver a página inteira";
    position: absolute; right: 14px; bottom: 14px;
    padding: 8px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--ink); background: rgba(10, 10, 11, .86);
    transition: opacity 200ms ease;
  }
  .case-shot:hover .screen::after { opacity: 0; }
}

.case-info { display: grid; justify-items: start; gap: 18px; }
.case-title { font-size: clamp(40px, 5vw, 88px); max-width: 100%; }
.case-type {
  margin-top: -4px;
  font-size: clamp(17px, 1.4vw, 20px); font-weight: 800; font-stretch: 87.5%;
  text-transform: uppercase; letter-spacing: .02em; color: var(--red-ink);
}
.case-text { font-size: 17px; color: var(--ink-2); max-width: 42ch; }
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.case-tags li { font-size: 14px; font-weight: 500; padding: 8px 13px; border-radius: 6px; background: var(--bg-3); }
.case-info .link .icon { font-size: 18px; color: var(--red-ink); transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .case-info .link:hover .icon { transform: translate(2px, -2px); }
}

/* ---------- processo e manifesto ---------- */
.about { margin-top: var(--section-gap); background: var(--bg-2); }
.about-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(40px, 5vw, 88px);
  padding-block: clamp(72px, 8vw, 128px);
}
.col-title { font-size: clamp(40px, 4vw, 64px); margin-bottom: 36px; }
.steps { display: grid; gap: 26px; }
.steps li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; }
.steps li:not(:last-child)::before {
  content: ""; position: absolute; left: 25.5px; top: 52px; bottom: -26px; width: 1px; background: rgba(255, 76, 63, .35);
}
.step-ic {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-size: 21px; color: var(--red-ink); background: var(--bg-2);
  box-shadow: inset 0 0 0 1px rgba(255, 76, 63, .45); /* taste-skill-ignore: círculo do passo, como no exemplo */
}
.steps h3 { display: flex; align-items: baseline; gap: 10px; font-size: 18px; font-weight: 800; font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .02em; padding-top: 4px; }
.step-n { font-size: 14px; font-weight: 700; color: var(--red-ink); font-variant-numeric: tabular-nums; }
.steps p { font-size: 16px; color: var(--ink-2); margin-top: 4px; max-width: 46ch; }

.manifesto {
  position: relative; display: flex; flex-direction: column;
  background: var(--red-deep); color: #fff;
  padding: clamp(32px, 3.4vw, 52px);
  min-height: 100%;
}
.manifesto-mark { font-weight: 900; font-stretch: 62%; font-size: 120px; line-height: .7; height: .5em; color: #0A0A0B; }
.manifesto blockquote { margin-top: 28px; }
.manifesto blockquote p { font-size: clamp(26px, 2.3vw, 34px); font-weight: 700; font-stretch: 87.5%; line-height: 1.15; letter-spacing: -.01em; }
.manifesto figcaption { margin-top: 24px; }
.signature { font-family: var(--script); font-size: 64px; line-height: 1; display: inline-block; transform: rotate(-6deg); }
.manifesto-link {
  margin-top: auto; padding-top: 40px;
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.manifesto-link .icon { font-size: 20px; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .manifesto-link:hover .icon { transform: translateX(5px); } }

/* ---------- contato ---------- */
.contact-title { font-size: min(10.6vw, 196px); line-height: .84; }
.contact-title > span { white-space: nowrap; }
.contact-title > span { display: block; }
.contact-spark { display: inline-block; width: .32em; height: .32em; margin-left: .12em; vertical-align: top; color: var(--red); }

.contact-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 112px); margin-top: clamp(40px, 5vw, 72px);
  align-items: start;
}
.contact-lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 34ch; margin-bottom: 36px; }

.contact-list li > a, .contact-static {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 18px;
  padding: 16px 0; border-top: 1px solid var(--line); font-size: 17px; font-weight: 500; /* taste-skill-ignore: lista de contato, como no exemplo */
}
.contact-list li:last-child > * { border-bottom: 1px solid var(--line); } /* taste-skill-ignore: idem */
.contact-list span:not(.ci) { min-width: 0; overflow-wrap: anywhere; }
.contact-list small { display: block; font-size: 13px; font-weight: 500; color: var(--ink-3); margin-bottom: 2px; }
.ci {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font-size: 22px; color: var(--red-ink); box-shadow: inset 0 0 0 1px rgba(255, 76, 63, .45); /* taste-skill-ignore: círculo do contato, como no exemplo */
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease, transform var(--t-press) var(--ease-out);
}
.contact-list a:active .ci { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .contact-list a:hover .ci { background: var(--red); color: #fff; }
}

/* montador de orçamento: escolha o tipo e veja o site no notebook */
.builder { display: grid; gap: 32px; }
.laptop { width: min(100%, 720px); margin-inline: auto; }
.lap-screen {
  aspect-ratio: 16 / 10; overflow: hidden; container-type: size;
  margin-inline: 6.5%;
  background: #050506; border: 10px solid #1C1C1F; border-bottom-width: 16px;
  border-radius: 16px 16px 0 0;
}
.lap-base {
  position: relative; height: 18px;
  background: #2A2A2E; border-radius: 0 0 16px 16px;
}
.lap-base::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 6px;
  transform: translateX(-50%); background: #1C1C1F; border-radius: 0 0 8px 8px;
}
.lap-site { height: 100%; display: flex; flex-direction: column; font-family: var(--text); }
.ls-bar { flex: none; display: flex; align-items: center; gap: 1cqw; height: 6.5cqh; padding-inline: 2.4cqw; background: #141416; }
.ls-bar i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #34343A; }
.ls-bar span { margin-left: 1.6cqw; font-size: 1.7cqw; color: var(--ink-3); }
.ls-body {
  flex: 1; position: relative; padding: 5cqw 6cqw;
  display: flex; flex-direction: column; align-items: flex-start;
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms var(--ease-out);
}
.ls-body.is-swapping { opacity: 0; filter: blur(6px); transform: translateY(6px); }
.ls-word { font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: 12.5cqw; line-height: .82; color: var(--red); white-space: nowrap; }
.ls-h { margin-top: 3cqw; font-size: 4.4cqw; font-weight: 700; font-stretch: 87.5%; line-height: 1.08; max-width: 54cqw; color: var(--ink); }
.ls-btn { margin-top: 3.4cqw; font-size: 2.1cqw; font-weight: 700; padding: 1.5cqw 3cqw; border-radius: 99px; background: var(--red); color: #fff; }
.ls-extra { display: none; position: absolute; right: 6cqw; bottom: 6cqw; gap: 1.6cqw; }
.ls-extra i { display: block; border-radius: 1cqw; background: var(--bg-3); }
.ls-extra--loja { grid-template-columns: repeat(3, 9cqw); }
.ls-extra--loja i { height: 11cqw; }
.ls-extra--loja i:first-child { background: var(--red-deep); }
.ls-extra--institucional { grid-template-columns: repeat(3, 8cqw); }
.ls-extra--institucional i { height: 1.4cqw; background: var(--bg-4); }
.ls-extra--redesign { grid-template-columns: repeat(2, 12cqw); }
.ls-extra--redesign i { height: 14cqw; display: grid; place-items: end start; padding: 1.2cqw; font-style: normal; font-size: 1.6cqw; font-weight: 700; color: var(--ink-2); }
.ls-extra--redesign i:last-child { background: var(--red); color: #fff; }
.lap-site[data-type="loja"] .ls-extra--loja,
.lap-site[data-type="institucional"] .ls-extra--institucional,
.lap-site[data-type="redesign"] .ls-extra--redesign { display: grid; }

.types legend { font-size: 16px; font-weight: 700; color: var(--red-ink); margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label {
  cursor: pointer; user-select: none;
  font-size: 16px; font-weight: 600; padding: 12px 20px; border-radius: 999px;
  background: var(--bg-3); color: var(--ink-2);
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease, transform var(--t-press) var(--ease-out);
}
.chips label:active { transform: scale(.97); }
.chips input:checked + label { background: var(--ink); color: var(--bg); }
.chips input:focus-visible + label { outline: 2px solid var(--red-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .chips input:not(:checked) + label:hover { background: var(--bg-4); color: var(--ink); }
}

.builder-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; }

/* ---------- rodapé ---------- */
.footer { margin-top: var(--section-gap); overflow: hidden; }
.footer-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
  padding: 28px var(--m); font-size: 14px; color: var(--ink-3);
}
.footer-row .link { font-size: 14px; color: var(--ink-2); }
.credits { max-width: 60ch; }
.footer-name {
  display: block; padding-inline: var(--m);
  font-size: 30vw; line-height: .76; color: var(--red);
  margin-bottom: -.07em; white-space: nowrap;
}
.footer-name span { display: inline-block; }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1180px) {
  .topbar-role { display: none; }
  .topbar { grid-template-columns: auto 1fr auto; }
  .hero-intro { width: min(460px, 40vw); }
}

@media (max-width: 980px) {
  .about-grid { grid-template-columns: 1fr; }
  .manifesto { min-height: 0; }
  .case, .case--flip { grid-template-columns: 1fr; }
  .case--flip .case-shot { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --topbar-h: 64px; }
  body { font-size: 16px; }

  .topnav { display: none; }
  .topbar { grid-template-columns: 1fr auto; }
  .wordmark { font-size: 28px; }
  .status { font-size: 13px; padding: 9px 14px; }

  .hero { height: auto; display: flex; flex-direction: column; padding-top: calc(var(--topbar-h) + 4px); padding-bottom: 56px; }
  .hero-word { position: relative; left: auto; right: auto; top: auto; margin: -.34em var(--m) 0; }
  .hero-glow { top: 34vw; width: 110vw; }
  .hero-portrait {
    position: relative; left: auto; bottom: auto; transform: none;
    width: min(92vw, 520px); height: auto; margin: -14vw auto 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%); /* taste-skill-ignore: a foto se funde no fundo */
            mask-image: linear-gradient(to bottom, #000 62%, transparent 96%); /* taste-skill-ignore: idem */
  }
  .hero-intro { position: relative; left: auto; bottom: auto; width: auto; margin: -30vw var(--m) 0; }
  .name { font-size: clamp(88px, 27vw, 160px); }
  .hello { font-size: clamp(44px, 12vw, 72px); }
  .hero-side {
    position: relative; right: auto; top: auto; bottom: auto; width: auto;
    margin: 44px var(--m) 0; gap: 28px;
  }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat { flex-direction: column; align-items: flex-start; gap: 6px; padding: 0; border-top: 0; }
  .stat dd { font-size: 48px; }
  .stat dt { font-size: 14px; }
  .hero-where { position: relative; left: auto; bottom: auto; margin: 28px var(--m) 0; }

  .sec-head { flex-direction: column; align-items: flex-start; gap: 16px; }

  .contact-title { font-size: calc((100vw - 2 * var(--m)) / 7.6); }  /* "VAMOS TRABALHAR" mede ~7,3em */
  .manifesto blockquote p { font-size: 24px; }
}

@media (max-width: 420px) {
  .status { font-size: 12px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .builder-actions .btn { width: 100%; justify-content: space-between; }
}

/* =========================================================
   MOVIMENTO REDUZIDO: sem deslocamento, só opacidade
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hw > span, .js .pi, .js .hi, .js [data-reveal] > * { transform: none !important; }
  .js .hello { clip-path: none; }
  .hero-glow, .spin, .status-dot::after { animation: none; }
  .site, .case-shot:hover .site, .case-shot:focus-visible .site { transform: none !important; }
  .ls-body.is-swapping { transform: none; filter: none; }
}

/* =========================================================
   UPGRADE: topo interativo, cenas de rolagem e detalhes
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* topo: as letras esticam a partir do topo (escala controlada pelo JS) */
.hw > span { transform-origin: 50% 12%; }

/* faixa de serviços */
.marquee { margin-top: clamp(56px, 7vw, 112px); overflow: clip; background: var(--red); color: var(--bg); }
.marquee-track {
  display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); width: max-content;
  padding-block: clamp(14px, 1.6vw, 24px);
  font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: clamp(40px, 5.6vw, 96px); line-height: .9;
  animation: marquee 36s linear infinite;
}
.marquee-track .icon { width: .42em; height: .42em; }
.marquee.is-paused .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee + .section { padding-top: clamp(88px, 9vw, 160px); }

/* cena dos projetos */
.scene.is-live > .case { align-content: center; }
.scene.is-live .site { transition: none; }
.scene.is-live .screen::after { content: none; }
.cases { gap: clamp(48px, 6vw, 112px); }

/* cena do processo: os ícones acendem conforme o passo */
.about.is-live .about-grid { min-height: 100svh; align-content: center; padding-block: clamp(40px, 6vh, 88px); }
.about.is-live .step-ic { transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease; }
.about.is-live[data-beat="0"] .steps li:nth-child(-n+1) .step-ic,
.about.is-live[data-beat="1"] .steps li:nth-child(-n+2) .step-ic,
.about.is-live[data-beat="2"] .steps li:nth-child(-n+3) .step-ic,
.about.is-live[data-beat="3"] .steps li:nth-child(-n+4) .step-ic,
.about.is-live[data-beat="4"] .steps li:nth-child(-n+5) .step-ic { background: var(--red); color: #fff; box-shadow: none; }

/* cursor "Ver site" sobre os projetos */
.cursor-tag {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 15px; font-weight: 700;
  opacity: 0; scale: .6; transition: opacity 200ms ease, scale 260ms var(--ease-out);
}
.cursor-tag.is-on { opacity: 1; scale: 1; }
.cursor-tag .icon { font-size: 18px; }

/* botões magnéticos: o deslocamento usa a propriedade translate, separada do scale do clique */
.btn, .status { transition: transform var(--t-press) var(--ease-out), background-color var(--t-ui) ease, translate 420ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; padding-inline: var(--m); }
  .marquee-track > :nth-child(n+11) { display: none; }
  .cursor-tag { display: none; }
}