/* Partes comuns do site da CogniVita: tokens, botões, topo, rodapé, faixa de confiança,
   chamadas cruzadas (loja <-> assinatura) e cartões de destaque. Cada página carrega este
   arquivo antes do próprio <style>; o que é só da página continua no <style> dela.
   Regra da casa: nenhum texto abaixo de 16px (1rem). */
:root{
  color-scheme: light;
  --floresta:#0C3322;   /* capa das apostilas */
  --verde:#1B6B4A;      /* ponto verde de início dos traçados */
  --salvia:#8FB0A4;     /* traço pontilhado dos exercícios */
  --papel:#F7F3EC;      /* fundo das páginas */
  --folha:#FDFAF5;      /* cartões de exercício */
  --ouro:#C49A4A;       /* números dos exercícios */
  --ouro-claro:#E8C97A;
  --tinta:#1A2820;      /* texto */
  --tinta-suave:#4A5B53;/* texto secundário (contraste >= 7:1 no papel) */
  --borda:#DDE8E2;
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"DM Sans", "Segoe UI", system-ui, sans-serif;
  --mao:"Caveat", "Segoe Print", "Comic Sans MS", cursive;
  --largura:1120px;
  --margem:20px;        /* respiro lateral da página (o topo encosta nas bordas usando o mesmo valor) */
}
@media (max-width: 560px){ :root{ --margem:16px } }
*,*::before,*::after{box-sizing:border-box}
html, body{overflow-x:hidden; overflow-x:clip}   /* nada empurra a página para os lados */
body{margin:0; background:var(--papel); color:var(--tinta); font-family:var(--sans); font-size:18px; line-height:1.6;
  padding-inline:var(--margem); -webkit-font-smoothing:antialiased}
@media (max-width: 560px){ body{font-size:17px} }
a{color:var(--verde)}
img{max-width:100%}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--ouro); outline-offset:3px; border-radius:6px}
.wrap{max-width:var(--largura); margin-inline:auto}
.so-leitor{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Botões: alvos grandes, para dedos e olhos cansados */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:0 30px;
  border-radius:999px; font:700 1.05rem/1 var(--sans); text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease}
.btn-principal{background:var(--floresta); color:var(--folha); box-shadow:0 10px 24px -12px rgba(12,51,34,.7)}
.btn-principal:hover{background:var(--verde); transform:translateY(-2px)}
.btn-secundario{background:transparent; color:var(--floresta); border-color:var(--floresta)}
.btn-secundario:hover{background:var(--folha)}
.btn svg{width:20px; height:20px; flex:none}

/* ---------- Topo (o mesmo em todas as páginas) ---------- */
.topo{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; margin-inline:calc(var(--margem) * -1); padding:12px var(--margem);
  background:rgba(247,243,236,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid transparent; transition:border-color .3s}
.topo.rolou{border-color:rgba(143,176,164,.35)}
.topo .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px}
.marca{font-family:var(--serif); font-size:1.6rem; font-weight:700; letter-spacing:.32em; color:var(--floresta); text-decoration:none; white-space:nowrap}
.topo-nav{display:flex; align-items:center; gap:22px}
.topo-link{font-weight:500; font-size:1.05rem; text-decoration:none; color:var(--floresta); padding:10px 2px; white-space:nowrap;
  background:linear-gradient(var(--ouro),var(--ouro)) 0 calc(100% - 6px)/0 2px no-repeat; transition:background-size .3s ease}
.topo-link:hover{background-size:100% 2px}
.topo-link[aria-current="page"]{background-size:100% 2px; font-weight:700}
.topo .btn{min-height:48px; padding:0 20px; font-size:1rem; position:relative}
.contador{position:absolute; top:-6px; right:-6px; min-width:26px; height:26px; padding:0 6px; border-radius:99px; background:var(--ouro);
  color:var(--floresta); font-size:1rem; font-weight:700; display:grid; place-items:center; border:2px solid var(--papel); line-height:1}
#ir-carrinho.pulsa{animation:pulsa-carrinho .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pulsa-carrinho{50%{transform:scale(1.12)}}
@media (max-width: 560px){
  .marca{font-size:1.2rem; letter-spacing:.2em}
  .topo-nav{gap:14px}
  .topo .btn{padding:0 14px}
  .topo .rotulo{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}   /* some da tela, o leitor ainda diz "Carrinho" */
}
@media (max-width: 400px){
  .marca{font-size:1.06rem; letter-spacing:.14em}
  .topo-nav{gap:10px}
  .topo-link{font-size:1rem}
  .topo .btn{padding:0 12px}
}

