/* Favaryn · estilo comum das páginas (guia em ../DESIGN.md) */
  :root {
    --papel:#F6F2EA; --papel2:#EDE7DB; --tinta:#17140F; --tinta2:#5C574E;
    --brasa:#C2502A; --brasa-esc:#A8421F; --erva:#5E6B57; --linha:#DCD4C6;
    --serif:"Fraunces", Georgia, serif; --sans:"Hanken Grotesk", system-ui, sans-serif;
    --curva:cubic-bezier(.2,.7,.2,1);
    --lado:clamp(20px, 5vw, 56px);
    --secao:clamp(72px, 11vw, 112px);
  }
  * { box-sizing:border-box; margin:0; }
  html { scroll-behavior:smooth; scroll-padding-top:84px; }
  body { background:var(--papel); color:var(--tinta); font:400 clamp(17px,1.6vw,18px)/1.6 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  img, svg { display:block; max-width:100%; }
  a { color:inherit; }
  :focus-visible { outline:2px solid var(--brasa); outline-offset:3px; border-radius:6px; }
  .pular { position:absolute; left:-999px; top:8px; background:var(--tinta); color:var(--papel); padding:10px 16px; border-radius:99px; z-index:20; }
  .pular:focus { left:16px; }
  .caixa { max-width:1180px; margin:0 auto; padding:0 var(--lado); }

  h1, h2, h3 { font-family:var(--serif); font-weight:600; letter-spacing:-.02em; font-variation-settings:"opsz" 144; }
  h1 { font-size:clamp(40px, 6.6vw, 76px); line-height:1.02; }
  h2 { font-size:clamp(30px, 4.2vw, 46px); line-height:1.08; max-width:20ch; }
  h3 { font-size:clamp(21px, 2vw, 24px); line-height:1.25; letter-spacing:-.01em; font-variation-settings:"opsz" 48; }
  h1 em, h2 em { font-style:normal; color:var(--brasa); }
  .rot { display:inline-flex; align-items:center; gap:10px; font:600 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--tinta2); margin-bottom:22px; }
  .rot::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--brasa); }
  .lead { font-size:clamp(18px,1.9vw,21px); line-height:1.55; color:var(--tinta2); max-width:34em; }

  .btn { display:inline-flex; align-items:center; gap:10px; font:600 16px/1 var(--sans); text-decoration:none; padding:15px 24px; border-radius:999px; transition:background .25s, color .25s, border-color .25s, transform .25s var(--curva); }
  .btn:hover { transform:translateY(-1px); }
  .btn-p { background:var(--tinta); color:var(--papel); }
  .btn-p:hover { background:var(--brasa-esc); }
  .btn-s { border:1.5px solid var(--tinta); color:var(--tinta); }
  .btn-s:hover { background:var(--tinta); color:var(--papel); }
  .btn svg { width:19px; height:19px; flex:none; }
  .claro .btn-p { background:var(--papel); color:var(--tinta); }
  .claro .btn-p:hover { background:var(--brasa); color:var(--papel); }

  /* Cabeçalho */
  .topo { position:sticky; top:0; z-index:10; background:rgba(246,242,234,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .3s; animation:desce .7s var(--curva) both; }
  .topo.rolou { border-color:var(--linha); }
  .topo .caixa { display:flex; align-items:center; justify-content:space-between; gap:20px; height:72px; }
  .topo .marca img { height:30px; width:auto; }
  .topo nav { display:flex; gap:28px; font-weight:500; font-size:15px; }
  .topo nav a { text-decoration:none; color:var(--tinta2); transition:color .2s; }
  .topo nav a:hover { color:var(--tinta); }
  .topo .btn { padding:11px 18px; font-size:15px; }
  @media (max-width:880px) { .topo nav { display:none; } }
  @media (max-width:420px) { .topo .btn span { display:none; } .topo .btn { padding:11px; } }

  /* Abertura */
  .abertura { padding:clamp(48px,8vw,96px) 0 var(--secao); }
  .abertura .caixa { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,80px); align-items:center; }
  @media (max-width:880px) { .abertura .caixa { grid-template-columns:1fr; } }
  .abertura .lead { margin:26px 0 34px; }
  .acoes { display:flex; flex-wrap:wrap; gap:12px; }
  .abertura .nota { margin-top:26px; display:flex; align-items:center; gap:12px; font-size:14px; line-height:1.4; color:var(--tinta2); }
  .abertura .nota img { width:44px; height:44px; border-radius:50%; flex:none; }
  .abertura .nota b { color:var(--tinta); font-weight:600; }
  .intro > * { animation:sobe .8s var(--curva) both; }
  .intro > :nth-child(2) { animation-delay:.08s; } .intro > :nth-child(3) { animation-delay:.16s; }
  .intro > :nth-child(4) { animation-delay:.24s; } .intro > :nth-child(5) { animation-delay:.32s; }

  /* Celular ilustrativo */
  .celular { justify-self:center; width:min(300px, 78vw); aspect-ratio:9/18.5; border-radius:40px; background:var(--tinta); padding:11px; box-shadow:0 30px 60px rgba(23,20,15,.18); position:relative; animation:sobe 1s .2s var(--curva) both; }
  .celular .tela { height:100%; border-radius:30px; background:#FBF9F5; overflow:hidden; display:flex; flex-direction:column; }
  .tela .bar { height:38px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid #eee7da; }
  .tela .bar b { font:600 13px var(--serif); } .tela .bar i { width:16px; height:2px; background:var(--tinta); box-shadow:0 5px 0 var(--tinta); }
  .tela .heroi { padding:26px 18px 20px; background:linear-gradient(160deg,#2a2620,#17140F); color:var(--papel); }
  .tela .heroi small { font:600 8px var(--sans); letter-spacing:.14em; text-transform:uppercase; opacity:.6; }
  .tela .heroi p { font:600 21px/1.08 var(--serif); margin:8px 0 14px; letter-spacing:-.02em; }
  .tela .wa { display:inline-flex; gap:6px; align-items:center; background:var(--papel); color:var(--tinta); font:600 10px var(--sans); padding:8px 12px; border-radius:99px; }
  .tela .blocos { padding:16px 18px; display:grid; gap:10px; }
  .tela .blocos div { height:10px; border-radius:5px; background:#ece6da; } .tela .blocos div:nth-child(2) { width:80%; } .tela .blocos div:nth-child(3) { width:60%; }
  .tela .cards { padding:4px 18px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .tela .cards span { aspect-ratio:1; border-radius:10px; background:var(--papel2); }
  .tela .cards span:first-child { background:#e9c9b9; }
  .celular .selo { position:absolute; left:-34px; bottom:68px; background:var(--papel); border:1px solid var(--linha); border-radius:14px; padding:11px 14px; font:500 13px/1.3 var(--sans); box-shadow:0 12px 32px rgba(23,20,15,.10); max-width:180px; }
  .celular .selo b { display:block; font:600 15px var(--serif); }
  @media (max-width:420px) { .celular .selo { left:-8px; } }

  /* Seções */
  section.s { padding:var(--secao) 0; }
  .escura { background:var(--tinta); color:var(--papel); }
  .escura .rot, .escura .lead { color:rgba(246,242,234,.68); }
  .escura h2 em { color:#E58B66; }
  .cab { display:flex; justify-content:space-between; align-items:end; gap:32px; flex-wrap:wrap; margin-bottom:clamp(40px,6vw,64px); }
  .cab .lead { max-width:30em; }

  .tres { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media (max-width:880px) { .tres { grid-template-columns:1fr; } }
  .cartao { background:var(--papel2); border-radius:18px; padding:30px 28px 32px; }
  .cartao .n { font:600 15px var(--serif); color:var(--brasa); margin-bottom:34px; display:block; }
  .cartao p { margin-top:12px; color:var(--tinta2); }

  .entrega { display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px; list-style:none; padding:0; border-top:1px solid rgba(246,242,234,.16); }
  @media (max-width:720px) { .entrega { grid-template-columns:1fr; } }
  .entrega li { display:flex; gap:18px; padding:24px 0; border-bottom:1px solid rgba(246,242,234,.16); }
  .entrega li svg { width:22px; height:22px; flex:none; margin-top:3px; color:#E58B66; }
  .entrega b { display:block; font-weight:600; margin-bottom:3px; }
  .entrega span { color:rgba(246,242,234,.68); font-size:16px; }

  .passos { list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:p; }
  @media (max-width:980px) { .passos { grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px) { .passos { grid-template-columns:1fr; } }
  .passos li { counter-increment:p; border-top:2px solid var(--tinta); padding-top:22px; }
  .passos li::before { content:counter(p); display:block; font:600 64px/1 var(--serif); color:var(--brasa); letter-spacing:-.04em; margin-bottom:18px; font-variation-settings:"opsz" 144; }
  .passos p { color:var(--tinta2); margin-top:10px; }

  .ia { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px); align-items:start; }
  @media (max-width:880px) { .ia { grid-template-columns:1fr; } }
  .ia blockquote { font:400 clamp(26px,3vw,34px)/1.25 var(--serif); letter-spacing:-.01em; font-variation-settings:"opsz" 72; border-left:3px solid var(--brasa); padding-left:26px; }
  .ia .lista { display:grid; gap:22px; }
  .ia .lista div { display:grid; grid-template-columns:120px 1fr; gap:16px; padding-bottom:22px; border-bottom:1px solid var(--linha); }
  .ia .lista small { font:600 12px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--tinta2); padding-top:4px; }
  @media (max-width:480px) { .ia .lista div { grid-template-columns:1fr; gap:4px; } }

  .depois { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,6vw,88px); align-items:center; background:var(--papel2); border-radius:22px; padding:clamp(30px,5vw,64px); }
  @media (max-width:880px) { .depois { grid-template-columns:1fr; } }
  .depois ul { list-style:none; padding:0; display:grid; gap:0; }
  .depois li { padding:18px 0; border-bottom:1px solid var(--linha); display:flex; gap:16px; align-items:baseline; }
  .depois li:last-child { border-bottom:0; }
  .depois li b { font:600 19px var(--serif); font-variation-settings:"opsz" 48; min-width:9.5em; }
  .depois li span { color:var(--tinta2); font-size:16px; }
  @media (max-width:520px) { .depois li { flex-direction:column; gap:2px; } }
  .depois .lead { margin-top:18px; }

  .quem { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,6vw,88px); align-items:center; }
  @media (max-width:880px) { .quem { grid-template-columns:1fr; } }
  .foto { aspect-ratio:4/5; border-radius:22px; overflow:hidden; max-width:420px; width:100%; background:#25211b; }
  .foto img { width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
  .quem .lead { margin:22px 0 30px; }
  .assina { font:600 22px var(--serif); } .assina small { display:block; font:500 14px var(--sans); color:var(--tinta2); margin-top:4px; }

  .duvidas { max-width:820px; }
  .duvidas details { border-bottom:1px solid var(--linha); }
  .duvidas summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding:24px 0; font:600 clamp(19px,2vw,21px)/1.35 var(--serif); font-variation-settings:"opsz" 48; }
  .duvidas summary::-webkit-details-marker { display:none; }
  .duvidas summary::after { content:"+"; font:400 28px/1 var(--sans); color:var(--brasa); transition:transform .3s var(--curva); }
  .duvidas details[open] summary::after { transform:rotate(45deg); }
  .duvidas details p { padding:0 0 26px; color:var(--tinta2); max-width:40em; }

  .final { text-align:center; }
  .final h2 { margin:0 auto; max-width:none; }
  .final .lead { margin:22px auto 34px; }
  .final .acoes { justify-content:center; }

  footer { background:var(--tinta); color:rgba(246,242,234,.7); padding:64px 0 40px; font-size:15px; }
  footer .grade { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
  @media (max-width:800px) { footer .grade { grid-template-columns:1fr; } }
  footer img { height:34px; width:auto; margin-bottom:18px; }
  footer h4 { font:600 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--papel); margin-bottom:14px; }
  footer ul { list-style:none; padding:0; display:grid; gap:8px; }
  footer a { text-decoration:none; } footer a:hover { color:var(--papel); text-decoration:underline; }
  footer .legal { margin-top:48px; padding-top:24px; border-top:1px solid rgba(246,242,234,.14); font-size:13px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

  .wa-flut { position:fixed; right:18px; bottom:18px; z-index:9; width:56px; height:56px; border-radius:50%; background:var(--tinta); color:var(--papel); display:grid; place-items:center; box-shadow:0 12px 30px rgba(23,20,15,.25); transition:background .25s, transform .25s var(--curva); }
  .wa-flut:hover { background:var(--brasa-esc); transform:translateY(-2px); }
  .wa-flut svg { width:26px; height:26px; }

  /* Movimento: o mesmo das prévias */
  @keyframes sobe { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
  @keyframes desce { from { transform:translateY(-100%); } to { transform:none; } }
  .revela { transition:opacity .7s var(--curva), transform .7s var(--curva); transition-delay:calc(var(--i,0) * 90ms); }
  .revela.espera { opacity:0; transform:translateY(18px); }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, ::before, ::after { animation:none !important; transition:none !important; }
    .revela.espera { opacity:1; transform:none; }
  }

  /* Formulário "Montar meu site" */
  .montar { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,6vw,80px); align-items:start; }
  @media (max-width:880px) { .montar { grid-template-columns:1fr; } }
  .montar .lead { margin-top:22px; }
  .montar .aviso { margin-top:22px; font-size:14px; color:var(--tinta2); padding-left:14px; border-left:2px solid var(--linha); }
  .form { background:var(--papel); border-radius:22px; padding:clamp(24px,4vw,40px); display:grid; grid-template-columns:1fr 1fr; gap:18px; box-shadow:0 12px 32px rgba(23,20,15,.08); }
  @media (max-width:560px) { .form { grid-template-columns:1fr; } }
  .campo { display:grid; gap:7px; align-content:start; }
  .campo-largo, .campo-grupo, .form .erro, .form button { grid-column:1 / -1; }
  .campo label, .campo-grupo legend { font:600 14px var(--sans); color:var(--tinta); }
  .campo label span, .campo-grupo legend span { font-weight:500; color:var(--tinta2); }
  .campo input, .campo textarea { font:400 16px/1.4 var(--sans); color:var(--tinta); background:#fff; border:1.5px solid var(--linha); border-radius:12px; padding:12px 14px; width:100%; transition:border-color .2s; }
  .campo input::placeholder, .campo textarea::placeholder { color:#9c958a; }
  .campo input:focus, .campo textarea:focus { outline:none; border-color:var(--tinta); }
  .campo textarea { resize:vertical; min-height:84px; }
  .campo-grupo { border:0; border-top:1px solid var(--linha); padding:18px 0 0; margin:4px 0 0; min-width:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .campo-grupo legend { display:contents; }
  .campo-grupo .titulo { grid-column:1 / -1; font:600 14px var(--sans); }
  .campo-grupo .titulo span { font-weight:500; color:var(--tinta2); }
  @media (max-width:720px) { .campo-grupo { grid-template-columns:1fr; } }
  .form .erro { color:var(--brasa-esc); font-size:15px; font-weight:500; }
  .form button { justify-self:start; border:0; cursor:pointer; margin-top:4px; }
  .link { color:var(--brasa-esc); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
  .link:hover { color:var(--tinta); }

  /* Tabela "Normalmente × Na Favaryn" */
  .custos { border-top:2px solid var(--tinta); }
  .custos-cab, .custo { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:20px; align-items:baseline; }
  .custos-cab { padding:16px 0; border-bottom:1px solid var(--linha); font:600 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--tinta2); }
  .custos-cab span:last-child { color:var(--brasa-esc); }
  .custo { padding:22px 0; border-bottom:1px solid var(--linha); }
  .custo b { font:600 clamp(19px,2vw,22px)/1.25 var(--serif); font-variation-settings:"opsz" 48; }
  .custo .antes { color:var(--tinta2); text-decoration:line-through; text-decoration-color:rgba(92,87,78,.45); }
  .custo .aqui { font-weight:600; display:flex; gap:10px; align-items:baseline; }
  .custo .aqui::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--brasa); flex:none; transform:translateY(-2px); }
  .custo small { grid-column:1 / -1; color:var(--tinta2); font-size:15px; margin-top:-8px; max-width:46em; }
  @media (max-width:640px) {
    .custos-cab { display:none; }
    .custo { grid-template-columns:1fr; gap:4px; }
    .custo .antes::before { content:"Normalmente: "; text-decoration:none; display:inline-block; margin-right:4px; }
    .custo small { margin-top:6px; }
  }

  /* ---------- Movimento ao rolar (mesmo ritmo das prévias) ---------- */
  .progresso { position:fixed; top:0; left:0; right:0; height:3px; background:var(--brasa); transform-origin:0 50%; transform:scaleX(0); z-index:11; pointer-events:none; }
  .topo .caixa { transition:height .35s var(--curva); }
  .topo.rolou { box-shadow:0 3px 15px rgba(23,20,15,.06); }
  .topo.rolou .caixa { height:60px; }
  .topo .marca img { transition:height .35s var(--curva); }
  .topo.rolou .marca img { height:26px; }

  /* Variações do aparecer: cada tipo de bloco entra do seu jeito */
  .revela.espera { opacity:0; transform:translateY(22px); }
  .foto.revela { transition:opacity 1s var(--curva), transform 1.1s var(--curva), clip-path 1.1s var(--curva); clip-path:inset(0 0 0 0 round 22px); }
  .foto.revela.espera { opacity:0; transform:scale(.96); clip-path:inset(12% 12% 12% 12% round 22px); }
  .foto img { transition:transform 1.4s var(--curva); }
  .foto.revela.espera img { transform:scale(1.12); }
  .passos li.revela { border-top-color:transparent; position:relative; }
  .passos li.revela::after { content:""; position:absolute; top:-2px; left:0; right:0; height:2px; background:var(--tinta); transform-origin:0 50%; transition:transform .9s var(--curva); transition-delay:calc(var(--i,0) * 90ms); }
  .passos li.revela.espera::after { transform:scaleX(0); }
  .custo.revela.espera { transform:translateX(-18px); }
  .custo .aqui::before { transition:transform .5s var(--curva) .25s; }
  .custo.revela.espera .aqui::before { transform:scale(0); }
  .entrega li.revela.espera svg { transform:scale(0) rotate(-30deg); }
  .entrega li svg { transition:transform .6s var(--curva) .2s; }
  .cartao.revela.espera, .sol.revela.espera { transform:translateY(30px) scale(.98); }
  .rot.revela.espera::before { transform:scale(0); }
  .rot::before { transition:transform .5s var(--curva) .15s; }
  h2.revela { transition-duration:.9s; }

  /* Celular da abertura flutua de leve */
  @keyframes flutua { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
  .celular .tela { animation:flutua-tela 6s ease-in-out 1.4s infinite; }
  @keyframes flutua-tela { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
  .celular .selo { animation:flutua 5s ease-in-out 1.2s infinite; }

  /* WhatsApp flutuante: some enquanto os botões da abertura estão visíveis, pulsa de leve */
  .wa-flut { transition:background .25s, transform .4s var(--curva), opacity .3s, visibility .3s; }
  .cta-visivel .wa-flut { opacity:0; visibility:hidden; transform:translateY(16px) scale(.8); pointer-events:none; }
  .wa-flut::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--brasa); animation:pulso 2.6s ease-out infinite; pointer-events:none; }
  @keyframes pulso { 0% { opacity:.8; transform:scale(.9); } 100% { opacity:0; transform:scale(1.55); } }

  /* Voltar ao topo */
  .subir { position:fixed; right:22px; bottom:86px; z-index:9; width:44px; height:44px; border-radius:50%; border:1px solid var(--linha); background:var(--papel); color:var(--tinta); display:grid; place-items:center; cursor:pointer; box-shadow:0 8px 20px rgba(23,20,15,.12); opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .3s, visibility .3s, transform .4s var(--curva), background .25s; }
  .subir svg { width:18px; height:18px; }
  .subir:hover { background:var(--papel2); }
  .desceu .subir { opacity:1; visibility:visible; transform:none; }

  /* Ícones dos contatos no rodapé */
  footer ul a { display:inline-flex; align-items:center; gap:10px; }
  footer ul a svg { width:18px; height:18px; flex:none; color:var(--papel); opacity:.75; transition:opacity .2s, transform .25s var(--curva); }
  footer ul a:hover svg { opacity:1; transform:translateY(-1px); }
  .assina .redes { display:flex; gap:10px; margin-top:16px; }
  .assina .redes a { width:40px; height:40px; border-radius:50%; border:1px solid rgba(246,242,234,.25); display:grid; place-items:center; color:var(--papel); transition:background .25s, border-color .25s, transform .25s var(--curva); }
  .assina .redes a:hover { background:var(--brasa); border-color:var(--brasa); transform:translateY(-2px); }
  .assina .redes svg { width:18px; height:18px; }

  @media (prefers-reduced-motion: reduce) {
    .revela.espera, .foto.revela.espera { opacity:1; transform:none; clip-path:none; }
    .progresso { display:none; }
  }