/* Solucel · site.css (base: Solutattoo v2; re-skin 29/10/2026)
   Direção: ordem de serviço na bancada da assistência. Papel cru, tinta preta, azul de caneta; telas reais do painel
   impressas e coladas com fita. Nada de brilho, vidro, gradiente ou letreiro. Uma ideia por tela.
   Tipos: Bricolage Grotesque (títulos), Schibsted Grotesk (texto), IBM Plex Mono (números e etiquetas). */

:root {
  --papel: #ecebe7; --papel-2: #e2e1dc; --papel-3: #cfcdc6; --branco: #fafaf8;
  --tinta: #15110f; --tinta-2: #3a332d; --cinza: #5f564d;
  --verm: #1b4fd1;            /* azul de caneta para texto e preenchimento (contraste AA no papel; o nome da variável ficou da base) */
  --sol: #2f6bff;             /* só no símbolo */
  --ok: #2f8a5c;
  --raio: 4px; --nav: 68px; --wrap: 1240px; --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;
  --saida: cubic-bezier(.23, 1, .32, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--texto); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* fibra de papel: grão fixo, por cima, sem pegar clique */
body::after { content: ''; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p, li, dd, summary { text-wrap: pretty; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--tinta); color: var(--papel); }
:focus-visible { outline: 2px solid var(--verm); outline-offset: 3px; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinta); color: var(--papel); padding: 10px 14px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.pular:focus { top: 12px; }
.wrap { width: min(100%, var(--wrap)); margin-inline: auto; }
main > section { overflow-x: clip; }
.nav { padding-inline: var(--gutter); }
.verm { color: var(--verm); }
.titulo { font-family: var(--titulo); font-size: clamp(34px, 4.2vw, 58px); line-height: 1; letter-spacing: -.02em; font-weight: 800; font-variation-settings: 'wdth' 82, 'opsz' 72; max-width: 18ch; text-wrap: balance; }
.sub { margin-top: 14px; font-size: 18px; color: var(--cinza); max-width: 52ch; }

/* ---------- 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: 2px solid transparent; transition: background-color .2s, color .2s, border-color .2s, transform .12s var(--saida); }
.btn:active { transform: scale(.97); }
.btn--tinta { background: var(--tinta); color: var(--papel); }
.btn--linha { border-color: var(--tinta); color: var(--tinta); }
@media (hover: hover) and (pointer: fine) {
  .btn--tinta:hover { background: var(--verm); }
  .btn--linha:hover { background: var(--tinta); color: var(--papel); }
}
.btn--g { height: 56px; padding: 0 28px; font-size: 16px; }
.btn img { width: 18px; height: 18px; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav); background: var(--papel); border-bottom: 1.5px solid transparent; transition: border-color .25s; }
.nav.is-rolado { border-bottom-color: var(--tinta); }
.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; font-family: var(--titulo); font-weight: 800; font-size: 23px; letter-spacing: -.02em; font-variation-settings: 'wdth' 85, 'opsz' 48; }
.marca img { width: 34px; height: 34px; }
.marca b { color: var(--verm); font-weight: 800; }
.nav__links { display: flex; gap: 28px; }
.nav__links a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--tinta-2); }
.nav__links a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.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(--tinta); transition: transform .3s var(--saida); }
.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); }

/* ---------- folha impressa, fita e celular ---------- */
.folha { position: relative; background: var(--branco); padding: 10px; border-radius: 2px; box-shadow: 0 1px 0 rgba(21, 17, 15, .08), 0 18px 34px -18px rgba(40, 28, 18, .55), 0 2px 6px rgba(40, 28, 18, .12); }
.folha img { width: 100%; height: auto; border-radius: 1px; }
.fita { position: absolute; z-index: 2; width: 96px; height: 26px; background: rgba(214, 208, 192, .78); mix-blend-mode: multiply; box-shadow: 0 1px 2px rgba(40, 28, 18, .15); }
.fita--e { top: -12px; left: 18px; transform: rotate(-6deg); }
.fita--d { top: -12px; right: 18px; transform: rotate(5deg); }
.fita--m { top: -14px; left: 50%; margin-left: -48px; transform: rotate(-2deg); }
.fone { position: relative; border-radius: 34px; background: #0f0d0c; padding: 10px; box-shadow: 0 30px 50px -24px rgba(40, 28, 18, .7), inset 0 0 0 2px #2b2521; }
.fone img { border-radius: 26px; }

/* ---------- topo ---------- */
.topo { padding: calc(var(--nav) + 48px) var(--gutter) 72px; min-height: 100dvh; display: flex; align-items: center; }
.topo__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 48px; align-items: center; }
.topo__titulo { font-family: var(--titulo); font-size: clamp(50px, 6.6vw, 104px); line-height: .94; letter-spacing: -.03em; font-weight: 800; font-variation-settings: 'wdth' 78, 'opsz' 96; }
.topo__titulo span { display: block; }
.topo__sub { margin-top: 26px; font-size: clamp(18px, 1.5vw, 21px); color: var(--tinta-2); max-width: 34ch; }
.topo__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* notebook baixo (ex.: 1366×620): o botão do topo precisa aparecer sem rolar */
@media (min-width: 900px) and (max-height: 680px) {
  .topo { padding-top: calc(var(--nav) + 24px); }
  .topo__titulo { font-size: clamp(44px, 5.2vw, 72px); }
  .topo__sub { margin-top: 16px; font-size: 17px; }
  .topo__acoes { margin-top: 20px; }
}
.topo__grade > * { min-width: 0; }
.topo__parede { position: relative; width: 100%; height: min(600px, 70dvh); }
.topo__parede .folha--agenda { position: absolute; width: 92%; left: 0; top: 6%; transform: rotate(-3deg); }
.topo__parede .fone { position: absolute; width: min(36%, 230px); right: 4%; top: 22%; transform: rotate(4deg); }

/* ---------- riscos ---------- */
.riscos { padding: 96px var(--gutter); background: var(--papel-2); border-block: 1.5px solid var(--tinta); }
.riscos__rotulo { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza); }
.riscos__lista { margin-top: 22px; display: grid; gap: 10px; }
.riscos__lista li { font-family: var(--titulo); font-size: clamp(30px, 4.2vw, 62px); line-height: 1.08; letter-spacing: -.02em; font-weight: 800; font-variation-settings: 'wdth' 80, 'opsz' 72; }
.riscos__lista li { position: relative; width: fit-content; max-width: 100%; }
.riscos__lista li::after { content: ''; position: absolute; left: -.06em; right: -.06em; top: 54%; height: .11em; background: var(--verm); transform-origin: left center; pointer-events: none; }
.com-anim .riscos__lista li::after { transform: scaleX(0); transition: transform .9s var(--saida); }
.com-anim .riscos__lista li:nth-child(2)::after { transition-delay: .2s; }
.com-anim .riscos__lista li:nth-child(3)::after { transition-delay: .4s; }
.com-anim .riscos.is-visto .riscos__lista li::after { transform: none; }

