/* ============================================================
   Planos funerários — site público
   Paleta: cipreste (verde-escuro), linho, pedra, latão
   ============================================================ */

:root{
  --tinta:#17211D;
  --cipreste:#2C4239;
  --musgo:#476054;
  --pedra:#7A827C;
  --linho:#E9E6DC;
  --linho-fundo:#F3F1E9;
  --papel:#FCFBF7;
  --latao:#9A7B3F;
  --latao-claro:#C8AC72;
  --alerta:#8C3B2E;
  --ok:#3B6B4E;

  --display:"Newsreader",Georgia,serif;
  --corpo:"Karla",-apple-system,"Segoe UI",sans-serif;

  --r:2px;
  --sombra:0 1px 2px rgba(23,33,29,.06),0 8px 24px -12px rgba(23,33,29,.18);
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  font-family:var(--corpo);
  font-size:16px;
  line-height:1.6;
  color:var(--tinta);
  background:var(--linho-fundo);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--cipreste)}
img{max-width:100%;display:block}

:focus-visible{outline:2px solid var(--latao);outline-offset:3px}

.container{width:min(1080px,100% - 2.5rem);margin-inline:auto}
.estreito{width:min(720px,100% - 2.5rem);margin-inline:auto}

/* ---------- Cabeçalho ---------- */
.topo{
  background:var(--cipreste);
  color:var(--linho);
  padding:1.1rem 0;
  border-bottom:3px solid var(--latao);
}
.topo .container{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.marca{font-family:var(--display);font-size:1.3rem;font-weight:500;letter-spacing:.01em;color:var(--linho);text-decoration:none}
.marca small{display:block;font-family:var(--corpo);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--latao-claro);margin-top:.15rem}
.topo nav a{color:var(--linho);text-decoration:none;font-size:.9rem;letter-spacing:.04em;opacity:.85}
.topo nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}

/* ---------- Abertura ---------- */
.abertura{padding:4.5rem 0 3rem;background:var(--linho-fundo)}
.abertura .eyebrow{
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--latao);margin:0 0 1.2rem;
}
.abertura h1{
  font-family:var(--display);
  font-size:clamp(2.1rem,5vw,3.4rem);
  font-weight:400;line-height:1.12;margin:0 0 1.1rem;max-width:20ch;
  letter-spacing:-.015em;
}
.abertura p{max-width:56ch;color:var(--musgo);font-size:1.05rem;margin:0}
.regua{height:1px;background:var(--latao);width:64px;margin:2.2rem 0 0}

/* ---------- Planos ---------- */
.grade-planos{
  display:grid;gap:1.5rem;padding:1rem 0 4.5rem;
  grid-template-columns:repeat(auto-fit,minmax(275px,1fr));
}
.plano{
  background:var(--papel);
  border:1px solid var(--linho);
  border-radius:var(--r);
  padding:2rem 1.75rem;
  display:flex;flex-direction:column;
  position:relative;
  transition:box-shadow .25s ease,transform .25s ease;
}
.plano:hover{box-shadow:var(--sombra);transform:translateY(-2px)}
.plano.destacado{border-color:var(--cipreste);border-top:3px solid var(--latao)}
.plano .selo{
  position:absolute;top:-.7rem;right:1.5rem;
  background:var(--latao);color:#fff;
  font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.3rem .7rem;
}
.plano h2{font-family:var(--display);font-size:1.55rem;font-weight:500;margin:0 0 .4rem}
.plano .resumo{color:var(--pedra);font-size:.93rem;margin:0 0 1.5rem;min-height:3em}
.preco{display:flex;align-items:baseline;gap:.35rem;margin-bottom:.35rem}
.preco .valor{font-family:var(--display);font-size:2.5rem;line-height:1;font-weight:500}
.preco .cifra{font-size:1rem;color:var(--pedra)}
.preco .periodo{font-size:.85rem;color:var(--pedra)}
.assinantes{
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--latao);margin:0 0 1.4rem;
}
.cobertura{list-style:none;padding:0;margin:0 0 1.8rem;font-size:.92rem;flex:1}
.cobertura li{padding:.45rem 0 .45rem 1.4rem;position:relative;border-bottom:1px dotted var(--linho)}
.cobertura li::before{content:"";position:absolute;left:0;top:1.05em;width:8px;height:1px;background:var(--latao)}
.cobertura li.extra{color:var(--pedra)}
.cobertura li.extra::before{background:var(--pedra)}
.cobertura .nota{display:block;font-size:.8rem;color:var(--pedra)}

/* ---------- Botões ---------- */
.btn{
  display:inline-block;border:none;cursor:pointer;
  font-family:var(--corpo);font-size:.9rem;letter-spacing:.06em;
  padding:.85rem 1.6rem;border-radius:var(--r);text-decoration:none;text-align:center;
  transition:background .18s ease,color .18s ease;
}
.btn-principal{background:var(--cipreste);color:var(--papel)}
.btn-principal:hover{background:var(--tinta)}
.btn-contorno{background:transparent;color:var(--cipreste);border:1px solid var(--cipreste)}
.btn-contorno:hover{background:var(--cipreste);color:var(--papel)}
.btn-discreto{background:transparent;color:var(--pedra);padding:.6rem 0}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Formulário de adesão ---------- */
.folha{
  background:var(--papel);border:1px solid var(--linho);
  padding:2.5rem;margin:2.5rem 0 4rem;border-radius:var(--r);
}
.passos{display:flex;gap:0;margin:0 0 2.5rem;list-style:none;padding:0;flex-wrap:wrap}
.passos li{
  flex:1;min-width:110px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pedra);padding:.7rem 0 0;border-top:2px solid var(--linho);
}
.passos li.atual{color:var(--cipreste);border-top-color:var(--latao);font-weight:700}
.passos li.feito{color:var(--musgo);border-top-color:var(--musgo)}

