/* Solutattoo · site.css
   Identidade: tinta (fundo quase preto quente), papel (texto), sol (um acento laranja-vermelhão, o sol do litoral e o vermelho da tatuagem tradicional).
   Tipos: Bricolage Grotesque (títulos, eixos opsz/wdth) + Geist (texto) + Geist Mono (números e rótulos).
   Cantos: superfícies 16px, peças internas 10px, botões em pílula. Tema único escuro. */

:root {
  --tinta: #0e0c0b; --tinta-2: #151210; --tinta-3: #1c1815; --tinta-4: #26201c;
  --papel: #f2ede5; --papel-2: #bfb6aa; --papel-3: #8a8177;
  --sol: #ff5b2e; --sol-forte: #ff7c55; --sol-fundo: rgba(255, 91, 46, .12); --sobre-sol: #160a05;
  --ok: #3fbf86;
  --linha: rgba(242, 237, 229, .09); --linha-forte: rgba(242, 237, 229, .18);
  --raio: 16px; --raio-peca: 10px; --nav: 70px; --wrap: 1280px; --gutter: 24px;
  --titulo: 'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif;
  --texto: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --suave: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.com-anim { scroll-behavior: smooth; }
body { margin: 0; background: var(--tinta); color: var(--papel); font-family: var(--texto); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::after { content: ''; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--sol); color: var(--sobre-sol); }
:focus-visible { outline: 2px solid var(--sol); outline-offset: 3px; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--sol); color: var(--sobre-sol); padding: 10px 14px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.pular:focus { top: 12px; }
#tinta { position: fixed; inset: 0; z-index: 65; pointer-events: none; width: 100%; height: 100%; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* ---------- tipografia ---------- */
.titulo { font-family: var(--titulo); font-size: clamp(36px, 4.6vw, 64px); line-height: .98; letter-spacing: -.022em; font-weight: 800; font-variation-settings: 'wdth' 80, 'opsz' 72; max-width: 18ch; text-wrap: balance; }
.sub { color: var(--papel-2); font-size: 18px; max-width: 58ch; margin-top: 18px; }
.rotulo { font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sol); margin-bottom: 18px; }
.nota-mono { margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--papel-3); text-align: center; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; height: 46px; padding: 0 22px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; will-change: transform; transition: background-color .25s, border-color .25s, color .25s, box-shadow .3s; }
.btn:active { transform: scale(.98); }
.btn--sol { background: var(--sol); color: var(--sobre-sol); }
.btn--sol:hover { background: var(--sol-forte); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .8); }
.btn--linha { border-color: var(--linha-forte); color: var(--papel); background: rgba(14, 12, 11, .4); }
.btn--linha:hover { border-color: var(--papel); }
.btn--g { height: 56px; padding: 0 28px; font-size: 16px; }
.btn__zap { width: 18px; height: 18px; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav); background: rgba(14, 12, 11, .7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; }
.nav.is-rolado { border-bottom-color: var(--linha); background: rgba(14, 12, 11, .9); }
.nav__in { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marca__sol { width: 34px; height: 34px; }
.marca__nome { font-family: var(--titulo); font-weight: 800; font-size: 23px; letter-spacing: -.02em; font-variation-settings: 'wdth' 85, 'opsz' 48; }
.marca__nome b { color: var(--sol); font-weight: 800; }
.nav__links { display: flex; gap: 26px; }
.nav__links a { text-decoration: none; color: var(--papel-2); font-size: 15px; font-weight: 500; transition: color .2s; }
.nav__links a:hover { color: var(--papel); }
.nav__cta { height: 42px; padding: 0 18px; font-size: 14px; }
.nav__burger { display: none; width: 44px; height: 44px; background: none; border: 0; position: relative; cursor: pointer; }
.nav__burger span, .nav__burger span::before, .nav__burger span::after { content: ''; position: absolute; left: 10px; width: 24px; height: 2px; background: var(--papel); transition: transform .3s var(--suave); }
.nav__burger span { top: 21px; } .nav__burger span::before { top: -7px; left: 0; } .nav__burger span::after { top: 7px; left: 0; }
.nav.is-aberto .nav__burger span { background: transparent; }
.nav.is-aberto .nav__burger span::before { transform: translateY(7px) rotate(45deg); }
.nav.is-aberto .nav__burger span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- herói ---------- */
.heroi { position: relative; min-height: 100dvh; padding: calc(var(--nav) + 32px) 0 56px; display: flex; align-items: center; overflow: hidden; }
.heroi__fundo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(48% 52% at 72% 46%, rgba(255, 91, 46, .2), transparent 70%), radial-gradient(36% 40% at 8% 92%, rgba(255, 91, 46, .07), transparent 70%), linear-gradient(180deg, transparent 60%, var(--tinta)); }
.heroi__3d { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.heroi__3d canvas { width: 100% !important; height: 100% !important; display: block; }
.heroi.is-3d .heroi__3d { opacity: 1; }
.heroi.is-3d .heroi__estatico { opacity: 0; }
/* composição estática: celular, sem WebGL e reduzir movimento */
.heroi__estatico { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .8s; }
.heroi__sol { position: absolute; width: min(46vw, 640px); right: 2vw; top: 50%; transform: translateY(-52%); opacity: .9; filter: drop-shadow(0 0 60px rgba(255, 91, 46, .35)); }
.heroi__tela { position: absolute; border-radius: 12px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(242, 237, 229, .08); }
.heroi__tela--pc { width: min(40vw, 600px); right: 6vw; top: 52%; transform: perspective(1400px) rotateY(-16deg) rotateX(6deg); }
.heroi__tela--cel { width: min(12vw, 170px); right: 3vw; top: 36%; border-radius: 18px; transform: perspective(1200px) rotateY(-12deg) rotateZ(3deg); }
.heroi__luz { position: absolute; left: 0; top: 0; z-index: 2; width: 760px; height: 760px; margin: -380px 0 0 -380px; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(242, 237, 229, .08), rgba(255, 91, 46, .07) 32%, transparent 62%); mix-blend-mode: screen; transition: opacity .6s; }
.heroi__luz.is-ligada { opacity: 1; }
.heroi__in { position: relative; z-index: 3; width: min(100% - 2 * var(--gutter), 1360px); }
.heroi__texto { max-width: 780px; }
.heroi__titulo { font-family: var(--titulo); font-size: clamp(52px, 7vw, 112px); line-height: .92; letter-spacing: -.03em; font-weight: 800; font-variation-settings: 'wdth' 78, 'opsz' 96; }
.heroi__titulo em { font-style: normal; color: var(--sol); }
.heroi__titulo .linha { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.heroi__titulo .linha > span { display: block; }
.heroi__sub { margin-top: 26px; font-size: clamp(17px, 1.4vw, 21px); color: var(--papel-2); max-width: 36ch; }
.heroi__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---------- faixa (único letreiro corrido da página) ---------- */
.faixa { border-block: 1px solid var(--linha); background: var(--tinta-2); overflow: hidden; padding: 18px 0; }
.faixa__trilho { display: flex; align-items: center; gap: 28px; width: max-content; font-family: var(--titulo); font-weight: 700; font-size: clamp(18px, 2vw, 26px); letter-spacing: -.02em; font-variation-settings: 'wdth' 85; white-space: nowrap; }
.faixa__trilho i { width: 9px; height: 9px; border-radius: 50%; background: var(--sol); flex: none; }

/* ---------- dores ---------- */
.dores { padding: 130px 0; }
.dores__titulo { font-size: clamp(20px, 2vw, 26px); color: var(--papel-2); max-width: 32ch; line-height: 1.35; }
.dores__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 64px; margin-top: 56px; }
.dores__item { font-family: var(--titulo); font-size: clamp(28px, 3.4vw, 50px); line-height: 1.02; letter-spacing: -.022em; font-weight: 800; font-variation-settings: 'wdth' 80, 'opsz' 72; text-wrap: balance; }
.com-anim .dores__item .palavra { color: #3d3732; }

/* ---------- como funciona ---------- */
.como { background: var(--tinta-2); border-top: 1px solid var(--linha); }
.como__pin { min-height: 100dvh; display: flex; align-items: center; padding: 96px 0 64px; }
.como__grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; width: min(100% - 2 * var(--gutter), 1360px); }
.como__passos { margin-top: 34px; display: grid; gap: 6px; counter-reset: p; }
.como__passos li { display: grid; grid-template-columns: 34px 1fr; gap: 4px 12px; padding: 12px 14px; border-radius: var(--raio-peca); color: var(--papel-3); transition: color .4s, background-color .4s; counter-increment: p; }
.como__passos li::before { content: counter(p, decimal-leading-zero); font-family: var(--mono); font-size: 12px; padding-top: 5px; transition: color .4s; }
.como__passos strong { font-family: var(--titulo); font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.como__passos span { grid-column: 2; font-size: 14.5px; line-height: 1.45; display: none; }
.como__passos li.is-ativo { color: var(--papel); background: var(--tinta-3); }
.como__passos li.is-ativo::before { color: var(--sol); }
.como__passos li.is-ativo span { display: block; color: var(--papel-2); }
.sem-anim .como__passos span { display: block; }
.como__palco { position: relative; }

/* simulador */
.sim { position: relative; display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 16px; align-items: start; }
.sim__fone, .sim__painel { background: var(--tinta); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.sim__fone { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); }
.sim__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--linha); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--papel-3); }
.sim__marca { color: var(--papel); }
.sim__etapa { color: var(--sol); }
.sim__telas { position: relative; min-height: 356px; }
.sim__tela { position: absolute; inset: 0; padding: 16px 14px 14px; display: none; flex-direction: column; gap: 10px; }
.sim__tela.is-ativa { display: flex; }
.sim__h { font-size: 17px; font-weight: 700; line-height: 1.2; }
.sim__h4 { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--papel-3); margin-bottom: 8px; font-weight: 400; }
.sim__p { font-size: 14px; color: var(--papel-2); line-height: 1.5; }
.sim__p b, .sim__codigo b { color: var(--papel); font-family: var(--mono); font-weight: 500; }
.sim__consulta { margin-top: auto; display: grid; gap: 2px; padding: 10px 12px; border: 1px dashed var(--linha-forte); border-radius: var(--raio-peca); font-size: 12.5px; color: var(--papel-3); }
.sim__consulta b { color: var(--sol); font-weight: 600; font-size: 13.5px; }
.sim__opcoes { display: grid; gap: 8px; }
.sim__opcoes--chips { grid-template-columns: 1fr 1fr; }
.sim__opcao { text-align: left; background: var(--tinta-3); border: 1px solid var(--linha); border-radius: var(--raio-peca); padding: 10px 12px; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; transition: border-color .2s, background-color .2s; }
.sim__opcao:hover { border-color: var(--linha-forte); }
.sim__opcao.is-escolhida { border-color: var(--sol); background: var(--sol-fundo); }
.sim__opcao strong { grid-column: 1; grid-row: 1; font-size: 14px; font-weight: 600; }
.sim__opcao small { grid-column: 1; grid-row: 2; font-size: 12px; color: var(--papel-3); }
.sim__opcao b { grid-column: 2; grid-row: 1 / span 2; font-family: var(--mono); font-size: 13px; color: var(--sol); font-weight: 500; }
.sim__opcoes--chips .sim__opcao { display: flex; justify-content: space-between; padding: 9px 11px; }
.sim__opcoes--chips .sim__opcao b { font-size: 12px; color: var(--papel-2); }
.sim__opcoes--chips .sim__opcao.is-escolhida b { color: var(--sol); }
.sim__valor { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 12px; margin-top: auto; background: var(--tinta-3); border-radius: var(--raio-peca); font-size: 13px; color: var(--papel-2); }
.sim__valor strong { font-family: var(--mono); font-size: 18px; color: var(--papel); font-weight: 500; }
.sim__valor--sinal { margin-top: 0; }
.sim__btn { height: 42px; border-radius: 999px; border: 0; background: var(--sol); color: var(--sobre-sol); font-weight: 700; font-size: 14px; cursor: pointer; transition: background-color .2s, opacity .2s; }
.sim__btn:hover { background: var(--sol-forte); }
.sim__btn[disabled] { opacity: .35; cursor: not-allowed; }
.sim__dias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sim__dia { background: var(--tinta-3); border: 1px solid var(--linha); border-radius: var(--raio-peca); padding: 8px 4px; text-align: center; cursor: pointer; font-family: var(--mono); font-size: 12px; line-height: 1.3; }
.sim__dia small { display: block; font-size: 12px; color: var(--papel-3); text-transform: uppercase; }
.sim__dia.is-ocupado { opacity: .3; text-decoration: line-through; cursor: not-allowed; }
.sim__dia.is-escolhido { border-color: var(--sol); background: var(--sol-fundo); color: var(--sol); }
.sim__crono { display: grid; gap: 4px; font-family: var(--mono); font-size: 12px; color: var(--papel-2); min-height: 58px; }
.sim__crono li { display: flex; justify-content: space-between; gap: 8px; }
.sim__crono li b { color: var(--papel); font-weight: 400; }
.sim__crono .sim__crono-mais { color: var(--papel-3); }
.sim__pix { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; background: var(--tinta-3); border: 1px dashed var(--linha-forte); border-radius: var(--raio-peca); padding: 10px 12px; font-size: 13px; color: var(--papel-2); }
.sim__pix b { color: var(--sol); }
.sim__pix.is-copiado { border-color: var(--sol); border-style: solid; }
.sim__codigo { font-size: 13px; color: var(--papel-2); margin-top: auto; }
.sim__barra { height: 3px; background: var(--tinta-3); }
.sim__barra i { display: block; height: 100%; width: 20%; background: var(--sol); transition: width .5s var(--suave); }
.sim__abas { display: flex; gap: 10px; }
.sim__abas b { font-weight: 400; display: inline-flex; align-items: center; gap: 5px; }
.sim__abas b.is-ativa { color: var(--papel); }
.sim__badge { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sol); color: var(--sobre-sol); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.sim__pedidos { padding: 14px; display: grid; gap: 10px; min-height: 150px; border-bottom: 1px solid var(--linha); }
.sim__vazio { font-size: 13px; color: var(--papel-3); }
.sim__pedido { background: var(--tinta-3); border: 1px solid rgba(255, 91, 46, .45); border-radius: var(--raio-peca); padding: 10px 12px; display: grid; gap: 8px; }
.sim__pedido-cab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.sim__pedido-cab strong { font-size: 14px; font-weight: 600; }
.sim__pedido-cab small { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sol); }
.sim__pedido-info { font-size: 12.5px; color: var(--papel-2); line-height: 1.45; }
.sim__pedido-info b { color: var(--papel); font-weight: 500; }
.sim__pedido-acoes { display: flex; gap: 8px; }
.sim__pedido-acoes button { height: 32px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.sim__confirmar { background: var(--sol); color: var(--sobre-sol); }
.sim__recusar { background: transparent; color: var(--papel-2); border-color: var(--linha-forte) !important; }
.sim__pedido.is-confirmado { border-color: rgba(63, 191, 134, .5); }
.sim__pedido.is-confirmado .sim__pedido-cab small { color: var(--ok); }
.sim__agenda { padding: 14px; }
.sim__agenda-lista { display: grid; gap: 8px; font-size: 12.5px; color: var(--papel-2); }
.sim__agenda-lista li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: baseline; line-height: 1.4; }
.sim__data { font-family: var(--mono); font-size: 12px; color: var(--papel-3); white-space: nowrap; }
.sim__agenda-lista li.is-nova span:nth-child(2) { color: var(--papel); }
.sim__agenda-lista li.is-nova .sim__data { color: var(--sol); }
.sim__kit { display: none; grid-column: 2; font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--ok); }
.sim__agenda-lista li.is-kit .sim__kit { display: block; }
.sim__repetir { position: absolute; right: 0; bottom: -40px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--tinta); color: var(--papel-2); font-family: var(--mono); font-size: 12px; cursor: pointer; z-index: 2; }