/* ---------- fluxo ---------- */
.fluxo { padding: 110px var(--gutter) 40px; }
.fluxo__grade { display: grid; gap: 0; }
.fluxo__capitulos { display: grid; gap: 120px; }
.cap__num { display: block; font-family: var(--titulo); font-size: clamp(90px, 11vw, 170px); line-height: .8; font-weight: 800; color: transparent; -webkit-text-stroke: 2px var(--verm); font-variation-settings: 'wdth' 75, 'opsz' 96; letter-spacing: -.04em; }
.cap__titulo { margin-top: 18px; font-family: var(--titulo); font-size: clamp(32px, 3.8vw, 54px); line-height: 1.02; letter-spacing: -.02em; font-weight: 800; font-variation-settings: 'wdth' 82, 'opsz' 72; max-width: 15ch; text-wrap: balance; }
.cap__linha { margin-top: 14px; font-size: 19px; color: var(--tinta-2); max-width: 34ch; }
.cap .cena { margin-top: 40px; }
.fluxo__mesa:empty, .fluxo__progresso { display: none; }
.cena { position: relative; }
.cena__legenda { margin-top: 18px; font-family: var(--mono); font-size: 12px; color: var(--cinza); }
.com-anim .fluxo:not(.is-pin) .cap { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--saida), transform .6s var(--saida); }
.com-anim .fluxo:not(.is-pin) .cap.is-visto { opacity: 1; transform: none; }

