/* Contos do Mundo — site de vendas (N7 v2, 07/11/2026). Celular primeiro; visual do app. */
:root { --navy:#0B2A45; --azul:#3FAEF2; --azul-esc:#1F8FD6; --ouro:#E9B54A; --papel:#FBF8F2; --cinza:#5B6B7A;
        --linha:#E6E1D8; --creme:#F7EEDE; --erro:#B3261E; --ok:#2E7D5B; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--papel); color:var(--navy); font-family:"Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
       font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; }   /* nunca deformar: altura sempre pela proporção do arquivo */
a { color:var(--azul-esc); }
h1, h2, h3 { font-family:Georgia, "Times New Roman", serif; font-weight:normal; margin:0; }
h1 { font-size:34px; line-height:1.15; }
h2 { font-size:27px; line-height:1.2; margin-bottom:12px; }
h3 { font-size:19px; }
p { margin:0 0 10px; }
.in { max-width:560px; margin:0 auto; padding:0 22px; }
.sec { padding:36px 0; }
.kicker { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cinza); margin-bottom:8px; }
.btn { display:block; width:100%; text-align:center; background:var(--azul); color:#fff; font-family:inherit; font-weight:700; font-size:17px; line-height:1.2;
       padding:16px; border-radius:30px; border:0; text-decoration:none; margin:18px 0 10px; cursor:pointer; }
