/* As páginas de conteúdo (marca-amorama/paginas, doc 21 §3.3): textos, calculadora, ideias.
   Por cima de 00-fontes e 01-base (tokens, botões, papel de caderno no body). O céu fica só na capa:
   o corpo é papel, que é onde se lê. Leve de propósito: estas páginas chegam pelo Google no 4G. */

/* `hidden` sempre esconde, mesmo com `display` de componente (a landing tem a mesma regra no <head>) */
[hidden]{display:none !important}

/* ---------- topo ---------- */
.ct-topo{position:sticky; top:0; z-index:20; background:rgb(248 247 242/.92); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--linho)}
.ct-nav{display:flex; align-items:center; justify-content:space-between; gap:12px; height:60px}
.ct-nav .marca-lock{color:var(--tinta); text-decoration:none}
.ct-nav-links{display:flex; gap:20px; font-size:14px; font-weight:700}
.ct-nav-links a{color:var(--grafite); text-decoration:none}
.ct-nav-links a:hover{color:var(--tinta)}
@media (max-width:560px){.ct-nav-links{display:none}}

/* ---------- capa ---------- */
.ceu{background:var(--ceu); color:#FDFDFA}
.ct-capa{position:relative; overflow:hidden; padding:clamp(40px,8vw,88px) 0 clamp(32px,6vw,64px); border-radius:0 0 28px 28px}
.ct-capa::after{content:""; position:absolute; left:50%; bottom:-60%; width:min(560px,120vw); aspect-ratio:1; translate:-50% 0; border-radius:50%; background:radial-gradient(circle,rgb(255 216 154/.55),rgb(255 176 112/0) 65%); pointer-events:none}
.ct-capa-corpo{position:relative; z-index:1; display:grid; gap:18px; justify-items:center; text-align:center; max-width:820px}
.ct-capa h1{font-size:clamp(34px,6.4vw,64px); line-height:1.04; letter-spacing:-.02em}
.ct-capa-sub{font-size:clamp(16px,2.2vw,19px); line-height:1.5; color:rgb(253 253 250/.86); max-width:620px}
.ct-selo{display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 10px; border-radius:999px; background:var(--superficie); color:var(--tinta); font-size:13px; font-weight:800; rotate:-2deg; box-shadow:0 8px 20px -10px rgb(26 16 36/.6)}
.ct-selo svg{width:20px; height:20px}
.ct-indice{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:6px}
.ct-indice a{padding:7px 13px; border-radius:999px; background:rgb(253 253 250/.14); box-shadow:inset 0 0 0 1px rgb(253 253 250/.28); color:#FDFDFA; font-size:14px; font-weight:700; text-decoration:none; transition:background-color .2s var(--ease-padrao)}
.ct-indice a:hover{background:rgb(253 253 250/.26)}

/* ---------- corpo ---------- */
.ct-corpo{max-width:860px; padding-block:clamp(28px,5vw,48px) 64px}
.ct-dica{padding:16px 18px; border-radius:14px; background:var(--damasco-nevoa); font-size:15px; line-height:1.55; color:var(--grafite)}
.ct-dica b{color:var(--tinta)}
.ct-sec{margin-top:clamp(40px,7vw,64px); scroll-margin-top:84px}
.ct-sec > h2,.ct-prosa h2{font-size:clamp(26px,4vw,36px); line-height:1.1; letter-spacing:-.015em}
.ct-sec-intro{margin-top:10px; font-size:16px; line-height:1.55; color:var(--grafite); max-width:640px}
.ct-prosa p,.ct-prosa li{font-size:17px; line-height:1.65; color:var(--grafite)}
.ct-prosa p + p,.ct-prosa p + ol,.ct-prosa ol + p{margin-top:12px}
.ct-prosa h2 + p{margin-top:14px}
.ct-prosa p + h2{margin-top:44px}
.ct-prosa b{color:var(--tinta)}
.ct-prosa a,.ct-link{color:var(--tinta); font-weight:700; text-decoration-color:var(--coral); text-underline-offset:3px}
.ct-passos{margin:14px 0 0; padding-left:22px; display:grid; gap:10px}

/* ---------- os textos ---------- */
.ct-textos{display:grid; gap:14px; margin-top:20px}
.ct-texto{position:relative; display:grid; gap:14px; padding:20px 20px 16px; border-radius:16px; background:var(--superficie); box-shadow:var(--sombra-borda); scroll-margin-top:84px}
.ct-texto:target{box-shadow:0 0 0 2px var(--coral),var(--sombra-borda)}
.ct-texto-corpo{font-family:var(--f-display); font-size:clamp(18px,2.4vw,20px); line-height:1.5; font-variation-settings:"SOFT" 100,"WONK" 0; color:var(--tinta); white-space:pre-line}
.ct-texto-acoes{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px}
.ct-copiar{min-width:96px}
.ct-copiar[data-feito]{background:var(--verde); color:#fff; box-shadow:none}
.ct-usar{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:800; color:var(--ameixa); text-decoration:none}
.ct-usar span{transition:transform .2s var(--ease-suave)}
.ct-usar:hover span{transform:translateX(3px)}
.ct-textos--curtas{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.ct-textos--curtas .ct-texto-corpo{font-size:19px}

/* ---------- o livro ---------- */
.ct-livro{padding:clamp(24px,4vw,36px); border-radius:22px; background:var(--superficie); box-shadow:var(--sombra-borda-forte); background-image:radial-gradient(circle at 100% 0,var(--damasco-nevoa),transparent 55%)}
.ct-livro-texto{display:grid; gap:14px}
.ct-livro p{font-size:17px; line-height:1.6; color:var(--grafite)}
.ct-livro-risco{font-size:15px !important}
.ct-livro-acoes{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:6px}

/* ---------- dúvidas ---------- */
.ct-faq details{border-bottom:1px solid var(--linho); padding:16px 0}
.ct-faq details:first-of-type{margin-top:12px}
.ct-faq summary{cursor:pointer; font-size:17px; font-weight:800; list-style:none; display:flex; justify-content:space-between; gap:12px}
.ct-faq summary::after{content:"+"; font-weight:400; font-size:22px; line-height:1; color:var(--pedra)}
.ct-faq details[open] summary::after{content:"−"}
.ct-faq details p{margin-top:10px; font-size:16px; line-height:1.6; color:var(--grafite)}

/* ---------- ficha de fatos (paginas/sobre.html, doc 35): tabela que a IA e quem lê copiam igual ---------- */
.ct-fatos{width:100%; margin-top:16px; border-collapse:collapse; font-size:16px; line-height:1.5}
.ct-fatos th,.ct-fatos td{padding:12px 0; border-bottom:1px solid var(--linho); text-align:left; vertical-align:top}
.ct-fatos th{width:34%; padding-right:16px; font-weight:800; color:var(--tinta)}
.ct-fatos td{color:var(--grafite)}
.ct-prosa ul{margin-top:12px; padding-left:20px; display:grid; gap:6px}

/* ---------- rodapé ---------- */
.ct-rodape{display:grid; gap:20px; padding-block:40px 32px; border-top:1px solid var(--linho)}
.ct-rodape-marca{display:grid; gap:8px; max-width:420px}
.ct-rodape-marca .marca-lock{color:var(--tinta); text-decoration:none}
.ct-rodape-marca p,.ct-rodape-fim{font-size:14px; line-height:1.5; color:var(--pedra)}
.ct-rodape-links{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:14px}
.ct-rodape-links a{color:var(--grafite)}

/* ---------- aviso de copiado ---------- */
.ct-aviso{position:fixed; left:50%; bottom:24px; z-index:60; translate:-50% 20px; padding:10px 16px; border-radius:12px; background:var(--tinta); color:#fff; font-size:14px; font-weight:700; opacity:0; pointer-events:none; transition:opacity .2s var(--ease-padrao),translate .3s var(--ease-mola)}
.ct-aviso.on{opacity:1; translate:-50% 0}

@media (prefers-reduced-motion:reduce){.ct-aviso,.ct-usar span{transition:none}}