/* ---------- Faixa de confiança (a mesma nas páginas de venda) ---------- */
.confianca{padding-block:clamp(36px,5vw,56px); position:relative; z-index:1}
.confianca-lista{list-style:none; padding:0; margin-block:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.confianca-lista li{display:flex; gap:14px; align-items:flex-start; background:var(--folha); border:1px solid var(--borda); border-radius:16px;
  padding:16px 18px; font-size:1rem; line-height:1.4; color:var(--tinta-suave)}
.confianca-lista strong{display:block; color:var(--floresta); font-size:1.05rem}
.confianca-lista svg{width:30px; height:30px; flex:none; color:var(--verde); margin-top:2px}
@media (max-width: 900px){ .confianca-lista{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 480px){ .confianca-lista{grid-template-columns:minmax(0,1fr); gap:10px} }

/* ---------- Chamada cruzada (loja <-> assinatura) ---------- */
.cruzada{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 28px; align-items:center;
  background:var(--folha); border:1.5px dashed var(--salvia); border-radius:22px; padding:clamp(20px,3.5vw,32px) clamp(20px,4vw,40px);
  text-decoration:none; color:inherit}
.cruzada-texto{display:flex; flex-direction:column; gap:6px}
.cruzada .mao{font-size:1.5rem}
.cruzada-titulo{font-family:var(--serif); font-size:clamp(1.5rem,3vw,2rem); font-weight:600; line-height:1.15; color:var(--floresta); margin:0}
.cruzada-seta{display:inline-flex; align-items:center; gap:10px; font-weight:700; color:var(--verde); text-decoration:none}
.cruzada-seta svg{width:22px; height:22px; transition:transform .3s ease}
.cruzada:hover .cruzada-seta svg, .cruzada-seta:hover svg{transform:translateX(4px)}
.cruzada-fotos{display:flex; gap:12px; flex-wrap:wrap}
@media (max-width: 760px){ .cruzada{grid-template-columns:minmax(0,1fr)} }

/* ---------- Cartões de destaque (produtos da loja) ---------- */
.destaques{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,2.2vw,24px)}
.destaque{display:flex; flex-direction:column; gap:8px; background:var(--folha); border:1px solid var(--borda); border-radius:18px; overflow:hidden;
  text-decoration:none; color:var(--tinta); padding-bottom:16px; box-shadow:0 22px 40px -34px rgba(12,51,34,.55);
  transition:transform .35s ease, box-shadow .35s ease}
.destaque:hover{transform:translateY(-4px) rotate(-.4deg); box-shadow:0 30px 50px -34px rgba(12,51,34,.7)}
.destaque-foto{display:block; aspect-ratio:1; background:#efe8da; overflow:hidden}
.destaque-foto img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.destaque:hover .destaque-foto img{transform:scale(1.05)}
.destaque-nome{font-family:var(--serif); font-weight:600; font-size:1.25rem; line-height:1.15; color:var(--floresta); padding-inline:16px}
.destaque-preco{font-family:var(--serif); font-weight:700; font-size:1.5rem; line-height:1; color:var(--floresta); padding-inline:16px; margin-top:auto}
.destaque.esqueleto{pointer-events:none; box-shadow:none}
.destaque.esqueleto .destaque-foto{background:linear-gradient(100deg,#efe8da 30%,#f7f1e6 50%,#efe8da 70%) 0 0/300% 100%; animation:brilho 1.6s linear infinite}
.destaque.esqueleto i{display:block; height:1.1em; margin-inline:16px; border-radius:6px; background:#ece5d8}
.destaque.esqueleto i + i{width:40%}
@keyframes brilho{to{background-position:-300% 0}}
.destaques-mini{display:flex; gap:12px}
.destaques-mini .destaque{width:96px; padding:0; border-radius:14px}
.destaques-mini .destaque-nome, .destaques-mini .destaque-preco{display:none}
@media (max-width: 860px){ .destaques{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 560px){
  .destaque{border-radius:14px; padding-bottom:12px}
  .destaque-nome{font-size:1.06rem; padding-inline:12px}
  .destaque-preco{font-size:1.3rem; padding-inline:12px}
  .destaques-mini .destaque{width:80px}
}

/* ---------- Rodapé (o mesmo em todas as páginas) ---------- */
.rodape-site{position:relative; z-index:1; border-top:1px solid var(--borda); padding-block:40px 56px; color:var(--tinta-suave); font-size:1rem}
.rodape-site .wrap{display:flex; justify-content:space-between; align-items:flex-start; gap:18px 32px; flex-wrap:wrap}
.rodape-marca{display:flex; flex-direction:column; gap:4px}
.rodape-logo{font-family:var(--serif); font-size:1.3rem; font-weight:700; letter-spacing:.3em; color:var(--floresta); text-decoration:none}
.rodape-nav{display:flex; flex-wrap:wrap; gap:6px 22px}
.rodape-nav a{padding-block:6px}

/* Movimento reduzido: nada desliza nem pulsa; a página continua igual. */
@media (prefers-reduced-motion: reduce){
  .btn, .topo-link, .destaque, .destaque-foto img, .cruzada-seta svg{transition:none}
  .btn-principal:hover, .destaque:hover, .destaque:hover .destaque-foto img{transform:none}
  #ir-carrinho.pulsa, .destaque.esqueleto .destaque-foto{animation:none}
}