.btn:hover { background:var(--azul-esc); }
.btn:disabled { opacity:.55; cursor:default; }
.btn.ouro { background:var(--ouro); color:var(--navy); }
.btn.claro { background:#fff; color:var(--navy); border:1.5px solid var(--linha); }
.btn.escuro { background:var(--navy); }
.mini { font-size:13px; color:var(--cinza); text-align:center; }
.mini a { color:var(--azul-esc); }
.miuda { font-size:12px; color:var(--cinza); line-height:1.5; margin-top:8px; }
.miuda a { color:inherit; }
/* topo */
.topo { background:var(--navy); color:var(--creme); padding:26px 0 30px; }
.topo .logo { display:block; width:170px; margin:0 auto 18px; }
.topo h1 { text-align:center; color:var(--creme); }
.topo .sub { text-align:center; color:#E9D9BC; margin-top:12px; font-size:16px; }
.topo img.hero { width:100%; height:auto; border-radius:18px; margin-top:20px; display:block; }
.topo .mini { color:#C9D6E2; }
.topo .mini a { color:#F3C878; }
/* passos */
.passo { display:flex; gap:14px; align-items:flex-start; margin:18px 0; }
.passo .n { flex:0 0 34px; height:34px; border-radius:17px; background:var(--azul); color:#fff; font-weight:700; text-align:center; line-height:34px; }
.passo b { display:block; font-size:16px; }
.caps { display:flex; gap:8px; margin-top:8px; }
.caps img { flex:1 1 0; width:0; min-width:0; height:auto; align-self:flex-start; border-radius:14px; box-shadow:0 0 0 1px var(--linha); }
.branco { background:#fff; }
.lista { list-style:none; padding:0; margin:14px 0 0; }
.lista li { padding:11px 0 11px 30px; border-top:1px solid var(--linha); position:relative; }
.lista li:before { content:"✓"; position:absolute; left:4px; color:var(--azul); font-weight:700; }
.faixa { display:flex; gap:6px; margin:14px 0 6px; }
.faixa div { flex:1; min-width:0; text-align:center; font-size:11px; color:var(--cinza); }
.faixa img { width:100%; height:auto; border-radius:8px; display:block; margin-bottom:3px; }
.cartao { background:#fff; border:1px solid var(--linha); border-radius:18px; overflow:hidden; margin-top:16px; }
.cartao img { width:100%; height:auto; display:block; }
.cartao .c { padding:16px 16px 6px; }
.cartao .t { font-family:Georgia,serif; font-size:19px; }
.cartao .s { font-size:13px; color:var(--cinza); margin-bottom:6px; }
.bloco { border-top:1px solid var(--linha); padding:12px 16px; }
.bloco .rot { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; margin-bottom:4px; }
.rot.cult { color:#B5651D; } .rot.val { color:#2E7D5B; } .rot.conv { color:var(--azul-esc); }
.bloco p { font-size:14.5px; margin:0 0 6px; }
.bloco .lic { font-family:Georgia,serif; font-style:italic; font-size:16px; }
.tres { display:flex; gap:8px; margin-top:14px; }
.tres div { flex:1; background:#fff; border:1px solid var(--linha); border-radius:14px; padding:10px 8px; text-align:center; font-size:12.5px; }
.tres b { display:block; font-size:13.5px; }
.cuida img { width:100%; height:auto; border-radius:18px; display:block; margin-top:14px; }
/* planos */
.plano { display:block; width:100%; text-align:left; background:#fff; border:1.5px solid var(--linha); border-radius:16px; padding:14px 16px;
         margin-top:12px; cursor:pointer; font:inherit; color:inherit; position:relative; }
.plano[aria-pressed="true"], .plano.dest { border:2px solid var(--azul); }
.plano .tag { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cinza); }
.plano .preco { font-size:24px; font-weight:700; }
.plano .det { font-size:13.5px; color:var(--azul-esc); }
.plano .det2 { font-size:12.5px; color:var(--cinza); }
.plano .marca { position:absolute; right:14px; top:14px; width:22px; height:22px; border-radius:11px; border:2px solid var(--linha); }
.plano[aria-pressed="true"] .marca { border-color:var(--azul); background:radial-gradient(var(--azul) 45%, #fff 50%); }
/* faq */
.faq .in > div { border-top:1px solid var(--linha); padding:12px 0; }
.faq b { display:block; margin-bottom:3px; }
.faq p { font-size:14.5px; color:#33475B; margin:0; }
/* final */
.final { background:var(--navy); color:var(--creme); text-align:center; }
.final h2 { color:var(--creme); }
.lojas { display:flex; gap:10px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
.lojas a { border:1px solid #6F8BA5; border-radius:8px; padding:6px 10px; font-size:12px; color:#DCE6EF; text-decoration:none; }
.rodape { font-size:11.5px; color:#9FB3C6; margin-top:22px; line-height:1.7; }
.rodape a { color:#C9D6E2; }
/* páginas de fluxo (assinar, obrigado, conta) */
.barra { background:var(--navy); padding:14px 0; }
.barra a.logo img { width:130px; display:block; }
.barra .in { display:flex; align-items:center; justify-content:space-between; }
.barra .quem { color:#C9D6E2; font-size:12.5px; text-align:right; }
.barra .quem button { background:none; border:0; color:#F3C878; font-family:inherit; font-size:inherit; text-decoration:underline; cursor:pointer; padding:0; }
.passo-tela { padding:28px 0 40px; }
.passo-tela h1 { font-size:28px; margin-bottom:10px; }
label.campo { display:block; font-size:14px; font-weight:600; margin:16px 0 6px; }
input.campo { width:100%; font:inherit; font-size:17px; padding:14px 14px; border:1.5px solid var(--linha); border-radius:12px; background:#fff; color:var(--navy); }
input.campo:focus { outline:none; border-color:var(--azul); }
input.codigo { letter-spacing:.4em; text-align:center; font-size:22px; }
.aceite { display:flex; gap:10px; align-items:flex-start; margin:16px 0 4px; font-size:14px; }
.aceite input { width:22px; height:22px; flex:0 0 22px; margin-top:1px; accent-color:var(--azul); }
.aviso { border-radius:12px; padding:12px 14px; font-size:14px; margin:14px 0; }
.aviso.erro { background:#FCE8E6; color:var(--erro); }
.aviso.info { background:#E8F4FD; color:#0B4A75; }
.aviso.ok { background:#E6F4EC; color:var(--ok); }
.opcoes { display:flex; gap:10px; }
.opcoes .plano { margin-top:8px; }
.resumo { background:#fff; border:1px solid var(--linha); border-radius:16px; padding:14px 16px; margin-top:16px; font-size:14.5px; }
.resumo b { font-size:16px; }
.qr { display:block; width:240px; height:240px; margin:16px auto 8px; border:1px solid var(--linha); border-radius:12px; background:#fff; padding:8px; image-rendering:pixelated; }
.copia { width:100%; font-family:ui-monospace, Menlo, monospace; font-size:12px; padding:10px; border:1.5px solid var(--linha); border-radius:10px; background:#fff;
         color:var(--navy); resize:none; height:76px; }
.espera { display:flex; gap:10px; align-items:center; justify-content:center; color:var(--cinza); font-size:14px; margin:14px 0; }
.giro { width:18px; height:18px; border-radius:50%; border:3px solid var(--linha); border-top-color:var(--azul); animation:g 1s linear infinite; }
@keyframes g { to { transform:rotate(360deg); } }
.lojas-grandes a { display:block; text-align:center; background:var(--navy); color:#fff; text-decoration:none; font-weight:700; padding:16px; border-radius:30px; margin:12px 0; }
.cx { background:#fff; border:1px solid var(--linha); border-radius:16px; padding:16px; margin-top:14px; }
.cx h3 { margin-bottom:6px; }
.cx .linha { font-size:14.5px; color:#33475B; margin:4px 0; }
.link-btn { background:none; border:0; color:var(--azul-esc); font:inherit; text-decoration:underline; cursor:pointer; padding:0; }
.perigo { color:var(--erro); }
[hidden] { display:none !important; }
@media (min-width:700px) {
  h1 { font-size:42px; }
  .topo .sub { font-size:18px; }
}