/* Márcia Lasmar · Advocacia Previdenciária
   Linha premium: marinho profundo, marfim e dourado champanhe em fios finos.
   Público 50+ e filhos: letra grande, contraste alto, um assunto por tela. */
:root{
  --papel:#F6F2EA;          /* marfim */
  --cartao:#FFFDF8;
  --tinta:#141E2C;
  --tinta-2:#4A5466;
  --linha:#E2D9C8;
  --noite:#0E1A29;          /* marinho profundo */
  --noite-2:#15253A;
  --marca:#13243A;
  --marca-escura:#0B1624;
  --marca-clara:#F0E9DC;    /* champanhe claro */
  --ouro:#B08D57;           /* fios, ornamentos */
  --ouro-claro:#D8C095;     /* sobre o marinho */
  --ouro-texto:#86663A;     /* dourado legível sobre marfim (AA) */
  --ok:#2E6B45;
  --ok-clara:#E7F0E8;
  --alerta:#8A5A12;
  --alerta-clara:#F8EFDD;
  --raio:4px;
  --sombra:0 1px 1px rgba(14,26,41,.04),0 18px 40px -18px rgba(14,26,41,.22);
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Inter",system-ui,sans-serif;
  font-size:19px;line-height:1.6;color:var(--tinta);background:var(--papel) var(--grao);
  min-height:100vh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.contagem,.destaque,.regra .quando b,ol.passos li::before{font-variant-numeric:lining-nums}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;font-weight:500;line-height:1.15;letter-spacing:-.005em}
h1{font-size:clamp(34px,5.6vw,58px)}
h2{font-size:clamp(26px,3.8vw,36px)}
h3{font-size:23px}
h1 em,h2 em{font-style:italic;color:var(--ouro-texto)}
p+p{margin-top:.75em}
a{color:var(--marca);text-decoration-color:var(--ouro);text-underline-offset:3px}
strong{font-weight:600}

/* monograma */
.selo{width:50px;height:50px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--noite);color:var(--ouro-claro);border:1px solid var(--ouro);
  box-shadow:inset 0 0 0 3px var(--noite),inset 0 0 0 4px rgba(216,192,149,.45);
  font-family:"Playfair Display",serif;font-style:italic;font-size:18px;letter-spacing:.02em}

