/* site/estilo.css — a Revista (estudo A, escolhido por ela em 24/09), na identidade do app de sorteios.
   Ver docs/VITRINE.md. Nada aqui depende de animação para aparecer. */
:root{
  --principal:#F5C542; --secundaria:#C4122F; --destaque:#FFE9A6; --fundo:#0B0507;
  --texto:#F8EFE6; --painel:#160C0E; --linha:#35191E; --suave:#B9A59E;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --gutter:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--texto);background:var(--fundo);line-height:1.5;overflow-x:hidden;
  background-image:radial-gradient(900px 560px at 88% -6%,color-mix(in srgb,var(--secundaria) 34%,transparent),transparent 70%);background-repeat:no-repeat}
a{color:var(--principal)}
a:focus-visible{outline:2px solid var(--principal);outline-offset:3px}
img{display:block}
.folha{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}

/* ---------- Faixa do alto (todas as páginas) ---------- */
.topo{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:max(14px,env(safe-area-inset-top)) 0 14px;border-bottom:1px solid var(--linha)}
.topo .selo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texto)}
.topo .selo img{width:40px;height:40px}
.topo .selo span{font-family:var(--serif);font-weight:700;font-size:16px;letter-spacing:.04em}


/* ---------- Capa ---------- */
.capa{position:relative;padding:28px 0 36px;isolation:isolate}
.chamada{padding-right:104px;display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--suave)}
.chamada::after{content:"";flex:1;height:1px;background:var(--linha)}
.capa-grade{display:grid;gap:24px;margin-top:22px}
.nome{font-family:var(--serif);font-weight:700;color:var(--principal);
  font-size:clamp(68px,22vw,188px);line-height:.86;letter-spacing:-.035em}
.nome em{display:block;font-style:italic;font-weight:400;color:var(--texto);padding-left:.42em}
.coroa-capa{position:absolute;top:26px;right:0;width:84px;height:84px;
  filter:drop-shadow(0 0 18px color-mix(in srgb,var(--principal) 40%,transparent))}
.frase{font-family:var(--serif);font-size:clamp(22px,5.6vw,34px);line-height:1.28;letter-spacing:-.01em;max-width:24em;position:relative}
.frase::before{content:"";display:block;width:44px;height:3px;background:var(--secundaria);margin-bottom:18px}
.frase mark{background:none;color:var(--principal)}
.para-quem{border-left:3px solid var(--principal);padding:4px 0 4px 14px;font-size:15px;color:var(--suave);max-width:30em}
.para-quem strong{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--texto);margin-bottom:2px}

/* ---------- Sumário ---------- */
.sumario{border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);margin:8px 0 12px}
.sumario ol{list-style:none;display:grid;grid-template-columns:1fr 1fr}
.sumario li{border-bottom:1px solid var(--linha)}
.sumario li:nth-child(2n+1){border-right:1px solid var(--linha)}
.sumario li:nth-last-child(-n+2){border-bottom:0}
.sumario a{display:flex;flex-direction:column;gap:2px;padding:14px 12px;text-decoration:none;color:var(--texto);min-height:76px}
.sumario b{font-family:var(--serif);font-size:13px;color:var(--secundaria);font-weight:700;letter-spacing:.1em}
.sumario span{font-family:var(--serif);font-size:16px;line-height:1.2}

/* ---------- Capítulos ---------- */
.capitulo{padding:40px 0 8px;display:grid;gap:18px;scroll-margin-top:16px}
.cab{display:flex;align-items:flex-end;gap:14px;position:relative}
.cab .num{font-family:var(--serif);font-weight:700;font-size:88px;line-height:.8;color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--principal) 70%,transparent)}
@supports not (-webkit-text-stroke:1px red){.cab .num{color:var(--linha)}}
.cab h2{font-family:var(--serif);font-weight:700;font-size:clamp(26px,7vw,40px);line-height:1.05;color:var(--principal);letter-spacing:-.01em}
.icone-grupo{width:48px;height:48px;flex:none;align-self:flex-start;overflow:visible;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--principal) 40%,transparent))}
.itens{list-style:none;border-top:1px solid var(--linha)}
.item{display:grid;grid-template-columns:34px 1fr;gap:4px 12px;padding:18px 0;border-bottom:1px solid var(--linha)}
.item .n{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--secundaria);padding-top:5px;font-variant-numeric:tabular-nums}
.item h3{font-family:var(--serif);font-size:21px;line-height:1.2;color:var(--destaque);font-weight:700}
.item p{grid-column:2;font-size:15px;color:color-mix(in srgb,var(--texto) 82%,transparent);max-width:34em}

