/* Vitrine LS · skills, serviços e material grátis para advogados.
   Visual: oficina escura e quente, títulos em minúsculas, rótulos em fonte mono,
   personagens em pixel art debaixo de luminária. */
:root {
  --fundo: #12100e;
  --fundo-2: #181512;
  --cartao: #1d1915;
  --cartao-2: #241f1a;
  --borda: #3a322a;
  --borda-2: #4d4237;
  --texto: #f1e9de;
  --texto-2: #c8bcad;
  --texto-3: #8f8273;
  --terra: #cf7650;
  --terra-2: #e08d66;
  --ouro: #e9c062;
  --verde: #6cc08b;
  --verm: #e8857a;
  --raio: 16px;
  --titulo: "Bricolage Grotesque", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gut: clamp(16px, 5vw, 56px);
  --larg: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--titulo); font-size: 17px; line-height: 1.6; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0 0 14px; }
.mono { font-family: var(--mono); }
.pix { image-rendering: pixelated; image-rendering: crisp-edges; }
.cx { max-width: var(--larg); margin: 0 auto; padding: 0 var(--gut); }
.oculto { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }

/* ---------- topo ---------- */
.faixa { background: #2a2219; border-bottom: 1px solid var(--borda); font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); text-align: center; padding: 9px 16px; }
.faixa a { color: var(--fundo); background: var(--ouro); border-radius: 999px; padding: 3px 12px; margin-left: 10px; text-decoration: none; letter-spacing: .04em; font-weight: 700; }
.topo { position: sticky; top: 0; z-index: 20; background: rgba(18,16,14,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda); }
.topo .cx { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 66px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.marca b { background: var(--terra); color: var(--fundo); border-radius: 6px; padding: 0 6px; font-size: 15px; }
.nav { display: flex; align-items: center; gap: 22px; font-size: 15px; color: var(--texto-2); }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--texto); }
@media (max-width: 900px) { .nav .so-desk { display: none; } }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 24px; font: 700 16px/1 var(--titulo); cursor: pointer; text-decoration: none; transition: transform .15s, background .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-terra { background: var(--terra); color: #1a110b; }
.btn-terra:hover { background: var(--terra-2); }
.btn-ouro { background: var(--ouro); color: #1d1606; }
.btn-linha { background: transparent; color: var(--texto); border: 1.5px solid var(--borda-2); }
.btn-linha:hover { border-color: var(--texto-3); }
.btn-p { padding: 9px 16px; font-size: 14px; }
.btn[disabled] { opacity: .6; cursor: wait; transform: none; }

/* ---------- herói ---------- */
.heroi { padding: 72px 0 40px; }
.heroi .cx { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 900px) { .heroi .cx { grid-template-columns: 1fr; } }
.olho { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; color: var(--terra); margin-bottom: 18px; }
.heroi h1 { font-size: clamp(44px, 7vw, 78px); font-weight: 800; }
.heroi h1 em, h2 em { font-style: normal; color: var(--terra); }
.heroi .lede { font-size: 19px; color: var(--texto-2); max-width: 58ch; margin: 26px 0 30px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.numeros { display: grid; gap: 12px; }
.numero { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo-2); padding: 20px 24px; display: flex; align-items: center; gap: 18px; }
.numero b { font-size: 44px; font-weight: 800; color: var(--terra); letter-spacing: -0.03em; min-width: 110px; font-variant-numeric: tabular-nums; }
.numero span { font-family: var(--mono); font-size: 12.5px; color: var(--texto-2); line-height: 1.5; }
.dica-oficina { font-family: var(--mono); font-size: 13px; color: var(--texto-3); text-align: center; margin: 46px 0 18px; }

/* ---------- oficina (cenas com luminária) ---------- */
.oficina { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); background: #0d0b09; }
@media (max-width: 900px) { .oficina { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.posto { position: relative; height: 250px; border: 0; border-right: 1px solid #1f1a15; background: transparent; cursor: pointer; padding: 0; color: inherit; font: inherit; overflow: hidden; }
.posto:last-child { border-right: 0; }
.cena { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 22%, rgba(233,170,90,.0), transparent 70%); transition: background .3s; }
.cena::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 42px; background: #4a3d30; transform: translateX(-50%); }
.cena::after { content: ""; position: absolute; left: 50%; top: 40px; width: 56px; height: 18px; background: #6b5641; border-radius: 28px 28px 4px 4px; transform: translateX(-50%); box-shadow: 0 10px 22px 6px rgba(233,170,90,.10); }
.posto:hover .cena, .posto.ativo .cena { background: radial-gradient(ellipse 60% 60% at 50% 20%, rgba(233,170,90,.24), transparent 70%); }
.posto:hover .cena::after, .posto.ativo .cena::after { background: #e0b066; box-shadow: 0 14px 40px 14px rgba(233,170,90,.30); }
.mesa { position: absolute; left: 12%; right: 12%; bottom: 52px; height: 14px; background: #5a3d27; border-radius: 3px; }
.mesa::before, .mesa::after { content: ""; position: absolute; bottom: -38px; width: 10px; height: 38px; background: #3f2a1b; }
.mesa::before { left: 8%; } .mesa::after { right: 8%; }
.posto img { position: absolute; left: 50%; bottom: 66px; width: 112px; height: 112px; transform: translateX(-50%); filter: brightness(.62) saturate(.8); transition: filter .3s; border-radius: 10px; }
.posto:hover img, .posto.ativo img { filter: none; }
.rotulo { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-family: var(--mono); font-size: 12.5px; background: #0d0b09; border: 1px solid var(--borda); border-radius: 999px; padding: 4px 12px; white-space: nowrap; color: var(--texto-2); }
.posto.ativo .rotulo { background: var(--ouro); color: #1d1606; border-color: var(--ouro); }

/* ---------- seções ---------- */
.sec { padding-top: 96px; padding-bottom: 24px; scroll-margin-top: 70px; }
.sec-cab { max-width: 760px; margin-bottom: 36px; }
.sec h2 { font-size: clamp(34px, 5vw, 54px); font-weight: 800; }
.sec .lede { color: var(--texto-2); font-size: 18px; margin-top: 16px; }

/* ---------- catálogo ---------- */
.catalogo { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .catalogo { grid-template-columns: 1fr; } }
.areas { display: grid; gap: 10px; position: sticky; top: 86px; }
@media (max-width: 900px) { .areas { position: static; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.area-btn { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--fundo-2); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; cursor: pointer; color: var(--texto); font: inherit; }
.area-btn img { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.area-btn b { display: block; font-family: var(--mono); font-size: 13px; font-weight: 600; }
.area-btn small { font-family: var(--mono); font-size: 11.5px; color: var(--texto-3); }
.area-btn.ativo { border-color: var(--ouro); background: #2a2417; }
.area-btn.ativo small { color: var(--ouro); }
.painel-area { border: 1px solid var(--borda); border-top: 3px solid var(--ouro); border-radius: 20px; background: var(--fundo-2); padding: 32px; }
.painel-area .cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.painel-area h3 { font-size: 34px; font-weight: 800; }
.painel-area .desc { color: var(--texto-2); margin-top: 10px; max-width: 64ch; }
.chip { font-family: var(--mono); font-size: 12px; border-radius: 999px; padding: 5px 12px; background: var(--ouro); color: #1d1606; white-space: nowrap; }
.divisor { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12.5px; color: var(--ouro); margin: 26px 0 14px; }
.divisor span { color: var(--texto-3); }
.divisor::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.prod { display: flex; flex-direction: column; background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; cursor: pointer; text-align: left; color: inherit; font: inherit; padding: 0; transition: border-color .2s, transform .2s; }
.prod:hover { border-color: var(--borda-2); transform: translateY(-2px); }
.prod .palco { position: relative; height: 150px; background: radial-gradient(ellipse 55% 70% at 50% 8%, rgba(233,170,90,.22), transparent 70%), #15120f; border-bottom: 1px solid var(--borda); }
.prod .palco::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 22px; background: #4a3d30; }
.prod .palco::after { content: ""; position: absolute; left: 50%; top: 20px; width: 40px; height: 12px; background: #e0b066; border-radius: 20px 20px 3px 3px; transform: translateX(-50%); box-shadow: 0 10px 30px 10px rgba(233,170,90,.25); }
.prod .palco i { position: absolute; left: 14%; right: 14%; bottom: 18px; height: 10px; background: #5a3d27; border-radius: 3px; }
.prod .palco img { position: absolute; left: 50%; bottom: 28px; width: 80px; height: 80px; transform: translateX(-50%); border-radius: 8px; }
.prod .corpo { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.prod .nome { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--texto); }
.prod .resumo { font-size: 15px; color: var(--texto-2); line-height: 1.5; flex: 1; }
.prod .pe { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-family: var(--mono); font-size: 12.5px; }
.prod .preco { color: var(--terra-2); font-weight: 700; font-family: var(--titulo); font-size: 17px; }
.prod .ver { color: var(--texto-3); }

/* ---------- kits ---------- */
.kits { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.kit { background: var(--fundo-2); border: 1px solid var(--borda); border-radius: var(--raio); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.kit.destaque { border-color: var(--terra); background: linear-gradient(180deg, #2a1d15, var(--fundo-2)); }
.kit h3 { font-size: 26px; font-weight: 800; }
.kit .itens { display: flex; gap: 8px; flex-wrap: wrap; }
.kit .itens img { width: 48px; height: 48px; border-radius: 8px; }
.kit p { color: var(--texto-2); font-size: 15.5px; }
.kit ul { margin: 0; padding-left: 18px; color: var(--texto-2); font-size: 15px; }
.kit .btn { align-self: flex-start; margin-top: auto; }

/* ---------- serviços ---------- */
.servicos { display: grid; gap: 16px; }
.serv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 26px; cursor: pointer; text-align: left; color: inherit; font: inherit; transition: border-color .2s; }
.serv:hover { border-color: var(--borda-2); }
.serv img { width: 96px; height: 96px; border-radius: 12px; }
.serv .tag { font-family: var(--mono); font-size: 12px; color: var(--ouro); }
.serv h3 { font-size: 26px; font-weight: 800; margin: 6px 0 8px; }
.serv p { color: var(--texto-2); font-size: 15.5px; margin: 0; }
.serv .pe { font-family: var(--mono); font-size: 12.5px; color: var(--terra-2); margin-top: 12px; }

/* ---------- método ---------- */
.metodo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--borda); border-radius: 20px; overflow: hidden; }
@media (max-width: 900px) { .metodo { grid-template-columns: 1fr 1fr; } }
.passo { padding: 30px 26px; border-right: 1px solid var(--borda); background: var(--fundo-2); }
.passo:last-child { border-right: 0; background: #2a1d15; }
.passo .n { font-family: var(--mono); color: var(--terra); font-size: 13px; }
.passo h3 { font-size: 24px; font-weight: 800; margin: 10px 0; }
.passo p { color: var(--texto-2); font-size: 15px; margin: 0; }

/* ---------- grátis ---------- */
.gratis { border: 1px solid #6a4a2a; border-radius: 24px; background: radial-gradient(ellipse 70% 120% at 85% 0%, rgba(233,192,98,.18), transparent 60%), #1c1611; padding: 48px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px; align-items: center; }
@media (max-width: 900px) { .gratis { grid-template-columns: 1fr; padding: 30px; } }
.gratis h2 { font-size: clamp(32px, 4.6vw, 48px); font-weight: 800; }
.gratis ul { list-style: none; padding: 0; margin: 18px 0 26px; }
.gratis li { padding: 6px 0 6px 28px; position: relative; color: var(--texto-2); }
.gratis li::before { content: "✓"; position: absolute; left: 0; color: var(--verde); font-weight: 800; }
.capa-livro { aspect-ratio: 3/4; max-width: 300px; margin: 0 auto; border-radius: 10px 18px 18px 10px; background: linear-gradient(135deg, #2b231b, #16120e); border: 1px solid var(--borda-2); box-shadow: 18px 22px 0 -6px #0d0b09, 0 30px 60px rgba(0,0,0,.5); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; transform: rotate(-3deg); }
.capa-livro .mono { font-size: 11.5px; color: var(--ouro); letter-spacing: .1em; }
.capa-livro h3 { font-size: 30px; font-weight: 800; }
.capa-livro h3 em { font-style: normal; color: var(--terra); }
.capa-livro img { width: 80px; height: 80px; border-radius: 8px; }

/* ---------- quem criou ---------- */
.pessoa { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 28px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; }
.pessoa h3 { font-size: 26px; font-weight: 800; }
.pessoa .mono { font-size: 12.5px; color: var(--terra-2); }
.pessoa p { color: var(--texto-2); font-size: 15.5px; margin: 10px 0 0; }
.provas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
@media (max-width: 800px) { .provas { grid-template-columns: 1fr 1fr; } }
.prova { border: 1px solid var(--borda); border-radius: 14px; padding: 18px 20px; }
.prova b { display: block; font-size: 34px; font-weight: 800; color: var(--ouro); letter-spacing: -0.02em; }
.prova span { font-family: var(--mono); font-size: 12px; color: var(--texto-2); }

/* ---------- faq ---------- */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo-2); padding: 18px 22px; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--terra); }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--texto-2); margin: 12px 0 0; }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--borda); margin-top: 96px; padding: 36px 0 56px; color: var(--texto-3); font-size: 14px; }
.rodape .cx { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.rodape a { color: var(--texto-2); }

/* ---------- gaveta do produto ---------- */
.veu { position: fixed; inset: 0; background: rgba(5,4,3,.72); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .2s; }
.veu.on { opacity: 1; pointer-events: auto; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--fundo-2); border-left: 1px solid var(--borda); z-index: 50; transform: translateX(102%); transition: transform .25s ease; overflow-y: auto; }
.gaveta.on { transform: none; }
.gaveta .fechar { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borda-2); background: var(--fundo); color: var(--texto); font-size: 20px; cursor: pointer; }
.gaveta .topo-g { background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(233,170,90,.22), transparent 70%), #15120f; padding: 40px 32px 26px; border-bottom: 1px solid var(--borda); }
.gaveta .topo-g img { width: 112px; height: 112px; border-radius: 12px; }
.gaveta .topo-g .mono { font-size: 13px; color: var(--terra-2); margin: 18px 0 6px; }
.gaveta h3 { font-size: 32px; font-weight: 800; }
.gaveta .cont { padding: 26px 32px 40px; }
.gaveta .cont p { color: var(--texto-2); }
.gaveta h4 { font-family: var(--mono); font-size: 12.5px; color: var(--ouro); letter-spacing: .08em; text-transform: uppercase; margin: 22px 0 10px; }
.gaveta ul { margin: 0; padding-left: 18px; color: var(--texto-2); }
.gaveta li { margin-bottom: 6px; }

/* ---------- formulários ---------- */
.form { background: var(--cartao); border: 1px solid var(--borda); border-radius: 18px; padding: 26px; margin-top: 24px; }
.form h4 { margin-top: 0 !important; }
.f { margin-bottom: 16px; }
.f > label, .f > .leg { display: block; font-weight: 700; font-size: 15px; margin-bottom: 7px; }
.f input[type=text], .f input[type=tel], .f select, .f textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--borda-2); border-radius: 10px; background: var(--fundo); color: var(--texto); }
.f textarea { min-height: 84px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px rgba(207,118,80,.22); }
.opcoes { display: grid; gap: 8px; }
.opcoes.duas { grid-template-columns: 1fr 1fr; }
.op { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--borda-2); border-radius: 10px; padding: 11px 13px; cursor: pointer; background: var(--fundo); font-size: 15px; line-height: 1.4; }
.op input { margin-top: 3px; accent-color: var(--terra); flex: none; }
.op:has(input:checked) { border-color: var(--terra); background: #2a1d15; }
.op small { display: block; color: var(--texto-3); font-size: 13px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--texto-2); font-weight: 400 !important; }
.consent input { margin-top: 4px; accent-color: var(--terra); flex: none; }
.erro { color: var(--verm); font-size: 13.5px; margin: 6px 0 0; display: none; }
.f.invalido .erro { display: block; }
.f.invalido input, .f.invalido select, .f.invalido .op { border-color: var(--verm); }
.ok-msg { text-align: center; padding: 10px 0; }
.ok-msg h4 { font-family: var(--titulo) !important; font-size: 24px !important; color: var(--texto) !important; text-transform: none !important; letter-spacing: -0.02em !important; }

/* ---------- página do material grátis ---------- */
.entrada { padding: 64px 0 40px; }
.entrada .cx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: start; }
@media (max-width: 900px) { .entrada .cx { grid-template-columns: 1fr; } }
.entrada h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 800; }
.entrada h1 em { font-style: normal; color: var(--terra); }
.entrada .lede { color: var(--texto-2); font-size: 18px; margin: 20px 0; }
.entrada ul { list-style: none; padding: 0; margin: 0; }
.entrada li { padding: 7px 0 7px 28px; position: relative; color: var(--texto-2); }
.entrada li::before { content: "✓"; position: absolute; left: 0; color: var(--verde); font-weight: 800; }
.entrada .form { margin-top: 0; }
.entrada .form .btn { width: 100%; justify-content: center; }
.pronto { text-align: center; }
.pronto h2 { font-size: 30px; font-weight: 800; margin-bottom: 8px; }
.pronto p { color: var(--texto-2); }
.pronto .acoes { justify-content: center; margin-top: 16px; }

/* ---------- complementos ---------- */
.chip-topo { align-self: flex-start; }
.opc { font-weight: 400; color: var(--texto-3); }
.itens-g { display: flex; gap: 8px; flex-wrap: wrap; }
.gaveta .topo-g .itens-g img { width: 64px; height: 64px; }
.nos-foto { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; align-items: stretch; }
@media (max-width: 860px) { .nos-foto { grid-template-columns: 1fr; } }
.nos-foto > picture { display: contents; }
.nos-foto > picture > source { display: none; }
.nos-foto > img, .nos-foto > picture > img { width: 100%; height: 100%; max-height: 640px; object-fit: cover; object-position: center 20%; border-radius: 20px; border: 1px solid var(--borda); }
.nos-texto { display: flex; flex-direction: column; gap: 14px; }
.nos-texto .pessoa { display: block; }
.nos-texto .provas { grid-template-columns: 1fr 1fr; margin-top: auto; }
.form-tit { font-size: 26px; font-weight: 800; margin-bottom: 4px; }
.form-mini { color: var(--texto-3); font-size: 14px; margin-bottom: 20px; }
.pronto-av { width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 12px; }
.pronto-depois { margin-top: 18px; font-size: 15px; }
.texto-legal { max-width: 780px; }
.texto-legal h1.tit-legal { font-size: 44px; font-weight: 800; margin-bottom: 20px; }
.texto-legal h3 { font-size: 22px; margin: 28px 0 8px; }
.texto-legal p, .texto-legal li { color: var(--texto-2); }

/* personagens sem fundo: um leve contorno de luz para destacar do escuro */
.pix { filter: drop-shadow(0 0 1px rgba(241,233,222,.25)); }
.serv img, .area-btn img, .kit .itens img, .capa-livro img, .pronto-av { background: radial-gradient(circle at 50% 35%, rgba(233,170,90,.18), transparent 70%); }

@media (max-width: 600px) {
  .sec { padding-top: 64px; }
  .numero { padding: 16px 18px; gap: 14px; }
  .numero b { font-size: 34px; min-width: 84px; }
  .painel-area { padding: 22px 18px; }
  .gratis { padding: 26px 20px; }
  .serv { grid-template-columns: 64px minmax(0, 1fr); padding: 20px; gap: 14px; }
  .serv img { width: 64px; height: 64px; }
}

.compra { margin-top: 26px; display: grid; gap: 8px; }
.compra .btn { justify-content: center; }
.compra p { font-family: var(--mono); font-size: 12px; color: var(--texto-3); text-align: center; margin: 0; }
.marca { font-size: 18px; }

/* ---------- topo centralizado: marca | menu no centro | botão ---------- */
.topo-grade { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; }
.topo-grade .nav { justify-self: center; gap: 26px; }
.topo-grade .topo-cta { justify-self: end; }
@media (max-width: 900px) {
  .topo-grade { grid-template-columns: 1fr auto; }
  .topo-grade .nav { display: none; }
}

/* ---------- herói: selos ---------- */
.selos { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.selos span { font-family: var(--mono); font-size: 12px; color: var(--texto-2); border: 1px solid var(--borda); border-radius: 999px; padding: 5px 12px; }
.selos span::before { content: "✓ "; color: var(--verde); }

/* ---------- problema ---------- */
.dores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .dores { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .dores { grid-template-columns: 1fr; } }
.dor { background: var(--fundo-2); border: 1px solid var(--borda); border-top: 3px solid var(--verm); border-radius: 14px; padding: 24px; }
.dor h3 { font-size: 22px; font-weight: 800; margin: 8px 0 10px; }
.dor p { color: var(--texto-2); font-size: 15.5px; margin: 0; }

/* ---------- como funciona ---------- */
.metodo.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metodo.tres .passo:last-child { background: var(--fundo-2); }
@media (max-width: 800px) { .metodo.tres { grid-template-columns: 1fr; } .metodo.tres .passo { border-right: 0; border-bottom: 1px solid var(--borda); } }

/* ---------- curso ---------- */
.curso { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; border: 1px solid var(--borda); border-radius: 24px; padding: 44px; background: radial-gradient(ellipse 60% 90% at 0% 0%, rgba(207,118,80,.14), transparent 60%), var(--fundo-2); }
@media (max-width: 900px) { .curso { grid-template-columns: 1fr; padding: 26px 20px; } }
.curso h2 { font-size: clamp(32px, 4.4vw, 48px); font-weight: 800; }
.curso .lede { color: var(--texto-2); font-size: 18px; margin: 16px 0 22px; }
.modulos { margin: 0; padding: 0; list-style: none; counter-reset: m; display: grid; gap: 8px; }
.modulos li { counter-increment: m; display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; border: 1px solid var(--borda); border-radius: 10px; padding: 10px 14px; color: var(--texto-2); font-size: 15.5px; }
.modulos li::before { content: counter(m, decimal-leading-zero); font-family: var(--mono); color: var(--terra); font-size: 13px; }
.fundador { background: #2a2017; border: 1px solid #6a4a2a; border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.fundador img { width: 112px; height: 112px; }
.fundador h3 { font-size: 24px; font-weight: 800; }
.fundador ul { margin: 0; padding-left: 18px; color: var(--texto-2); }
.fundador .btn { justify-content: center; }

/* ---------- para quem é ---------- */
.para-quem { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 800px) { .para-quem { grid-template-columns: 1fr; } }
.pq { border: 1px solid var(--borda); border-radius: 16px; padding: 28px; background: var(--fundo-2); }
.pq h3 { font-size: 24px; font-weight: 800; margin-bottom: 12px; }
.pq ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pq li { padding-left: 28px; position: relative; color: var(--texto-2); }
.pq.sim h3 { color: var(--verde); } .pq.sim li::before { content: "✓"; position: absolute; left: 0; color: var(--verde); font-weight: 800; }
.pq.nao h3 { color: var(--verm); } .pq.nao li::before { content: "✕"; position: absolute; left: 0; color: var(--verm); font-weight: 800; }

/* ---------- fecho ---------- */
.final { text-align: center; border: 1px solid var(--borda); border-radius: 24px; padding: 56px 24px; background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(233,170,90,.16), transparent 70%), var(--fundo-2); }
.final h2 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 800; }
.final h2 em { font-style: normal; color: var(--terra); }
.final .acoes { justify-content: center; margin-top: 26px; }

.servicos { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }
@media (max-width: 960px) { .servicos { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .posto { height: 190px; } .posto img { width: 96px; height: 96px; bottom: 60px; } }

/* ---------- dores clicáveis ---------- */
.dor-cta { margin-top: auto; padding-top: 12px; font-family: var(--mono); font-size: 13px; color: var(--terra-2); }

/* ---------- antes e depois ---------- */
.ad { border: 1px solid var(--borda); border-radius: 20px; overflow: hidden; }
.ad-cab, .ad-linha { display: grid; grid-template-columns: 1fr 1fr; }
.ad-cab span { padding: 16px 24px; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.ad-cab span:first-child { color: var(--verm); background: #1d1513; }
.ad-cab span:last-child { color: var(--verde); background: #131c16; }
.ad-linha p { margin: 0; padding: 16px 24px; border-top: 1px solid var(--borda); font-size: 16px; }
.ad-linha p:first-child { color: var(--texto-3); text-decoration: line-through; text-decoration-color: rgba(232,133,122,.45); }
.ad-linha p:last-child { color: var(--texto); border-left: 1px solid var(--borda); }
@media (max-width: 700px) { .ad-linha p { padding: 14px 16px; font-size: 15px; } .ad-cab span { padding: 12px 16px; } }

/* ---------- prompts ---------- */
.tipo-prompt { font-family: var(--mono); font-size: 11px; color: #1d1606; background: var(--ouro); border-radius: 4px; padding: 1px 6px; margin-right: 4px; vertical-align: 1px; }
.biblio { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; border: 1px solid #6a4a2a; border-radius: 24px; padding: 44px; background: radial-gradient(ellipse 60% 100% at 100% 0%, rgba(233,192,98,.14), transparent 60%), var(--fundo-2); }
@media (max-width: 900px) { .biblio { grid-template-columns: 1fr; padding: 26px 20px; } }
.biblio h2 { font-size: clamp(32px, 4.4vw, 48px); font-weight: 800; }
.biblio .lede { color: var(--texto-2); font-size: 18px; margin: 16px 0 24px; }
.bib-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bib-area { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--fundo); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; color: var(--texto); font: inherit; cursor: pointer; }
.bib-area:hover { border-color: var(--ouro); }
.bib-area img { width: 48px; height: 48px; flex: none; }
.bib-area b { display: block; font-family: var(--mono); font-size: 13px; font-weight: 600; }
.bib-area small { font-family: var(--mono); font-size: 12px; color: var(--ouro); }

/* ---------- revisão 2026-11-08 ----------
   Fica no fim de propósito: as regras com @media daqui precisam vencer as de celular acima. */
:root { color-scheme: dark; --borda-campo: #7a6b5c; }

/* pular para o conteúdo */
.pular { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ouro); color: #1d1606; padding: 8px 14px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.pular:focus { top: 8px; }
main:focus { outline: none; }

/* herói compacto: a oficina com as luminárias aparece na primeira dobra */
.heroi { padding: 48px 0 28px; }
@media (min-width: 901px) { .heroi .cx { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0 40px; } }
.heroi-tit { grid-column: 1 / -1; }
.heroi h1 { font-size: clamp(38px, 4.6vw, 60px); }
.heroi .numeros { align-self: center; }
.heroi .lede { font-size: 18px; max-width: 54ch; margin: 22px 0 26px; }
.dica-oficina { margin: 28px 0 14px; }
.numeros { gap: 10px; }
.numero { padding: 16px 20px; }
.numero b { font-size: 38px; min-width: 96px; }

/* oficina: bordas da grade e foco pelo teclado */
@media (min-width: 601px) { .posto { border: 0; border-right: 1px solid #1f1a15; border-bottom: 1px solid #1f1a15; } }
@media (min-width: 901px) { .posto:nth-child(5n) { border-right: 0; } .posto:nth-last-child(-n+5) { border-bottom: 0; } }
/* tablet: as 10 áreas em 2 linhas de 5, mais baixas (antes eram 5 linhas de 250px) */
@media (min-width: 601px) and (max-width: 900px) {
  .oficina { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .posto { height: 180px; }
  .posto img { width: 80px; height: 80px; bottom: 56px; }
  .posto .rotulo { font-size: 11px; padding: 3px 8px; }
  .posto:nth-child(5n) { border-right: 0; }
  .posto:nth-last-child(-n+5) { border-bottom: 0; }
}
.posto:focus-visible .cena { background: radial-gradient(ellipse 60% 60% at 50% 20%, rgba(233,170,90,.24), transparent 70%); }
.posto:focus-visible .cena::after { background: #e0b066; box-shadow: 0 14px 40px 14px rgba(233,170,90,.30); }
.posto:focus-visible img { filter: none; }
.posto:focus-visible { outline-offset: -3px; }

/* dores: cartão com botão esticado */
.dor { position: relative; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--borda); background: radial-gradient(ellipse 70% 90px at 50% 0, rgba(232,133,122,.08), transparent), var(--fundo-2); transition: border-color .2s, transform .2s; }
.dor:hover { border-color: #6a4a2a; transform: translateY(-2px); }
.dor img { width: 48px; height: 48px; }
.dor-btn { all: unset; cursor: pointer; }
.dor-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.dor:has(.dor-btn:focus-visible) { outline: 2px solid var(--ouro); outline-offset: 3px; }

/* catálogo: 3 cartões por linha, título no cartão e lista de espera discreta */
.grade { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.prod .palco { height: 140px; }
.prod .corpo { padding: 16px 18px 14px; }
.prod .slug { display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--texto-3); }
.prod .nome { font-family: var(--titulo); font-size: 19px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.prod .preco.espera { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ouro); border: 1px solid #5a4a2a; border-radius: 999px; padding: 3px 10px; }
.prod .palco::after { transition: box-shadow .25s, background .25s; }
.prod:hover .palco::after, .prod:focus-visible .palco::after { background: #f0c47a; box-shadow: 0 12px 36px 16px rgba(233,170,90,.38); }
.prod .palco img { transition: transform .2s; }
.prod:hover .palco img { transform: translateX(-50%) translateY(-3px); }
.prod:hover, .serv:hover { border-color: #6a4a2a; }
.area-btn { padding: 8px 12px; }
@media (min-width: 901px) { .catalogo { grid-template-columns: 270px minmax(0, 1fr); } .areas { max-height: calc(100vh - 110px); overflow-y: auto; } }
.painel-area { border-top: 1px solid var(--borda); background: radial-gradient(ellipse 50% 140px at 50% 0, rgba(233,170,90,.10), transparent 70%), var(--fundo-2); }
.painel-area h3:focus { outline: none; }

/* kits: o destaque alto à esquerda e os outros 4 em 2x2 */
.kit { transition: border-color .2s, transform .2s; }
.kit:hover { border-color: #6a4a2a; transform: translateY(-2px); }
@media (min-width: 1001px) { .kits { grid-template-columns: 1.25fr 1fr 1fr; } .kit.destaque { grid-row: span 2; } }
/* kit em destaque: cada skill com o que ela faz, para o cartão alto não ficar vazio */
/* as 4 skills numeradas em sequência: o que uma entrega é o que a próxima usa */
.kit.destaque ul { list-style: none; padding: 0; counter-reset: k; }
.kit.destaque li { position: relative; counter-increment: k; padding: 16px 0 16px 38px; border-top: 1px solid var(--borda); }
.kit.destaque li::before { content: counter(k, decimal-leading-zero); position: absolute; left: 0; top: 18px; font-family: var(--mono); font-size: 12px; color: var(--terra); }
.kit.destaque li b { display: block; color: var(--texto); font-weight: 700; }
.kit.destaque li span { display: block; font-size: 14px; color: var(--texto-3); margin-top: 3px; }

/* serviços: consultoria e mentoria grandes, os outros 3 menores numa segunda linha */
.serv { position: relative; cursor: default; }
.serv-btn { all: unset; cursor: pointer; }
.serv-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.serv:has(.serv-btn:focus-visible) { outline: 2px solid var(--ouro); outline-offset: 3px; }
@media (min-width: 961px) {
  .servicos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .serv { grid-column: span 2; grid-template-columns: 1fr; align-content: start; }
  .serv:nth-child(-n+2) { grid-column: span 3; grid-template-columns: 96px minmax(0, 1fr); }
  .serv:not(:nth-child(-n+2)) img { width: 64px; height: 64px; }
  .serv:not(:nth-child(-n+2)) h3 { font-size: 22px; }
}

/* antes e depois sem risco no texto */
.ad-linha p:first-child { text-decoration: none; color: var(--texto-2); }
.ad-linha p:first-child::before { content: "✕  "; color: var(--verm); font-weight: 800; }
.ad-linha p:last-child { background: rgba(108,192,139,.04); }
.ad-linha p:last-child::before { content: "✓  "; color: var(--verde); font-weight: 800; }
@media (max-width: 600px) { .ad-cab { display: none; } .ad-linha { grid-template-columns: 1fr; } .ad-linha p:last-child { border-left: 0; border-top: 0; padding-top: 0; } }

/* quem criou, curso: colunas que acompanham a rolagem */
.nota-fonte { font-family: var(--mono); font-size: 12px; color: var(--texto-3); margin: 10px 0 0; }
@media (min-width: 901px) {
  .fundador { position: sticky; top: 96px; }
  .nos-foto { align-items: start; }
  .nos-foto > img, .nos-foto > picture > img { position: sticky; top: 96px; height: auto; max-height: calc(100vh - 120px); aspect-ratio: 2/3; }
}
.modulos li { border: 0; border-bottom: 1px solid var(--borda); border-radius: 0; padding: 12px 4px; }

/* ritmo dos títulos e FAQ em duas colunas */
#como h2, #para-quem h2, #faq h2 { font-size: clamp(28px, 3.4vw, 38px); }
@media (min-width: 901px) { #faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 48px; align-items: start; } #faq .sec-cab { position: sticky; top: 96px; } }
.faq details { padding: 0; }
.faq summary { padding: 18px 22px; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin: 0; padding: 0 22px 18px; }
@media (pointer: coarse) { .btn-p { padding: 12px 18px; } }
.gratis .olho, .final .olho { color: var(--ouro); }

/* fecho */
.final-time { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.final-time img { width: 64px; height: 64px; }
.final { background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(233,170,90,.22), transparent 70%), var(--fundo-2); }

/* gaveta como diálogo: fechada, sai da ordem de foco */
.gaveta { visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.gaveta.on { visibility: visible; transition: transform .25s ease; }
.gaveta .fechar { width: 44px; height: 44px; }
.ir-form { margin-top: 14px; }

/* formulários: contraste dos campos e armadilha para robô */
.f input[type=text], .f input[type=tel], .f select, .f textarea, .op { border-color: var(--borda-campo); }
.op:has(input:checked) small { color: var(--texto-2); }
.f ::placeholder { color: var(--texto-3); opacity: 1; }
.f-mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* página do guia grátis */
.autoria { font-family: var(--mono); font-size: 13px; color: var(--texto-2); margin-top: 20px; }
.entrada .capa-livro { margin: 40px 0 0; max-width: 260px; }
@media (max-width: 900px) { .entrada .capa-livro { display: none; } }
@media (min-width: 901px) { .entrada .cx > div:first-child { position: sticky; top: 96px; } }
.pronto-zap { margin-top: 22px; display: grid; gap: 10px; justify-items: center; }
.pronto-zap p { margin: 0; color: var(--texto-2); }

/* rodapé */
.rodape { margin-top: 64px; }
.rodape a { display: inline-block; padding: 10px 4px; }

/* página 404 */
.erro-404 { padding: 96px 0 40px; }
.erro-404 h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 800; }
.erro-404 h1 em { font-style: normal; color: var(--terra); }
.erro-404 .lede { color: var(--texto-2); font-size: 18px; margin: 20px 0 26px; max-width: 52ch; }
.erro-404 img { width: 112px; height: 112px; margin-bottom: 22px; }

/* celular: faixa, menu de atalhos, herói e faixas laterais */
@media (max-width: 700px) { .faixa .so-desk { display: none; } .faixa { letter-spacing: .06em; font-size: 11.5px; } .faixa a { padding: 6px 12px; } }
@media (max-width: 900px) {
  .topo .topo-grade { height: auto; }
  .topo-grade { grid-template-columns: minmax(0, 1fr) auto; padding-block: 10px; row-gap: 8px; }
  .topo-grade .topo-cta { grid-row: 1; grid-column: 2; }
  .topo-grade .nav { display: flex; grid-row: 2; grid-column: 1 / -1; min-width: 0; justify-self: stretch; overflow-x: auto; white-space: nowrap; gap: 18px; font-size: 14px; scrollbar-width: none; padding-bottom: 4px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .sec { scroll-margin-top: 110px; }
}
@media (max-width: 600px) {
  .heroi { padding-top: 32px; }
  .heroi h1 { font-size: 36px; }
  .heroi .lede { font-size: 17px; }
  .heroi .acoes .btn { width: 100%; justify-content: center; }
  .numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .numero { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 12px; }
  .numero b { font-size: 28px; min-width: 0; }
  .numero br { display: none; }
  .numero span { font-size: 11px; }
  .oficina { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .posto { height: 190px; scroll-snap-align: start; }
  .dores { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 8px; scrollbar-width: none; }
  .dor { scroll-snap-align: start; }
  .areas { display: flex; overflow-x: auto; gap: 8px; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 6px; scrollbar-width: none; }
  .area-btn { flex: 0 0 auto; }
  .area-btn b { white-space: nowrap; }
  /* cartões do catálogo deitados: personagem à esquerda, texto à direita */
  .prod { flex-direction: row; }
  .prod .palco { flex: 0 0 96px; height: auto; min-height: 132px; border-bottom: 0; border-right: 1px solid var(--borda); }
  .prod .palco::before { height: 14px; }
  .prod .palco::after { top: 12px; width: 32px; height: 10px; }
  .prod .palco i { left: 10%; right: 10%; bottom: 22px; }
  .prod .palco img { width: 64px; height: 64px; top: 34px; bottom: auto; }
  .prod .palco i { top: 98px; bottom: auto; }
  .prod .corpo { padding: 14px 14px 12px; gap: 6px; }
  .prod .nome { font-size: 17px; }
  .prod .resumo { font-size: 14px; }
  /* kits em faixa lateral, como as dores */
  .kits { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 8px; scrollbar-width: none; }
  .kit { scroll-snap-align: start; padding: 22px; }
  .nos-foto > img, .nos-foto > picture > img { max-height: 440px; }
}
@media (max-width: 900px) {
  .heroi .cx { gap: 0; }
  .heroi .numeros { margin-top: 28px; }
  .biblio { grid-template-columns: minmax(0, 1fr); }
  .bib-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .biblio .btn { white-space: normal; line-height: 1.25; max-width: 100%; }
}

/* biblioteca: o número de prompts fica colado no texto do botão (sem o gap do flex) */
.biblio .btn { display: inline-block; text-align: center; line-height: 1.25; }

/* biblioteca no celular: o nome da área não sai do botão */
@media (max-width: 600px) {
  .bib-area { flex-direction: column; align-items: flex-start; gap: 6px; }
  .bib-area > span { min-width: 0; }
  .bib-area b { overflow-wrap: anywhere; }
}

/* ---------- marca v2 (08/11/2026): Figtree no texto, ícones de traço no lugar do pixel, Otto ---------- */
:root { --texto-f: "Figtree", "Helvetica Neue", system-ui, sans-serif; --mono: var(--texto-f); }
body { font-family: var(--texto-f); }
h1, h2, h3, h4, .marca, .numero b, .capa-livro h3 { font-family: var(--titulo); }
.olho, .divisor, .autoria, .dica-oficina { font-weight: 600; }
.ic .a { stroke: var(--terra-2); }
.tile { display: inline-grid; place-items: center; flex: none; color: var(--texto); background: #241f1a; border: 1px solid var(--borda-2); }
.tile-g { width: 84px; height: 84px; border-radius: 20px; }
.tile-m { width: 58px; height: 58px; border-radius: 15px; }
.tile-p { width: 36px; height: 36px; border-radius: 10px; }
/* oficina: o ícone fica sobre a mesa, sob a luminária */
.posto .tile { position: absolute; left: 50%; bottom: 68px; width: 76px; height: 76px; transform: translateX(-50%); filter: brightness(.72); transition: filter .3s, box-shadow .3s; }
.posto:hover .tile, .posto.ativo .tile, .posto:focus-visible .tile { filter: none; box-shadow: 0 0 0 1px rgba(233,170,90,.35), 0 10px 30px rgba(233,170,90,.2); }
@media (min-width: 601px) and (max-width: 900px) { .posto .tile { width: 64px; height: 64px; bottom: 58px; } }
@media (max-width: 600px) { .posto .tile { width: 64px; height: 64px; bottom: 60px; } }
/* cartão de produto */
.prod .palco .tile { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); transition: transform .2s; }
.prod:hover .palco .tile { transform: translateX(-50%) translateY(-3px); }
@media (max-width: 600px) { .prod .palco .tile { width: 52px; height: 52px; top: 36px; bottom: auto; } }
.gaveta .topo-g .itens-g { display: flex; flex-wrap: wrap; gap: 8px; }
.kit .itens { display: flex; flex-wrap: wrap; gap: 8px; }
.area-btn .tile, .bib-area .tile { width: 36px; height: 36px; }
/* Otto no topo */
.heroi-otto { margin: 0; }
.heroi-otto img { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); }
@media (min-width: 901px) {
  .heroi .cx { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "tit otto" "texto otto" "nums nums"; gap: 0 40px; }
  .heroi-tit { grid-area: tit; grid-column: auto; }
  .heroi-tit + div { grid-area: texto; }
  .heroi-otto { grid-area: otto; align-self: center; }
  .heroi .numeros { grid-area: nums; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; }
}
@media (max-width: 900px) {
  .heroi .cx { grid-template-areas: "tit" "otto" "texto" "nums"; }
  .heroi-tit { grid-area: tit; } .heroi-tit + div { grid-area: texto; } .heroi-otto { grid-area: otto; } .heroi .numeros { grid-area: nums; }
  .heroi-otto img { max-width: 300px; margin-top: 8px; }
}
/* Otto no fim, na capa do guia, no "pronto" e no 404 */
.final-time img { width: 230px; height: auto; -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 90%); mask-image: radial-gradient(closest-side, #000 52%, transparent 90%); }
.capa-livro .otto-capa { width: 150px; height: auto; border-radius: 0; align-self: center; -webkit-mask-image: radial-gradient(closest-side, #000 66%, transparent 100%); mask-image: radial-gradient(closest-side, #000 66%, transparent 100%); }
.pronto-av { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 1px solid var(--borda-2); }
.erro-404 .otto-404 { width: 230px; height: auto; margin-bottom: 6px; -webkit-mask-image: radial-gradient(closest-side, #000 68%, transparent 100%); mask-image: radial-gradient(closest-side, #000 68%, transparent 100%); }
@media (min-width: 1100px) {
  .oficina { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .posto, .posto:nth-child(5n) { border-right: 1px solid #1f1a15; border-bottom: 0; }
  .posto:last-child { border-right: 0; }
  .posto .tile { width: 68px; height: 68px; }
  .posto .rotulo { font-size: 12px; padding: 3px 10px; }
}

/* =====================================================================
   v3 (08/11/2026): home como casa da marca, /skills, páginas de skill e pack.
   Mesma identidade (café, terracota, dourado, Otto, ícones de traço); escala de 8 px.
   Fica no fim de propósito: vence as regras antigas.
   ===================================================================== */
:root {
  --c-cafe: #12100e; --c-quente: #19140f; --c-verm: #1d1310; --c-respiro: #16120e; --c-terra: #cf7650;
  --cafe-esc: #1a110b; --creme: #f6ead9; --misturar: 160px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px;
}
.btn { border-radius: 12px; padding: 14px 24px; }
.btn-p { padding: 10px 16px; border-radius: 10px; }
.btn:focus-visible, .pl-btn:focus-visible, .ofc-mesa:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.link-terra { color: var(--terra-2); font-weight: 700; text-decoration: none; }
.link-terra:hover { text-decoration: underline; text-underline-offset: 3px; }
.olho { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s2); }

/* ---------- menu ---------- */
.topo .topo-v3 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; gap: var(--s3); }
.nav-v3 { display: flex; gap: var(--s4); font-size: 15px; color: var(--texto-2); }
.nav-v3 a { text-decoration: none; padding: 8px 0; }
.nav-v3 a:hover, .nav-v3 a[aria-current] { color: var(--texto); }
.topo-guia { justify-self: end; color: var(--terra-2); font-weight: 700; text-decoration: none; font-size: 15px; padding: 8px 0; }
.topo-guia:hover { color: var(--terra); }
@media (max-width: 900px) {
  .topo .topo-v3 { grid-template-columns: minmax(0, 1fr) auto; height: auto; padding-block: 10px 6px; row-gap: 2px; }
  .nav-v3 { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: var(--s1); font-size: 14px; white-space: nowrap; }
  .nav-v3 a { padding: 8px 0; }
}
@media (max-width: 360px) { .nav-v3 { font-size: 13px; } }

/* ---------- blocos com fundo que mistura no anterior ---------- */
.bloco { position: relative; padding: 104px 0 56px; scroll-margin-top: 64px;
  --tom: var(--c-cafe); --antes: var(--c-cafe); --halo: transparent; --halo-pos: 0% 0%;
  background:
    radial-gradient(ellipse 45% 50% at var(--halo-pos), var(--halo), transparent 70%),
    linear-gradient(180deg, var(--antes) 0, var(--tom) var(--misturar), var(--tom) 100%); }
.bloco[data-tom=cafe] { --tom: var(--c-cafe); } .bloco[data-de=cafe] { --antes: var(--c-cafe); }
.bloco[data-tom=quente] { --tom: var(--c-quente); } .bloco[data-de=quente] { --antes: var(--c-quente); }
.bloco[data-tom=verm] { --tom: var(--c-verm); } .bloco[data-de=verm] { --antes: var(--c-verm); }
.bloco[data-tom=respiro] { --tom: var(--c-respiro); } .bloco[data-de=respiro] { --antes: var(--c-respiro); }
.bloco[data-de=terra] { --antes: var(--c-terra); padding-top: 176px; --misturar: 144px; }
.bloco[data-halo=ouro-esq] { --halo: rgba(233,170,90,.09); --halo-pos: 0% 50%; }
.bloco[data-halo=ouro-dir] { --halo: rgba(233,170,90,.09); --halo-pos: 100% 50%; }
.bloco[data-halo=terra-esq] { --halo: rgba(207,118,80,.10); --halo-pos: 0% 50%; }
.bloco[data-halo=terra-dir] { --halo: rgba(207,118,80,.10); --halo-pos: 100% 50%; }
/* costura de luz: 1 px de linha + halo, no meio da mistura; acende do centro para as laterais */
.bloco::before, .bloco::after { content: ""; position: absolute; left: 50%; top: 52px; pointer-events: none; transform: translateX(-50%) scaleX(1); transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity 1.1s ease; }
.bloco::before { width: min(1080px, 88%); height: 1px; background: linear-gradient(90deg, transparent, rgba(207,118,80,.55) 25%, rgba(240,196,122,.95) 50%, rgba(207,118,80,.55) 75%, transparent); }
.bloco::after { width: min(720px, 70%); height: 40px; margin-top: -20px; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(233,170,90,.16), transparent 70%); }
.bloco.sem-costura::before, .bloco.sem-costura::after { display: none; }
.bloco[data-de=terra]::before, .bloco[data-de=terra]::after { top: 120px; }
html.anima .bloco:not(.visto)::before { transform: translateX(-50%) scaleX(0); opacity: 0; }
html.anima .bloco:not(.visto)::after { transform: translateX(-50%) scaleX(.2); opacity: 0; }
@media (max-width: 700px) { .bloco { padding: 88px 0 var(--s6); } .bloco::before, .bloco::after { top: 40px; } .bloco[data-de=terra] { padding-top: 160px; } .bloco[data-de=terra]::before, .bloco[data-de=terra]::after { top: 112px; } }
.cab3 { max-width: 760px; margin-bottom: var(--s5); }
.cab3 h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; }
.cab3 .apoio { color: var(--texto-2); font-size: 17px; margin: var(--s2) 0 0; max-width: 62ch; }
.cab3.centro { margin-inline: auto; text-align: center; }

/* entrada das seções: só com html.anima (o JS põe); sem JS tudo aparece */
html.anima .revela { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
html.anima .cascata > * { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
html.anima .visto .revela, html.anima .visto .cascata > *, html.anima .revela.visto { opacity: 1; transform: none; }
html.anima .ja-visto .revela, html.anima .ja-visto .cascata > *, html.anima .ja-visto::before, html.anima .ja-visto::after { transition: none !important; }

/* ---------- primeira dobra ---------- */
.dobra { padding: var(--s8) 0 var(--s6); background: radial-gradient(ellipse 40% 50% at 76% 42%, rgba(233,170,90,.10), transparent 70%), var(--c-cafe); }
.dobra .cx { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s6); align-items: center; }
.dobra h1 { font-size: clamp(38px, 4.3vw, 60px); font-weight: 800; line-height: 1.02; }
.dobra h1 em { font-style: normal; color: var(--terra); }
.dobra .sub { font-size: 18px; color: var(--texto-2); max-width: 54ch; margin: var(--s3) 0 var(--s4); }
.dobra .sob { font-size: 14px; color: var(--texto-3); margin: var(--s2) 0 0; }
.dobra .prova-linha { font-size: 14px; color: var(--texto-2); margin: var(--s3) 0 0; padding-top: var(--s2); border-top: 1px solid var(--borda); max-width: 54ch; }
.dobra .prova-linha::before { content: "✓"; color: var(--verde); font-weight: 800; margin-right: 8px; }
.palco-otto { position: relative; margin: 0; aspect-ratio: 1; max-width: 460px; justify-self: center; width: 100%; }
.palco-otto::before { content: ""; position: absolute; inset: -6% -10% 0; background: radial-gradient(ellipse 46% 52% at 50% 36%, rgba(240,196,122,.22), rgba(207,118,80,.06) 60%, transparent 75%); }
.palco-otto::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 3%; height: 9%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 70%); }
.palco-otto img { position: relative; z-index: 1; width: 100%; height: auto; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
@media (max-width: 900px) {
  .dobra { padding: var(--s5) 0 var(--s4); }
  .dobra .cx { grid-template-columns: 1fr; gap: var(--s3); }
  .palco-otto { max-width: 150px; order: -1; justify-self: start; }
  .dobra h1 { font-size: 34px; }
  .dobra .sub { font-size: 17px; margin: var(--s2) 0 var(--s3); }
  .dobra .btn { width: 100%; justify-content: center; }
}

/* ---------- oficina v3: mesas com luminária ---------- */
.ofc { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); border: 1px solid var(--borda); border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #0c0a08, #110e0b); }
.ofc-mesa { position: relative; height: 216px; border: 0; border-right: 1px solid #1f1a15; background: transparent; color: inherit; font: inherit; padding: 0; cursor: pointer; overflow: hidden; isolation: isolate; }
.ofc-mesa:last-child { border-right: 0; }
.ofc-mesa:focus-visible { outline-offset: -3px; }
/* luz espalhada no tampo e na parede */
.ofc-mesa::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 34% at 50% 76%, rgba(240,190,110,.20), transparent 70%), radial-gradient(ellipse 60% 60% at 50% 22%, rgba(233,170,90,.10), transparent 70%); opacity: 0; transition: opacity .3s ease; }
.ofc-lum { position: absolute; left: 50%; top: 0; width: 60px; height: 64px; transform: translateX(-50%); }
.ofc-lum .haste { position: absolute; left: 50%; top: 0; width: 2px; height: 34px; margin-left: -1px; background: linear-gradient(180deg, #2c241c, #5a4a3a); }
.ofc-lum .cupula { position: absolute; left: 50%; top: 32px; width: 52px; height: 20px; margin-left: -26px; border-radius: 26px 26px 5px 5px / 20px 20px 5px 5px; background: linear-gradient(180deg, #7b6249 0%, #54412f 70%, #3d2f22 100%); box-shadow: inset 0 1px 0 rgba(255,235,200,.18); }
.ofc-lum .cupula::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 6px; border-radius: 50%; background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(255,226,170,.9), transparent 75%); opacity: 0; transition: opacity .3s ease; }
.ofc-lum .lampada { position: absolute; left: 50%; top: 49px; width: 16px; height: 8px; margin-left: -8px; border-radius: 0 0 8px 8px; background: #3a3026; transition: background .3s ease; }
.ofc-lum .lampada::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: radial-gradient(circle, rgba(255,232,180,.75), rgba(255,200,120,.18) 45%, transparent 70%); opacity: 0; transition: opacity .3s ease; }
.ofc-cone { position: absolute; left: 50%; top: 54px; bottom: 74px; width: 150%; max-width: 190px; transform: translateX(-50%) scaleY(.15); transform-origin: 50% 0; opacity: 0; clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255,220,160,.34), rgba(240,190,110,.10) 70%, rgba(240,190,110,.04)); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.ofc-cone i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(255,236,200,.8); opacity: 0; }
.ofc-cone i:nth-child(1) { left: 46%; top: 30%; } .ofc-cone i:nth-child(2) { left: 56%; top: 55%; } .ofc-cone i:nth-child(3) { left: 38%; top: 72%; }
.ofc-tampo { position: absolute; left: 14%; right: 14%; bottom: 60px; height: 8px; border-radius: 3px; background: linear-gradient(180deg, #6a4a31, #4a3322); }
.ofc-tampo::before, .ofc-tampo::after { content: ""; position: absolute; top: 8px; width: 6px; height: 30px; background: #33241a; }
.ofc-tampo::before { left: 10%; } .ofc-tampo::after { right: 10%; }
.ofc-ic { position: absolute; left: 50%; bottom: 70px; width: 52px; height: 52px; margin-left: -26px; display: grid; place-items: center; border-radius: 14px; background: #1b1612; border: 1px solid var(--borda); color: var(--texto-3); transition: color .3s ease, border-color .3s ease, box-shadow .4s ease, opacity .3s ease; }
.ofc-ic .ic .a { stroke: #9b6a52; transition: stroke .3s ease; }
.ofc-rot { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); font-size: 12.5px; font-weight: 600; white-space: nowrap; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--borda); background: #0d0b09; color: var(--texto-2); transition: background .3s ease, color .3s ease, border-color .3s ease; }
/* acesa */
.ofc-mesa.acesa::before, .ofc-mesa.acesa .cupula::after, .ofc-mesa.acesa .lampada::after { opacity: 1; }
.ofc-mesa.acesa .lampada { background: #fff1cf; }
.ofc-mesa.acesa .ofc-cone { opacity: 1; transform: translateX(-50%) scaleY(1); }
.ofc-mesa.acesa .ofc-ic { color: var(--texto); border-color: rgba(233,170,90,.45); box-shadow: 0 0 0 1px rgba(233,170,90,.18), 0 10px 32px rgba(233,170,90,.26); }
.ofc-mesa.acesa .ofc-ic .ic .a { stroke: #f39a6c; }
.ofc-mesa.acesa .ofc-rot { background: var(--ouro); color: #1d1606; border-color: var(--ouro); }
.ofc.tem-acesa .ofc-mesa:not(.acesa) .ofc-ic { opacity: .62; }
.ofc.tem-acesa .ofc-mesa:not(.acesa) .ofc-rot { color: var(--texto-3); }
.ofc-mesa:not(.acesa):hover .ofc-ic { opacity: 1; }
/* ligando: a lâmpada pisca e o cone desce */
@keyframes ofc-piscar { 0% { opacity: 0; } 12% { opacity: .9; } 22% { opacity: .15; } 36% { opacity: 1; } 46% { opacity: .35; } 58%, 100% { opacity: 1; } }
@keyframes ofc-cone { 0% { opacity: 0; transform: translateX(-50%) scaleY(.15); } 12% { opacity: .7; } 22% { opacity: .1; } 36% { opacity: .8; } 46% { opacity: .2; transform: translateX(-50%) scaleY(.2); } 100% { opacity: 1; transform: translateX(-50%) scaleY(1); } }
@keyframes ofc-poeira { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .7; } 100% { opacity: 0; transform: translate(6px, 28px); } }
.ofc-mesa.ligando .lampada::after, .ofc-mesa.ligando .cupula::after { animation: ofc-piscar .42s linear; }
.ofc-mesa.ligando .ofc-cone { animation: ofc-cone .8s cubic-bezier(.3,.6,.3,1); }
.ofc-mesa.acesa .ofc-cone i { animation: ofc-poeira 4.2s ease-in-out infinite; }
.ofc-mesa.acesa .ofc-cone i:nth-child(2) { animation-delay: 1.4s; animation-duration: 5s; }
.ofc-mesa.acesa .ofc-cone i:nth-child(3) { animation-delay: 2.6s; animation-duration: 4.6s; }
@media (prefers-reduced-motion: reduce) { .ofc-mesa.ligando .lampada::after, .ofc-mesa.ligando .cupula::after, .ofc-mesa.ligando .ofc-cone { animation: none; } .ofc-cone i { display: none; } }
@media (max-width: 960px) {
  .ofc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ofc-mesa { height: 168px; border-bottom: 1px solid #1f1a15; }
  .ofc-mesa:nth-child(3n) { border-right: 0; }
  .ofc-mesa:nth-last-child(-n+3) { border-bottom: 0; }
  .ofc-lum { transform: translateX(-50%) scale(.82); transform-origin: 50% 0; }
  .ofc-cone { top: 46px; bottom: 58px; }
  .ofc-tampo { bottom: 46px; height: 7px; }
  .ofc-tampo::before, .ofc-tampo::after { height: 22px; top: 7px; }
  .ofc-ic { width: 44px; height: 44px; margin-left: -22px; bottom: 54px; border-radius: 12px; }
  .ofc-ic .ic { width: 24px; height: 24px; }
  .ofc-rot { bottom: 10px; font-size: 12px; padding: 3px 10px; }
}
/* painel abaixo da oficina */
.ofc-painel { display: grid; grid-template-columns: auto minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap: var(--s4); align-items: start; margin-top: var(--s2); padding: var(--s4); border: 1px solid var(--borda); border-radius: 20px; background: radial-gradient(ellipse 40% 120% at 0% 0%, rgba(233,170,90,.08), transparent 70%), var(--fundo-2); min-height: 136px; }
.ofc-painel h3 { font-size: 28px; font-weight: 800; }
.ofc-p-olho, .ofc-p-rot { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 var(--s1); color: var(--texto-3); }
.ofc-p-rot.gargalo { color: var(--verm); }
.ofc-p-rot.faz { color: var(--verde); }
.ofc-p-col p:last-child { margin: 0; color: var(--texto-2); font-size: 16px; line-height: 1.55; }
.ofc-painel > * { animation: ofc-troca .35s ease; }
@keyframes ofc-troca { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ofc-painel > * { animation: none; } }
@media (max-width: 900px) { .ofc-painel { grid-template-columns: auto minmax(0, 1fr); gap: var(--s2) var(--s3); padding: var(--s3); } .ofc-p-col { grid-column: 1 / -1; } .ofc-painel .tile-m { width: 48px; height: 48px; } .ofc-painel h3 { font-size: 24px; } }
.fecho-bloco { margin: var(--s3) 0 0; font-size: 15px; color: var(--texto-2); display: flex; gap: 10px; align-items: center; }
.fecho-bloco .tile-p { width: 32px; height: 32px; border-radius: 9px; }

/* ---------- por que a artificializando ---------- */
.quem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: center; }
.quem h2 { font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; }
.quem .apoio { color: var(--texto-2); font-size: 17px; margin: var(--s2) 0 0; }
.print-sistema { aspect-ratio: 16 / 10; border: 1.5px dashed #5a4a3a; border-radius: 20px; display: grid; place-content: center; justify-items: center; gap: var(--s1); text-align: center; color: var(--texto-3); background: repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 12px, transparent 12px 24px), radial-gradient(ellipse 60% 60% at 50% 40%, rgba(233,170,90,.08), transparent 70%), #15110d; }
.print-sistema b { font-family: var(--titulo); font-size: 22px; color: var(--texto-2); font-weight: 800; }
.print-sistema span:last-child { font-size: 13px; }
.pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s5); }
.pilar { border: 1px solid var(--borda); border-top: 3px solid var(--terra); border-radius: 14px; padding: var(--s3); background: var(--fundo-2); }
.pilar h3 { font-size: 20px; font-weight: 800; margin-bottom: var(--s1); }
.pilar p { margin: 0; color: var(--texto-2); font-size: 15px; }
.credenciais { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); flex-wrap: wrap; }
.credenciais img { width: 80px; height: 80px; border-radius: 14px; object-fit: cover; object-position: center 8%; border: 1px solid var(--borda-2); }
.credenciais .frase { font-family: var(--titulo); font-size: 22px; font-weight: 800; color: var(--terra); margin: 0; }
.credenciais .oab { font-size: 14px; color: var(--texto-2); margin: 0; }
@media (max-width: 900px) { .quem { grid-template-columns: 1fr; gap: var(--s4); } .pilares { grid-template-columns: 1fr; } }

/* ---------- produtos (blocos alternados) ---------- */
.prods { display: grid; gap: var(--s2); }
.prodb { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s4); align-items: center; padding: var(--s3); border: 1px solid var(--borda); border-radius: 20px; background: var(--fundo-2); }
.prodb:nth-child(even) { grid-template-columns: minmax(0, 1fr) 240px; }
.prodb:nth-child(even) .prodb-img { order: 2; }
.prodb-img { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse 60% 55% at 50% 30%, rgba(240,196,122,.20), transparent 70%), #110e0b; }
.prodb-img img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); }
.prodb-cab { display: flex; gap: var(--s1); align-items: center; flex-wrap: wrap; margin-bottom: var(--s2); }
.etq { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--ouro); color: #1d1606; border-radius: 6px; padding: 4px 10px; }
.selo-st { font-size: 12.5px; font-weight: 600; color: var(--texto-2); border: 1px solid var(--borda-2); border-radius: 999px; padding: 3px 12px 3px 10px; display: inline-flex; align-items: center; gap: 6px; }
.selo-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--terra-2); }
.prodb h3 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; margin-bottom: var(--s2); max-width: 30ch; }
.prodb p { color: var(--texto-2); margin: 0 0 var(--s3); max-width: 64ch; }
.prodb .principal { grid-column: 1 / -1; }
.regua { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); margin: 0 0 var(--s3); }
.reg { position: relative; border: 1px solid var(--borda); border-radius: 14px; padding: var(--s2) var(--s2) 20px; background: var(--fundo); }
.reg.destaque { border-color: var(--terra); background: linear-gradient(180deg, #2a1d15, var(--fundo)); }
.reg h4 { font-family: var(--titulo); font-size: 18px; font-weight: 800; }
.reg .sub { display: block; font-size: 12.5px; color: var(--terra-2); font-weight: 600; margin: 2px 0 var(--s1); }
.reg p { font-size: 14px; color: var(--texto-2); margin: 0; }
.reg .chip { position: absolute; top: -11px; right: 12px; font-size: 11.5px; font-weight: 700; }
@media (max-width: 1000px) { .regua { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .prodb, .prodb:nth-child(even) { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s2); padding: var(--s2); align-items: start; }
  .prodb:nth-child(even) .prodb-img { order: 0; }
  .prodb-img { border-radius: 12px; }
  .prodb h3 { font-size: 22px; }
  .prodb .corpo-b { display: contents; }
  .prodb .prodb-cab { grid-column: 2; align-self: center; margin: 0; }
  .prodb h3, .prodb p, .prodb .regua, .prodb .btn { grid-column: 1 / -1; }
  .prodb .btn { width: 100%; justify-content: center; }
  .prodb p { margin-bottom: var(--s1); }
  .regua { grid-template-columns: 1fr; margin-bottom: var(--s1); }
}

/* ---------- método: faixa de 4 colunas ---------- */
.metodo4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--borda); border-radius: 20px; overflow: hidden; background: var(--fundo-2); }
.metodo4 > div { padding: var(--s3); border-right: 1px solid var(--borda); }
.metodo4 > div:last-child { border-right: 0; }
.metodo4 h3 { font-size: 19px; font-weight: 800; margin: var(--s2) 0 var(--s1); }
.metodo4 p { margin: 0; color: var(--texto-2); font-size: 15px; }
@media (max-width: 900px) { .metodo4 { grid-template-columns: 1fr 1fr; } .metodo4 > div:nth-child(2) { border-right: 0; } .metodo4 > div:nth-child(-n+2) { border-bottom: 1px solid var(--borda); } }
@media (max-width: 560px) { .metodo4 { grid-template-columns: 1fr; } .metodo4 > div { border-right: 0; border-bottom: 1px solid var(--borda); display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--s2); } .metodo4 > div:last-child { border-bottom: 0; } .metodo4 .tile-p { grid-row: span 2; } .metodo4 h3 { margin: 4px 0 var(--s1); } }

/* ---------- dúvidas ---------- */
.duv { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.5fr); gap: var(--s6); align-items: start; }
.duv .cab3 { margin: 0; }
.faq { gap: var(--s1); max-width: none; }
.faq summary { font-size: 16.5px; padding: 16px 20px; }
.faq details p { padding: 0 20px 16px; font-size: 15.5px; }
@media (max-width: 900px) { .duv { grid-template-columns: 1fr; gap: var(--s3); } }

/* ---------- fechamento com o guia ---------- */
.fech { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--s6); align-items: center; border: 1px solid #6a4a2a; border-radius: 24px; padding: var(--s6); background: radial-gradient(ellipse 70% 120% at 85% 0%, rgba(233,192,98,.16), transparent 60%), #1c1611; }
.fech h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; }
.fech h2 em { font-style: normal; color: var(--terra); }
.fech .apoio { color: var(--texto-2); margin: var(--s2) 0; }
.fech ul { list-style: none; padding: 0; margin: 0 0 var(--s3); display: grid; gap: 4px; }
.fech li { padding-left: 28px; position: relative; color: var(--texto-2); font-size: 15.5px; }
.fech li::before { content: "✓"; position: absolute; left: 0; color: var(--verde); font-weight: 800; }
.fech .sob { font-size: 14px; color: var(--texto-3); margin: var(--s1) 0 var(--s3); }
.fech .capa-livro { max-width: 240px; }
.capa-livro .ic-capa { align-self: center; color: var(--texto); }
.capa-livro .ic-capa .tile-g { width: 96px; height: 96px; border-radius: 24px; }
@media (max-width: 900px) { .fech { grid-template-columns: 1fr; padding: var(--s3); gap: var(--s3); } .fech .capa-livro { display: none; } .fech .btn { width: 100%; justify-content: center; } }

/* ---------- rodapé ---------- */
.rodape { margin-top: 0; border-top: 1px solid var(--borda); padding: var(--s4) 0 var(--s5); background: var(--c-cafe); }
.rodape-links a { padding: 8px 4px; }

/* ---------- /skills ---------- */
@media (min-width: 901px) { .dobra-sk .cx { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } }
.dobra-sk .palco-otto { max-width: 340px; }
@media (max-width: 900px) { .dobra-sk .palco-otto { max-width: 150px; } }
.cat3 .ofc { margin-bottom: var(--s2); }
.cat3 .ofc-mesa { height: 196px; }
@media (max-width: 960px) { .cat3 .ofc-mesa { height: 156px; } }
.painel-area { border-radius: 20px; }
@media (max-width: 600px) { .painel-area { padding: var(--s3) var(--s2); } }
/* cartão de produto: o botão do título cobre o cartão; o link da página fica por cima */
.prod { position: relative; cursor: default; }
.prod .nome { margin: 0; }
.prod-btn { all: unset; cursor: pointer; }
.prod-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.prod:has(.prod-btn:focus-visible) { outline: 2px solid var(--ouro); outline-offset: 3px; }
.prod:hover { border-color: #6a4a2a; transform: translateY(-2px); }
.ver-pag { position: relative; z-index: 2; color: var(--terra-2); font-weight: 700; font-size: 13px; text-decoration: none; padding: 6px 0; }
.ver-pag:hover { text-decoration: underline; text-underline-offset: 3px; }
.prod .pe { gap: var(--s1); flex-wrap: wrap; }
.prod .preco.espera { font-size: 12px; }
@media (max-width: 600px) { .prod { flex-direction: row; } }
/* packs empilhados no celular (sem faixa lateral) */
@media (max-width: 600px) { .kits { grid-auto-flow: row; grid-template-columns: 1fr; overflow: visible; margin: 0; padding: 0; } }
.kit-preco { margin: var(--s1) 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kit-preco b { font-family: var(--titulo); font-size: 24px; font-weight: 800; color: var(--texto); }
.kit-preco span { font-size: 13.5px; color: var(--texto-3); }
.kit-acoes { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: auto; }
.kit .kit-acoes .btn { margin-top: 0; }
.passos3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); counter-reset: p; }
.passos3 > div { border: 1px solid var(--borda); border-radius: 16px; padding: var(--s3); background: var(--fundo-2); counter-increment: p; }
.passos3 > div::before { content: counter(p, decimal-leading-zero); font-size: 13px; font-weight: 700; color: var(--terra); }
.passos3 h3 { font-size: 20px; font-weight: 800; margin: var(--s1) 0; }
.passos3 p { margin: 0; color: var(--texto-2); font-size: 15px; }
@media (max-width: 800px) { .passos3 { grid-template-columns: 1fr; } }

/* ---------- a conta (faixa terracota de preços) ---------- */
.conta { position: relative; padding: 176px 0 var(--s8); color: var(--cafe-esc); background: linear-gradient(180deg, var(--c-quente) 0, var(--c-terra) 144px, var(--c-terra) 100%); }
.conta[data-de=cafe] { background: linear-gradient(180deg, var(--c-cafe) 0, var(--c-terra) 144px, var(--c-terra) 100%); }
.conta[data-de=verm] { background: linear-gradient(180deg, var(--c-verm) 0, var(--c-terra) 144px, var(--c-terra) 100%); }
.conta::after { content: ""; position: absolute; inset: 144px 0 0; background: radial-gradient(ellipse 50% 40% at 50% 35%, rgba(255,226,170,.22), transparent 70%); pointer-events: none; }
.conta .cx { position: relative; z-index: 1; }
.conta-olho { text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--s1); }
.conta h2 { text-align: center; font-size: clamp(34px, 4.4vw, 56px); font-weight: 800; color: var(--cafe-esc); margin-bottom: var(--s5); }
.conta-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); align-items: stretch; max-width: 1120px; margin: 0 auto; }
.pl { position: relative; display: flex; flex-direction: column; border: 1.5px solid rgba(255,244,230,.55); border-radius: 20px; padding: var(--s4) var(--s3) var(--s3); background: rgba(255,240,225,.10); }
.pl-top { border: 2.5px solid #fff8ef; background: rgba(255,244,232,.22); box-shadow: 0 18px 50px rgba(60,25,10,.22); }
.pl-selo { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); margin: 0; background: var(--cafe-esc); color: var(--creme); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.pl-rot { margin: 0 0 var(--s1); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pl-preco { margin: 0; font-family: var(--titulo); font-weight: 800; font-size: clamp(44px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.03em; }
.pl-apoio { margin: var(--s1) 0 0; font-size: 15px; font-weight: 600; }
.pl-sep { margin: var(--s1) 0 0; font-size: 14px; }
.pl-sep s { font-weight: 700; text-decoration-thickness: 2px; }
.pl-nota { margin: 2px 0 0; font-size: 12.5px; }
.pl ul { list-style: none; padding: 0; margin: var(--s3) 0; display: grid; gap: var(--s1); border-top: 1px solid rgba(26,17,11,.22); padding-top: var(--s3); }
.pl li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45; }
.pl li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; }
.pl-btn { margin-top: auto; display: flex; justify-content: center; align-items: center; text-align: center; width: 100%; padding: 14px 16px; border: 0; border-radius: 12px; background: var(--creme); color: var(--cafe-esc); font: 700 15px/1.2 var(--texto-f); text-decoration: none; cursor: pointer; box-shadow: 0 4px 0 #8c4527; transition: transform .15s, box-shadow .15s; }
.pl-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #8c4527; }
.pl-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8c4527; }
.pl-top .pl-btn { background: var(--cafe-esc); color: var(--creme); box-shadow: 0 4px 0 #5a2c18; }
.pl-btn:focus-visible { outline: 2px solid var(--cafe-esc); outline-offset: 3px; }
.conta-frase { text-align: center; font-family: var(--titulo); font-size: clamp(20px, 2vw, 26px); font-weight: 800; max-width: 760px; margin: var(--s5) auto var(--s1); line-height: 1.2; }
.conta-mini, .conta-nota { text-align: center; font-size: 15px; margin: 0 auto var(--s1); max-width: 720px; }
.conta-nota { font-size: 13.5px; margin-top: var(--s2); }
.conta-link { all: unset; cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.conta-link:focus-visible { outline: 2px solid var(--cafe-esc); outline-offset: 3px; }
@media (max-width: 860px) { .conta { padding-top: 160px; } .conta-grade { grid-template-columns: 1fr; gap: var(--s4); } }
/* entrada em cascata também nos cartões de preço */

/* ---------- páginas de skill e pack ---------- */
.pg-topo { padding: var(--s8) 0 var(--s6); background: radial-gradient(ellipse 40% 50% at 80% 40%, rgba(233,170,90,.10), transparent 70%), var(--c-cafe); }
.pg-topo .cx { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6); align-items: center; }
.pg-topo .rot { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--terra-2); margin: 0 0 var(--s2); }
.pg-topo h1 { font-size: clamp(36px, 4.6vw, 62px); font-weight: 800; line-height: 1.02; max-width: 18ch; }
.pg-topo h1 em { font-style: normal; color: var(--terra); }
.pg-topo .nome-skill { font-size: 15px; color: var(--texto-2); margin: var(--s2) 0 0; }
.pg-topo .nome-skill b { color: var(--texto); }
.pg-topo .sub { font-size: 18px; color: var(--texto-2); max-width: 58ch; margin: var(--s2) 0 var(--s4); }
.pg-acao { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.pg-preco { font-size: 15px; color: var(--texto-2); }
.pg-preco b { font-family: var(--titulo); font-size: 26px; font-weight: 800; color: var(--texto); margin-right: 6px; }
.pg-preco s { color: var(--texto-3); }
.pg-ic { position: relative; width: 220px; height: 220px; display: grid; place-items: center; }
.pg-ic::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle, rgba(240,196,122,.20), transparent 65%); }
.pg-ic .tile { position: relative; width: 148px; height: 148px; border-radius: 36px; color: var(--texto); border-color: rgba(233,170,90,.4); box-shadow: 0 0 0 1px rgba(233,170,90,.16), 0 20px 60px rgba(233,170,90,.18); }
.pg-ic .tile .ic { width: 72px; height: 72px; }
.pg-ic .tile .ic .a { stroke: #f39a6c; }
.pg-ic-pack { display: flex; flex-wrap: wrap; gap: 12px; width: 240px; justify-content: center; }
.pg-ic-pack .tile { width: 96px; height: 96px; border-radius: 24px; color: var(--texto); }
.pg-ic-pack .tile .ic { width: 44px; height: 44px; }
.migalha { font-size: 13.5px; color: var(--texto-3); margin: 0 0 var(--s3); }
.migalha a { color: var(--texto-2); text-decoration: none; }
.migalha a:hover { text-decoration: underline; }
@media (max-width: 800px) {
  .pg-topo { padding: var(--s5) 0 var(--s4); }
  .pg-topo .cx { grid-template-columns: 1fr; gap: var(--s3); }
  .pg-ic { width: 120px; height: 120px; order: -1; }
  .pg-ic .tile { width: 96px; height: 96px; border-radius: 24px; } .pg-ic .tile .ic { width: 48px; height: 48px; }
  .pg-ic-pack { order: -1; width: auto; justify-content: flex-start; } .pg-ic-pack .tile { width: 56px; height: 56px; border-radius: 15px; } .pg-ic-pack .tile .ic { width: 28px; height: 28px; }
  .pg-topo h1 { font-size: 34px; }
  .pg-acao .btn { width: 100%; justify-content: center; }
}
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s2); counter-reset: p; }
.passo4 { border: 1px solid var(--borda); border-radius: 16px; padding: var(--s3); background: var(--fundo-2); counter-increment: p; }
.passo4::before { content: counter(p, decimal-leading-zero); display: block; font-size: 13px; font-weight: 700; color: var(--terra); margin-bottom: var(--s1); }
.passo4 h3 { font-size: 19px; font-weight: 800; margin-bottom: var(--s1); }
.passo4 p, .passo4 li { color: var(--texto-2); font-size: 15px; margin: 0; }
.passo4 ul { margin: 0; padding-left: 18px; }
.duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s2); }
.caixa { border: 1px solid var(--borda); border-radius: 16px; padding: var(--s3); background: var(--fundo-2); }
.caixa h3 { font-size: 20px; font-weight: 800; margin-bottom: var(--s2); }
.caixa ul { margin: 0; padding-left: 18px; color: var(--texto-2); display: grid; gap: 6px; font-size: 15.5px; }
.caixa p { color: var(--texto-2); font-size: 15.5px; margin: var(--s2) 0 0; }
.caixa.nunca { border-top: 3px solid var(--verm); }
.caixa.ter { border-top: 3px solid var(--terra); }
.limite { max-width: 760px; }
.limite h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; }
.limite p { color: var(--texto-2); font-size: 17px; margin: var(--s2) 0 0; }
.irmas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s2); }
.irma { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s2); align-items: start; padding: var(--s2); border: 1px solid var(--borda); border-radius: 14px; background: var(--fundo-2); text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.irma:hover { border-color: #6a4a2a; transform: translateY(-2px); }
.irma:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
.irma .tile { width: 40px; height: 40px; border-radius: 11px; }
.irma b { display: block; font-family: var(--titulo); font-size: 17px; font-weight: 800; line-height: 1.2; }
.irma span span { display: block; font-size: 14px; color: var(--texto-2); margin-top: 4px; line-height: 1.45; }
.irma .tag-impl { display: inline-block; margin-top: var(--s1); font-size: 12px; color: var(--ouro); }
.seq { display: grid; gap: var(--s2); counter-reset: s; }
.seq .irma { grid-template-columns: 32px 48px minmax(0, 1fr); counter-increment: s; }
.seq .irma::before { content: counter(s, decimal-leading-zero); font-size: 13px; font-weight: 700; color: var(--terra); padding-top: 12px; }
.seq .irma .tile { width: 48px; height: 48px; border-radius: 13px; }
.seq .irma em { display: block; font-style: normal; font-size: 13.5px; color: var(--texto-3); margin-top: 6px; }
.juntas { border-left: 3px solid var(--terra); padding: var(--s1) 0 var(--s1) var(--s3); color: var(--texto-2); font-size: 17px; max-width: 70ch; margin: var(--s4) 0 0; }
.faixa-final { text-align: center; border: 1px solid var(--borda); border-radius: 24px; padding: var(--s6) var(--s3); background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(233,170,90,.16), transparent 70%), var(--fundo-2); }
.faixa-final h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; }
.faixa-final h2 em { font-style: normal; color: var(--terra); }
.faixa-final p { color: var(--texto-2); margin: var(--s2) auto var(--s3); max-width: 56ch; }
.faixa-final .acoes { justify-content: center; }
.gaveta .preco-g { margin: var(--s3) 0 0; font-family: var(--titulo); font-size: 22px; font-weight: 800; color: var(--texto); }
.gaveta .preco-g span { display: block; font-family: var(--texto-f); font-size: 13.5px; font-weight: 500; color: var(--texto-3); margin-top: 2px; }
.gaveta .ir-pag { margin: var(--s2) 0 0; }
.gaveta .ir-pag a { color: var(--terra-2); font-weight: 700; text-decoration: none; }
.gaveta .ir-pag a:hover { text-decoration: underline; }

/* produtos: o 4.1 com a régua na largura toda; os outros mais baixos */
.prodb-1 { grid-template-columns: 200px minmax(0, 1fr); }
.prodb-1 .regua-larga { grid-column: 1 / -1; margin: 0; }
.prodb:not(.prodb-1) { grid-template-columns: 168px minmax(0, 1fr); }
.prodb:nth-child(even) { grid-template-columns: minmax(0, 1fr) 168px; }
.prodb:not(.prodb-1) p { margin-bottom: var(--s2); }
.prodb-1 p { margin-bottom: var(--s2); }
@media (max-width: 760px) {
  .prodb-1, .prodb:not(.prodb-1), .prodb:nth-child(even) { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (max-width: 900px) { .dobra-sk h1 { font-size: 31px; } }
@media (max-width: 600px) { .kit .kit-acoes .btn { width: 100%; justify-content: center; } }
@media (max-width: 860px) { .pl-sep-vazio { display: none; } }

/* =====================================================================
   v3.1 (08/11/2026): rodada final do revisor e respostas da Bruna.
   ===================================================================== */
:root { --c-quente: #1c1610; --c-verm: #231612; --misturar: 220px; }
.bloco[data-halo=ouro-esq], .bloco[data-halo=ouro-dir] { --halo: rgba(233,170,90,.12); }
.bloco[data-halo=terra-esq], .bloco[data-halo=terra-dir] { --halo: rgba(207,118,80,.12); }
/* costura de luz só onde a página pede (classe .costura) */
.bloco:not(.costura)::before, .bloco:not(.costura)::after { display: none; }
.bloco::before { background: linear-gradient(90deg, transparent, rgba(207,118,80,.5) 25%, rgba(240,196,122,.75) 50%, rgba(207,118,80,.5) 75%, transparent); }
.bloco::after { height: 56px; margin-top: -28px; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(233,170,90,.12), transparent 70%); }
/* cascata mais curta */
html.anima .revela, html.anima .cascata > * { transform: translateY(12px); transition-duration: .5s; }
html.anima .visto .revela, html.anima .visto .cascata > *, html.anima .revela.visto { transform: none; }
html.anima .assentou .cascata > * { transition: border-color .2s, transform .2s; }
/* botões */
.btn-contorno { background: transparent; color: var(--terra-2); border: 1.5px solid var(--terra); }
.btn-contorno:hover { background: rgba(207,118,80,.12); color: var(--texto); }

/* primeira dobra em 4 linhas */
@media (min-width: 901px) { .dobra .cx { grid-template-columns: minmax(0, 1.55fr) minmax(0, .65fr); } }
.dobra h1 { font-size: clamp(38px, 3.9vw, 56px); line-height: 1.03; letter-spacing: -.02em; }
.palco-otto { max-width: 400px; }
.dobra .prova-linha { max-width: none; }
@media (max-width: 900px) { .dobra h1 { font-size: 34px; } .palco-otto { max-width: 150px; } }

/* luminária: a acesa com a cúpula dourada da produção */
.ofc-mesa.acesa .cupula { background: linear-gradient(180deg, #f2c983 0%, #e0b066 55%, #c8954f 100%); box-shadow: 0 12px 40px 12px rgba(233,170,90,.30), inset 0 1px 0 rgba(255,246,220,.7), inset 0 -3px 6px rgba(255,236,190,.35); }
.ofc-lum .cupula { transition: background .3s ease, box-shadow .3s ease; }
.ofc-mesa::before { background: radial-gradient(ellipse 60% 26% at 50% 18%, rgba(240,196,122,.22), transparent 70%), radial-gradient(ellipse 80% 34% at 50% 78%, rgba(240,190,110,.26), rgba(233,150,90,.06) 60%, transparent 75%); }
.ofc-cone { width: 170%; max-width: 210px; clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255,226,170,.50), rgba(255,226,170,.16) 62%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 30%, #000 70%, transparent 96%); mask-image: linear-gradient(90deg, transparent 4%, #000 30%, #000 70%, transparent 96%); }
/* painel: só terracota e dourado */
.ofc-p-rot.gargalo { color: var(--terra-2); }
.ofc-p-rot.faz { color: var(--ouro); }

/* quem faz: galeria pronta para os prints reais (16:10 + 2 miniaturas) */
.galeria-sistema { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--s1); align-items: start; }
.galeria-sistema > .principal, .galeria-sistema > img:first-child { grid-row: span 2; }
.galeria-sistema > * { width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; object-fit: cover; }
.galeria-sistema > img { border: 1px solid var(--borda); }
.print-sistema.mini { border-radius: 12px; gap: 0; }
.print-sistema.mini span { font-size: 12px; }
.print-sistema.principal b { font-size: 20px; }
.galeria-sistema > .mini:nth-child(3) { align-self: end; }
.galeria-sistema { align-self: center; }
.oab .nw { white-space: nowrap; }
.oab .sep { margin: 0 6px; }

/* produtos mais compactos */
.prodb { padding: 20px; gap: var(--s3); }
.prodb:not(.prodb-1) { grid-template-columns: 144px minmax(0, 1fr); }
.prodb:nth-child(even):not(.prodb-1) { grid-template-columns: minmax(0, 1fr) 144px; }
.prodb-1 { grid-template-columns: 144px minmax(0, 1fr); row-gap: var(--s2); }
.prodb-1 .prodb-acao { grid-column: 1 / -1; }
.prodb-1 .corpo-b p { margin-bottom: 0; }
.reg.destaque { padding-top: 24px; }
.prodb-fina { grid-template-columns: 72px minmax(0, 1fr) auto !important; padding: 16px 20px; align-items: center; }
.prodb-fina .prodb-img { order: 0 !important; border-radius: 12px; }
.prodb-fina .prodb-cab { margin-bottom: 4px; }
.prodb-fina h3 { font-size: 20px; margin-bottom: 2px; max-width: none; }
.prodb-fina p { margin: 0; font-size: 15px; }
.servs3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.serv3 { display: flex; flex-direction: column; gap: var(--s1); border: 1px solid var(--borda); border-radius: 16px; padding: 20px; background: var(--fundo-2); }
.serv3-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); margin-bottom: 4px; }
.serv3 h3 { font-size: 20px; font-weight: 800; }
.serv3 p { margin: 0 0 var(--s1); color: var(--texto-2); font-size: 15px; }
.serv3 .btn { margin-top: auto; align-self: flex-start; }
.fech { padding: 40px; }
@media (max-width: 900px) { .servs3 { grid-template-columns: 1fr; } .fech { padding: var(--s3); } }
@media (max-width: 760px) {
  .prodb:not(.prodb-1), .prodb:nth-child(even):not(.prodb-1), .prodb-1 { grid-template-columns: 88px minmax(0, 1fr); }
  .prodb-fina { grid-template-columns: 72px minmax(0, 1fr) !important; }
  .prodb-fina .btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .prodb .corpo-b > .btn { width: 100%; justify-content: center; }
  .prodb-1 .prodb-acao .btn { width: 100%; justify-content: center; }
  .serv3 .btn { width: 100%; justify-content: center; }
  .reg { padding-bottom: 16px; min-height: 0; }
}
.etq { white-space: nowrap; }
@media (max-width: 700px) { .olho { font-size: 11px; letter-spacing: .12em; } }

/* /skills, skill e pack */
.passos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .passos-3 { grid-template-columns: 1fr; } }
.passo4 h3 { font-size: 17px; }
.passo4 p { font-size: 15px; line-height: 1.55; }
.conta.conta-pg { padding-top: 128px; }
.conta.conta-pg::after { inset: 112px 0 0; }
.resumo::first-letter, .desc::first-letter, .irma span span::first-letter, .kit p::first-letter, .reg p::first-letter { text-transform: uppercase; }
@media (min-width: 901px) { .duv .cab3 { position: sticky; top: 96px; } }

/* rodapé alinhado */
.rodape .cx { align-items: baseline; gap: var(--s1) var(--s3); }
.rodape .cx > span { padding: 8px 0; }
.rodape-links { display: inline-flex; gap: var(--s1); flex-wrap: wrap; align-items: baseline; }
.rodape-links a { padding: 0 4px; }
/* faixa terracota: mistura a partir do tom da seção anterior */
.conta, .conta[data-de] { --antes-c: var(--c-quente); --mist-c: 144px; background: linear-gradient(180deg, var(--antes-c) 0, var(--c-terra) var(--mist-c), var(--c-terra) 100%); }
.conta[data-de=cafe] { --antes-c: var(--c-cafe); }
.conta[data-de=verm] { --antes-c: var(--c-verm); }
.conta[data-de=respiro] { --antes-c: var(--c-respiro); }
.conta.conta-pg { --mist-c: 104px; }
/* compactação da home (meta: até 6 alturas de tela em 1440) */
@media (min-width: 701px) { .bloco { padding: 96px 0 48px; } .bloco::before, .bloco::after { top: 48px; } }
.cab3 { margin-bottom: var(--s4); }
@media (min-width: 901px) { .dobra { padding: var(--s6) 0 var(--s5); } }
@media (min-width: 961px) { .ofc-mesa { height: 196px; } .ofc-cone { bottom: 70px; } .ofc-tampo { bottom: 56px; } .ofc-ic { bottom: 66px; } }
.ofc-painel { padding: var(--s3); min-height: 0; }
.credenciais { margin-top: var(--s3); }
.pilares { margin-top: var(--s4); }
.pilar { padding: 20px; }
.prods { gap: 12px; }
.prodb:not(.prodb-1), .prodb-1 { grid-template-columns: 120px minmax(0, 1fr); }
.prodb:nth-child(even):not(.prodb-1) { grid-template-columns: minmax(0, 1fr) 120px; }
.prodb-fina { grid-template-columns: 64px minmax(0, 1fr) auto !important; }
.prodb h3 { font-size: clamp(22px, 2vw, 26px); margin-bottom: var(--s1); }
.prodb p { font-size: 15.5px; }
.prodb-cab { margin-bottom: 12px; }
.reg { padding: 14px 14px 16px; }
.reg.destaque { padding-top: 22px; }
.metodo4 > div { padding: 20px; }
.metodo4 h3 { margin: 12px 0 4px; }
.faq summary { padding: 14px 20px; }
.fech h2 { font-size: clamp(26px, 2.8vw, 36px); }
.fech ul { gap: 2px; margin-bottom: var(--s2); }
.fech .capa-livro { max-width: 200px; padding: 20px; }
.fech .capa-livro h3 { font-size: 24px; }
.capa-livro .ic-capa .tile-g { width: 72px; height: 72px; border-radius: 18px; }
@media (max-width: 760px) {
  .prodb:not(.prodb-1), .prodb:nth-child(even):not(.prodb-1), .prodb-1 { grid-template-columns: 80px minmax(0, 1fr); }
  .prodb-fina { grid-template-columns: 64px minmax(0, 1fr) !important; }
}
/* curso e consultoria lado a lado (Otto à direita, pequeno) */
.prods-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.prods-par .prodb, .prods-par .prodb:nth-child(even) { grid-template-columns: minmax(0, 1fr) 104px !important; align-items: start; }
.prods-par .prodb-img { order: 2 !important; }
.prods-par .prodb .corpo-b { display: flex; flex-direction: column; height: 100%; }
.prods-par .prodb .corpo-b > .btn { margin-top: auto; align-self: flex-start; }
.prodb-1 h3 { max-width: none; }
@media (max-width: 900px) { .prods-par { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .prods-par .prodb, .prods-par .prodb:nth-child(even) { grid-template-columns: 80px minmax(0, 1fr) !important; }
  .prods-par .prodb-img { order: 0 !important; }
  .prods-par .prodb .corpo-b { display: contents; }
  .prods-par .prodb .corpo-b > .btn { align-self: stretch; }
}
@media (min-width: 701px) { .bloco { padding: 88px 0 40px; } .bloco::before, .bloco::after { top: 44px; } }
@media (min-width: 901px) { .fech { padding: 32px 40px; } }
.faq summary { padding: 13px 20px; }
/* quem faz: prints reais do sistema numa moldura de janela, com luz de luminária vindo de cima */
.sistema { position: relative; margin: 0; }
.sistema::before { content: ""; position: absolute; left: 10%; right: 10%; top: -40px; height: 160px; background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(240,196,122,.16), transparent 70%); pointer-events: none; }
.sistema-grade { position: relative; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.sistema-minis { display: grid; gap: 12px; }
.janela { border: 1px solid #4a3c2f; border-radius: 14px; overflow: hidden; background: #110e0b; box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(233,170,90,.05), inset 0 1px 0 rgba(255,230,190,.08); }
.janela-barra { display: flex; gap: 5px; align-items: center; height: 22px; padding: 0 10px; background: linear-gradient(180deg, #2a221b, #1d1814); border-bottom: 1px solid #3a2f25; }
.janela-barra i { width: 7px; height: 7px; border-radius: 50%; background: #5a4a3a; }
.janela-barra i:first-child { background: #9b6a52; }
.janela img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.janela-mini { border-radius: 10px; }
.janela-mini .janela-barra { height: 14px; gap: 4px; padding: 0 7px; }
.janela-mini .janela-barra i { width: 5px; height: 5px; }
.sistema figcaption { margin-top: 12px; font-size: 13px; color: var(--texto-3); }
@media (max-width: 700px) { .sistema-grade { grid-template-columns: 1fr; } .sistema-minis { display: none; } }
@media (min-width: 901px) { .quem { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s5); } }
@media (min-width: 901px) { .quem h2 { font-size: clamp(28px, 2.6vw, 36px); } .quem { align-items: start; } .pilares { margin-top: var(--s3); } }
.prodb .reg p { margin: 0; }

/* =====================================================================
   v3.2 (08/11/2026): celular e iPad. Nada aqui vale em telas >= 1100 px.
   ===================================================================== */
.divisor b { font-weight: inherit; }
.divisor span::before { content: "· "; }

@media (max-width: 1099px) {
  /* área de toque de 44 px */
  .btn, .pl-btn { min-height: 44px; }
  .nav-v3 a, .topo-guia { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .ver-pag, .conta-link, .rodape-links a, .link-terra, .migalha a { display: inline-flex; align-items: center; min-height: 44px; }
  .rodape-links a { padding: 0 6px; }
  .bloco { padding: 80px 0 40px; --misturar: 160px; }
  .bloco::before, .bloco::after { top: 40px; }
}
@media (max-width: 900px) {
  .topo .topo-v3 { padding-block: 4px 0; row-gap: 0; }
}

/* topo (home e /skills): Otto centralizado e maior, com o palco de luz */
@media (max-width: 699px) {
  .dobra .cx { grid-template-columns: 1fr; gap: var(--s2); }
  .palco-otto, .dobra-sk .palco-otto { order: -1; justify-self: center; width: 232px; max-width: 232px; margin: 0 auto -8px; }
  .palco-otto::before { inset: -12% -22% -4%; background: radial-gradient(ellipse 50% 50% at 50% 42%, rgba(240,196,122,.26), rgba(207,118,80,.08) 60%, transparent 75%); }
  .dobra .olho { font-size: 10px; letter-spacing: .06em; white-space: nowrap; }
  .dobra h1, .dobra-sk h1 { font-size: clamp(28px, 8.4vw, 36px); }
  .dobra { padding: var(--s3) 0 var(--s4); }
}
/* iPad em pé (700 a 900): duas colunas no topo, sem esticar o layout do celular */
@media (min-width: 700px) and (max-width: 900px) {
  .dobra .cx, .dobra-sk .cx { grid-template-columns: minmax(0, 1.5fr) minmax(0, .75fr); gap: var(--s4); }
  .palco-otto, .dobra-sk .palco-otto { order: 0; max-width: 260px; justify-self: center; }
  .dobra h1, .dobra-sk h1 { font-size: 40px; }
  .dobra .btn { width: auto; }
  .dobra .olho { font-size: 11.5px; }
}

/* espaços entre seções no celular */
@media (max-width: 700px) {
  .bloco { padding: 64px 0 32px; --misturar: 100px; }
  .bloco::before, .bloco::after { top: 32px; }
  .bloco[data-de=terra] { padding-top: 112px; --misturar: 88px; }
  .bloco[data-de=terra]::before, .bloco[data-de=terra]::after { top: 88px; }
  .conta, .conta[data-de] { padding-top: 112px; --mist-c: 88px; padding-bottom: var(--s6); }
  .conta.conta-pg { padding-top: 104px; --mist-c: 80px; }
  .conta::after, .conta.conta-pg::after { inset: 80px 0 0; }
  .cab3 { margin-bottom: var(--s3); }
  .fecho-bloco { margin-top: var(--s2); }
  .faixa-final { padding: var(--s4) var(--s2); }
}

/* /skills: cartão com o ícone numa linha no topo e o texto na largura toda */
@media (max-width: 600px) {
  .prod { flex-direction: column; }
  .prod .palco { flex: none; height: 52px; min-height: 0; border-right: 0; border-bottom: 1px solid var(--borda); background: radial-gradient(ellipse 30% 120% at 34px 0%, rgba(233,170,90,.20), transparent 70%), #15120f; }
  .prod .palco::before, .prod .palco::after, .prod .palco i { display: none; }
  .prod .palco .tile, .prod:hover .palco .tile { position: absolute; left: 14px; top: 50%; bottom: auto; width: 36px; height: 36px; border-radius: 10px; transform: translateY(-50%); }
  .prod .palco .tile .ic { width: 20px; height: 20px; }
  .prod .corpo { padding: 14px 16px 10px; }
  .divisor { display: grid; gap: 2px; align-items: start; margin: var(--s3) 0 12px; }
  .divisor::after { display: none; }
  .divisor span { font-weight: 500; }
  .divisor span::before { content: none; }
  .painel-area .cab { gap: var(--s1); }
}

/* home, 4.1: régua 2x2 compacta no celular (título + 1 linha) */
@media (max-width: 760px) {
  .regua, .prodb-1 .regua-larga { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); }
  .reg { padding: 12px 12px 12px; }
  .reg.destaque { padding-top: 18px; }
  .reg h4 { font-size: 16px; line-height: 1.15; }
  .reg .sub { margin: 4px 0 0; }
  .prodb .reg p { display: none; }
  .reg .chip { font-size: 10.5px; padding: 3px 8px; right: 8px; top: -10px; }
}

/* página de skill: ícone pequeno ao lado da trilha */
@media (max-width: 800px) {
  .pg-topo .cx { position: relative; }
  .pg-ic { position: absolute; right: var(--gut); top: 0; width: 56px; height: 56px; order: 0; }
  .pg-ic::before { inset: -40%; }
  .pg-ic .tile { width: 52px; height: 52px; border-radius: 14px; }
  .pg-ic .tile .ic { width: 26px; height: 26px; }
  .pg-topo .cx > div:first-child { min-width: 0; }
  .pg-topo .migalha, .pg-topo .rot { padding-right: 68px; }
  .pg-ic-pack .tile { width: 44px; height: 44px; border-radius: 12px; }
  .pg-ic-pack .tile .ic { width: 22px; height: 22px; }
}
/* iPad em pé: página de skill com o ícone na coluna, menor */
@media (min-width: 801px) and (max-width: 1099px) { .pg-ic { width: 160px; height: 160px; } .pg-ic .tile { width: 120px; height: 120px; border-radius: 30px; } .pg-ic .tile .ic { width: 56px; height: 56px; } }
@media (max-width: 800px) { .pg-topo { overflow-x: clip; } }
@media (max-width: 1099px) { .rodape a { display: inline-flex; align-items: center; min-height: 44px; } }
/* iPad em pé (700 a 900): menu numa linha e blocos em colunas, como no desktop */
@media (min-width: 700px) and (max-width: 900px) {
  .topo .topo-v3 { grid-template-columns: auto minmax(0, 1fr) auto; height: 64px; padding-block: 0; column-gap: var(--s3); }
  .nav-v3 { grid-column: auto; grid-row: auto; justify-content: center; gap: var(--s3); font-size: 14.5px; }
  .topo-guia { grid-row: auto; grid-column: auto; }
  .pilares { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .servs3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .serv3 .btn { white-space: normal; text-align: left; }
  .prods-par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prods-par .prodb, .prods-par .prodb:nth-child(even) { grid-template-columns: minmax(0, 1fr) 80px !important; }
}
/* celular: menos vão entre seções e dentro dos blocos de produto */
@media (max-width: 700px) {
  .bloco { padding: 56px 0 28px; }
  .bloco::before, .bloco::after { top: 28px; }
  .prodb { row-gap: var(--s1); }
  .prodb .prodb-cab { margin-bottom: 4px; }
}

/* =====================================================================
   v3.3 (08/11/2026): retorno da Bruna (Otto grande, dobras 2 e 3) e prompts em volume.
   ===================================================================== */
/* 1. Otto da home de volta ao tamanho grande */
@media (min-width: 901px) {
  .dobra:not(.dobra-sk) .cx { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s6); }
  .dobra:not(.dobra-sk) h1 { font-size: clamp(38px, 4.3vw, 60px); line-height: 1.02; }
  .dobra:not(.dobra-sk) .palco-otto { max-width: 460px; }
  .dobra:not(.dobra-sk) .prova-linha { max-width: 54ch; }
}

/* 2. o que sai da mesa: oficina 3x3 à esquerda, painel à direita */
.ofc-duo { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--s3); align-items: stretch; }
.ofc-col { display: flex; flex-direction: column; gap: 12px; }
.ofc-dica { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--texto-2); }
.ofc-dica-luz { width: 10px; height: 10px; border-radius: 50%; background: #f2c983; box-shadow: 0 0 0 4px rgba(242,201,131,.14), 0 0 14px 4px rgba(242,201,131,.35); }
.ofc.ofc-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; }
.ofc-3 .ofc-mesa { height: 184px; border-right: 1px solid #1f1a15; border-bottom: 1px solid #1f1a15; }
.ofc-3 .ofc-mesa:nth-child(3n) { border-right: 0; }
.ofc-3 .ofc-mesa:nth-last-child(-n+3) { border-bottom: 0; }
.ofc-3 .ofc-lum { transform: translateX(-50%) scale(1.08); transform-origin: 50% 0; }
.ofc-3 .ofc-cone { top: 56px; bottom: 70px; }
.ofc-3 .ofc-tampo { bottom: 56px; }
.ofc-3 .ofc-ic { bottom: 66px; }
.ofc-duo .ofc-painel { display: flex; flex-direction: column; gap: var(--s2); margin: 0; padding: var(--s4); min-height: 0; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(240,196,122,.10), transparent 70%), var(--fundo-2); }
.ofc-p-topo { display: flex; align-items: center; gap: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--borda); }
.ofc-p-topo .tile-m { width: 56px; height: 56px; border-color: rgba(233,170,90,.4); box-shadow: 0 0 0 1px rgba(233,170,90,.14), 0 10px 28px rgba(233,170,90,.18); }
.ofc-p-topo .ofc-p-olho { margin: 0 0 2px; }
.ofc-duo .ofc-painel h3 { font-size: clamp(28px, 2.6vw, 36px); }
.ofc-p-bloco { border-radius: 14px; padding: var(--s2) 20px; }
.ofc-p-bloco p:last-child { margin: 0; color: var(--texto); font-size: 17px; line-height: 1.5; }
.ofc-p-bloco.gargalo { background: rgba(207,118,80,.08); border-left: 3px solid var(--terra); }
.ofc-p-bloco.faz { background: rgba(233,192,98,.07); border-left: 3px solid var(--ouro); }
.ofc-p-seta { align-self: center; display: grid; place-items: center; width: 32px; height: 32px; margin: -6px 0; border-radius: 50%; border: 1px solid var(--borda-2); color: var(--ouro); background: var(--fundo); }
@media (max-width: 959px) {
  .ofc-duo { grid-template-columns: 1fr; gap: var(--s2); }
  .ofc-3 .ofc-mesa { height: 168px; }
  .ofc-3 .ofc-lum { transform: translateX(-50%) scale(.82); }
  .ofc-3 .ofc-cone { top: 46px; bottom: 58px; }
  .ofc-3 .ofc-tampo { bottom: 46px; }
  .ofc-3 .ofc-ic { bottom: 54px; }
  .ofc-duo .ofc-painel { padding: var(--s3); }
  .ofc-p-bloco p:last-child { font-size: 16px; }
}
@media (max-width: 600px) { .ofc-3 .ofc-mesa { height: 150px; } .ofc-dica { font-size: 13px; } }

/* 3. por que a artificializando: topo, print grande, pilares, assinatura */
.quem-topo { max-width: 760px; margin: 0 auto; text-align: center; }
.quem-topo h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; }
.quem-topo .apoio { color: var(--texto-2); font-size: 17px; margin: var(--s2) auto 0; max-width: 62ch; }
.sistema-grande { max-width: 980px; margin: var(--s6) auto 0; }
.sistema-grande::before { left: 0; right: 0; top: -64px; height: 220px; background: radial-gradient(ellipse 45% 60% at 50% 0%, rgba(240,196,122,.20), transparent 70%); }
.sistema-grande > .janela { position: relative; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 -10px 60px rgba(240,196,122,.08), inset 0 1px 0 rgba(255,230,190,.08); }
.sistema-grande .janela-barra { height: 26px; }
.sistema-grande .sistema-minis { position: relative; display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
.sistema-grande .janela-mini { width: 220px; }
.sistema-grande figcaption { text-align: center; margin-top: 12px; }
#quem-faz .pilares { margin-top: var(--s6); }
.assinatura { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-top: var(--s6); }
.assinatura img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center 8%; border: 1px solid var(--borda-2); margin-bottom: var(--s1); }
.assinatura .frase { margin: 0; font-family: var(--titulo); font-size: 24px; font-weight: 800; color: var(--terra); }
.assinatura .oab { margin: 0; font-size: 14px; color: var(--texto-2); }
@media (max-width: 700px) {
  .quem-topo { text-align: left; }
  .sistema-grande { margin-top: var(--s4); }
  .sistema-grande .sistema-minis { display: none; }
  .sistema-grande figcaption { text-align: left; }
  #quem-faz .pilares, .assinatura { margin-top: var(--s4); }
  .assinatura .frase { font-size: 21px; }
}

/* prompts em volume: cartão compacto, grade densa, 6 de início e busca */
.psec { margin-top: var(--s1); }
.psec-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: var(--s1) var(--s3); align-items: end; margin-bottom: 12px; }
.psec-cab .divisor { margin-bottom: 6px; }
.busca input { width: 100%; min-height: 44px; font: inherit; font-size: 15px; padding: 10px 14px 10px 38px; border: 1.5px solid var(--borda-campo); border-radius: 12px; color: var(--texto); background: var(--fundo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='none' stroke='%238f8273' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M15.5 15.5L20 20'/%3E%3C/svg%3E") no-repeat 12px 50%; }
.busca input:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px rgba(207,118,80,.22); }
.busca-msg { font-size: 14px; color: var(--texto-2); margin: 0 0 12px; }
.pgrade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
.pgrade:not(.aberta) .pcard.extra { display: none; }
.pcard { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); transition: border-color .2s, transform .2s; }
.pcard:hover { border-color: #6a4a2a; transform: translateY(-1px); }
.pcard:has(.prod-btn:focus-visible) { outline: 2px solid var(--ouro); outline-offset: 2px; }
.pcard h4 { margin: 0; font-family: var(--titulo); font-size: 16px; font-weight: 800; line-height: 1.2; }
.pcard p { margin: 0; font-size: 14px; color: var(--texto-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-pe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; }
.pcard-tag { color: var(--texto-2); border: 1px solid var(--borda-2); border-radius: 4px; padding: 0 6px; line-height: 18px; }
.pcard-pack { margin-left: auto; color: var(--ouro); font-weight: 600; }
.ver-todos { margin-top: 12px; }
@media (max-width: 1099px) { .pgrade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .psec-cab { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .pgrade { grid-template-columns: 1fr; } .ver-todos { width: 100%; justify-content: center; } }

/* =====================================================================
   v3.4 (08/11/2026): trilha de cor da home (cada dobra com o seu tom, misturando em degradê longo
   e com halos de luminária), vitrine /prompts e catálogo só de skills.
   ===================================================================== */
:root { --c-quente: #201710; --c-verm: #281711; --c-respiro: #1d1610; }
.bloco[data-halo=ouro-esq], .bloco[data-halo=ouro-dir] { --halo: rgba(233,170,90,.14); }
.bloco[data-halo=terra-esq], .bloco[data-halo=terra-dir] { --halo: rgba(207,118,80,.14); }

/* 1 topo: café quase preto com o halo do Otto (já é o .dobra) */
/* 2 departamentos: café acobreado, luz das luminárias vindo de cima */
.home #o-que-resolve { background:
  radial-gradient(ellipse 60% 300px at 50% 0, rgba(240,196,122,.16), transparent 70%),
  radial-gradient(ellipse 45% 40% at 100% 60%, rgba(233,170,90,.10), transparent 70%),
  linear-gradient(180deg, #12100e 0, #241a12 220px, #2b1d14 100%); }
/* 3 por que a artificializando: terracota escura e profunda, halo grande atrás do print */
.home #quem-faz { background:
  radial-gradient(ellipse 65% 34% at 50% 46%, rgba(207,118,80,.20), transparent 70%),
  radial-gradient(ellipse 50% 220px at 0% 220px, rgba(233,170,90,.14), transparent 70%),
  linear-gradient(180deg, #2b1d14 0, #2e1a14 240px, #3a1f17 100%); }
/* 4 produtos: volta ao café escuro, dourado à esquerda e terracota à direita */
.home #produtos { background:
  radial-gradient(ellipse 50% 28% at 0% 30%, rgba(233,170,90,.14), transparent 70%),
  radial-gradient(ellipse 50% 28% at 100% 72%, rgba(207,118,80,.15), transparent 70%),
  linear-gradient(180deg, #3a1f17 0, #161210 260px, #161210 100%); }
/* 5 método: faixa mais quente com brilho dourado no centro */
.home #metodo { background:
  radial-gradient(ellipse 55% 60% at 50% 58%, rgba(240,196,122,.16), transparent 70%),
  linear-gradient(180deg, #161210 0, #2a1d12 200px, #2a1d12 100%); }
/* 6 dúvidas: café escuro neutro */
.home #duvidas { background:
  radial-gradient(ellipse 45% 200px at 100% 200px, rgba(207,118,80,.12), transparent 70%),
  linear-gradient(180deg, #2a1d12 0, #14110f 220px, #14110f 100%); }
/* 7 fechamento: o ponto mais quente da página */
.home #guia { background:
  radial-gradient(ellipse 60% 55% at 72% 45%, rgba(240,196,122,.18), transparent 70%),
  radial-gradient(ellipse 50% 40% at 0% 80%, rgba(207,118,80,.16), transparent 70%),
  linear-gradient(180deg, #14110f 0, #2a1810 200px, #3d2016 100%); }
.home .rodape { background: linear-gradient(180deg, #3d2016 0, #1d120d 140px, #12100e 100%); border-top-color: rgba(233,170,90,.18); }
@media (max-width: 700px) {
  .home #o-que-resolve { background: radial-gradient(ellipse 90% 220px at 50% 0, rgba(240,196,122,.16), transparent 70%), linear-gradient(180deg, #12100e 0, #241a12 120px, #2b1d14 100%); }
  .home #quem-faz { background: radial-gradient(ellipse 90% 26% at 50% 40%, rgba(207,118,80,.20), transparent 70%), linear-gradient(180deg, #2b1d14 0, #2e1a14 120px, #3a1f17 100%); }
  .home #produtos { background: radial-gradient(ellipse 80% 18% at 0% 25%, rgba(233,170,90,.14), transparent 70%), radial-gradient(ellipse 80% 18% at 100% 75%, rgba(207,118,80,.15), transparent 70%), linear-gradient(180deg, #3a1f17 0, #161210 140px, #161210 100%); }
  .home #metodo { background: radial-gradient(ellipse 90% 50% at 50% 55%, rgba(240,196,122,.14), transparent 70%), linear-gradient(180deg, #161210 0, #2a1d12 120px, #2a1d12 100%); }
  .home #duvidas { background: linear-gradient(180deg, #2a1d12 0, #14110f 120px, #14110f 100%); }
  .home #guia { background: radial-gradient(ellipse 90% 50% at 60% 45%, rgba(240,196,122,.16), transparent 70%), linear-gradient(180deg, #14110f 0, #2a1810 120px, #3d2016 100%); }
}
/* contraste nos tons mais claros */
.home #quem-faz .olho { color: var(--terra-2); }
.home #quem-faz figcaption { color: var(--texto-2); }

/* home 4.1: o cartão "pack de prompts" leva à vitrine */
.reg-link h4 a { color: inherit; text-decoration: none; }
.reg-link h4 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.reg-link h4 a::before { content: "→ "; color: var(--terra-2); }
.reg-link:hover { border-color: #6a4a2a; }
.reg-link:has(a:focus-visible) { outline: 2px solid var(--ouro); outline-offset: 2px; }

/* /skills: painel só com skills */
.painel-vazio, .painel-prompts { margin: var(--s3) 0 0; color: var(--texto-2); font-size: 15.5px; }
.painel-prompts { padding-top: var(--s2); border-top: 1px solid var(--borda); }

/* /prompts */
.pfiltros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 12px var(--s3); align-items: center; margin-bottom: var(--s3); }
.pchips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.pchip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borda-2); background: var(--fundo-2); color: var(--texto-2); font: 600 14px/1 var(--texto-f); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.pchip:hover { border-color: #6a4a2a; color: var(--texto); }
.pchip[aria-pressed=true] { background: var(--ouro); border-color: var(--ouro); color: #1d1606; }
.pchip:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.pgrupo { margin-top: var(--s4); }
.pgrupo:first-child { margin-top: 0; }
.pgrupo h3 { font-size: 22px; font-weight: 800; margin-bottom: 12px; }
.pgrupo[hidden], .pgrupos[hidden] { display: none; }
.pres { margin-top: 0; }
.dobra-pr h1 { font-size: clamp(34px, 4vw, 54px); }
.dobra-pr .pg-acao { margin-top: var(--s1); }
.dobra-pr .sob a { min-height: 0; display: inline; }
@media (max-width: 1099px) { .pchip { min-height: 44px; } }
@media (max-width: 760px) { .pfiltros { grid-template-columns: 1fr; } }

/* =====================================================================
   v3.5 (08/11/2026): efeitos visíveis (entrada, Otto vivo, costura em todas as dobras,
   luz nos cartões, oficina respirando, brilho nos botões, barra de progresso).
   Só transform, opacity e filter. "Reduzir movimento": só fade, nada contínuo.
   ===================================================================== */
/* 1. entrada: título, depois parágrafo, depois cartões em cascata */
html.anima .revela:not(.cab3), html.anima .cab3.revela > *, html.anima .cascata > * {
  opacity: 0; transform: translateY(32px); filter: blur(6px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s cubic-bezier(.2,.7,.2,1);
}
html.anima .cab3.revela { opacity: 1; transform: none; filter: none; }
html.anima .cab3.revela > :nth-child(2) { transition-delay: 90ms; }
html.anima .cab3.revela > :nth-child(3) { transition-delay: 180ms; }
html.anima .visto .revela:not(.cab3), html.anima .visto .cab3.revela > *, html.anima .visto .cascata > *, html.anima .revela.visto { opacity: 1; transform: none; filter: none; }
html.anima .assentou .cascata > * { filter: none; transition: border-color .25s, transform .25s cubic-bezier(.2,.7,.2,1); }
html.anima .ja-visto .revela, html.anima .ja-visto .cab3.revela > *, html.anima .ja-visto .cascata > * { transition: none !important; }
/* reduzir movimento: só fade */
html.anima.reduz .revela:not(.cab3), html.anima.reduz .cab3.revela > *, html.anima.reduz .cascata > * { transform: none !important; filter: none !important; transition: opacity .5s ease !important; }

/* 2. Otto vivo: entra no carregamento, flutua e o halo respira */
@media (prefers-reduced-motion: no-preference) {
  @keyframes otto-entra { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes otto-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  @keyframes halo-respira { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
  .palco-otto { animation: otto-entra .9s cubic-bezier(.2,.7,.2,1) both; }
  .palco-otto img { animation: otto-flutua 5s ease-in-out .9s infinite; }
  .palco-otto::before { animation: halo-respira 5s ease-in-out infinite; }
  .prodb-img img { animation: otto-flutua 6s ease-in-out infinite; }
  .prodb:nth-child(2n) .prodb-img img, .prods-par .prodb:nth-child(2) .prodb-img img { animation-delay: -2s; }
}

/* 3. costura de luz em todas as transições, mais visível, vazando para as duas seções */
.bloco:not(.costura)::before, .bloco:not(.costura)::after { display: block; }
.bloco::before { height: 1px; background: linear-gradient(90deg, transparent, rgba(207,118,80,.6) 22%, rgba(255,214,150,.95) 50%, rgba(207,118,80,.6) 78%, transparent); transition: transform 1.4s cubic-bezier(.2,.7,.2,1), opacity 1.4s ease; }
.bloco::after { width: min(900px, 80%); height: 96px; margin-top: -48px; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(240,196,122,.20), rgba(207,118,80,.06) 55%, transparent 72%); transition: transform 1.4s cubic-bezier(.2,.7,.2,1), opacity 1.4s ease; }

/* 4. cartões: sobem, borda dourada e luz que segue o cursor */
.prodb, .pilar, .pl, .prod, .pcard, .reg, .serv3, .kit, .irmas .irma, .metodo4 > div { position: relative; isolation: isolate; }
.prodb::before, .pilar::before, .pl::before, .prod::before, .pcard::before, .reg::before, .serv3::before, .kit::before, .irmas .irma::before, .metodo4 > div::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(240,196,122,.16), transparent 65%);
  opacity: 0; transition: opacity .3s ease;
}
.pl::before { background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(255,244,230,.28), transparent 65%); }
:is(.prodb, .pilar, .pl, .prod, .pcard, .reg, .serv3, .kit, .irmas .irma, .metodo4 > div):is(:hover, .tocado)::before { opacity: 1; }
:is(.prodb, .pilar, .prod, .pcard, .reg, .serv3, .kit, .irmas .irma):is(:hover, .tocado) { transform: translateY(-4px); border-color: rgba(233,170,90,.45); }
.pl:is(:hover, .tocado) { transform: translateY(-4px); }
.prodb, .pilar, .pl, .pcard, .reg, .serv3, .kit, .irmas .irma { transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease; }
.metodo4 > div { overflow: hidden; }

/* 5. oficina: as lâmpadas apagadas respiram de leve; o painel troca com fade e slide */
@media (prefers-reduced-motion: no-preference) {
  @keyframes lampada-respira { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
  .ofc-mesa:not(.acesa) .lampada { animation: lampada-respira 4.5s ease-in-out infinite; }
  .ofc-mesa:nth-child(2n):not(.acesa) .lampada { animation-delay: -1.5s; }
  .ofc-mesa:nth-child(3n):not(.acesa) .lampada { animation-delay: -3s; }
  .ofc-mesa:not(.acesa) .ofc-lum .lampada { background: #4a3c2c; }
  @keyframes painel-troca { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .ofc-painel > * { animation: painel-troca .45s cubic-bezier(.2,.7,.2,1) both; }
  .ofc-painel > :nth-child(2) { animation-delay: 60ms; } .ofc-painel > :nth-child(3) { animation-delay: 120ms; } .ofc-painel > :nth-child(4) { animation-delay: 180ms; }
}

/* 6. botões: brilho que atravessa; pulso discreto no guia grátis */
.btn-terra, .btn-ouro, .pl-btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-terra::after, .btn-ouro::after, .pl-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; pointer-events: none; background: linear-gradient(105deg, transparent 0%, rgba(255,250,240,.45) 50%, transparent 100%); transform: translateX(-160%) skewX(-12deg); }
@media (prefers-reduced-motion: no-preference) {
  .btn-terra::after, .btn-ouro::after, .pl-btn::after { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .btn-terra:hover::after, .btn-ouro:hover::after, .pl-btn:hover::after { transform: translateX(260%) skewX(-12deg); }
  @keyframes pulso-guia { 0%, 84%, 100% { filter: drop-shadow(0 0 0 rgba(240,196,122,0)); } 90% { filter: drop-shadow(0 0 14px rgba(240,196,122,.55)); } }
  .dobra a.btn[href="/gratis"], #guia a.btn[href="/gratis"] { animation: pulso-guia 6s ease-in-out 2s infinite; }
}

/* 7. barra de progresso dourada no topo */
.progresso { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #c8954f, #f2c983, var(--terra-2)); box-shadow: 0 0 10px rgba(240,196,122,.5); pointer-events: none; }

/* =====================================================================
   v3.6 (08/11/2026): dobra 2 com convite ao clique e produtos do departamento; preços na home.
   ===================================================================== */
.ofc-dica { gap: 10px; padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(233,170,90,.35); background: linear-gradient(90deg, rgba(233,170,90,.10), rgba(233,170,90,.02)); color: var(--texto); font-size: 15px; font-weight: 700; align-self: flex-start; }
.ofc-dica-ic { flex: none; color: var(--ouro); }
@media (hover: hover) { .so-toque { display: none; } }
@media (hover: none) { .so-mouse { display: none; } }
/* convite: lâmpadas apagadas pulsam uma após a outra até o primeiro clique */
@media (prefers-reduced-motion: no-preference) {
  @keyframes convite { 0%, 14%, 100% { opacity: 0; } 6% { opacity: .75; } }
  .ofc.convite .ofc-mesa:not(.acesa) .lampada::after, .ofc.convite .ofc-mesa:not(.acesa) .cupula::after { animation: convite 7.2s ease-in-out infinite; }
  .ofc.convite .ofc-mesa:nth-child(2) :is(.lampada, .cupula)::after { animation-delay: .8s; }
  .ofc.convite .ofc-mesa:nth-child(3) :is(.lampada, .cupula)::after { animation-delay: 1.6s; }
  .ofc.convite .ofc-mesa:nth-child(4) :is(.lampada, .cupula)::after { animation-delay: 2.4s; }
  .ofc.convite .ofc-mesa:nth-child(5) :is(.lampada, .cupula)::after { animation-delay: 3.2s; }
  .ofc.convite .ofc-mesa:nth-child(6) :is(.lampada, .cupula)::after { animation-delay: 4s; }
  .ofc.convite .ofc-mesa:nth-child(7) :is(.lampada, .cupula)::after { animation-delay: 4.8s; }
  .ofc.convite .ofc-mesa:nth-child(8) :is(.lampada, .cupula)::after { animation-delay: 5.6s; }
  .ofc.convite .ofc-mesa:nth-child(9) :is(.lampada, .cupula)::after { animation-delay: 6.4s; }
}
/* hover numa mesa apagada já acende a lâmpada pela metade e o rótulo vira botão claro */
.ofc-mesa:not(.acesa):hover .lampada::after, .ofc-mesa:not(.acesa):focus-visible .lampada::after { opacity: .5; }
.ofc-mesa:not(.acesa):hover .ofc-rot, .ofc-mesa:not(.acesa):focus-visible .ofc-rot { border-color: rgba(233,170,90,.6); color: var(--texto); background: #1d1712; }
.ofc-mesa:not(.acesa) .ofc-rot { border-color: #4d4237; }
/* produtos do departamento no painel */
.ofc-p-prods { display: flex; flex-direction: column; gap: 12px; margin-top: var(--s1); padding-top: var(--s2); border-top: 1px solid var(--borda); }
.ofc-p-prods > .ofc-p-rot { margin: 0; color: var(--texto-2); }
.ofc-p-vazio { margin: 0; color: var(--texto-2); font-size: 15px; }
.mskills { display: grid; gap: var(--s1); }
.mskill { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); transition: border-color .2s, transform .2s; }
.mskill:hover { border-color: rgba(233,170,90,.45); transform: translateY(-2px); }
.mskill:has(.prod-btn:focus-visible) { outline: 2px solid var(--ouro); outline-offset: 2px; }
.mskill .tile-p { width: 32px; height: 32px; border-radius: 9px; }
.mskill h4 { margin: 0; font-family: var(--titulo); font-size: 15.5px; font-weight: 800; line-height: 1.2; }
.mskill p { margin: 2px 0 0; font-size: 13.5px; color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.mskill-pe { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; white-space: nowrap; }
.mskill-pe b { font-family: var(--titulo); font-size: 16px; }
.mskill-impl { font-size: 11.5px; font-weight: 700; color: var(--ouro); border: 1px solid #5a4a2a; border-radius: 999px; padding: 1px 8px; }
.mskill-link { position: relative; z-index: 2; color: var(--terra-2); font: 700 13px/1.2 var(--texto-f); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.mskill-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.mpack { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--terra); border-radius: 12px; background: linear-gradient(90deg, rgba(207,118,80,.14), rgba(207,118,80,.03)); }
.mpack-nome { margin: 0; font-family: var(--titulo); font-weight: 800; font-size: 16px; }
.mpack-preco { margin: 2px 0 0; font-size: 13px; color: var(--texto-2); }
.mpack-preco b { font-family: var(--titulo); font-size: 16px; color: var(--texto); margin-right: 4px; }
.ofc-p-cat { align-self: flex-start; font-size: 14px; }
@media (max-width: 1099px) { .mskill-link { min-height: 44px; display: inline-flex; align-items: center; } }
@media (max-width: 480px) {
  .mskill { grid-template-columns: 32px minmax(0, 1fr); }
  .mskill-pe { grid-column: 2; flex-direction: row; align-items: center; gap: 12px; }
  .mpack { flex-direction: column; align-items: flex-start; }
  .mpack .btn { width: 100%; justify-content: center; }
}
/* o painel cresce com os produtos: a oficina fica no alto, à vista */
@media (min-width: 960px) { .ofc-duo { align-items: start; } .ofc-col { position: sticky; top: 88px; } }
/* 4.1 mais enxuto e a faixa de preços logo abaixo */
.prodb-1 .prodb-acao { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.home .conta[data-de=prod] { --antes-c: #161210; }
.home #mais-produtos { background:
  radial-gradient(ellipse 50% 30% at 0% 45%, rgba(233,170,90,.14), transparent 70%),
  radial-gradient(ellipse 50% 30% at 100% 80%, rgba(207,118,80,.15), transparent 70%),
  linear-gradient(180deg, var(--c-terra) 0, #161210 144px, #161210 100%); }
@media (max-width: 700px) { .home #mais-produtos { background: linear-gradient(180deg, var(--c-terra) 0, #161210 88px, #161210 100%); } }
.home #produtos { background:
  radial-gradient(ellipse 50% 40% at 0% 55%, rgba(233,170,90,.14), transparent 70%),
  linear-gradient(180deg, #3a1f17 0, #161210 220px, #161210 100%); }
@media (max-width: 700px) { .home #produtos { background: linear-gradient(180deg, #3a1f17 0, #161210 120px, #161210 100%); } }
/* compactação para a home caber em ~8 telas */
@media (min-width: 701px) { .bloco { padding: 80px 0 32px; } .bloco::before, .bloco::after { top: 40px; } }
.sistema-grande { max-width: 860px; margin-top: var(--s5); }
#quem-faz .pilares, .assinatura { margin-top: var(--s5); }
.assinatura { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 16px; text-align: left; }
.assinatura img { margin: 0; }
.assinatura > p { flex-basis: auto; }
.assinatura .frase { flex-basis: 100%; text-align: center; order: -1; }
.home .conta[data-de=prod] { padding-top: 136px; --mist-c: 112px; }
.home .conta[data-de=prod]::after { inset: 112px 0 0; }
.home #mais-produtos { padding-top: 136px; }
.ofc-duo .ofc-painel { padding: var(--s3); gap: 12px; }
.ofc-p-topo { padding-bottom: 12px; }
.ofc-p-bloco { padding: 12px 16px; }
.mskill { padding: 8px 12px; }
.mimpl { margin: 0; font-size: 13.5px; color: var(--texto-2); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.mimpl .mskill-link { font-size: 13.5px; }
@media (max-width: 700px) { .home #mais-produtos { padding-top: 112px; } }
.sistema-grande { max-width: 800px; }
.pl { padding: var(--s3) 20px 20px; }
.pl ul { margin: var(--s2) 0; padding-top: var(--s2); }
.conta h2 { margin-bottom: var(--s4); }
.conta-frase { margin-top: var(--s4); }
@media (min-width: 901px) { .dobra:not(.dobra-sk) { padding: var(--s5) 0 var(--s4); } }

/* =====================================================================
   v3.7 (08/11/2026): dobra 2 com as 9 mesas numa linha só e o painel em largura total, em colunas.
   ===================================================================== */
.ofc-duo { display: flex; flex-direction: column; gap: var(--s2); }
.ofc-duo .ofc-col { position: static; }
.ofc-linha { flex: none; }
/* iPad em pé e celular: a fileira rola de lado, com encaixe e a borda direita esmaecida indicando que há mais */
@media (max-width: 960px) {
  #ofc-home { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 136px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent); }
  #ofc-home::-webkit-scrollbar { display: none; }
  #ofc-home .ofc-mesa, #ofc-home .ofc-mesa:nth-child(3n) { scroll-snap-align: start; border-right: 1px solid #1f1a15; border-bottom: 0; }
  #ofc-home.no-fim { -webkit-mask-image: none; mask-image: none; }
}
/* celular: mesas um pouco mais estreitas, cabem 2 e meia na tela (a meia mostra que há mais) */
@media (max-width: 600px) {
  #ofc-home { grid-auto-columns: 124px; }
  #ofc-home .ofc-mesa { height: 150px; }
}
/* painel em largura total: nome | gargalo → o que a IA faz | skills e pack */
@media (min-width: 961px) {
  .ofc-duo .ofc-painel { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto auto 1fr; grid-template-areas: "nome garg prods" "nome seta prods" "nome faz prods"; gap: 12px var(--s4); align-items: start; padding: var(--s4); }
  .ofc-duo .ofc-painel > .ofc-p-topo { grid-area: nome; flex-direction: column; align-items: flex-start; gap: 12px; border-bottom: 0; padding: 0; }
  .ofc-duo .ofc-painel > .ofc-p-bloco.gargalo { grid-area: garg; }
  .ofc-duo .ofc-painel > .ofc-p-seta { grid-area: seta; justify-self: center; margin: -4px 0; }
  .ofc-duo .ofc-painel > .ofc-p-bloco.faz { grid-area: faz; }
  .ofc-duo .ofc-painel > .ofc-p-prods { grid-area: prods; margin: 0; padding: 0 0 0 var(--s4); border-top: 0; border-left: 1px solid var(--borda); }
  .ofc-duo .ofc-painel h3 { font-size: clamp(26px, 2.4vw, 34px); }
}
.ofc-duo, .ofc-duo .ofc-col { align-items: stretch; }
.ofc-duo .ofc-dica { align-self: flex-start; }
@media (max-width: 960px) { .ofc-duo .ofc-painel { align-items: stretch; } .ofc-p-topo { align-self: stretch; } }
/* 961 a 1199 (iPad paisagem 1024): nome em cima; gargalo/IA e skills lado a lado */
@media (min-width: 961px) and (max-width: 1199px) {
  .ofc-duo .ofc-painel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto auto auto 1fr; grid-template-areas: "nome nome" "garg prods" "seta prods" "faz prods"; gap: 12px var(--s3); padding: var(--s3); }
  .ofc-duo .ofc-painel > .ofc-p-topo { flex-direction: row; align-items: center; }
  .ofc-duo .ofc-painel > .ofc-p-prods { padding-left: var(--s3); }
}

/* =====================================================================
   v3.8 (08/11/2026): cursos e serviços num carrossel (2 por vez no desktop, 1 e um pouco no celular).
   ===================================================================== */
.carrossel { position: relative; }
.car-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--s3)) / 2); gap: var(--s3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0; padding: 6px 2px 10px; margin: -6px -2px 0; scrollbar-width: none; }
.car-trilho::-webkit-scrollbar { display: none; }
.car-trilho:focus-visible { outline: 2px solid var(--ouro); outline-offset: 4px; border-radius: 20px; }
@media (prefers-reduced-motion: no-preference) { .car-trilho { scroll-behavior: smooth; } }
.car-item { scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); border: 1px solid var(--borda); border-radius: 20px; background: var(--fundo-2); position: relative; isolation: isolate; transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s ease; }
.car-item:hover, .car-item.tocado { transform: translateY(-4px); border-color: rgba(233,170,90,.45); }
.car-item::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(240,196,122,.16), transparent 65%); opacity: 0; transition: opacity .3s ease; }
.car-item:hover::before, .car-item.tocado::before { opacity: 1; }
.car-palco { position: relative; height: 120px; margin: calc(-1 * var(--s3)) calc(-1 * var(--s3)) var(--s1); border-radius: 20px 20px 0 0; border-bottom: 1px solid var(--borda); display: grid; place-items: center; background: radial-gradient(ellipse 50% 85% at 50% 0%, rgba(240,196,122,.22), transparent 70%), #15120f; overflow: hidden; }
.car-palco::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 18px; margin-left: -1px; background: #4a3d30; }
.car-palco::after { content: ""; position: absolute; left: 50%; top: 16px; width: 44px; height: 13px; margin-left: -22px; border-radius: 22px 22px 4px 4px; background: linear-gradient(180deg, #f2c983, #e0b066 55%, #c8954f); box-shadow: 0 10px 30px 10px rgba(233,170,90,.24); }
.car-palco .tile { margin-top: 26px; width: 68px; height: 68px; border-radius: 18px; color: var(--texto); border-color: rgba(233,170,90,.4); box-shadow: 0 0 0 1px rgba(233,170,90,.14), 0 10px 28px rgba(233,170,90,.16); }
.car-palco .tile .ic { width: 32px; height: 32px; }
.car-palco .tile .ic .a { stroke: #f39a6c; }
.car-item .prodb-cab { margin: 0; }
.car-item h3 { font-size: clamp(21px, 2vw, 25px); font-weight: 800; line-height: 1.12; }
.car-item p { margin: 0; color: var(--texto-2); font-size: 15.5px; }
.car-item .btn { margin-top: auto; align-self: flex-start; }
.car-item > p { margin-bottom: var(--s1); }
.car-ctrl { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin-top: var(--s2); }
.car-seta { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--borda-2); background: var(--fundo-2); color: var(--texto); cursor: pointer; transition: border-color .2s, background .2s, opacity .2s; }
.car-seta:hover:not(:disabled) { border-color: var(--ouro); background: #241d16; }
.car-seta:disabled { opacity: .35; cursor: default; }
.car-seta:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
.car-pontos { display: flex; gap: 4px; }
.car-ponto { width: 28px; height: 44px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; padding: 0; }
.car-ponto::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--borda-2); transition: width .25s ease, background .25s ease; }
.car-ponto[aria-current=true]::before { width: 22px; background: var(--ouro); }
.car-ponto:focus-visible { outline: 2px solid var(--ouro); outline-offset: -6px; border-radius: 12px; }
@media (max-width: 700px) {
  .car-trilho { grid-auto-columns: 86%; gap: var(--s2); margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); }
  .car-item .btn { width: 100%; justify-content: center; }
  .car-palco { height: 104px; }
}

/* v3.8 (09/11/2026): no celular e no iPad o aviso vira uma pílula de uma linha, mais leve que a fileira */
@media (max-width: 960px) {
  .ofc-duo .ofc-dica { gap: 8px; padding: 7px 14px 7px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--texto-2); white-space: nowrap; max-width: 100%; }
  .ofc-dica-ic { width: 16px; height: 16px; }
}

/* v3.8: setas da fileira de departamentos (celular e iPad). A da direita aparece de saída; a da esquerda surge quando a pessoa começa a arrastar. */
.ofc-trilho { position: relative; }
.ofc-seta { display: none; }
@media (max-width: 960px) {
  .ofc-seta { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; margin-top: -19px; padding: 0; border-radius: 50%; border: 1px solid rgba(233,170,90,.5); background: rgba(18,15,12,.88); color: var(--ouro); box-shadow: 0 6px 20px rgba(0,0,0,.45), 0 0 0 4px rgba(233,170,90,.08); cursor: pointer; opacity: 0; visibility: hidden; transform: scale(.8); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; -webkit-tap-highlight-color: transparent; }
  .ofc-seta.dir { right: 8px; }
  .ofc-seta.esq { left: 8px; }
  .ofc-trilho.tem-dir .ofc-seta.dir, .ofc-trilho.tem-esq .ofc-seta.esq { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s; }
  /* até o primeiro arraste, a seta da direita dá um empurrãozinho para o lado */
  .ofc-trilho.tem-dir:not(.ja-rolou) .ofc-seta.dir svg { animation: ofc-seta-empurra 1.6s ease-in-out infinite; }
  #ofc-home.rolou:not(.no-fim) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 56px), transparent); }
  #ofc-home.rolou.no-fim { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
}
@keyframes ofc-seta-empurra { 0%, 55%, 100% { transform: translateX(0); } 25% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .ofc-seta svg { animation: none !important; } }

/* 09/11/2026: preço da consultoria (de R$ 1.000 por R$ 497 para os 3 primeiros) */
.car-preco { margin: 4px 0 14px; font-size: 14px; color: var(--texto-3); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.car-preco s { color: var(--texto-3); }
.car-preco b { font-family: var(--titulo); font-size: 24px; font-weight: 800; color: var(--texto); }
.car-preco span { color: var(--ouro); font-weight: 600; }
.gaveta .preco-g s { font-size: .68em; font-weight: 600; color: var(--texto-3); margin-right: 6px; }
.pg-preco s { margin: 0 4px; }

/* =====================================================================
   v4 (09/11/2026): efeitos da luminária. O texto está sempre visível no estado final;
   sem JS e com "reduzir movimento" fica tudo parado. Só transform/opacity nas animações.
   ===================================================================== */
.fora, .fora *, .fora::before, .fora::after, .fora *::before, .fora *::after { animation-play-state: paused !important; }

/* luminária avulsa (mesmo desenho das mesas da oficina) */
.lum { position: absolute; left: 50%; top: 0; width: 64px; height: 48px; margin-left: -32px; pointer-events: none; z-index: 3; }
.lum > i { position: absolute; display: block; }
.lum-haste { left: 50%; top: 0; width: 2px; height: 22px; margin-left: -1px; background: linear-gradient(180deg, #2c241c, #5a4a3a); }
.lum-cupula { left: 50%; top: 20px; width: 50px; height: 18px; margin-left: -25px; border-radius: 25px 25px 5px 5px / 18px 18px 5px 5px; background: linear-gradient(180deg, #7b6249, #54412f 70%, #3d2f22); box-shadow: inset 0 1px 0 rgba(255,235,200,.16); transition: background .3s ease, box-shadow .3s ease; }
.lum-lampada { left: 50%; top: 36px; width: 14px; height: 7px; margin-left: -7px; border-radius: 0 0 7px 7px; background: #3a3026; transition: background .3s ease; }
.lum-lampada::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle, rgba(255,232,180,.8), rgba(255,200,120,.2) 45%, transparent 70%); opacity: 0; transition: opacity .3s ease; }
.lum-cone { left: 50%; top: 40px; width: 260px; height: 200px; margin-left: -130px; transform-origin: 50% 0; transform: scaleY(.2); opacity: 0; clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255,226,170,.42), rgba(255,226,170,.12) 60%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 30%, #000 70%, transparent 96%); mask-image: linear-gradient(90deg, transparent 4%, #000 30%, #000 70%, transparent 96%); transition: opacity .3s ease, transform .3s ease; }
/* acesa */
.luz-on .lum-cupula, .lum.acesa .lum-cupula { background: linear-gradient(180deg, #f2c983, #e0b066 55%, #c8954f); box-shadow: 0 10px 34px 10px rgba(233,170,90,.28), inset 0 1px 0 rgba(255,246,220,.7); }
.luz-on .lum-lampada, .lum.acesa .lum-lampada { background: #fff1cf; }
.luz-on .lum-lampada::after, .lum.acesa .lum-lampada::after { opacity: 1; }
.luz-on .lum-cone, .lum.acesa .lum-cone { opacity: 1; transform: none; }
@keyframes lum-cone { 0% { opacity: 0; transform: scaleY(.2); } 12% { opacity: .7; } 22% { opacity: .1; } 36% { opacity: .8; } 46% { opacity: .2; transform: scaleY(.25); } 100% { opacity: 1; transform: none; } }

/* 3. #quem-faz: luminária sobre a janela e o print passando por dentro */
.sistema-grande { margin-top: 72px; }
.lum-sistema { top: -60px; }
.lum-sistema .lum-cone { width: 560px; height: 260px; margin-left: -280px; mix-blend-mode: screen; opacity: 0; }
.luz-on .lum-sistema .lum-cone { opacity: .55; }
.janela-rolo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.rolo-trilho { will-change: transform; }
.rolo-trilho img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
@media (prefers-reduced-motion: no-preference) {
  .liga .lum-lampada::after, .liga .lum-cupula { animation: ofc-piscar .45s linear; }
  .liga .lum-cone { animation: lum-cone .9s cubic-bezier(.3,.6,.3,1); }
  .luz-on.liga .lum-sistema .lum-cone { animation: none; }
  @keyframes rolo { 0%, 12% { transform: translateY(0); } 18%, 30% { transform: translateY(-20%); } 36%, 48% { transform: translateY(-40%); } 54%, 66% { transform: translateY(-60%); } 72%, 86% { transform: translateY(-80%); } 94%, 100% { transform: translateY(0); } }
  .janela-rolo.rolando .rolo-trilho { animation: rolo 42s cubic-bezier(.45,.05,.35,1) infinite; }
}
@media (max-width: 700px) { .sistema-grande { margin-top: 64px; } .lum-sistema .lum-cone { width: 320px; margin-left: -160px; } }

/* 2. #precos: a soma e o acesso completo aceso */
.soma { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s2) var(--s3); max-width: 780px; margin: 0 auto 64px; padding: 20px 28px; border: 1.5px solid rgba(26,17,11,.22); border-radius: 18px; background: rgba(255,240,225,.12); color: var(--cafe-esc); text-align: center; }
.soma p { margin: 0; }
.soma-rot { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.soma-val { font-family: var(--titulo); font-weight: 800; font-size: clamp(34px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.soma-col:first-child .soma-val { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(26,17,11,.45); }
.soma-det { font-size: 13.5px; font-weight: 600; margin-top: 2px !important; }
.soma-seta { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cafe-esc); color: var(--creme); }
.soma-eco { display: inline-block; margin-top: 6px !important; padding: 4px 12px; border-radius: 999px; background: var(--cafe-esc); color: var(--creme); font-size: 14px; font-weight: 600; }
.soma-eco b { color: #f2c983; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes soma-pulso { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
  .soma.contou .soma-eco { animation: soma-pulso .6s cubic-bezier(.2,.7,.2,1); }
}
@media (max-width: 640px) { .soma { grid-template-columns: 1fr; padding: 16px; margin-bottom: 56px; } .soma-seta { justify-self: center; transform: rotate(90deg); } }
.pl-top .lum-pl { left: auto; right: 28px; top: -44px; margin-left: 0; }
.pl-top .lum-pl .lum-haste { height: 22px; }
.pl-luz { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse 70% 55% at calc(100% - 60px) 0%, rgba(255,246,226,.42), transparent 70%); opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .pl-top.liga .pl-luz { animation: ofc-piscar .5s linear; } }

/* 4. #produtos: a luminária do cartão acende no hover, no foco ou no toque */
.prodb-img { position: relative; }
.lum-prod { transform: scale(.72); transform-origin: 50% 0; }
.lum-prod .lum-cone { height: 150px; }
.prodb-1:is(:hover, :focus-within, .acesa) .lum-prod .lum-cupula { background: linear-gradient(180deg, #f2c983, #e0b066 55%, #c8954f); box-shadow: 0 10px 34px 10px rgba(233,170,90,.28), inset 0 1px 0 rgba(255,246,220,.7); }
.prodb-1:is(:hover, :focus-within, .acesa) .lum-prod .lum-lampada { background: #fff1cf; }
.prodb-1:is(:hover, :focus-within, .acesa) .lum-prod .lum-lampada::after { opacity: 1; }
.prodb-1:is(:hover, :focus-within, .acesa) .lum-prod .lum-cone { opacity: 1; transform: none; }
.car-palco::before, .car-palco::after { display: none; }
.car-palco { background: radial-gradient(ellipse 50% 85% at 50% 0%, rgba(240,196,122,.08), transparent 70%), #15120f; transition: background .3s ease; }
.lum-car { top: 0; }
.lum-car .lum-cone { height: 120px; }
.car-palco .tile { transition: border-color .3s ease, box-shadow .3s ease; }
.car-item:is(:hover, :focus-within, .acesa) .car-palco { background: radial-gradient(ellipse 50% 85% at 50% 0%, rgba(240,196,122,.24), transparent 70%), #15120f; }
.car-item:is(:hover, :focus-within, .acesa) .lum-car .lum-cupula { background: linear-gradient(180deg, #f2c983, #e0b066 55%, #c8954f); box-shadow: 0 10px 34px 10px rgba(233,170,90,.28), inset 0 1px 0 rgba(255,246,220,.7); }
.car-item:is(:hover, :focus-within, .acesa) .lum-car .lum-lampada { background: #fff1cf; }
.car-item:is(:hover, :focus-within, .acesa) .lum-car .lum-lampada::after { opacity: 1; }
.car-item:is(:hover, :focus-within, .acesa) .lum-car .lum-cone { opacity: 1; transform: none; }
.car-item:is(:hover, :focus-within, .acesa) .car-palco .tile { border-color: rgba(233,170,90,.6); box-shadow: 0 0 0 1px rgba(233,170,90,.2), 0 12px 34px rgba(233,170,90,.3); }
.car-palco .tile { position: relative; z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  .prodb-1:is(:hover, .acesa) .lum-prod .lum-cupula, .prodb-1:is(:hover, .acesa) .lum-prod .lum-lampada::after, .car-item:is(:hover, .acesa) .lum-car .lum-cupula, .car-item:is(:hover, .acesa) .lum-car .lum-lampada::after { animation: ofc-piscar .42s linear; }
  .prodb-1:is(:hover, .acesa) .lum-prod .lum-cone, .car-item:is(:hover, .acesa) .lum-car .lum-cone { animation: lum-cone .8s cubic-bezier(.3,.6,.3,1); }
}

/* 1. #metodo: rascunho, revisão e assinatura */
.met-cena { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s4); align-items: center; margin-bottom: var(--s4); }
.met-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.met-p { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 14px; background: var(--fundo-2); transition: border-color .4s ease, background .4s ease; }
.met-p b { display: block; font-family: var(--titulo); font-size: 19px; font-weight: 800; }
.met-p span:not(.met-n) { display: block; font-size: 15px; color: var(--texto-2); margin-top: 2px; }
.met-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--borda-2); font-family: var(--titulo); font-weight: 800; color: var(--ouro); transition: background .4s ease, color .4s ease, border-color .4s ease; }
.met-cena[data-etapa="1"] .met-p[data-p="1"], .met-cena[data-etapa="2"] .met-p[data-p="2"], .met-cena[data-etapa="3"] .met-p[data-p="3"] { border-color: rgba(233,170,90,.55); background: linear-gradient(90deg, rgba(233,170,90,.12), var(--fundo-2)); }
.met-cena[data-etapa="1"] .met-p[data-p="1"] .met-n, .met-cena[data-etapa="2"] .met-p[data-p="2"] .met-n, .met-cena[data-etapa="3"] .met-p[data-p="3"] .met-n { background: var(--ouro); color: #1d1606; border-color: var(--ouro); }
.met-doc { position: relative; justify-self: center; width: 100%; max-width: 440px; }
.met-doc::before { content: ""; position: absolute; inset: -18% -12% auto; height: 70%; background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(240,196,122,.22), transparent 70%); pointer-events: none; }
.met-papel { position: relative; padding: 26px 28px 22px; border-radius: 10px; background: linear-gradient(180deg, #f3e9da, #ead9c2); box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,240,220,.4) inset; transform: rotate(1.5deg); }
.met-l { display: block; height: 8px; margin: 0 0 10px; border-radius: 4px; background: #c9b59b; transform-origin: 0 50%; }
.met-l-tit { width: 46%; height: 12px; margin-bottom: 18px; background: #8c7356; }
.met-l-cur { width: 62%; }
.met-l-med { width: 82%; }
.met-m { position: absolute; display: block; pointer-events: none; transform-origin: 50% 50%; }
.met-sub { left: 28px; top: 74px; width: 46%; height: 3px; border-radius: 2px; background: #c0532e; }
.met-circ { left: 44%; top: 116px; width: 38%; height: 24px; border: 2.5px solid #c0532e; border-radius: 50%; transform: rotate(-3deg); }
.met-nota { right: 10px; top: 92px; font: 700 12px/1 var(--texto-f); color: #a8461f; letter-spacing: .02em; transform: rotate(-6deg); }
.met-check { left: 8px; top: 146px; width: 14px; height: 8px; border-left: 2.5px solid #c0532e; border-bottom: 2.5px solid #c0532e; transform: rotate(-45deg); }
.met-assin { display: block; width: 62%; height: auto; margin: 16px 0 0 auto; }
.met-assin path { stroke: #2a2f5c; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.met-linha-assin { display: block; width: 62%; height: 1px; margin: -4px 0 0 auto; background: #8c7356; }
/* com o efeito ligado (JS + movimento permitido): começa vazio e monta por etapas */
.met-on .met-l { transform: scaleX(0); transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.met-on .met-l:nth-child(2) { transition-delay: .08s; } .met-on .met-l:nth-child(3) { transition-delay: .16s; } .met-on .met-l:nth-child(4) { transition-delay: .24s; }
.met-on .met-l:nth-child(5) { transition-delay: .32s; } .met-on .met-l:nth-child(6) { transition-delay: .4s; } .met-on .met-l:nth-child(7) { transition-delay: .48s; } .met-on .met-l:nth-child(8) { transition-delay: .56s; }
.met-on[data-etapa] .met-l { transform: none; }
.met-on .met-m { opacity: 0; scale: .5; transition: opacity .35s ease, scale .45s cubic-bezier(.3,1.6,.5,1); }
.met-on .met-circ { transition-delay: .2s; } .met-on .met-nota { transition-delay: .35s; } .met-on .met-check { transition-delay: .5s; }
.met-on:is([data-etapa="2"], [data-etapa="3"]) .met-m { opacity: 1; scale: 1; }
.met-on .met-assin path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.45,.05,.35,1); }
.met-on[data-etapa="3"] .met-assin path { stroke-dashoffset: 0; }
.met-on .met-linha-assin { transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s ease; }
.met-on:is([data-etapa="2"], [data-etapa="3"]) .met-linha-assin { transform: none; }
@media (max-width: 800px) { .met-cena { grid-template-columns: 1fr; gap: var(--s3); } .met-doc { max-width: 360px; } }

/* 5. #guia: o livro abre e folheia */
.livro { position: relative; width: 100%; max-width: 200px; margin: 0 auto; perspective: 900px; transform: rotate(-3deg); }
.livro .capa-livro { position: relative; z-index: 3; max-width: none; width: 100%; margin: 0; transform: none; transform-origin: 0 50%; backface-visibility: hidden; }
.livro-pag { position: absolute; top: 3%; bottom: 3%; left: 2px; right: 6px; z-index: 2; border-radius: 4px 12px 12px 4px; transform-origin: 0 50%; background: repeating-linear-gradient(180deg, #f2e8d8 0 12px, #e4d6c1 12px 13px); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.livro-pag-2 { top: 5%; bottom: 5%; right: 10px; z-index: 1; background: repeating-linear-gradient(180deg, #ece0cc 0 12px, #dccdb6 12px 13px); }
.livro-pag-3 { top: 7%; bottom: 7%; right: 14px; z-index: 0; background: #e2d4bd; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes livro-capa { 0% { transform: rotateY(0); } 22%, 72% { transform: rotateY(-68deg); } 100% { transform: rotateY(0); } }
  @keyframes livro-folha { 0%, 20% { transform: rotateY(0); } 42% { transform: rotateY(-52deg); } 70% { transform: rotateY(-52deg); } 100% { transform: rotateY(0); } }
  .livro.abre .capa-livro { animation: livro-capa 3s cubic-bezier(.45,.05,.35,1); }
  .livro.abre .livro-pag-1 { animation: livro-folha 2.9s cubic-bezier(.45,.05,.35,1) .1s; }
  .livro.abre .livro-pag-2 { animation: livro-folha 2.7s cubic-bezier(.45,.05,.35,1) .3s; }
}
@media (max-width: 900px) {
  .fech .livro { display: block; max-width: 168px; margin: var(--s1) auto 0; }
  .fech .livro .capa-livro { display: flex; padding: 16px; }
  .fech .livro .capa-livro h3 { font-size: 19px; }
  .fech .livro .capa-livro .ic-capa .tile-g { width: 52px; height: 52px; border-radius: 14px; }
}

/* 6. /prompts: o prompt de exemplo sendo digitado */
.demo { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.demo-jan { width: 100%; }
.demo-jan .janela-barra { height: 30px; }
.demo-app { margin-left: auto; font-size: 12px; color: var(--texto-3); }
.demo-corpo { padding: 20px 24px 24px; background: radial-gradient(ellipse 60% 140px at 50% 0, rgba(240,196,122,.08), transparent 70%), #14110e; }
.demo-rot { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ouro); }
.demo-texto { margin: 0 0 20px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--borda-2); background: #1d1814; color: var(--texto); font-size: 15.5px; line-height: 1.6; white-space: pre-wrap; min-height: 9em; }
.demo-resto { opacity: 0; }
.demo-cursor { display: none; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -2px; background: var(--ouro); }
.demo.digitando .demo-cursor { display: inline-block; animation: demo-pisca .9s steps(1) infinite; }
@keyframes demo-pisca { 50% { opacity: 0; } }
.demo-resp { transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.demo.digitando .demo-resp { opacity: 0; transform: translateY(10px); }
.demo-resp ul { margin: 0 0 12px; padding-left: 20px; color: var(--texto); display: grid; gap: 4px; }
.demo-nunca { margin: 0; padding-left: 12px; border-left: 3px solid var(--terra); color: var(--texto-2); font-size: 14.5px; }
@media (max-width: 600px) { .demo-corpo { padding: 16px; } .demo-texto { font-size: 14.5px; } .demo .btn { width: 100%; justify-content: center; } }

/* 7. /skills: troca de departamento com cascata e a luz acendendo sobre o painel */
.painel-area { position: relative; isolation: isolate; }
.painel-area::after { content: ""; position: absolute; left: 50%; top: 0; width: min(560px, 80%); height: 180px; transform: translateX(-50%); z-index: -1; pointer-events: none; background: radial-gradient(ellipse 50% 70% at 50% 0%, rgba(240,196,122,.18), transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes cartao-entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes painel-luz { 0% { opacity: 0; } 12% { opacity: .9; } 22% { opacity: .15; } 36% { opacity: 1; } 46% { opacity: .35; } 60%, 100% { opacity: 1; } }
  .painel-area.trocou::after { animation: painel-luz .7s linear; }
  .painel-area.trocou .grade > * { animation: cartao-entra .5s cubic-bezier(.2,.7,.2,1) backwards; }
  .painel-area.trocou .grade > :nth-child(2) { animation-delay: .07s; } .painel-area.trocou .grade > :nth-child(3) { animation-delay: .14s; }
  .painel-area.trocou .grade > :nth-child(4) { animation-delay: .21s; } .painel-area.trocou .grade > :nth-child(5) { animation-delay: .28s; } .painel-area.trocou .grade > :nth-child(n+6) { animation-delay: .35s; }
}
@media (max-width: 800px) { .met-doc { max-width: min(360px, calc(100% - 12px)); } .met-papel { transform: rotate(.8deg); } }

/* 09/11/2026: consultoria + R$ 97 leva o acesso completo */
.car-bonus { margin: -6px 0 14px; padding: 10px 12px; border-radius: 10px; border: 1px dashed rgba(233,192,98,.45); background: rgba(233,192,98,.06); font-size: 13.5px; line-height: 1.45; color: var(--texto-2); }
.car-bonus b { color: var(--ouro); font-weight: 800; }
.car-bonus span { color: var(--texto-3); }
.gaveta .bonus-kit { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px dashed rgba(233,192,98,.45); background: rgba(233,192,98,.06); }
.gaveta .bonus-kit p { margin: 0; font-size: 14.5px; color: var(--texto-2); }
.gaveta .bonus-kit .bonus-kit-t { margin-bottom: 4px; font-family: var(--titulo); font-size: 16px; font-weight: 800; color: var(--ouro); }
/* celular estreito (mesmo com mouse ou caneta): a dica curta, que cabe numa linha */
@media (max-width: 700px) { .so-mouse { display: none; } .so-toque { display: inline; } }
.met-doc::before { left: 0; right: 0; }

/* 09/11/2026: a consultoria é a 4ª opção da conta. Desktop: 4 colunas; tablet: 2x2; celular: fileira com rolagem lateral */
.conta-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1180px; gap: var(--s2); }
.conta-grade .pl-preco { font-size: clamp(40px, 3.6vw, 54px); }
.pl-consult { border-style: dashed; }
.pl-selo-vagas { background: var(--creme); color: var(--cafe-esc); border: 1.5px solid var(--cafe-esc); }
.pl-consult li:last-child { font-weight: 700; }
@media (min-width: 861px) and (max-width: 1100px) { .conta-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--s3); } }
@media (max-width: 860px) {
  .conta-grade { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gut)); padding: 56px var(--gut) 12px; scroll-padding: 0 var(--gut); }
  .conta-grade::-webkit-scrollbar { display: none; }
  .conta-grade > .pl { scroll-snap-align: start; }
  .conta .soma { margin-bottom: 8px; }
}

/* 09/11/2026: fecho do "quem faz" com o retrato grande sob a luminária, sem OAB nem marca do escritório */
.quem-fecho { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s6); align-items: center; max-width: 980px; margin: var(--s8) auto 0; }
.quem-retrato { position: relative; margin: 0; padding-top: 52px; justify-self: center; width: 100%; max-width: 400px; }
.quem-retrato::before { content: ""; position: absolute; left: -12%; right: -12%; top: 0; height: 75%; background: radial-gradient(ellipse 50% 55% at 50% 10%, rgba(240,196,122,.26), transparent 70%); pointer-events: none; }
.quem-retrato .lum-retrato { top: 0; }
.quem-retrato .lum-retrato .lum-cone { width: 420px; height: 340px; margin-left: -210px; mix-blend-mode: screen; }
.luz-on .lum-retrato .lum-cone { opacity: .5; }
.quem-retrato picture { position: relative; display: block; }
.quem-retrato img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; border-radius: 22px; border: 1px solid rgba(233,170,90,.35); box-shadow: 0 0 0 1px rgba(233,170,90,.1), 0 -18px 60px rgba(240,196,122,.14), 0 34px 80px rgba(0,0,0,.55); }
.quem-fecho-txt .olho { margin-bottom: var(--s2); }
.quem-frase { margin: 0; font-family: var(--titulo); font-weight: 800; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.02; letter-spacing: -0.02em; color: var(--terra-2); }
.quem-nomes { margin: var(--s3) 0 0; font-family: var(--titulo); font-weight: 800; font-size: clamp(20px, 2vw, 26px); color: var(--texto); white-space: nowrap; }
.quem-sobre { margin: var(--s1) 0 0; font-size: 17px; color: var(--texto-2); max-width: 46ch; }
@media (max-width: 800px) {
  .quem-fecho { grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s6); text-align: center; }
  .quem-retrato { max-width: 300px; }
  .quem-sobre { margin-inline: auto; }
  .quem-frase { font-size: 34px; }
  .quem-nomes { font-size: 21px; }
}
@media (prefers-reduced-motion: no-preference) { .quem-retrato.liga .lum-lampada::after, .quem-retrato.liga .lum-cupula { animation: ofc-piscar .45s linear; } }
#quem-faz, #metodo { overflow-x: clip; }
/* com 4 cartões, a luminária do acesso completo fica à esquerda do selo */
.pl-top .lum-pl { right: auto; left: 2px; }
.pl-luz { background: radial-gradient(ellipse 70% 55% at 34px 0%, rgba(255,246,226,.42), transparent 70%); }

/* 09/11/2026: oferta de lançamento da consultoria (relógio até 23:59 de Brasília; depois, preço cheio) */
.so-depois { display: none; }
.promo-fim .so-promo { display: none !important; }
.promo-fim .so-depois { display: revert; }
.promo-fim .pl-btn.so-depois { display: flex; }
.pl-selo-consult { background: var(--cafe-esc); color: var(--creme); }
.pl-vagas { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 2px 0 10px; padding: 6px 12px; border-radius: 999px; background: #8f2f17; color: #fff3e6; font-size: 13px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 6px 18px rgba(110,30,10,.3); }
.pl-vagas i { width: 8px; height: 8px; border-radius: 50%; background: #ffd27a; }
@media (prefers-reduced-motion: no-preference) { .pl-vagas i { animation: vaga-pulsa 1.6s ease-out infinite; } }
@keyframes vaga-pulsa { 0% { box-shadow: 0 0 0 0 rgba(255,210,122,.7); } 70% { box-shadow: 0 0 0 9px rgba(255,210,122,0); } 100% { box-shadow: 0 0 0 0 rgba(255,210,122,0); } }
.pl-de { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
.pl-de s { font-family: var(--titulo); font-size: 22px; font-weight: 800; text-decoration-thickness: 2.5px; opacity: .75; }
.pl-eco { margin: 6px 0 0; font-size: 14px; font-weight: 600; }
.pl-eco b { background: var(--cafe-esc); color: #ffd27a; padding: 2px 8px; border-radius: 6px; }
.pl-relogio { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(26,17,11,.14); border: 1px solid rgba(26,17,11,.25); font-size: 13.5px; font-weight: 600; text-align: center; }
.pl-relogio b { display: block; font-family: var(--titulo); font-size: 26px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pl-btn-oferta { background: var(--cafe-esc); color: var(--creme); box-shadow: 0 4px 0 #5a2c18; }
.pl-btn-oferta:hover { box-shadow: 0 5px 0 #5a2c18; }
.pl-btn-1l { white-space: nowrap; font-size: 14.5px; padding-left: 10px; padding-right: 10px; }
.car-relogio { font-variant-numeric: tabular-nums; }
/* textura no fundo da seção de preços: grão de papel + trama diagonal suave */
.conta::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .18 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(135deg, rgba(90,40,18,.06) 0 1px, transparent 1px 14px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 160px); mask-image: linear-gradient(180deg, transparent 0, #000 160px); }
/* o selo "melhor custo-benefício" ocupa a largura do topo: a luminária sai, o brilho do cartão fica */
.pl-top .lum-pl { display: none; }

/* 09/11/2026: livro do guia com a capa real do PDF */
.livro .capa-livro.capa-real { display: block; padding: 0; overflow: hidden; background: #1c1a19; }
.livro .capa-livro.capa-real img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: none; }
/* cartão da consultoria no carrossel: mesmo peso dos outros */
.car-preco { margin: 2px 0 0; }
.car-urg { flex-basis: 100%; font-size: 13px; }
.car-urg .car-relogio { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.car-bonus-l { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--ouro); }
.promo-fim .btn.so-depois { display: inline-flex; }

/* 09/11/2026 (v2): cartão da consultoria no mesmo formato dos outros; vagas e relógio numa linha só, acima do botão */
.pl-consult .pl-sep b { font-weight: 800; }
.pl-urg { margin: auto 0 10px; padding-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-size: 12.5px; font-weight: 700; }
.pl-urg .pl-vagas { margin: 0; padding: 3px 10px; font-size: 12px; box-shadow: none; }
.pl-urg .pl-tempo b { font-variant-numeric: tabular-nums; font-weight: 800; }
.pl-consult .pl-btn { margin-top: 0; }
.promo-fim .pl-consult .pl-btn.so-depois { margin-top: auto; }

.pl-consult .pl-sep b { white-space: nowrap; }
.pl-urg { flex-wrap: nowrap; gap: 6px; font-size: 11.5px; white-space: nowrap; }
.pl-urg .pl-vagas { padding: 3px 8px; font-size: 11.5px; gap: 6px; }

/* 09/11/2026 (v3): preço da consultoria em bloco (de / por / economia) e "só 3" discreto junto do preço */
.pl-consult .pl-de { margin: 0 0 2px; }
.pl-consult .pl-eco { margin: 6px 0 0; }
.pl-vagas-txt { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; opacity: .8; }
.pl-consult .pl-apoio { margin-top: 10px; }
.pl-urg { justify-content: center; font-size: 12px; font-weight: 600; }
.pl-urg b { font-weight: 800; font-variant-numeric: tabular-nums; margin-left: 4px; }
.pl-urg { display: block; text-align: center; }

/* 09/11/2026 (v4): preço riscado e preço da oferta na mesma linha; relógio numa pílula com número vermelho */
.pl-preco .pl-de-in { margin-right: 10px; font-size: .46em; font-weight: 800; vertical-align: .55em; opacity: .7; text-decoration-thickness: 3px; }
.pl-urg .pl-tempo-box { display: inline-block; margin-left: 6px; padding: 3px 10px; border-radius: 999px; background: #fff4ea; border: 1.5px solid #b3261e; color: #b3261e; font-size: 14px; font-weight: 800; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.pl-consult .pl-preco { white-space: nowrap; font-size: clamp(34px, 3.1vw, 50px); }
@media (max-width: 860px) { .pl-consult .pl-preco { font-size: 44px; } }

/* 09/11/2026 (v5): "só para os 3 primeiros" em destaque, colado no preço */
.pl-vagas-txt { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 10px 0 0; padding: 7px 14px 7px 12px; border-radius: 999px; background: #8f1f12; color: #fff4ea; font-size: 13.5px; font-weight: 800; letter-spacing: .01em; opacity: 1; box-shadow: 0 6px 18px rgba(110,25,10,.35), inset 0 0 0 1px rgba(255,210,122,.25); }
.pl-vagas-txt i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ffd27a; }
@media (prefers-reduced-motion: no-preference) { .pl-vagas-txt i { animation: vaga-pulsa 1.6s ease-out infinite; } }
.pl-vagas-txt { display: flex; align-self: stretch; border-radius: 10px; padding: 8px 12px; line-height: 1.3; }
/* v6: discreto, mas visível (a faixa grande ficou exagerada) */
.pl-vagas-txt { display: inline-flex; align-self: flex-start; gap: 6px; margin: 8px 0 0; padding: 3px 10px 3px 8px; border-radius: 999px; background: rgba(143,31,18,.14); border: 1px solid rgba(143,31,18,.45); box-shadow: none; color: #7a1a0f; font-size: 12px; font-weight: 800; line-height: 1.35; white-space: nowrap; letter-spacing: 0; }
.pl-vagas-txt i { width: 6px; height: 6px; background: #b3261e; }

/* =====================================================================
   09/11/2026: rodada de defeitos (revisão independente)
   ===================================================================== */
/* 2. a conta no celular: cada cartão na altura do próprio conteúdo (o botão logo após a lista) */
@media (max-width: 860px) { .conta-grade { align-items: start; } }
/* 4. botão da conta numa linha */
.pl-btn { white-space: nowrap; }
@media (max-width: 380px) { .pl-btn { white-space: normal; } }
/* 5. carrossel no celular: a cúpula da luminária não encosta no ícone */
@media (max-width: 700px) { .car-palco { height: 124px; } .car-palco .tile { margin-top: 44px; } }
/* 6. setas da fileira de departamentos: menores, translúcidas e na borda, sem cobrir mesa */
@media (max-width: 960px) {
  .ofc-seta { width: 30px; height: 30px; margin-top: -15px; background: rgba(18,15,12,.62); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
  .ofc-seta svg { width: 16px; height: 16px; }
  .ofc-seta.dir { right: 2px; }
  .ofc-seta.esq { left: 2px; }
  .ofc-trilho.tem-dir .ofc-seta.dir, .ofc-trilho.tem-esq .ofc-seta.esq { opacity: .82; }
  .ofc-seta { top: 34%; }
}
/* 9. painel: links da implantação sem separador solto */
.mimpl { gap: 4px 14px; }
/* 10. /skills: a grade se ajusta à quantidade de cartões; um cartão só fica deitado */
.painel-area .grade { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width: 700px) {
  .painel-area .grade:has(> .prod:only-child) { grid-template-columns: minmax(0, 1fr); }
  .painel-area .grade > .prod:only-child { flex-direction: row; }
  .painel-area .grade > .prod:only-child .palco { flex: 0 0 220px; height: auto; min-height: 150px; border-bottom: 0; border-right: 1px solid var(--borda); }
}
/* pack em destaque com linha própria; os outros em 4 colunas */
@media (min-width: 1001px) {
  .kits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kit.destaque { grid-column: 1 / -1; grid-row: auto; }
  .kit.destaque ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); }
  .kit.destaque .kit-acoes { margin-top: var(--s1); }
}
@media (min-width: 701px) and (max-width: 1000px) { .kits { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kit.destaque { grid-column: 1 / -1; } }
/* 12. palavras sozinhas */
.conta-frase, .conta h2, .faixa-final h2, .cab3 h2, .pl-apoio { text-wrap: balance; }
.rodape-links { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; }
.rodape-links a { white-space: nowrap; }
@media (max-width: 600px) { .rodape .cx { flex-direction: column; align-items: flex-start; gap: 4px; } }
.outros-packs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.outros-packs a { white-space: nowrap; }
/* 13. depois da faixa terracota: degradê mais curto, sem faixa vazia */
.bloco[data-de=terra] { padding-top: 120px; --misturar: 96px; }
.bloco[data-de=terra]::before, .bloco[data-de=terra]::after { top: 72px; }
@media (max-width: 700px) { .bloco[data-de=terra] { padding-top: 104px; --misturar: 80px; } .bloco[data-de=terra]::before, .bloco[data-de=terra]::after { top: 64px; } }
.home #mais-produtos { padding-top: 136px; }
/* 15. /prompts: chips numa linha só no desktop; a busca embaixo */
@media (min-width: 761px) {
  .pfiltros { grid-template-columns: 1fr; justify-items: start; }
  .pfiltros .busca { width: 100%; max-width: 380px; }
  .pchips { gap: 6px; }
  .pchip { padding: 0 12px; }
}
/* 12. outros packs: linhas equilibradas, sem nome sozinho */
.outros-packs { display: block; text-align: center; text-wrap: balance; line-height: 2; }
.outros-packs a { display: inline; margin: 0 10px; }
/* 13. menos faixa vazia entre a conta e as dúvidas */
@media (min-width: 701px) {
  .conta { padding-bottom: 40px; }
  .bloco[data-de=terra] { padding-top: 96px; --misturar: 72px; }
  .bloco[data-de=terra]::before, .bloco[data-de=terra]::after { top: 52px; }
}
@media (max-width: 700px) { .conta { padding-bottom: 32px; } }
.home #mais-produtos { padding-top: 136px; }

/* revisão 2 (09/11): no celular os cartões da conta têm a mesma altura (como no desktop) e o botão fica no pé de cada um */
@media (max-width: 860px) { .conta-grade { align-items: stretch; } .conta-grade > .pl > .pl-btn { margin-top: auto; } }
/* rodapé no celular: links em duas colunas, nenhum sozinho */
@media (max-width: 600px) { .rodape-links { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 22px; } .rodape-links a { white-space: nowrap; } }

/* 09/11/2026: rodapé só com o © e o nome, centralizado (sem links) */
.rodape .cx { justify-content: center; text-align: center; }
.rodape .nw { white-space: nowrap; }