/* LPs de venda (Clube / Mentoria) — 21/10/2026, Bia.
   Visual copiado do rascunho que a Bia fez no Claude (fundo claro, vermelho
   #C0392B, Bricolage Grotesque + IBM Plex Sans). Os estilos que lá eram
   inline viraram classes aqui; o que mudou foi só pro celular (fim do arquivo). */
:root{
  --ink:#141414;--red:#C0392B;--red-esc:#922B21;--red-claro:#E35D4E;--red-kicker:#E8A398;
  --txt:#4A4A4A;--txt-2:#6B6B6B;--txt-3:#333;--linha:#E6E3DF;--linha-2:#EFEDEA;
  --fundo-2:#FAF9F7;--fundo-3:#F1EEEA;--rosado:#FBF1EF;--claro-1:#E6E2DD;--claro-2:#CFCBC6;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:#FFFFFF;color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--red)}a:hover{color:var(--red-esc)}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-0.02em}
p{margin:0}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.kicker{font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--red)}
.kicker.no-escuro{color:var(--red-kicker)}
.rule{width:40px;height:2px;background:var(--red);margin-top:10px}
.h2{font-size:clamp(32px,4.2vw,52px);line-height:1.05;font-weight:700}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--txt)}
.lead strong{color:var(--ink)}
.btn,.btn-ghost,.btn-light{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;text-align:center;font-family:inherit;cursor:pointer}
.btn{background:var(--red);color:#FFFFFF;border:0}
.btn:hover{background:var(--red-esc);color:#FFFFFF}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#FFFFFF}
.btn-light{border:1.5px solid #FFFFFF;color:#FFFFFF}
.btn-light:hover{background:#FFFFFF;color:var(--ink)}
.btn:focus-visible,.btn-ghost:focus-visible,.btn-light:focus-visible{outline:3px solid rgba(192,57,43,0.4);outline-offset:2px}
.btn-sm{min-height:44px;padding:0 20px;font-size:15px}
.btn-cheio{width:100%}
.card{background:#FFFFFF;border:1px solid var(--linha);border-radius:18px}
.coluna{display:flex;flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g14{gap:14px}.g16{gap:16px}.g18{gap:18px}.g22{gap:22px}.g24{gap:24px}.g28{gap:28px}
.icone-chk{flex:none;margin-top:2px}

/* Topo */
.topo{position:sticky;top:0;z-index:10;background:rgba(255,255,255,0.94);border-bottom:1px solid var(--linha-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.marca{text-decoration:none;font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink);letter-spacing:-0.02em}
.marca span{color:var(--red)}
.marca-rodape{font-size:20px}
.navlinks{display:flex;gap:32px;align-items:center}
.navlinks a{color:var(--ink);text-decoration:none;font-size:15px}
.navlinks a:hover{color:var(--red)}

/* Hero */
.hero{padding:88px 0 72px}
.hero .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:64px;align-items:center}
.hero h1{font-size:clamp(42px,5.6vw,72px);line-height:1.0;font-weight:700}
.hero h1 span{color:var(--red)}
.acoes{display:flex;flex-wrap:wrap;gap:12px}
.selos{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;color:var(--txt)}
.selos span{display:inline-flex;gap:8px;align-items:center}
.mock{display:flex;flex-direction:column;gap:16px;max-width:480px;width:100%;justify-self:center}
.mock-lista{padding:24px;box-shadow:0 24px 60px rgba(20,20,20,0.10)}
.mock-topo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;color:var(--txt-2)}
.mock-topo b{color:var(--red);font-weight:600}
.mock-item{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--linha-2)}
.mock-item:last-child{border-bottom:0}
.mock-item div{flex:1}
.mock-item strong{display:block;font-weight:600}
.mock-item small{font-size:14px;color:var(--txt-2)}
.ico{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ico-red{background:var(--red);color:#FFFFFF}.ico-ink{background:var(--ink);color:#FFFFFF}.ico-cinza{background:var(--fundo-3);color:var(--ink)}
.mock-par{display:flex;gap:16px;flex-wrap:wrap}
.mock-escuro{flex:1 1 220px;padding:18px 20px;background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.mock-escuro small{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--red-kicker)}
.mock-escuro .num{font-family:var(--display);font-size:34px;font-weight:700;margin-top:6px}
.mock-escuro .num span{color:var(--red-claro)}
.mock-escuro p{font-size:14px;color:var(--claro-2);margin-top:2px}
.mock-bonus{flex:1 1 160px;padding:18px 20px}
.mock-bonus small{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--txt-2)}
.mock-bonus div{font-family:var(--display);font-size:22px;font-weight:700;margin-top:6px;line-height:1.15}

/* Faixa de números */
.faixa{border-top:1px solid var(--linha-2);border-bottom:1px solid var(--linha-2);background:var(--fundo-2)}
.faixa .wrap{display:flex;flex-wrap:wrap;gap:16px 48px;justify-content:center;align-items:center;padding-top:26px;padding-bottom:26px;font-size:15px;color:var(--txt-3)}
.faixa i{color:var(--red);font-style:normal}

/* Seções */
.sec{padding:104px 0}
.sec-escura{background:var(--ink);color:#FFFFFF}
.sec-clara{background:var(--fundo-2)}
.sec-cab{display:flex;flex-direction:column;gap:18px;max-width:820px}
.sec-cab.larga{max-width:880px}
.sec-escura h2.grande{font-size:clamp(36px,4.8vw,60px);line-height:1.04;font-weight:700}
.sec-escura .texto{font-size:19px;line-height:1.6;color:var(--claro-1)}
.grade{display:grid;gap:20px}
.grade-200{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px}
.grade-300{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grade-320{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grade-360{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.caixa-escura{border:1px solid #333;border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:8px}
.caixa-escura h3{font-size:20px;font-weight:600}
.caixa-escura p{font-size:15px;color:var(--claro-2);line-height:1.5}
.ponto{padding:28px;display:flex;flex-direction:column;gap:12px}
.ponto span{font-family:var(--display);font-size:15px;font-weight:700;color:var(--red)}
.ponto h3{font-size:24px}
.ponto p{font-size:16px;line-height:1.55;color:var(--txt)}

/* Pilares */
.pilares-cab{padding:0 0 24px}
.pilares-cab .wrap{display:flex;flex-direction:column;gap:18px}
.pilares-cab h2{max-width:820px}
.pilar{padding:72px 0}
.pilar .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:64px;align-items:center}
.pilar h2{font-size:clamp(30px,3.4vw,44px);line-height:1.08;font-weight:700}
.marcadores{display:flex;flex-direction:column;gap:14px;font-size:16px;line-height:1.5}
.marcadores div{display:flex;gap:12px}
.quadro{padding:26px;display:flex;flex-direction:column;gap:14px}
.quadro.cinza{background:var(--fundo-2)}
.quadro .rotulo{font-size:13px;color:var(--txt-2)}
.quadro .nota{font-size:12px;color:var(--txt-2)}
.pergunta-card{padding:16px 18px}
.pergunta-card small{font-size:13px;color:var(--txt-2);display:block}
.pergunta-card div{margin-top:4px}
.pergunta-card.acao{border:2px solid var(--ink)}
.pergunta-card.acao small{color:var(--red);font-weight:600}
.pergunta-card.acao div{font-weight:600}
.tema{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--linha-2)}
.tema:last-of-type{border-bottom:0}
.tema b{width:86px;flex:none;font-family:var(--display);font-weight:700;color:var(--red)}
.tema span{color:var(--txt)}
.balao{background:var(--fundo-2);border-radius:14px;padding:12px 16px;max-width:85%}
.balao small{display:block;font-size:12px;color:var(--txt-2)}
.balao.dir{align-self:flex-end}
.balao.mh{background:var(--rosado)}
.balao.mh small{color:var(--red);font-weight:600}

/* Depoimentos e logos */
.depo{margin:0;padding:28px;display:flex;flex-direction:column;gap:18px}
.depo .num{font-family:var(--display);font-size:clamp(30px,2.9vw,40px);font-weight:700;line-height:1.05}
.depo .num span{color:var(--red)}
.depo blockquote{margin:0;font-size:17px;line-height:1.55;color:var(--txt-3)}
.depo figcaption{font-size:14px}
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;align-items:center}
.logos figure{margin:0;height:96px;border:1px solid var(--linha);border-radius:14px;background:#FFFFFF;display:flex;align-items:center;justify-content:center;padding:14px}
.logos img{max-height:100%;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.85;transition:filter .2s,opacity .2s}
.logos figure:hover img{filter:none;opacity:1}

/* Prints do grupo dos alunos */
.sub-h3{font-size:22px}
.prints{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.print{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:14px;border:1px solid var(--linha);background:#F4F1EC;box-shadow:0 10px 30px rgba(20,20,20,0.06)}
.print img{display:block;width:100%;height:100%;object-fit:contain}
@media (max-width:900px){.prints{grid-template-columns:repeat(2,1fr)}}

/* Objeções */
.objecao{border:1px solid #333;border-radius:18px;padding:30px;display:flex;flex-direction:column;gap:14px}
.objecao h3{font-size:24px}
.objecao p{font-size:16px;line-height:1.6;color:var(--claro-1)}
.objecao strong{color:#FFFFFF}

/* Comparativo */
.tabela{overflow-x:auto;border:1px solid var(--linha);border-radius:18px}
.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
.tbl th{background:var(--red);color:#FFFFFF;text-align:left;padding:14px 16px;font-weight:600}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--linha);color:var(--txt-3)}
.tbl tr:last-child td{border-bottom:0}
.tbl td.us{font-weight:600;color:var(--ink);background:var(--rosado)}

/* Pra quem */
.praquem{padding:36px;display:flex;flex-direction:column;gap:18px}
.praquem h3{font-size:28px}
.praquem.borda{border:2px solid var(--ink)}
.praquem.cinza{background:var(--fundo-2)}
.praquem p{font-size:16px;line-height:1.6;color:var(--txt-3)}

/* Quem conduz */
.quem .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:64px;align-items:center}
.foto-bia{aspect-ratio:4/5;max-width:460px;width:100%;border-radius:22px;object-fit:cover;object-position:center 20%;justify-self:center;background:var(--fundo-3)}
.numeros{display:flex;gap:16px;flex-wrap:wrap}
.numeros div{background:var(--fundo-2);border-radius:16px;padding:18px 22px;flex:1 1 160px}
.numeros b{display:block;font-family:var(--display);font-size:40px;font-weight:700;color:var(--red);line-height:1}
.numeros span{display:block;font-size:14px;color:var(--txt);margin-top:6px}
.palco{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.palco img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 30%;border-radius:18px;background:var(--fundo-3)}

/* Investimento */
.oferta{width:100%;max-width:560px;padding:40px;box-shadow:0 24px 60px rgba(20,20,20,0.08);display:flex;flex-direction:column;gap:24px;border:2px solid var(--ink)}
.oferta-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.oferta-topo h3{font-size:26px}
.selo{font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;background:var(--red);color:#FFFFFF;padding:6px 12px;border-radius:99px}
.preco small{font-size:15px;color:var(--txt)}
.preco .valor{font-family:var(--display);font-size:64px;font-weight:700;line-height:1}
.preco p{font-size:15px;color:var(--txt);margin-top:10px}
.inclui{display:flex;flex-direction:column;gap:12px;font-size:16px}
.inclui div{display:flex;gap:12px}
.garantia{display:flex;gap:14px;align-items:flex-start;background:var(--fundo-2);border-radius:14px;padding:16px 18px}
.garantia p{font-size:14px;color:var(--txt-3);line-height:1.5}

/* FAQ */
.faq .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:48px 80px;align-items:start}
details{border-bottom:1px solid var(--linha);padding:22px 0}
summary{cursor:pointer;font-family:var(--display);font-size:20px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';color:var(--red);font-weight:700;transition:transform .2s;flex:none}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:12px;color:var(--txt);line-height:1.6;font-size:16px}

/* CTA final e rodapé */
.final .wrap{display:flex;flex-direction:column;gap:28px;align-items:center;text-align:center}
.final h2{font-size:clamp(40px,5.4vw,72px);line-height:1.02;font-weight:700;max-width:900px}
.final h2 span{color:var(--red-claro)}
.final .texto{max-width:680px}
.final .acoes{justify-content:center}
.final .miudo{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:15px;color:var(--claro-2);justify-content:center}
.final .miudo i{color:var(--red-claro);font-style:normal}
.rodape{padding:36px 0;border-top:1px solid var(--linha-2)}
.rodape .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;font-size:14px;color:var(--txt-2)}
.rodape a{color:var(--txt-2)}

/* Checkout e pedido */
.checkout{padding:56px 0 88px}
.checkout-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:40px;align-items:start;max-width:1000px}
.form{padding:32px;display:flex;flex-direction:column;gap:18px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-weight:600;font-size:15px}
.campo input{min-height:50px;border:1.5px solid var(--linha);border-radius:12px;padding:0 14px;font:inherit;font-size:16px;color:var(--ink);background:#FFFFFF}
.campo input:focus{outline:none;border-color:var(--ink)}
.erro,.erro-geral{color:var(--red);font-size:14px}
.erro-geral{background:var(--rosado);border-radius:12px;padding:12px 14px}
.formas{display:flex;flex-direction:column;gap:10px;border:0;padding:0;margin:0}
.formas legend{font-weight:600;font-size:15px;margin-bottom:6px}
.forma{display:flex;gap:12px;align-items:center;border:1.5px solid var(--linha);border-radius:14px;padding:14px 16px;cursor:pointer}
.forma:has(input:checked){border-color:var(--ink);background:var(--fundo-2)}
.forma input{accent-color:var(--red);width:18px;height:18px}
.forma b{display:block}
.forma small{color:var(--txt-2);font-size:14px}
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.miudo-form{font-size:13px;color:var(--txt-2);line-height:1.5}
.resumo{padding:28px;display:flex;flex-direction:column;gap:16px;background:var(--fundo-2)}
.resumo h2{font-size:28px}
.aviso{padding:36px;max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:18px;text-align:center;align-items:center}
.aviso h1{font-size:clamp(30px,4vw,44px);line-height:1.08}
.aviso .tag-sim{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-2);background:var(--fundo-3);border-radius:99px;padding:6px 12px}

/* Barra de compra fixa no celular (aparece depois do topo da página) */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#FFFFFF;border-top:1px solid var(--linha);box-shadow:0 -8px 24px rgba(20,20,20,0.08);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:none;align-items:center;justify-content:space-between;gap:12px;transform:translateY(110%);transition:transform .25s}
.barra.ver{transform:none}
.barra small{display:block;font-size:12px;color:var(--txt-2)}
.barra b{font-family:var(--display);font-size:20px}

/* ── Mentoria (rascunho "LP Mentoria MindHub", 21/10/2026) ── */
.marca-sub{font-weight:500;font-size:15px;color:var(--txt-2);letter-spacing:0;font-family:'IBM Plex Sans',system-ui,sans-serif}
.mock-plano h3{font-size:22px;margin-top:6px}
.linhas{display:flex;flex-direction:column;gap:12px;margin-top:18px;font-size:15px}
.linhas div{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--linha-2)}
.linhas div:last-child{padding-bottom:0;border-bottom:0}
.linhas .red{color:var(--red)}
.mock-escuro .tit{font-family:var(--display);font-size:20px;font-weight:600;margin-top:6px}
.mock-bonus .sub{font-size:13px;color:var(--red);font-weight:600}
.nota-dir{font-size:12px;color:var(--txt-2);text-align:right}
.dor h2{font-size:clamp(38px,5vw,64px);line-height:1.02;font-weight:700}
.dor .texto{color:var(--claro-2)}
.dor-card{border:1px solid #333;border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:12px}
.dor-card b{font-family:var(--display);font-size:15px;font-weight:700;color:var(--red-claro)}
.dor-card p{font-size:17px;line-height:1.55;color:var(--claro-1)}
.dor-card strong{color:#FFFFFF}
.dor .fecho{max-width:760px;font-size:19px;line-height:1.6;color:#FFFFFF;font-weight:600}
.grade-250{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
a.ponto{text-decoration:none;color:var(--ink)}
a.ponto:hover{border-color:var(--ink)}
a.ponto h3{font-size:26px}
.passo-card{padding:16px 18px;display:flex;gap:14px;align-items:center}
.passo-card b{font-family:var(--display);font-weight:700;color:var(--red);font-size:20px}
.passo-card span{flex:1}
.passo-card.forte{border:2px solid var(--ink)}
.quadro-topo{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.quadro-topo span{color:var(--txt-2)}
.quadro-topo b{color:var(--red);font-weight:600}
.tarefa{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--linha-2)}
.tarefa:last-child{border-bottom:0}
.tarefa small{font-size:13px;color:var(--txt-2);width:40px;flex:none}
.tarefa span{flex:1}
.tarefa em{font-style:normal;font-size:13px;color:var(--red);font-weight:600}
.tarefa.pendente span{font-weight:600}
.tarefa.pendente em{color:var(--ink)}
.etapa{padding:22px;display:flex;gap:16px;align-items:center}
.etapa .bola{width:44px;height:44px;border-radius:99px;background:var(--fundo-3);display:inline-flex;align-items:center;justify-content:center;flex:none;font-family:var(--display);font-weight:700}
.etapa strong{display:block;font-weight:600}
.etapa small{font-size:14px;color:var(--txt-2)}
.etapa.escura{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.etapa.escura .bola{background:var(--red)}
.etapa.escura small{color:var(--claro-2)}
.tema.larga b{width:92px}
.tema.larga strong{display:block;font-weight:600;color:var(--ink)}
.tema.larga small{font-size:14px;color:var(--txt-2)}
.meses{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr));gap:12px}
.mes{border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--linha);background:#FFFFFF}
.mes small{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--red)}
.mes b{font-family:var(--display);font-size:22px;font-weight:700}
.mes p{font-size:14px;line-height:1.5;color:var(--txt)}
.mes.escuro{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.mes.escuro small{color:var(--red-kicker)}
.mes.escuro p{color:var(--claro-2)}
.mes.vermelho{background:var(--red);border-color:var(--red);color:#FFFFFF}
.mes.vermelho small,.mes.vermelho p{color:#FBE3DF}
.rodape-meses{font-size:15px;color:var(--txt);line-height:1.6}
.rodape-meses strong{color:var(--ink)}
.tbl-4{min-width:680px}
.tbl-4 td{vertical-align:top}
.li{display:flex;gap:12px;font-size:16px;line-height:1.5}
.planos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:20px;width:100%;max-width:980px}
.plano{padding:36px;display:flex;flex-direction:column;gap:22px}
.plano.destaque{border:2px solid var(--ink);box-shadow:0 24px 60px rgba(20,20,20,0.08)}
.plano-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.plano-topo h3{font-size:24px}
.plano-topo span:not(.selo){font-size:14px;color:var(--txt-2)}
.plano .valor{font-family:var(--display);font-size:56px;font-weight:700;line-height:1}
.plano .pra-quem{font-size:15px;line-height:1.55;color:var(--txt-3)}
.inclusos{width:100%;max-width:980px;padding:28px 32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px 32px}
.credito{font-size:14px;color:var(--txt);text-align:center;max-width:680px;line-height:1.55}
.credito strong{color:var(--ink)}
.final-form .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:64px;align-items:center}
.final-form h2{font-size:clamp(38px,5vw,64px);line-height:1.02;font-weight:700}
.final-form h2 span{color:var(--red-claro)}
.final-form .miudo{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:15px;color:var(--claro-2)}
.final-form .miudo i{color:var(--red-claro);font-style:normal}
.form-branco{background:#FFFFFF;color:var(--ink);border-radius:22px;padding:36px;display:flex;flex-direction:column;gap:18px}
.form-branco h3{font-size:24px}
.campo select{min-height:50px;border:1.5px solid var(--linha);border-radius:12px;padding:0 14px;font:inherit;font-size:16px;color:var(--ink);background:#FFFFFF}
.campo select:focus{outline:none;border-color:var(--ink)}
.aceite{display:flex;gap:10px;align-items:flex-start}
.aceite input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--red)}
.aceite label{font-size:13px;font-weight:400;color:var(--txt);line-height:1.5}
.ou-whats{font-size:14px;text-align:center;color:var(--txt)}
@media (max-width:640px){
  .plano,.form-branco{padding:24px}
  .plano .valor{font-size:46px}
  .inclusos{padding:22px}
  .final-form .wrap{gap:36px}
}

@media (max-width:820px){.navlinks{display:none !important}}

/* ── Celular (melhorias em cima do rascunho) ── */
@media (max-width:640px){
  .wrap{padding:0 16px}
  .topo .wrap{height:62px;gap:12px}
  .marca{font-size:20px}
  .hero{padding:40px 0 48px}
  .hero .wrap,.pilar .wrap,.quem .wrap{gap:36px}
  .hero h1{font-size:clamp(36px,10vw,44px)}
  .sec{padding:64px 0}
  .pilar{padding:48px 0}
  .acoes .btn,.acoes .btn-ghost,.acoes .btn-light{width:100%}
  .faixa .wrap{gap:8px 18px;font-size:14px}
  .faixa i{display:none}
  .faixa span{flex:1 1 100%;text-align:center}
  .oferta,.praquem,.form{padding:24px}
  .preco .valor{font-size:52px}
  .palco{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:32px}
  .palco img{border-radius:12px}
  /* Comparativo vira cartões: nada de rolar a tabela de lado */
  .tabela{border:0;overflow:visible}
  .tbl{min-width:0;font-size:15px}
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{border:1px solid var(--linha);border-radius:16px;margin-bottom:12px;overflow:hidden}
  .tbl td{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--linha-2)}
  .tbl td:first-child{display:block;background:var(--ink);color:#FFFFFF;font-weight:600}
  .tbl td:not(:first-child)::before{content:attr(data-col);color:var(--txt-2);font-weight:400}
  .tbl td.us{border-bottom:0}
  body.com-barra{padding-bottom:76px}
  .prints{column-count:auto;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
  .prints::-webkit-scrollbar{display:none}
  .print{flex:0 0 78%;scroll-snap-align:center}
  .barra{display:flex}
  summary{font-size:18px}
}

/* ── Mais visual (Bia, 22/10/2026: "achei que ficou pouco visual") ──
   Topo com foto da Bia, faixa de fotos rolando, ícones nos cartões e a frase
   da Bia em cima de uma foto de palco. Fotos do Drive da Mari. */
.hero-foto{position:relative;isolation:isolate;background:var(--ink);color:#FFFFFF;overflow:hidden}
.hero-capa img{width:100%;height:100%;object-fit:cover}
.hero-foto h1{color:#FFFFFF}
.hero-foto h1 span{color:var(--red-claro)}
.hero-foto .lead{color:var(--claro-1)}
.hero-foto .lead strong{color:#FFFFFF}
.hero-foto .kicker{color:var(--red-kicker)}
.hero-foto .rule{background:var(--red-claro)}
.hero-foto .btn-ghost{border-color:#FFFFFF;color:#FFFFFF}
.hero-foto .btn-ghost:hover{background:#FFFFFF;color:var(--ink)}
.hero-foto .selos{color:var(--claro-1)}
.hero-foto .selos svg{stroke:var(--red-claro)}
.hero-foto .mock-lista,.hero-foto .mock-bonus{color:var(--ink)}
.hero-foto .mock-escuro{background:#1E1E1E;border-color:#3A3A3A}
.hero-foto .nota-dir{color:var(--claro-2)}
@media (min-width:901px){
  .hero-capa{position:absolute;inset:0;z-index:-2}
  .hero-capa img{object-position:center 40%}
  .hero-foto::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,20,20,.94) 0%,rgba(20,20,20,.8) 45%,rgba(20,20,20,.5) 100%)}
}
@media (max-width:900px){
  .hero.hero-foto{padding-top:0}
  .hero-capa{display:block;position:relative;height:clamp(280px,78vw,460px)}
  .hero-capa img{object-position:center 20%}
  .hero-capa::after{content:'';position:absolute;inset:0 0 -2px;background:linear-gradient(180deg,rgba(20,20,20,0) 35%,rgba(20,20,20,.8) 78%,var(--ink) 96%)}
  .hero-foto .wrap{position:relative;margin-top:-52px}
}

/* Faixa de fotos: rola sozinha (pausa no dedo/mouse); sem movimento pra quem pediu */
.fotos-faixa{background:var(--ink);padding:8px 0 28px;overflow:hidden}
.fotos-trilho{display:flex;gap:10px;width:max-content;animation:fotos-rolam 70s linear infinite}
.fotos-trilho img{height:210px;width:auto;flex:none;border-radius:14px;object-fit:cover;background:#222}
.fotos-faixa:hover .fotos-trilho,.fotos-faixa:active .fotos-trilho{animation-play-state:paused}
@keyframes fotos-rolam{to{transform:translateX(calc(-50% - 5px))}}
@media (prefers-reduced-motion:reduce){
  .fotos-trilho{animation:none}
  .fotos-faixa{overflow-x:auto;scrollbar-width:none}
  .fotos-faixa::-webkit-scrollbar{display:none}
}

/* Prints no celular (Eduardo, 26/10/2026: "barrinha de rolagem é horrível"):
   desliza com o dedo, sem barra; os pontinhos dizem em qual print você está,
   como no Instagram. No computador a grade continua e os pontos não aparecem. */
.pontos{display:none;justify-content:center;gap:6px;margin-top:14px}
.pontos button{width:7px;height:7px;padding:0;border:0;border-radius:4px;background:var(--linha);cursor:pointer;transition:width .25s,background .25s}
.pontos button.on{width:20px;background:var(--red)}
@media (max-width:640px){.pontos{display:flex}}

/* Ícones nos cartões */
.ico-rosado{background:var(--rosado);color:var(--red)}
.ponto-topo{display:flex;justify-content:space-between;align-items:center;gap:12px}
.caixa-escura .ico{margin-bottom:6px}

/* Frase da Bia em cima da foto de palco */
.frase-foto{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#FFFFFF;padding:128px 0}
.frase-foto img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.frase-foto::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,20,20,.5),rgba(20,20,20,.86))}
.frase-foto blockquote{margin:0;max-width:920px;font-family:var(--display);font-weight:700;font-size:clamp(32px,4.8vw,60px);line-height:1.05;letter-spacing:-.02em}
.frase-foto p{margin-top:22px;font-size:16px;color:var(--claro-1)}

/* Casos: barra vermelha em cima, pra puxar o olho pro número */
.depo{border-top:4px solid var(--red)}

@media (max-width:640px){
  .fotos-trilho img{height:170px;border-radius:12px}
  .fotos-faixa{padding:4px 0 24px}
  .frase-foto{padding:96px 0}
}

/* ── Tema "cozinha" do Clube e do Básico (28/10/2026, segunda rodada visual) ──
   Eduardo: "ficou melhor que antes... tem como melhorar". Seguindo a skill de
   design (frontend-design) junto com a do grupo (landing-page-mindhub):
   · cores da MindHub (carvão + vermelho), sem o creme e a mostarda da 1ª
     rodada (a skill do grupo proíbe bege/amarelo e a de design lista o creme
     como "cara de página gerada");
   · UM momento de movimento: a comanda saindo da impressora no topo (é o que
     todo dono de restaurante reconhece). O resto da página fica parado; só
     se mexe o que a pessoa toca (perguntas, botões);
   · sem etiqueta em cima de título, sem palavra pintada no título, sem 01/02
     onde não é sequência;
   · letra: Archivo estreita nos títulos (cara de letreiro/cardápio) e normal
     no texto; a fonte de impressora (IBM Plex Mono) só dentro da comanda.
   Vale só com <body class="tema-cozinha"> (a Mentoria fica como está). */
.tema-cozinha{
  --ink:#221F1D;          /* carvão da chapa */
  --red:#E3342F;          /* vermelho MindHub */
  --red-esc:#B92420;
  --red-claro:#F0605A;
  --inox:#E4E6E8;         /* aço da cozinha: linhas e fundos de apoio */
  --inox-claro:#F1F2F3;
  --papel:#F7F6F2;        /* papel da comanda */
  --txt:#4D4B49;--txt-2:#6E6B68;--txt-3:#3A3836;
  --linha:var(--inox);--linha-2:var(--inox-claro);--fundo-2:var(--inox-claro);--fundo-3:var(--inox);
  --claro-1:#E9E6E3;--claro-2:#BDB8B3;--red-kicker:#F0605A;
  --display:'Archivo',system-ui,sans-serif;
  font-family:'Archivo',system-ui,sans-serif;background:#FFFFFF;color:var(--ink)}
.tema-cozinha h1,.tema-cozinha h2,.tema-cozinha .h2,.tema-cozinha summary,.tema-cozinha blockquote{font-family:var(--display);font-stretch:72%;font-weight:800;letter-spacing:-.005em}
.tema-cozinha h3{font-family:var(--display);font-stretch:85%;font-weight:700;letter-spacing:0}
.tema-cozinha .hero h1{font-size:clamp(46px,6.6vw,88px);line-height:.94}
.tema-cozinha .hero h1 span{color:inherit}   /* sem palavra pintada */
.tema-cozinha .h2,.tema-cozinha .pilar h2,.tema-cozinha .sec-escura h2.grande,.tema-cozinha .final h2{line-height:.98}
.tema-cozinha .lead{max-width:62ch}
.tema-cozinha .sec-cab{gap:14px}
.tema-cozinha .sec-clara{background:var(--inox-claro)}
.tema-cozinha .sec-escura{background:var(--ink)}
.tema-cozinha .topo{background:rgba(255,255,255,.95);border-bottom-color:var(--inox)}
.tema-cozinha .rotulo-pilar{font-weight:700;font-size:17px;color:var(--red)}
.tema-cozinha .pilares-cab{padding-top:96px}
.tema-cozinha .selo{text-transform:none;letter-spacing:0;border-radius:6px;font-size:13px;padding:5px 10px}
@media (max-width:640px){.tema-cozinha .pilares-cab{padding-top:64px}}
/* cartões: menos caixa, raio menor, sem sombra; quem tem destaque é a oferta */
.tema-cozinha .card{border-radius:10px;border-color:var(--inox);box-shadow:none}
.tema-cozinha .ponto{border:0;border-top:2px solid var(--ink);border-radius:0;background:transparent;padding:18px 0 0}
.tema-cozinha .ico{border-radius:8px}
.tema-cozinha .ico-rosado{background:var(--inox-claro);color:var(--red)}
.tema-cozinha .caixa-escura,.tema-cozinha .objecao{border-radius:10px;border-color:#3B3735}
.tema-cozinha .btn,.tema-cozinha .btn-ghost,.tema-cozinha .btn-light{border-radius:10px;font-weight:700;transition:background-color .15s ease,color .15s ease,transform .1s ease}
.tema-cozinha .btn:active,.tema-cozinha .btn-ghost:active,.tema-cozinha .btn-light:active{transform:scale(.98)}
.tema-cozinha .oferta{border-radius:12px;box-shadow:none;border:2px solid var(--ink)}
.tema-cozinha .tbl th{background:var(--ink)}
.tema-cozinha .tbl td.us{background:#FDECEB}
.tema-cozinha .depo{border-top:0}
.tema-cozinha .print{border-radius:10px;box-shadow:none}
.tema-cozinha .barra{border-top-color:var(--inox)}
/* a faixa de fotos da Bia para de rolar sozinha: a pessoa arrasta se quiser */
.tema-cozinha .fotos-trilho{animation:none}
.tema-cozinha .fotos-faixa{overflow-x:auto;scrollbar-width:none}
.tema-cozinha .fotos-faixa::-webkit-scrollbar{display:none}
.tema-cozinha .fotos-trilho img[aria-hidden="true"]{display:none}

/* ── A comanda do topo ── */
.comanda-caixa{width:min(100%,380px);justify-self:center;align-self:center;filter:drop-shadow(0 22px 36px rgba(0,0,0,.45))}
.impressora{position:relative;z-index:2;height:28px;border-radius:12px 12px 4px 4px;background:linear-gradient(#77706B,#4A4542 55%,#3A3634);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -7px 0 #2A2725}
.impressora::after{content:'';position:absolute;left:16px;right:16px;bottom:4px;height:3px;border-radius:2px;background:#0F0E0D}
.comanda-saida{overflow:hidden;margin:-4px 20px 0;padding-bottom:4px}
.comanda{--dente:14px;background:var(--papel);color:#2B2928;font:500 14px/1.55 'IBM Plex Mono',ui-monospace,monospace;padding:22px 20px 34px;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--dente) 100%;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--dente) 100%}
.comanda p,.comanda ul{margin:0}
.comanda-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1.5px dashed #9C978F}
.comanda-cab b{font-weight:600;font-size:15px}
.comanda-cab span{font-size:12.5px;color:#6E6A64}
.comanda ul{list-style:none;padding:12px 0;display:flex;flex-direction:column;gap:7px;border-bottom:1.5px dashed #9C978F}
.comanda li{display:flex;gap:12px}
.comanda li span{width:28px;flex:none;color:var(--red);font-weight:600}
.comanda-total{display:flex;justify-content:space-between;gap:12px;padding-top:12px;font-weight:600}
.comanda-total b{font-size:18px;color:var(--red)}
.comanda .comanda-pe{margin-top:6px;font-size:12.5px;color:#6E6A64}
/* O único movimento que não depende de toque: quando a comanda aparece na
   tela, ela sai da impressora aos trancos, como a da cozinha. O lp.js põe
   `espera` (guardada dentro da impressora) e `imprime` (sai) só se o aparelho
   não pediu menos movimento; sem JS ela já está inteira, parada. */
.comanda-caixa.espera .comanda{transform:translateY(-101%)}
.comanda-caixa.imprime .comanda{animation:imprime 2.2s .25s both}
@keyframes imprime{
  0%{transform:translateY(-101%)}
  22%{transform:translateY(-70%)}30%{transform:translateY(-70%)}
  52%{transform:translateY(-38%)}60%{transform:translateY(-38%)}
  84%{transform:translateY(-6%)}100%{transform:none}
}
/* Computador (Eduardo, 28/10/2026: "tem uma parte tampando a Bianca"): na
   foto do topo a Bia está do lado direito, então a comanda vai pra coluna do
   texto, logo abaixo dos botões (a mesma ordem do celular), e o lado direito
   fica livre pra ela aparecer inteira. */
@media (min-width:901px){
  .tema-cozinha .hero .wrap{grid-template-columns:minmax(0,600px);gap:44px;justify-content:start}
  .tema-cozinha .hero .comanda-caixa{justify-self:start}
}
@media (max-width:900px){
  .tema-cozinha .hero .wrap{gap:40px}
  /* celular/tablet: o texto encosta menos na foto, pra não cobrir a Bia */
  .tema-cozinha .hero-foto .wrap{margin-top:-12px}
  .comanda-caixa{width:min(100%,340px)}
  .comanda{font-size:13px;padding:20px 16px 32px}
  .comanda li span{width:24px}
}

/* ── Peças do Clube que seguem valendo (1ª rodada, 28/10) ── */
.marca-selo{display:inline-flex;width:30px;height:30px;border-radius:8px;background:var(--red);color:#FFFFFF;align-items:center;justify-content:center;font-size:18px;font-weight:800;margin-right:8px;vertical-align:-6px}
.marca .marca-selo{color:#FFFFFF}
.marca-logo{height:40px;width:auto;display:block}
.faixa-numeros{background:var(--ink);border:0}
.faixa-numeros .wrap{gap:14px 64px;padding-top:30px;padding-bottom:30px;color:var(--claro-1);font-size:16px}
.faixa-numeros span{display:flex;flex-direction:column;align-items:center;text-align:center}
.faixa-numeros strong{font-family:var(--display);font-stretch:72%;font-size:44px;font-weight:800;line-height:1;color:#FFFFFF}
.profs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.prof{margin:0;padding:22px;display:flex;flex-direction:column;gap:14px;background:#FFFFFF}
.prof img,.prof-inicial{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none}
.prof-inicial{display:flex;align-items:center;justify-content:center;background:var(--inox);font-family:var(--display);font-size:38px;font-weight:800;color:var(--ink)}
.prof strong{font-family:var(--display);font-size:21px;font-weight:700;display:block;line-height:1.1}
.prof small{display:block;color:var(--red);font-weight:600;font-size:14px;margin-top:4px}
.prof p{font-size:15px;color:var(--txt);line-height:1.5;margin-top:8px}
.frase-clube{background:var(--ink);color:#FFFFFF;padding:112px 0}
.frase-clube blockquote{margin:0;max-width:22ch;font-size:clamp(36px,5.4vw,68px);line-height:1}
.frase-clube-assina{margin-top:26px;font-size:16px;color:var(--claro-2)}
.frase-clube-assina strong{color:#FFFFFF}
.depos figcaption{display:flex;gap:12px;align-items:center}
.depo-foto{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
/* perguntas: abrem e fecham suave (lp.js); sem JS abre na hora */
.faq-suave .faq details{overflow:hidden}
@media (max-width:640px){
  .faixa-numeros .wrap{gap:18px 10px;flex-wrap:nowrap}
  .faixa-numeros span{flex:1 1 0;font-size:13px}
  .faixa-numeros strong{font-size:32px}
  .profs{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
  .profs::-webkit-scrollbar{display:none}
  .prof{flex:0 0 78%;scroll-snap-align:center}
  .frase-clube{padding:80px 0}
  /* depoimentos deslizam de lado no celular (a pessoa arrasta) */
  .tema-cozinha .depos{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 8px;scrollbar-width:none}
  .tema-cozinha .depos::-webkit-scrollbar{display:none}
  .tema-cozinha .depos > *{flex:0 0 84%;scroll-snap-align:center}
}

/* ── Movimento (28/10/2026, Eduardo: "invista um pouco na qualidade visual... com
   animações, efeitos"). Saiu na 2ª rodada e VOLTOU no mesmo dia (Eduardo:
   "você tirou todas as animações que eu gostava"): o gosto dele vale mais que
   a skill de design. Fica por cima do tema "cozinha"; a comanda continua sendo
   o momento principal do topo. Só nas páginas com <body class="anima"> (Clube e
   Básico). Tudo é CSS + o lp.js, sem biblioteca. O que some antes de aparecer
   só some quando o JS liga `com-anima` no <html>: sem JS, ou pra quem pede
   menos movimento no celular/computador, a página fica parada e inteira. ── */
@media (prefers-reduced-motion:no-preference){
  /* topo: o texto entra em sequência e a foto aproxima devagar */
  .com-anima .hero .coluna > *{animation:sobe .7s cubic-bezier(.2,.7,.2,1) both}
  .com-anima .hero .coluna > :nth-child(2){animation-delay:.08s}
  .com-anima .hero .coluna > :nth-child(3){animation-delay:.16s}
  .com-anima .hero .coluna > :nth-child(4){animation-delay:.24s}
  .com-anima .hero .coluna > :nth-child(5){animation-delay:.32s}
  .com-anima .hero .mock{animation:sobe .8s .3s cubic-bezier(.2,.7,.2,1) both}
  .anima .hero-capa{clip-path:inset(0 0 -3px 0)}   /* a foto aproxima sem vazar pra fora */
  .anima .hero-capa img{animation:aproxima 16s ease-out both}
  /* fundo com forma animada leve, atrás do texto do topo */
  .anima .hero-foto::after{content:'';position:absolute;z-index:-1;pointer-events:none;width:min(70vw,620px);aspect-ratio:1;right:-18%;bottom:-22%;border-radius:50%;
    background:radial-gradient(circle at 40% 40%,rgba(227,93,78,.45),rgba(227,93,78,0) 62%);filter:blur(10px);animation:deriva 14s ease-in-out infinite alternate}
  /* aparece conforme rola */
  /* `translate` (e não `transform`) pra não brigar com o hover dos cartões */
  .com-anima .revela{opacity:0;translate:0 26px;transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--atraso,0s),translate .7s cubic-bezier(.2,.7,.2,1) var(--atraso,0s)}
  .com-anima .revela.revelado{opacity:1;translate:none}
  .com-anima .frase-foto.revelado img{animation:aproxima 12s ease-out both}
  /* micro-interações: botão sobe e ganha sombra, cartão levanta, clique "afunda" */
  .anima .btn,.anima .btn-ghost,.anima .btn-light{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease}
  .anima .btn:active,.anima .btn-ghost:active,.anima .btn-light:active{transform:scale(.97)}
  .anima .btn .seta-btn{display:inline-block;margin-left:8px;transition:transform .2s ease}
  .anima .barra.ver .btn{animation:cutuca 2.4s 1s ease-in-out 2}
  @media (hover:hover){
    .anima .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(192,57,43,.32)}
    .anima .btn-ghost:hover,.anima .btn-light:hover{transform:translateY(-2px)}
    .anima .card,.anima .caixa-escura,.anima .objecao{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,
      opacity .7s cubic-bezier(.2,.7,.2,1) var(--atraso,0s),translate .7s cubic-bezier(.2,.7,.2,1) var(--atraso,0s)}
    .anima .card:hover,.anima .caixa-escura:hover,.anima .objecao:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,20,20,.10)}
    .anima .caixa-escura:hover,.anima .objecao:hover{border-color:#5A5A5A;box-shadow:0 18px 40px rgba(0,0,0,.45)}
    .anima .ponto:hover{transform:none;box-shadow:none}   /* no tema cozinha o ponto é uma lista, não um cartão */
    .anima .ico{transition:transform .25s ease}
    .anima .card:hover .ico,.anima .caixa-escura:hover .ico{transform:rotate(-8deg) scale(1.08)}
  }
}
@keyframes sobe{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes aproxima{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes deriva{from{transform:translate(0,0) scale(1)}to{transform:translate(-12%,-10%) scale(1.15)}}
@keyframes cutuca{0%,100%{transform:none}12%{transform:scale(1.06)}24%{transform:none}}