/* topo */
.topo{background:var(--noite) var(--grao);border-bottom:1px solid rgba(176,141,87,.45)}
.topo .in{max-width:1080px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:16px}
.topo .nome{display:block;font-family:"Playfair Display",serif;font-size:21px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.1;text-decoration:none;color:#F6F2EA}
.topo .sub{font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro-claro);margin-top:5px}
.topo .sub .ph{letter-spacing:.04em}
.topo .voltar{margin-left:auto;font-size:16px;color:#E9E2D4;text-decoration:none;white-space:nowrap;border-bottom:1px solid var(--ouro);padding-bottom:2px}
.topo .voltar:hover{color:#fff}

main{flex:1;width:100%;max-width:780px;margin:0 auto;padding:44px 24px 72px}
main.largo{max-width:1080px}

/* capa escura (intro das ferramentas) */
.capa{position:relative;background:var(--noite) var(--grao);color:#EDE6D8;border-radius:var(--raio);padding:52px 48px 46px;overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(14,26,41,.55)}
.capa::before{content:"";position:absolute;inset:12px;border:1px solid rgba(176,141,87,.35);pointer-events:none;border-radius:2px}
.capa::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(216,192,149,.16),transparent 65%);pointer-events:none}
.capa h1{color:#FBF8F2}
.capa h1 em{color:var(--ouro-claro)}
.capa .etiqueta{color:var(--ouro-claro)}
.capa .etiqueta::before{background:var(--ouro-claro)}
.capa .lista li::before{background:var(--ouro-claro)}
.capa .nota{color:#B9C0CC;border-top:1px solid rgba(176,141,87,.3);padding-top:18px}
.capa .btn{background:var(--ouro-claro);border-color:var(--ouro-claro);color:var(--noite)}
.capa .btn:hover{background:#E6D3AE}

/* rodapé com identificação exigida (nome, OAB, endereço) */
.rodape{background:var(--noite) var(--grao);color:#C9CFDA;font-size:15px;border-top:1px solid rgba(176,141,87,.45)}
.rodape .in{max-width:1080px;margin:0 auto;padding:40px 24px 34px;display:grid;gap:6px}
.rodape .marca-rod{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.rodape .marca-rod span{font-family:"Playfair Display",serif;letter-spacing:.14em;text-transform:uppercase;color:#F6F2EA;font-size:17px}
.rodape strong{color:#F6F2EA;font-weight:600}
.rodape .aviso{opacity:.75;font-size:14px;margin-top:14px;padding-top:16px;border-top:1px solid rgba(176,141,87,.25)}
.ph{background:#FFF3C4;color:#6B4E00;border-radius:2px;padding:0 5px;font-weight:600}
.rodape .ph,.topo .ph{background:rgba(216,192,149,.18);color:#F0DCA8;outline:1px dashed rgba(216,192,149,.6)}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font:inherit;font-weight:600;letter-spacing:.01em;
  font-size:18.5px;min-height:60px;padding:15px 30px;border-radius:2px;border:1px solid var(--noite);
  background:var(--noite);color:#FBF8F2;cursor:pointer;text-decoration:none;
  transition:background .2s,color .2s,border-color .2s,transform .1s,box-shadow .2s;
  box-shadow:inset 0 -2px 0 var(--ouro)}
.btn:hover{background:var(--noite-2);box-shadow:inset 0 -3px 0 var(--ouro-claro)}
.btn:active{transform:translateY(1px)}
.btn.sec{background:transparent;color:var(--noite);border-color:var(--ouro);box-shadow:none}
.btn.sec:hover{background:var(--marca-clara)}
.btn.wpp svg{color:#5BD08A}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.cheio{width:100%}
.acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* cartões */
.cartao{position:relative;background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:34px 34px 32px;box-shadow:var(--sombra)}
.cartao::before{content:"";position:absolute;left:34px;top:-1px;width:56px;height:2px;background:var(--ouro)}
.cartao+.cartao{margin-top:22px}
.cartao.nobre{background:var(--noite) var(--grao);color:#E9E2D4;border-color:var(--noite)}
.cartao.nobre h2{color:#FBF8F2}
.cartao.nobre::before{background:var(--ouro-claro)}
.cartao.nobre .btn.sec{color:#F0E6D2;border-color:var(--ouro-claro)}
.cartao.nobre .btn.sec:hover{background:rgba(216,192,149,.12)}
.cartao.nobre .btn{background:var(--ouro-claro);color:var(--noite);border-color:var(--ouro-claro);box-shadow:none}
.cartao.nobre .btn.sec{background:transparent}
.cartao.nobre .btn.wpp svg{color:#1E6B47}
.etiqueta{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ouro-texto);margin-bottom:14px}
.etiqueta::before{content:"";width:28px;height:1px;background:var(--ouro)}
.nota{font-size:15.5px;color:var(--tinta-2)}

/* passo a passo */
.cabeca-passo{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.progresso{height:2px;background:var(--linha);overflow:hidden;margin-bottom:34px;position:relative}
.progresso i{display:block;height:100%;background:linear-gradient(90deg,var(--ouro),var(--ouro-claro));width:0;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.contagem{font-family:"Playfair Display",serif;font-size:17px;color:var(--ouro-texto);letter-spacing:.06em;margin-bottom:12px}
.contagem b{font-size:28px;font-weight:500;color:var(--tinta);margin-right:4px}
.pergunta h2{margin-bottom:10px}
.pergunta .ajuda{color:var(--tinta-2);margin-bottom:24px}
.opcoes{display:grid;gap:12px;margin-top:10px}
.opcao{display:flex;align-items:center;gap:16px;width:100%;text-align:left;font:inherit;font-size:19px;
  min-height:66px;padding:16px 22px;border:1px solid var(--linha);border-radius:var(--raio);background:var(--cartao);
  color:var(--tinta);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s,color .2s}
.opcao:hover{border-color:var(--ouro);box-shadow:0 10px 24px -14px rgba(14,26,41,.3)}
.opcao[aria-pressed="true"]{border-color:var(--noite);background:var(--noite);color:#FBF8F2}
.opcao[aria-pressed="true"] small{color:#C9CFDA}
.opcao .marca{width:24px;height:24px;border-radius:50%;border:1px solid var(--ouro);flex:none;display:grid;place-items:center}
.opcao[aria-pressed="true"] .marca{border-color:var(--ouro-claro);background:transparent}
.opcao[aria-pressed="true"] .marca::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--ouro-claro)}
.opcao.multi .marca{border-radius:2px}
.opcao.multi[aria-pressed="true"] .marca::after{width:12px;height:7px;border-radius:0;background:none;border:solid var(--ouro-claro);border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px)}
.opcao small{display:block;font-size:15px;color:var(--tinta-2);margin-top:3px}

/* fala educativa entre perguntas */
.fala{display:flex;gap:18px;align-items:flex-start;background:var(--cartao);border:1px solid var(--linha);border-left:2px solid var(--ouro);
  border-radius:var(--raio);padding:22px 26px;margin-bottom:30px;box-shadow:var(--sombra)}
.fala .selo{width:42px;height:42px;font-size:15px}
.fala p{font-size:18px}
.fala .quem{font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-texto);margin-bottom:6px}

/* campos */
.campos{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.campos.dois{grid-template-columns:repeat(2,1fr)}
label.campo{display:grid;gap:8px;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-2)}
label.campo input,label.campo select{font:inherit;font-size:22px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--tinta);padding:12px 16px;min-height:62px;
  border:1px solid var(--linha);border-bottom:2px solid var(--ouro);border-radius:var(--raio);background:var(--cartao);width:100%}
label.campo input:focus,label.campo select:focus,.opcao:focus-visible,.btn:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}
.erro{color:#A3261B;font-size:16px;font-weight:600;margin-top:12px;min-height:1em}

.caixa{border-radius:var(--raio);padding:20px 24px;margin-top:20px;font-size:17px;border:1px solid var(--linha)}
.caixa.alerta{background:var(--alerta-clara);border-left:2px solid var(--alerta)}
.caixa.ok{background:var(--ok-clara);border-left:2px solid var(--ok)}
.caixa.info{background:var(--marca-clara);border-left:2px solid var(--ouro)}
.caixa h3{font-size:20px;margin-bottom:6px}

ul.lista{list-style:none;display:grid;gap:12px;margin-top:16px}
ul.lista li{padding-left:30px;position:relative}
ul.lista li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;transform:rotate(45deg);background:var(--ouro)}
ol.passos{counter-reset:p;list-style:none;display:grid;gap:14px;margin-top:16px}
ol.passos li{counter-increment:p;padding-left:52px;position:relative;min-height:34px}
ol.passos li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:-2px;font-family:"Playfair Display",serif;font-size:24px;color:var(--ouro-texto)}

.fade{animation:fade .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.oculto{display:none!important}

@media (max-width:600px){
  body{font-size:18px}
  main{padding:24px 16px 52px}
  .capa{padding:40px 26px 34px}
  .capa::before{inset:8px}
  .cartao{padding:28px 22px 24px}
  .cartao::before{left:22px}
  .campos{grid-template-columns:1fr 1fr}
  .campos .ano{grid-column:1/-1}
  .acoes .btn{width:100%}
  .topo .in{padding:14px 16px}
  .topo .nome{font-size:17px;letter-spacing:.1em}
  .topo .sub{display:none}
  .selo{width:44px;height:44px;font-size:16px}
}