/* ---------- Contato ---------- */
.contato{margin:48px 0 0;background:var(--secundaria);color:#fff;border-radius:28px;padding:36px 22px;position:relative;overflow:hidden;isolation:isolate}
.contato::after{content:"";position:absolute;z-index:-1;right:-80px;bottom:-120px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--principal) 55%,transparent),transparent 65%)}
.contato h2{font-family:var(--serif);font-size:clamp(40px,12vw,84px);line-height:.95;letter-spacing:-.03em}
.contato h2 em{font-weight:400;color:var(--destaque)}
.contato p{margin:14px 0 24px;font-size:16px;max-width:28em;color:#FFE3E6}
.fale-contato{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:14px;
  font-weight:800;letter-spacing:.05em;text-decoration:none;color:#171208;
  background:linear-gradient(180deg,var(--destaque) 0%,var(--principal) 55%,color-mix(in srgb,var(--principal) 62%,#000) 100%);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 12px 30px -10px rgba(0,0,0,.6)}
.fale-contato:focus-visible{outline:3px solid #fff}

/* ---------- Página de produto (a Moderadora é o molde) ---------- */
.conhecer{grid-column:2;justify-self:start;margin-top:6px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--principal);border-bottom:1px solid color-mix(in srgb,var(--principal) 50%,transparent);padding-bottom:2px}
.conhecer::after{content:" →"}
.voltar{display:inline-block;margin-top:22px;font-size:13px;font-weight:700;letter-spacing:.08em;text-decoration:none;color:var(--suave)}
.produto-capa{padding:28px 0 12px;display:grid;gap:14px;justify-items:start}
.produto-capa .icone-grupo{width:64px;height:64px}
.produto-nome{font-family:var(--serif);font-weight:700;color:var(--principal);font-size:clamp(44px,13vw,104px);line-height:.92;letter-spacing:-.03em}
.produto-chamada{font-family:var(--serif);font-size:clamp(21px,5.4vw,30px);line-height:1.3;max-width:24em}
.produto-chamada::before{content:"";display:block;width:44px;height:3px;background:var(--secundaria);margin-bottom:16px}
.produto-parte{padding:32px 0 4px;display:grid;gap:14px}
.produto-parte h2{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--suave);
  display:flex;align-items:center;gap:12px}
.produto-parte h2::after{content:"";flex:1;height:1px;background:var(--linha)}
.lista-ouro{list-style:none;display:grid;gap:12px}
.lista-ouro li{position:relative;padding-left:26px;font-size:17px;max-width:36em}
.lista-ouro li::before{content:"";position:absolute;left:4px;top:.55em;width:9px;height:9px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--destaque),var(--principal))}
.passos{list-style:none;counter-reset:passo;display:grid;gap:0;border-top:1px solid var(--linha)}
.passos li{counter-increment:passo;display:grid;grid-template-columns:64px 1fr;align-items:center;gap:12px;padding:16px 0;
  border-bottom:1px solid var(--linha);font-size:17px}
.passos li::before{content:counter(passo,decimal-leading-zero);font-family:var(--serif);font-weight:700;font-size:44px;line-height:1;
  color:transparent;-webkit-text-stroke:1.2px color-mix(in srgb,var(--principal) 70%,transparent)}
.prazo{margin-top:32px;border-left:3px solid var(--principal);padding:4px 0 4px 14px;font-size:15px;color:var(--suave);max-width:36em}
.prazo strong{color:var(--texto)}

/* ---------- "Fale comigo" com o símbolo do WhatsApp (ela, 24/09: "encher de fale comigo") ---------- */
.fale{text-decoration:none;white-space:nowrap}
.fale .icone-whatsapp{flex:none}
.fale-topo,.fale-capa,.fale-capitulo,.fale-parte{display:inline-flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.06em}
.fale-topo{font-size:13px;color:var(--principal);border:1px solid color-mix(in srgb,var(--principal) 45%,transparent);
  border-radius:999px;padding:8px 14px}
.fale-topo .icone-whatsapp{width:18px;height:18px}
.fale-capa{margin-top:28px;min-height:52px;padding:0 24px;border-radius:14px;font-size:16px;color:#171208;
  background:linear-gradient(180deg,var(--destaque) 0%,var(--principal) 55%,color-mix(in srgb,var(--principal) 62%,#000) 100%);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 12px 30px -10px color-mix(in srgb,var(--principal) 45%,transparent)}
.fale-capitulo,.fale-parte{font-size:14px;color:var(--principal);padding:10px 0}
.fale-capitulo{grid-column:1/-1;justify-self:end}
.fale-capitulo span,.fale-parte span{border-bottom:1px solid color-mix(in srgb,var(--principal) 50%,transparent)}
.fale-linha{margin-top:10px}
.fale-flutuante{position:fixed;z-index:10;right:16px;bottom:max(16px,env(safe-area-inset-bottom));width:60px;height:60px;
  border-radius:50%;display:grid;place-items:center;color:#171208;
  background:linear-gradient(180deg,var(--destaque) 0%,var(--principal) 60%,color-mix(in srgb,var(--principal) 62%,#000) 100%);
  box-shadow:0 10px 30px -6px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--principal) 60%,transparent)}
.fale-flutuante .icone-whatsapp{width:30px;height:30px}
.fale-flutuante span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fale-flutuante::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--principal);
  animation:chama 2.2s ease-out infinite}
@keyframes chama{from{transform:scale(1);opacity:.8}to{transform:scale(1.6);opacity:0}}
.rodape{padding-bottom:96px}

/* ---------- Rodapé ---------- */
.rodape{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding:28px 0 max(32px,env(safe-area-inset-bottom));font-size:13px;color:var(--suave)}
.rodape .marca{font-family:var(--serif);font-weight:700;color:var(--texto);font-size:15px}

/* ---------- Movimento (pedido dela, 24/09: "ícones dourados com movimento") ----------
   Roda MESMO com a animação desligada no aparelho: o Windows dela desliga animação e ela
   pediu para ver o movimento. É só enfeite — tudo já aparece parado, nada depende dele. */
.coroa-capa{animation:flutua-coroa 6s ease-in-out infinite}
.icone-grupo{animation:flutua 5s ease-in-out infinite}
.icone-grupo *{transform-box:fill-box;transform-origin:center}
.icone-conversa .ponto{animation:digita 1.4s ease-in-out infinite}
.icone-conversa .ponto:nth-child(2){animation-delay:.2s}
.icone-conversa .ponto:nth-child(3){animation-delay:.4s}
.icone-ao-vivo .luz{animation:pisca 1.6s ease-in-out infinite}
.icone-ao-vivo .onda{animation:onda 1.6s ease-out infinite}
.icone-trofeu .brilho{animation:cintila 2.4s ease-in-out infinite}
.icone-trofeu .b2{animation-delay:.8s}
.icone-trofeu .b3{animation-delay:1.6s}
.icone-crescimento .seta{stroke-dasharray:60;animation:risca 3.2s ease-in-out infinite}
.icone-crescimento .barra{transform-origin:bottom;animation:cresce 3.2s ease-in-out infinite}
.icone-crescimento .barra:nth-child(2){animation-delay:.15s}
.icone-crescimento .barra:nth-child(3){animation-delay:.3s}
@keyframes flutua-coroa{50%{transform:translateY(-6px) rotate(-2deg)}}
@keyframes flutua{50%{transform:translateY(-5px)}}
@keyframes digita{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-4px);opacity:1}}
@keyframes pisca{50%{opacity:.35}}
@keyframes onda{from{transform:scale(1);opacity:.9}to{transform:scale(2.4);opacity:0}}
@keyframes cintila{0%,100%{transform:scale(.4);opacity:.3}50%{transform:scale(1.15);opacity:1}}
@keyframes risca{0%{stroke-dashoffset:60}45%,100%{stroke-dashoffset:0}}
@keyframes cresce{0%{transform:scaleY(.35)}45%,100%{transform:scaleY(1)}}
.item{transition:background .25s}
.item:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--principal) 6%,transparent),transparent)}