/* cena 01: o site no celular da cliente */
.fone--grande { width: min(330px, 86%); margin-inline: auto; transform: rotate(-2deg); }
.pix { background: #141110; color: #f1ebe0; border-radius: 26px; padding: 30px 22px 26px; display: grid; gap: 12px; }
.pix__estudio { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #b3a99c; }
.pix__promo { font-family: var(--titulo); font-size: 28px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.pix__detalhe { font-size: 14px; color: #c9c0b4; }
.pix__valores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.pix__valores div { background: #211c19; border-radius: 10px; padding: 10px 12px; }
.pix__valores dt { font-size: 12px; color: #b3a99c; }
.pix__valores dd { font-family: var(--mono); font-size: 19px; font-weight: 500; }
.pix__valores .verm { color: #ff7a52; }
.pix__copia { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1.5px dashed #6b6158; border-radius: 10px; font-size: 14px; }
.pix__copia b { color: #ff7a52; }
.pix__codigo { font-size: 14px; color: #c9c0b4; }
.pix__codigo b { font-family: var(--mono); color: #f1ebe0; font-weight: 500; letter-spacing: .04em; }
.pix__nota { font-size: 13px; color: #b3a99c; border-top: 1px solid #2e2724; padding-top: 12px; }

/* cena 02: agenda + tira do pedido */
.folha--esq { transform: rotate(-1.4deg); }
.folha--tira { width: 94%; margin: -60px 0 0 auto; transform: rotate(1.6deg); }
/* cena 03: plano */
.folha--retrato { width: min(440px, 92%); margin-inline: auto; transform: rotate(1.4deg); }
.bilhete { position: relative; width: min(280px, 80%); margin: -40px 0 0 auto; padding: 16px 18px; background: #fff4cf; font-family: var(--mono); font-size: 13px; line-height: 1.5; transform: rotate(-3deg); box-shadow: 0 14px 24px -16px rgba(40, 28, 18, .6); }
/* cena 04: estoque + baixa */
.folha--dir { transform: rotate(-1deg); }
.baixa { position: relative; width: min(320px, 88%); margin: -70px 4% 0 auto; padding: 18px 20px 16px; background: var(--branco); font-family: var(--mono); font-size: 13px; transform: rotate(2.2deg); box-shadow: 0 18px 30px -18px rgba(40, 28, 18, .6); border-top: 3px solid var(--tinta); }
.baixa__cab { font-weight: 500; padding-bottom: 10px; border-bottom: 1.5px dashed var(--papel-3); }
.baixa__itens { display: grid; gap: 6px; padding-block: 10px; }
.baixa__itens li { display: flex; justify-content: space-between; gap: 12px; }
.baixa__itens b { color: var(--verm); font-weight: 500; }
.baixa__pe { padding-top: 10px; border-top: 1.5px dashed var(--papel-3); color: var(--cinza); font-size: 12px; }

/* ---- fluxo preso no scroll (computador com janela alta) ---- */
.fluxo.is-pin { padding: 0 var(--gutter); }
.fluxo.is-pin .fluxo__palco { height: 100dvh; display: flex; align-items: center; padding-top: var(--nav); }
.fluxo.is-pin .fluxo__grade { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; width: min(100%, 1320px); }
.fluxo.is-pin .fluxo__capitulos { position: relative; display: block; height: 420px; }
.fluxo.is-pin .cap { position: absolute; inset: 0; opacity: 0; transform: translateY(26px); transition: opacity .45s var(--saida), transform .55s var(--saida); pointer-events: none; }
.fluxo.is-pin .cap.is-ativo { opacity: 1; transform: none; pointer-events: auto; }
.fluxo.is-pin .fluxo__mesa { display: block; position: relative; height: calc(100dvh - var(--nav) - 80px); max-height: 760px; }
.fluxo.is-pin .cena { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(46px) rotate(2deg) scale(.96); transition: opacity .5s var(--saida), transform .7s var(--saida); pointer-events: none; }
.fluxo.is-pin .cena.is-ativa { opacity: 1; transform: none; pointer-events: auto; }
.fluxo.is-pin .cena.is-saiu { opacity: 0; transform: translateY(-36px) rotate(-2deg) scale(.97); }
.fluxo.is-pin .cena[data-cena="1"] .folha--esq, .fluxo.is-pin .cena[data-cena="3"] .folha--dir { width: 100%; }
.fluxo.is-pin .cena[data-cena="2"] .folha--retrato { width: auto; height: min(78%, 620px); }
.fluxo.is-pin .cena[data-cena="2"] .folha--retrato img { width: auto; height: 100%; }
.fluxo.is-pin .fone--grande { width: auto; height: min(88%, 640px); aspect-ratio: 330 / 640; }
.fluxo.is-pin .fone--grande .pix { height: 100%; align-content: start; }
.fluxo.is-pin .fluxo__progresso { display: flex; gap: 8px; position: absolute; left: 0; bottom: 0; }
.fluxo.is-pin .fluxo__grade { position: relative; }
.fluxo__progresso li { width: 34px; height: 4px; background: var(--papel-3); transition: background-color .3s; }
.fluxo__progresso li.is-ativo { background: var(--verm); }
/* a baixa do estoque entra item por item quando a cena aparece */
.com-anim .fluxo.is-pin .baixa__itens li { opacity: 0; transform: translateX(-8px); transition: opacity .35s var(--saida), transform .35s var(--saida); }
.com-anim .fluxo.is-pin .cena.is-ativa .baixa__itens li { opacity: 1; transform: none; }
.com-anim .fluxo.is-pin .cena.is-ativa .baixa__itens li:nth-child(2) { transition-delay: .12s; }
.com-anim .fluxo.is-pin .cena.is-ativa .baixa__itens li:nth-child(3) { transition-delay: .24s; }
.com-anim .fluxo.is-pin .cena.is-ativa .baixa__itens li:nth-child(4) { transition-delay: .36s; }
.com-anim .fluxo.is-pin .cena.is-ativa .baixa__itens li:nth-child(5) { transition-delay: .48s; }

/* ---------- também no painel ---------- */
.painel { padding: 120px var(--gutter); border-top: 1.5px solid var(--tinta); }
.painel__grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: start; }
.folha--promo { margin-top: 40px; transform: rotate(-1.2deg); }
.lista-flash { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 32px; padding-top: 8px; }
.lista-flash div { border-top: 2px solid var(--tinta); padding-top: 14px; }
.lista-flash dt { font-family: var(--titulo); font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }
.lista-flash dd { margin-top: 6px; font-size: 15.5px; color: var(--tinta-2); }

/* ---------- preço: tabela de parede, uma linha por plano ---------- */
.preco { padding: 120px var(--gutter); background: var(--papel-2); border-top: 1.5px solid var(--tinta); }
.planos { margin-top: 48px; border-top: 2px solid var(--tinta); }
.plano { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, .9fr) minmax(0, 1.25fr) auto; gap: 24px; align-items: center; padding: 28px 0; border-bottom: 1.5px solid var(--tinta); }
.plano__nome { font-family: var(--titulo); font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variation-settings: 'wdth' 82; }
.plano__preco { font-size: 15px; color: var(--tinta-2); }
.plano__preco b { display: block; font-family: var(--titulo); font-size: 46px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--tinta); }
.plano__det, .plano__impl { font-size: 15.5px; color: var(--tinta-2); }
.plano__impl a { color: var(--tinta); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.plano__btn { justify-self: end; }
.plano--anual { background: var(--branco); outline: 2px solid var(--verm); outline-offset: -2px; padding: 34px 24px 30px; margin-inline: -24px; }
.plano--anual .plano__det, .plano--anual .plano__impl { color: var(--tinta); font-weight: 600; }
.plano__selo { position: absolute; top: -12px; left: 24px; padding: 4px 10px; background: var(--verm); color: var(--papel); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.preco__porte { margin-top: 18px; font-size: 14px; color: var(--cinza); }
.preco__porte a { color: var(--tinta); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.preco__pe { margin-top: 52px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.preco__inclui { font-size: 17px; color: var(--tinta-2); max-width: 52ch; }
.preco__inclui b { color: var(--tinta); }
.preco__passos { margin-top: 24px; display: grid; gap: 10px; counter-reset: p; }
.preco__passos li { position: relative; padding-left: 34px; counter-increment: p; font-size: 16px; color: var(--tinta-2); }
.preco__passos li::before { content: counter(p, decimal-leading-zero); position: absolute; left: 0; top: 2px; font-family: var(--mono); font-size: 13px; color: var(--verm); }

/* ---------- faq ---------- */
.faq { padding: 120px var(--gutter); border-top: 1.5px solid var(--tinta); }
.faq__in { width: min(100% - 2 * var(--gutter), 840px); }
.faq__lista { margin-top: 36px; padding-top: 6px; border-top: 1.5px solid var(--tinta); }
.faq__lista details { border-bottom: 1.5px solid var(--tinta); }
.faq__lista summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-size: 19px; font-weight: 600; position: relative; }
.faq__lista summary::-webkit-details-marker { display: none; }
.faq__lista summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background: linear-gradient(var(--tinta), var(--tinta)) center / 14px 2px no-repeat, linear-gradient(var(--tinta), var(--tinta)) center / 2px 14px no-repeat; transition: transform .25s var(--saida); }
.faq__lista details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__lista p { padding-block: 0 22px; color: var(--tinta-2); font-size: 16.5px; max-width: 62ch; }

/* ---------- fecho ---------- */
.fim { padding: 140px var(--gutter); background: var(--tinta); color: var(--papel); }
.fim__in { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.fim__titulo { font-family: var(--titulo); font-size: clamp(40px, 6vw, 92px); line-height: .96; letter-spacing: -.03em; font-weight: 800; font-variation-settings: 'wdth' 78, 'opsz' 96; max-width: 15ch; }
.fim__texto { font-size: 19px; color: #cfc6b9; max-width: 44ch; }
.fim .btn--tinta { background: var(--papel); color: var(--tinta); }
.fim .btn--tinta:hover { background: #ff7a52; }
.fim .btn--tinta img { filter: invert(1); }

/* ---------- rodapé ---------- */
.rodape { padding: 44px var(--gutter); background: var(--tinta); color: #cfc6b9; border-top: 1px solid #2e2724; }
.rodape__in { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 32px; align-items: start; }
.rodape .marca { color: var(--papel); }
.rodape .marca b { color: #ff7a52; }
.rodape__frase { margin-top: 12px; font-size: 14px; max-width: 40ch; }
.rodape__contatos { display: grid; gap: 8px; font-size: 14px; }
.rodape__contatos a { text-decoration: none; }
.rodape__contatos a:hover { color: var(--papel); }
.rodape__credito { font-size: 13px; }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .topo__grade { gap: 32px; }
  .painel__grade { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 899px) {
  :root { --gutter: 16px; --nav: 60px; }
  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(--papel); border-bottom: 1.5px solid var(--tinta); }
  .nav.is-aberto .nav__links a { font-size: 18px; color: var(--tinta); }
  .topo { min-height: 0; padding: calc(var(--nav) + 28px) var(--gutter) 40px; }
  .topo__grade { grid-template-columns: 1fr; gap: 28px; }
  .topo__titulo { font-size: clamp(46px, 13.6vw, 70px); }
  .topo__acoes .btn { flex: 1 1 auto; }
  .topo__parede { height: 360px; }
  .topo__parede .folha--agenda { width: 94%; }
  .topo__parede .fone { width: min(38%, 150px); right: 5%; top: 28%; }
  .riscos { padding: 64px var(--gutter); }
  .fluxo { padding: 72px var(--gutter) 24px; }
  .fluxo__capitulos { gap: 80px; }
  .cap__linha { font-size: 17px; }
  .folha--tira { margin-top: -30px; }
  .bilhete, .baixa { margin-top: -24px; }
  .painel, .preco, .faq { padding: 80px var(--gutter); }
  .lista-flash { grid-template-columns: 1fr; gap: 24px; }
  .preco__pe { grid-template-columns: 1fr; gap: 36px; }
  .plano { grid-template-columns: 1fr; gap: 4px; padding: 26px 0; }
  .plano--anual { margin-inline: 0; padding: 32px 18px 24px; }
  .plano__btn { justify-self: stretch; margin-top: 12px; }
  .plano__preco b { font-size: 40px; }
  .fim { padding: 96px var(--gutter); }
  .rodape__in { grid-template-columns: 1fr; gap: 24px; }
  .btn--g { height: 52px; padding: 0 22px; font-size: 15px; }
}
@media (max-width: 380px) {
  .pix__promo { font-size: 24px; }
}


/* ======================================================================
   v3 (21/10/2026): chamariz do site com portfólio, resumo "para começar" por plano, cartão "só o site".
   Mesma gramática: papel, tinta, vermelhão, folha colada com fita. Movimento só de entrada, uma vez, curto.
   ====================================================================== */
.rotulo { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza); margin-bottom: 14px; }
.topo__nota { position: relative; margin-top: 22px; padding-left: 20px; font-size: 15px; color: var(--tinta-2); max-width: 40ch; }
.topo__nota i { position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: var(--verm); border-radius: 50%; }
.topo__nota a { color: var(--tinta); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- o site (chamariz) ---------- */
.site { padding: 120px var(--gutter); border-top: 1.5px solid var(--tinta); }
.site__grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.site .titulo { max-width: 16ch; }
.motivos { margin-top: 36px; display: grid; gap: 22px; }
.motivos div { border-top: 2px solid var(--tinta); padding-top: 14px; }
.motivos dt { font-family: var(--titulo); font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }
.motivos dd { margin-top: 6px; font-size: 16px; color: var(--tinta-2); max-width: 48ch; }
.site__nota { margin-top: 28px; font-family: var(--mono); font-size: 13px; color: var(--cinza); }
.folha--site { width: min(440px, 100%); margin-inline: auto; transform: rotate(1.6deg); padding: 14px 14px 12px; }
.vitrine { background: var(--papel); border: 1.5px solid var(--tinta); padding: 18px 18px 22px; display: grid; gap: 14px; }
.vitrine__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--cinza); }
.vitrine__topo b { font-family: var(--titulo); font-size: 17px; letter-spacing: -.01em; text-transform: none; color: var(--tinta); }
.vitrine__titulo { font-family: var(--titulo); font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.025em; font-variation-settings: 'wdth' 80; }
/* mosaico: a caixa toda tem proporção fixa e os blocos só preenchem as células (aspect-ratio nos blocos estourava a grade) */
.vitrine__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; aspect-ratio: 1.27; }
.vitrine__grade i { display: block; min-width: 0; min-height: 0; background: var(--tinta); border-radius: 2px; }
.vitrine__grade .t1 { grid-row: span 2; }
.vitrine__grade .t2, .vitrine__grade .t6 { background: var(--tinta-2); } .vitrine__grade .t3, .vitrine__grade .t5 { background: #6b6158; }
.vitrine__grade .t4 { background: var(--verm); }
.vitrine__promo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1.5px dashed var(--papel-3); font-size: 13px; color: var(--tinta-2); }
.vitrine__promo b { font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--tinta); }
.vitrine__cta { text-align: center; }
.vitrine__cta span { position: relative; display: inline-block; padding: 10px 22px; background: var(--tinta); color: var(--papel); border-radius: 999px; font-weight: 600; font-size: 14px; }
.vitrine__cta span::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -9px; height: 3px; background: var(--verm); transform-origin: left center; }
.folha--site .cena__legenda { margin-top: 12px; }
/* entradas (uma vez, quando a seção aparece) */
.com-anim .motivos div { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--saida), transform .55s var(--saida); }
.com-anim .motivos div:nth-child(2) { transition-delay: .1s; } .com-anim .motivos div:nth-child(3) { transition-delay: .2s; }
.com-anim .site.is-visto .motivos div { opacity: 1; transform: none; }
.com-anim .vitrine__grade i { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--saida), transform .45s var(--saida); }
.com-anim .vitrine__grade i:nth-child(2) { transition-delay: .06s; } .com-anim .vitrine__grade i:nth-child(3) { transition-delay: .12s; }
.com-anim .vitrine__grade i:nth-child(4) { transition-delay: .18s; } .com-anim .vitrine__grade i:nth-child(5) { transition-delay: .24s; } .com-anim .vitrine__grade i:nth-child(6) { transition-delay: .3s; }
.com-anim .site.is-visto .vitrine__grade i { opacity: 1; transform: none; }
.com-anim .vitrine__cta span::after { transform: scaleX(0); transition: transform .6s var(--saida) .55s; }
.com-anim .site.is-visto .vitrine__cta span::after { transform: none; }

/* ---------- preço v3: cabeça com carimbo, uma linha por plano com o "para começar", cartão só o site ---------- */
.preco__cabeca { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.preco .titulo { max-width: 20ch; }
.carimbo { justify-self: end; margin-right: 18px; display: inline-block; padding: 10px 18px; border: 3px solid var(--verm); border-radius: 6px; color: var(--verm); font-family: var(--titulo); font-weight: 800; font-size: clamp(18px, 2vw, 26px); letter-spacing: .05em; text-transform: uppercase; transform: rotate(-8deg); transform-origin: 80% 50%; mix-blend-mode: multiply; opacity: .92; white-space: nowrap; }
.com-anim .carimbo { opacity: 0; transform: rotate(-16deg) scale(1.25); transition: opacity .25s var(--saida) .15s, transform .4s var(--saida) .15s; }
.com-anim .preco__cabeca.is-visto .carimbo { opacity: .92; transform: rotate(-8deg) scale(1); }
.plano { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .95fr) 190px; align-items: center; isolation: isolate; }
.plano__btn { justify-self: stretch; }
.plano__id .plano__det { margin-top: 4px; }
.plano__preco b { font-size: 42px; }
.plano__impl b { color: var(--tinta); font-weight: 600; }
.plano--anual .plano__preco, .plano--anual .plano__impl { color: var(--tinta-2); font-weight: 400; }
.hoje { display: grid; gap: 2px; }
.hoje__rotulo { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); }
.hoje__valor { font-family: var(--titulo); font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--tinta); }
.hoje__valor i { position: relative; z-index: 0; font-style: normal; display: inline-block; padding: 0 .1em; margin-left: -.1em; }
.hoje__valor i::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: .2em; bottom: .04em; background: rgba(181, 48, 15, .16); transform-origin: left center; }
.com-anim .hoje__valor i::before { transform: scaleX(0); transition: transform .3s var(--saida) .1s; }
.com-anim .planos.is-visto .hoje__valor i::before { transform: none; }
.hoje__nota { font-size: 13.5px; color: var(--tinta-2); }
.so-site { position: relative; padding: 30px 28px 24px; background: var(--branco); border: 1.5px solid var(--tinta); box-shadow: 0 16px 28px -18px rgba(40, 28, 18, .6); transform: rotate(-1.2deg); }
.so-site__rotulo { font-family: var(--titulo); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.so-site__preco { margin-top: 10px; font-size: 15px; color: var(--tinta-2); }
.so-site__preco b { display: block; font-family: var(--titulo); font-size: 36px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--tinta); }
.site__btn { margin-top: 24px; }
@media (min-width: 900px) { .preco__pe { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.so-site__texto { margin-top: 14px; font-size: 16px; color: var(--tinta-2); }
.so-site__btn { margin-top: 18px; }
.so-site__pe { margin-top: 14px; font-family: var(--mono); font-size: 13px; color: var(--verm); }
.com-anim .so-site { opacity: 0; transform: rotate(-1.2deg) translateY(14px); transition: opacity .3s var(--saida), transform .35s var(--saida); }
.com-anim .preco__pe.is-visto .so-site { opacity: 1; transform: rotate(-1.2deg); }
.com-anim .carimbo { transition-duration: .2s, .3s; }
.com-anim .motivos div, .com-anim .vitrine__grade i { transition-duration: .35s, .35s; }
.plano:not(.plano--anual)::before { content: ''; position: absolute; inset: 0 -16px; z-index: -1; background: rgba(250, 250, 248, .55); opacity: 0; transition: opacity .2s; }
@media (hover: hover) and (pointer: fine) {
  .plano:not(.plano--anual):hover::before { opacity: 1; }
}
@media (max-width: 1100px) {
  .site__grade { grid-template-columns: 1fr; gap: 40px; }
  .plano { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .plano__btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 899px) {
  .site { padding: 80px var(--gutter); }
  .preco__cabeca { grid-template-columns: 1fr; gap: 18px; }
  .carimbo { justify-self: start; }
  .plano { grid-template-columns: 1fr; gap: 10px; }
  .plano__btn { justify-self: stretch; }
  .hoje { padding: 12px 14px; background: rgba(250, 250, 248, .7); border-left: 3px solid var(--verm); }
  .so-site { transform: none; padding: 26px 20px 22px; }
  .so-site__btn, .site__btn { width: 100%; max-width: 100%; white-space: normal; height: auto; min-height: 46px; padding: 10px 18px; text-align: center; }
  .com-anim .so-site { transform: translateY(22px); }
  .com-anim .preco__pe.is-visto .so-site { transform: none; }
}

/* ---------- modelos de site (modelos.html) e o modelo escolhido nos planos ---------- */
.site__modelos { margin-top: 16px; font-size: 16px; color: var(--tinta-2); max-width: 52ch; }
.site__modelos b { color: var(--tinta); }
.site__modelos a { color: var(--verm); font-weight: 600; text-underline-offset: 3px; }
.preco__modelo { margin-top: 18px; font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: var(--cinza); }
.preco__modelo b { color: var(--tinta); font-weight: 500; }
.preco__modelo a { color: var(--verm); }
.modelos { padding: calc(var(--nav) + 64px) var(--gutter) 56px; }
.modelos__cabeca { max-width: 780px; }
.modelos__lista { list-style: none; margin: 64px 0 0; padding: 0; display: grid; gap: 88px; }
.modelo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.modelo:nth-child(even) .folha--modelo { order: 2; }
.folha--modelo { margin: 0 24px 36px 0; padding: 12px 12px 44px; transform: rotate(-1.2deg); }
.modelo:nth-child(even) .folha--modelo { margin: 0 0 36px 24px; transform: rotate(1.1deg); }
.modelo__pc { display: block; width: 100%; height: auto; border: 1px solid var(--papel-3); background: var(--papel-2); }
.modelo__cel { position: absolute; right: -22px; bottom: -28px; width: 28%; max-width: 150px; height: auto; border: 6px solid var(--tinta); border-radius: 22px; background: var(--tinta); box-shadow: 0 20px 32px -16px rgba(40, 28, 18, .65); transform: rotate(3deg); }
.modelo:nth-child(even) .modelo__cel { right: auto; left: -22px; transform: rotate(-3deg); }
.modelo__texto .rotulo { margin-bottom: 10px; }
.modelo__nome { font-family: var(--titulo); font-size: clamp(36px, 4.2vw, 56px); font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variation-settings: 'wdth' 82, 'opsz' 72; }
.modelo__para { margin-top: 10px; font-size: 20px; color: var(--tinta-2); }
.modelo__marcas { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; max-width: 46ch; }
.modelo__marcas li { border-top: 1.5px solid var(--tinta); padding-top: 8px; font-size: 16px; color: var(--tinta-2); }
.modelo__marcas b { display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); }
.modelo__acoes { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.modelo__acoes .is-escolhido::after { content: '· escolhido'; font-weight: 500; opacity: .8; }
.modelos__nota { margin-top: 88px; border-top: 2px solid var(--tinta); padding-top: 22px; display: grid; gap: 10px; max-width: 70ch; color: var(--tinta-2); font-size: 17px; }
.modelos__nota b { color: var(--tinta); }
.modelos__pe { font-family: var(--mono); font-size: 12.5px; color: var(--cinza); }
.modelos__nota .btn { justify-self: start; margin-top: 8px; }
/* entradas de uma vez, no compasso do resto da página */
.com-anim .modelo .folha--modelo, .com-anim .modelo .modelo__texto > * { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--saida), transform .55s var(--saida); }
.com-anim .modelo .folha--modelo { transform: translateY(18px) rotate(-1.2deg); }
.com-anim .modelo:nth-child(even) .folha--modelo { transform: translateY(18px) rotate(1.1deg); }
.com-anim .modelo.is-visto .folha--modelo { opacity: 1; transform: rotate(-1.2deg); }
.com-anim .modelo:nth-child(even).is-visto .folha--modelo { opacity: 1; transform: rotate(1.1deg); }
.com-anim .modelo.is-visto .modelo__texto > * { opacity: 1; transform: none; }
.com-anim .modelo.is-visto .modelo__texto > :nth-child(2) { transition-delay: .06s; }
.com-anim .modelo.is-visto .modelo__texto > :nth-child(3) { transition-delay: .12s; }
.com-anim .modelo.is-visto .modelo__texto > :nth-child(4) { transition-delay: .18s; }
.com-anim .modelo.is-visto .modelo__texto > :nth-child(5) { transition-delay: .24s; }
.com-anim .modelos__cabeca, .com-anim .modelos__nota { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--saida), transform .5s var(--saida); }
.com-anim .modelos__cabeca.is-visto, .com-anim .modelos__nota.is-visto { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .modelos { padding-top: calc(var(--nav) + 40px); }
  .modelos__lista { gap: 64px; margin-top: 44px; }
  .modelo { grid-template-columns: 1fr; gap: 40px; }
  .modelo:nth-child(even) .folha--modelo { order: 0; margin: 0 0 32px 0; }
  .folha--modelo { margin: 0 0 32px 0; padding-bottom: 36px; }
  .modelo__cel, .modelo:nth-child(even) .modelo__cel { right: 8px; left: auto; bottom: -24px; width: 26%; transform: rotate(3deg); }
  .modelo__para { font-size: 18px; }
}