/* ---------- painel real ---------- */
.painel { border-top: 1px solid var(--linha); overflow: hidden; }
.painel__pin { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 32px; padding: 88px 0 40px; }
.painel__janela { overflow: hidden; }
.painel__trilho { display: flex; gap: 28px; width: max-content; padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); will-change: transform; }
.tela { flex: none; width: min(54vw, 840px, calc((100dvh - 370px) * 1.6)); }
.painel .titulo { max-width: 26ch; }
.tela__moldura { border-radius: 14px; overflow: hidden; background: var(--tinta-3); border: 1px solid var(--linha-forte); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95); aspect-ratio: 1440 / 900; }
.tela__moldura img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.tela figcaption { margin-top: 14px; font-size: 15.5px; color: var(--papel-2); max-width: 58ch; }
.tela figcaption b { display: block; font-family: var(--titulo); font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--papel); margin-bottom: 2px; }

/* ---------- plano pela foto ---------- */
.plano { padding: 130px 0; background: var(--tinta-2); border-top: 1px solid var(--linha); position: relative; overflow: hidden; }
.plano::before { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 50% at 30% 55%, rgba(255, 91, 46, .1), transparent 70%); pointer-events: none; }
.plano .wrap { position: relative; }
.plano__titulo { max-width: 16ch; }
.plano__grade { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 64px; align-items: center; }
.plano__tela { position: relative; border-radius: 14px; border: 1px solid var(--linha-forte); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95); transform: perspective(1400px) rotateY(8deg) rotateX(2deg); transform-origin: left center; }
.plano__tela img { border-radius: 14px; width: 100%; height: auto; }
.plano__scan { position: absolute; left: 5.5%; top: 29.6%; width: 18.2%; height: 14.4%; overflow: hidden; border-radius: 4px; pointer-events: none; }
.plano__scan::after { content: ''; position: absolute; inset: 0; border-bottom: 2px solid var(--sol); transform: translateY(-100%); }
.com-anim .plano__scan::after { animation: varrer 2.2s ease-in-out infinite; }
@keyframes varrer { 0%, 100% { transform: translateY(-100%); } 50% { transform: translateY(0); } }
.plano__marco { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--sol); color: var(--sobre-sol); font-family: var(--mono); font-weight: 500; font-size: 13px; display: grid; place-items: center; box-shadow: 0 0 0 4px var(--tinta-2); }
.com-anim .plano__marco { opacity: 0; transform: scale(.4); }
.plano__lista { display: grid; gap: 22px; counter-reset: pl; }
.plano__lista li { position: relative; padding-left: 52px; counter-increment: pl; }
.plano__lista li::before { content: counter(pl); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--linha-forte); display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--papel-2); transition: background-color .4s, color .4s, border-color .4s; }
.plano__lista li.is-ativo::before { background: var(--sol); border-color: var(--sol); color: var(--sobre-sol); }
.plano__lista b { display: block; font-family: var(--titulo); font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.plano__lista span { display: block; margin-top: 4px; color: var(--papel-2); font-size: 15.5px; }
.plano__garantias { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.plano__garantias li { background: var(--tinta-2); padding: 22px 24px; font-size: 15px; color: var(--papel-2); }
.plano__garantias b { color: var(--papel); }

/* ---------- estoque ---------- */
.estoque { border-top: 1px solid var(--linha); }
.estoque__pin { min-height: 100dvh; display: flex; align-items: center; padding: 96px 0; }
.estoque__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.estoque__passos { margin-top: 34px; display: grid; gap: 18px; counter-reset: e; }
.estoque__passos li { position: relative; padding-left: 38px; font-size: 16.5px; color: var(--papel-3); counter-increment: e; transition: color .4s; }
.estoque__passos li::before { content: counter(e); position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--linha-forte); display: grid; place-items: center; font-family: var(--mono); font-size: 12px; transition: color .4s, border-color .4s; }
.estoque__passos strong { color: inherit; }
.estoque__passos li.is-ativo { color: var(--papel); }
.estoque__passos li.is-ativo::before { color: var(--sol); border-color: var(--sol); }
.sem-anim .estoque__passos li { color: var(--papel); }
.estoque__nota { margin-top: 26px; padding-left: 38px; font-size: 14px; color: var(--papel-3); }
.est { background: var(--tinta-2); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; max-width: 470px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); }
.est__topo { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--linha); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.est__acao { color: var(--sol); }
.est__foto { position: relative; height: 150px; margin: 16px; border-radius: var(--raio-peca); overflow: hidden; background: #3b2f27 url('../img/fundo-tinta.webp') center / cover; display: grid; place-items: center; }
.est__foto::before { content: ''; position: absolute; inset: 0; background: rgba(28, 24, 21, .5); }
.est__foto-rotulo { position: relative; font-family: var(--mono); font-size: 12px; color: var(--papel-2); background: rgba(14, 12, 11, .78); padding: 6px 10px; border-radius: 999px; }
.est__scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--sol); opacity: 0; }
.est__lista { padding: 0 16px; display: grid; gap: 6px; }
.est__item { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: baseline; padding: 8px 10px; background: var(--tinta-3); border-radius: 8px; font-size: 13.5px; }
.est__marca { font-size: 12px; color: var(--papel-3); font-family: var(--mono); }
.est__qtd { font-family: var(--mono); font-size: 13px; min-width: 44px; text-align: right; font-weight: 500; }
.est__delta { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--sol); min-width: 30px; text-align: right; }
.com-anim .est__delta { opacity: 0; }
.est__sessao { margin: 14px 16px 0; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio-peca); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--papel-2); }
.est__concluir { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linha-forte); font-size: 12px; color: var(--papel-3); transition: background-color .3s, color .3s, border-color .3s; }
.est__concluir.is-ligado, .sem-anim .est__concluir { background: var(--ok); color: #06150d; border-color: var(--ok); }
.est__mov { margin: 10px 16px 16px; font-family: var(--mono); font-size: 12px; color: var(--papel-3); }
.com-anim .est__mov { opacity: 0; }

/* ---------- automações ---------- */
.auto { padding: 130px 0; background: var(--tinta-2); border-top: 1px solid var(--linha); }
.auto__lista { position: relative; margin-top: 56px; display: grid; gap: 38px; }
.auto__linha { position: absolute; left: 224px; top: 0; bottom: 0; width: 1px; background: var(--sol); transform-origin: top; }
.com-anim .auto__linha { transform: scaleY(0); }
.auto__item { display: grid; grid-template-columns: 200px 1fr; gap: 50px; align-items: start; }
.auto__quando { font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em; color: var(--sol); padding-top: 6px; }
.auto__item h3 { font-family: var(--titulo); font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.auto__item p { margin-top: 6px; color: var(--papel-2); font-size: 16px; max-width: 54ch; }

/* ---------- caso real ---------- */
.caso { padding: 150px 0; border-top: 1px solid var(--linha); position: relative; overflow: hidden; }
.caso::before { content: ''; position: absolute; inset: 0; background: radial-gradient(46% 50% at 50% 50%, rgba(255, 91, 46, .09), transparent 70%); pointer-events: none; }
.caso__in { position: relative; width: min(100% - 2 * var(--gutter), 900px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.caso__titulo { font-family: var(--titulo); font-size: clamp(32px, 4vw, 56px); line-height: 1; letter-spacing: -.022em; font-weight: 800; font-variation-settings: 'wdth' 82, 'opsz' 72; text-wrap: balance; }
.caso__texto { margin-top: 20px; color: var(--papel-2); font-size: 18px; max-width: 56ch; }
.caso__fatos { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; }
.caso__fatos dt { font-family: var(--titulo); font-size: clamp(52px, 6vw, 84px); line-height: 1; font-weight: 800; color: var(--sol); letter-spacing: -.04em; }
.caso__fatos dd { margin: 10px 0 0; font-size: 14.5px; color: var(--papel-2); }

/* ---------- preço ---------- */
.preco { padding: 130px 0; background: var(--tinta-2); border-top: 1px solid var(--linha); }
.escada { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; }
.degrau { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--raio); background: var(--tinta-3); border: 1px solid var(--linha); }
.degrau--1 { min-height: 250px; background: linear-gradient(165deg, rgba(255, 91, 46, .28), var(--tinta-3) 60%); border-color: rgba(255, 91, 46, .55); }
.degrau--2 { min-height: 290px; } .degrau--3 { min-height: 330px; } .degrau--4 { min-height: 370px; }
.degrau__quem { font-family: var(--titulo); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.degrau__tag { align-self: flex-start; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linha-forte); color: var(--papel-2); }
.degrau--1 .degrau__tag { border-color: var(--sol); color: var(--sol); }
.degrau__mes { margin-top: auto; font-size: 15px; color: var(--papel-2); }
.degrau__mes b { font-family: var(--titulo); font-size: 46px; font-weight: 800; letter-spacing: -.04em; color: var(--papel); }
.degrau__impl { font-family: var(--mono); font-size: 12.5px; color: var(--papel-3); }
.preco__grade { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.preco__h3 { font-family: var(--titulo); font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 18px; }
.preco__inclui li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--linha); color: var(--papel-2); font-size: 16px; }
.preco__inclui li::before { content: ''; position: absolute; left: 4px; top: 18px; width: 10px; height: 6px; border-left: 2px solid var(--sol); border-bottom: 2px solid var(--sol); transform: rotate(-45deg); }
.preco__comeca ol { display: grid; gap: 12px; counter-reset: c; margin-bottom: 28px; }
.preco__comeca li { position: relative; padding-left: 36px; color: var(--papel-2); font-size: 16px; counter-increment: c; }
.preco__comeca li::before { content: counter(c, decimal-leading-zero); position: absolute; left: 0; top: 2px; font-family: var(--mono); font-size: 12.5px; color: var(--sol); }

/* ---------- faq ---------- */
.faq { padding: 130px 0; border-top: 1px solid var(--linha); }
.faq__in { width: min(100% - 2 * var(--gutter), 860px); }
.faq__lista { margin-top: 40px; }
.faq__item { border-bottom: 1px solid var(--linha); }
.faq__item summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-size: 19px; font-weight: 600; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background: linear-gradient(var(--papel-2), var(--papel-2)) center / 14px 2px no-repeat, linear-gradient(var(--papel-2), var(--papel-2)) center / 2px 14px no-repeat; transition: transform .3s var(--suave); }
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p { padding: 0 0 22px; color: var(--papel-2); font-size: 16px; max-width: 64ch; }

/* ---------- fecho ---------- */
.fim { position: relative; padding: 160px 0; overflow: hidden; border-top: 1px solid var(--linha); background: var(--tinta-2); }
.fim__sol { position: absolute; left: 50%; top: 50%; width: min(80vw, 760px); transform: translate(-50%, -50%); opacity: .14; pointer-events: none; }
.com-anim .fim__sol img { animation: girar 90s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.fim__in { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.fim__titulo { font-family: var(--titulo); font-size: clamp(40px, 6vw, 88px); line-height: .94; letter-spacing: -.03em; font-weight: 800; font-variation-settings: 'wdth' 78, 'opsz' 96; max-width: 14ch; text-wrap: balance; }
.fim__texto { color: var(--papel-2); font-size: 18px; max-width: 48ch; }

/* ---------- rodapé ---------- */
.rodape { padding: 48px 0; border-top: 1px solid var(--linha); }
.rodape__in { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 32px; align-items: start; }
.rodape__frase { margin-top: 12px; color: var(--papel-2); font-size: 14px; max-width: 40ch; }
.rodape__contatos { display: grid; gap: 8px; font-size: 14px; }
.rodape__contatos a { color: var(--papel-2); text-decoration: none; }
.rodape__contatos a:hover { color: var(--papel); }
.rodape__credito { font-size: 13px; color: var(--papel-3); }

/* ---------- revelar ---------- */
.com-anim [data-revela] { opacity: 0; transform: translateY(24px); }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .nav__links { gap: 18px; }
  .como__grade { grid-template-columns: 1fr; gap: 36px; }
  .como__pin { min-height: 0; }
  .sim { max-width: 720px; }
  .plano__grade { grid-template-columns: 1fr; }
  .plano__tela { max-width: 520px; transform: none; }
}
@media (max-width: 899px) {
  :root { --gutter: 16px; --nav: 62px; }
  body { font-size: 16px; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .nav.is-aberto .nav__links { display: grid; position: fixed; top: var(--nav); left: 0; right: 0; padding: 20px var(--gutter) 28px; gap: 16px; background: var(--tinta); border-bottom: 1px solid var(--linha); }
  .nav.is-aberto .nav__links a { font-size: 18px; color: var(--papel); }
  .heroi { min-height: 0; padding: calc(var(--nav) + 28px) 0 0; flex-direction: column; align-items: stretch; }
  .heroi__3d, .heroi__luz { display: none; }
  .heroi__estatico { position: relative; inset: auto; order: 2; height: 380px; margin-top: 8px; }
  .heroi__sol { width: 330px; right: 50%; transform: translate(50%, -50%); top: 50%; opacity: .55; }
  .heroi__tela--pc { width: 82%; right: 4%; top: 22%; transform: perspective(1200px) rotateY(-10deg) rotateX(5deg); }
  .heroi__tela--cel { width: 34%; right: auto; left: 6%; top: 8%; transform: perspective(1200px) rotateY(8deg) rotateZ(-3deg); }
  .heroi__in { order: 1; }
  .heroi__titulo { font-size: clamp(46px, 13.5vw, 66px); }
  .heroi__acoes .btn { flex: 1 1 auto; }
  .dores, .plano, .auto, .preco, .faq { padding: 84px 0; }
  .dores__lista { grid-template-columns: 1fr; gap: 26px; margin-top: 34px; }
  .como__pin, .painel__pin, .estoque__pin { min-height: 0; padding: 84px 0; }
  .sim { grid-template-columns: 1fr; }
  .sim__fone { max-width: 400px; width: 100%; margin-inline: auto; }
  .sim__telas { min-height: 340px; }
  .sim__repetir { position: static; margin: 10px auto 0; display: block; }
  .como__passos li { padding: 10px; grid-template-columns: 30px 1fr; }
  .como__passos li span { display: block; }
  .painel__pin { gap: 28px; }
  .painel__janela { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .painel__janela::-webkit-scrollbar { display: none; }
  .painel__trilho { padding-inline: var(--gutter); gap: 14px; }
  .tela { width: 86vw; scroll-snap-align: center; }
  .tela figcaption b { font-size: 19px; }
  .plano__grade { gap: 36px; margin-top: 36px; }
  .plano__garantias { grid-template-columns: 1fr; margin-top: 40px; }
  .estoque__grade { grid-template-columns: 1fr; gap: 36px; }
  .estoque__texto { order: -1; }
  .est { max-width: 100%; }
  .auto__lista { gap: 28px; margin-top: 36px; }
  .auto__linha { display: none; }
  .auto__item { grid-template-columns: 1fr; gap: 4px; }
  .auto__item h3 { font-size: 22px; }
  .caso { padding: 96px 0; }
  .caso__fatos { grid-template-columns: 1fr; gap: 28px; }
  .escada { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 36px; }
  .degrau { padding: 16px; }
  .degrau--1 { min-height: 200px; } .degrau--2 { min-height: 220px; } .degrau--3 { min-height: 200px; } .degrau--4 { min-height: 220px; }
  .degrau__quem { font-size: 18px; }
  .degrau__mes b { font-size: 34px; }
  .preco__grade { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
  .fim { padding: 110px 0; }
  .rodape__in { grid-template-columns: 1fr; gap: 24px; }
  .btn--g { height: 52px; padding: 0 22px; font-size: 15px; }
}
@media (max-width: 380px) {
  .sim__opcoes--chips { grid-template-columns: 1fr; }
  .degrau__mes b { font-size: 30px; }
}