/* ---------- Computador ---------- */
@media (min-width:760px){
  :root{--gutter:40px}
  .capa{padding:48px 0 56px}
  .chamada{padding-right:160px}
  .coroa-capa{width:128px;height:128px;top:40px}
  .capa-grade{grid-template-columns:1.25fr 1fr;align-items:end;gap:48px}
  .capa-grade .nome{grid-column:1/-1}
  .sumario ol{grid-template-columns:repeat(4,1fr)}
  .sumario li{border-bottom:0!important;border-right:1px solid var(--linha)}
  .sumario li:last-child{border-right:0}
  .sumario a{padding:18px 20px}
  .capitulo{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:48px;padding:64px 0 16px}
  .cab{flex-direction:column;align-items:flex-start;position:sticky;top:24px;align-self:start}
  .cab .num{font-size:140px}
  .icone-grupo{width:64px;height:64px}
  .item{grid-template-columns:48px 1fr;padding:22px 0}
  .item h3{font-size:24px}
  .contato{padding:64px 56px;display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:32px}
  .contato p{margin:0 0 20px}
  .produto-capa{padding:56px 0 16px}
  .produto-parte{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:48px;padding:48px 0 8px}
  .produto-parte h2{align-self:start;padding-top:6px}
  .produto-parte h2::after{display:none}
  .prazo{margin-left:calc((100% - 48px) * 1 / 2.7 + 48px)}
}