fieldset{border:none;padding:0;margin:0 0 2.5rem}
legend{
  font-family:var(--display);font-size:1.25rem;font-weight:500;
  padding:0;margin:0 0 .3rem;
}
.ajuda{color:var(--pedra);font-size:.88rem;margin:0 0 1.4rem}

.linha-campos{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.campo{display:flex;flex-direction:column;margin-bottom:1rem}
.campo label{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--musgo);margin-bottom:.35rem}
.campo input,.campo select,.campo textarea{
  font-family:var(--corpo);font-size:1rem;padding:.7rem .8rem;
  border:1px solid #D6D2C4;border-radius:var(--r);background:#fff;color:var(--tinta);
}
.campo input:focus,.campo select:focus{border-color:var(--cipreste);outline:none;box-shadow:0 0 0 3px rgba(44,66,57,.12)}
.campo .dica{font-size:.78rem;color:var(--pedra);margin-top:.3rem}
.campo.erro input{border-color:var(--alerta)}
.campo .msg-erro{font-size:.8rem;color:var(--alerta);margin-top:.3rem}

/* upload */
.upload{
  border:1px dashed #C9C4B4;padding:1.2rem;border-radius:var(--r);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  background:#FAF9F4;
}
.upload strong{display:block;font-size:.95rem}
.upload span{font-size:.82rem;color:var(--pedra)}
.upload input[type=file]{font-size:.85rem;max-width:100%}

/* dependentes */
.dependente{
  border-left:2px solid var(--linho);padding-left:1.2rem;margin-bottom:1.2rem;position:relative;
}
.dependente .remover{
  position:absolute;right:0;top:0;background:none;border:none;color:var(--alerta);
  font-size:.8rem;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;
}

/* ---------- Assinatura ---------- */
.bloco-assinatura{background:#FAF9F4;border:1px solid var(--linho);padding:1.5rem;border-radius:var(--r)}
.tela-assinatura{
  width:100%;height:210px;background:#fff;border:1px solid #D6D2C4;
  border-radius:var(--r);touch-action:none;cursor:crosshair;display:block;
}
.pauta{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:.6rem;font-size:.82rem;color:var(--pedra);
}
.pauta button{background:none;border:none;color:var(--cipreste);cursor:pointer;
  font-size:.82rem;letter-spacing:.06em;text-decoration:underline;text-underline-offset:3px}

/* ---------- Avisos ---------- */
.aviso{padding:1rem 1.2rem;border-radius:var(--r);margin-bottom:1.5rem;font-size:.93rem;border-left:3px solid}
.aviso-erro{background:#FBF0EE;border-color:var(--alerta);color:#6E2C22}
.aviso-ok{background:#EEF4F0;border-color:var(--ok);color:#2A5039}
.aviso-info{background:#F6F3EA;border-color:var(--latao);color:#6A5327}
.aviso ul{margin:.5rem 0 0;padding-left:1.1rem}

/* ---------- Conclusão ---------- */
.conclusao{text-align:center;padding:4rem 0}
.conclusao .protocolo{
  font-family:var(--display);font-size:2.6rem;letter-spacing:.12em;
  color:var(--cipreste);margin:1rem 0;display:block;
}
.conclusao .caixa{
  background:var(--papel);border:1px solid var(--linho);padding:2.5rem;border-radius:var(--r);
}

/* ---------- Tabela de parcelas ---------- */
.tabela{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--papel)}
.tabela th{
  text-align:left;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--musgo);padding:.8rem;border-bottom:1px solid var(--cipreste);font-weight:600;
}
.tabela td{padding:.8rem;border-bottom:1px solid var(--linho)}
.tabela tr:hover td{background:#FAF9F4}
.etiqueta{
  display:inline-block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.22rem .55rem;border-radius:999px;
}
.etiqueta.aberta{background:#F6F3EA;color:#6A5327}
.etiqueta.paga{background:#EEF4F0;color:#2A5039}
.etiqueta.vencida{background:#FBF0EE;color:#6E2C22}
.etiqueta.cancelada{background:#F0EFEB;color:var(--pedra)}

/* ---------- Rodapé ---------- */
.rodape{
  background:var(--cipreste);color:var(--linho);
  padding:2.5rem 0;margin-top:4rem;font-size:.88rem;
}
.rodape a{color:var(--latao-claro)}
.rodape p{margin:.3rem 0;opacity:.85}

@media (max-width:640px){
  .folha{padding:1.5rem}
  .abertura{padding:3rem 0 2rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

@media print{
  .topo,.rodape,.btn{display:none}
  body{background:#fff}
}