/* =========================================================
   TAROT CRUZ — style.css
   Cores: vermelho #CC0001 · creme #FDF4C9 · caixas #FAE9BE
   Letra: EB Garamond
   Sempre que alterar este ficheiro, subir o ?v= no cabecalho.php
   ========================================================= */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:"EB Garamond",Garamond,"Times New Roman",serif;
  font-size:17px;line-height:1.55;color:#000;background:#FDF4C9;
  min-height:100vh;
  /* espaço para a barra inferior nunca tapar conteúdo */
  padding-bottom:84px;
  padding-bottom:calc(84px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color:transparent;
}
img,svg{display:block;max-width:100%}
a{color:#CC0001}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid #990F16;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.conteudo{max-width:560px;margin:0 auto}

/* ---------- Cabeçalho ---------- */
.topo{
  position:sticky;top:0;z-index:40;background:#CC0001;color:#FDF4C9;
  padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top));
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;
}
.topo-marca{color:#FDF4C9;text-decoration:none;font-size:21px;font-weight:700;letter-spacing:1px}
.topo-menu{
  background:none;border:0;color:#FDF4C9;cursor:pointer;font-size:18px;
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  min-height:44px;min-width:44px;padding:0 4px
}
.topo-menu svg{margin-left:8px}

/* ---------- Menu (ecrã inteiro, sem cantos) ---------- */
.menu{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:#FDF4C9;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  -webkit-transform:translateX(100%);transform:translateX(100%);
  -webkit-transition:-webkit-transform .28s ease;transition:transform .28s ease;
  visibility:hidden;
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
}
.menu.aberto{-webkit-transform:translateX(0);transform:translateX(0);visibility:visible}
body.menu-aberto{overflow:hidden}
.menu-topo{
  background:#CC0001;color:#FDF4C9;padding:14px 18px;padding-top:calc(14px + env(safe-area-inset-top));
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;
}
.menu-fechar{background:none;border:0;color:#FDF4C9;cursor:pointer;min-width:44px;min-height:44px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end}

.perfil{
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  padding:18px;background:#FAE9BE;border-bottom:1px solid #efb3b3;text-decoration:none;color:#000
}
.perfil-foto{
  width:56px;height:56px;border-radius:50%;background:#FDF4C9;border:2px solid #CC0001;
  margin-right:14px;-webkit-flex:0 0 56px;flex:0 0 56px;overflow:hidden;
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-pack:center;-webkit-justify-content:center;justify-content:center
}
.perfil-foto img{width:100%;height:100%;object-fit:cover}
.perfil-nome{font-size:22px;font-weight:700;color:#CC0001;line-height:1.15}
.perfil-sub{font-size:15px;color:#5a4a1a}

.creditos{
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;
  margin:16px 16px 6px;background:#CC0001;color:#FDF4C9;border-radius:12px;padding:15px 17px;text-decoration:none
}
.creditos-num{font-size:18px;font-weight:700}
.creditos-sub{font-size:15px}

.menu-sec{font-size:15px;font-weight:700;color:#CC0001;letter-spacing:2px;text-transform:uppercase;padding:18px 20px 6px}
.menu-item{
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  padding:13px 20px;border-bottom:1px solid #f0dfa8;text-decoration:none;color:#000;min-height:64px
}
.menu-item:active{background:#FAE9BE}
.menu-ic{
  width:44px;height:44px;-webkit-flex:0 0 44px;flex:0 0 44px;margin-right:14px;border-radius:50%;
  background:#FAE9BE;border:1px solid #efb3b3;color:#CC0001;
  display:-webkit-box;display:-webkit-flex;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;align-items:center;
  -webkit-box-pack:center;-webkit-justify-content:center;justify-content:center
}
.menu-t{font-size:20px;font-weight:700;line-height:1.2}
.menu-d{font-size:15px;color:#5a4a1a;line-height:1.35}
.menu-item.admin{background:#FAE9BE}
.menu-item.admin .menu-ic{background:#CC0001;border-color:#CC0001;color:#FDF4C9}
.menu-item.sair .menu-t{color:#CC0001}
.menu-legal{border-top:1px solid #efb3b3;margin:0 20px;padding:16px 0 8px;text-align:center;font-size:15px;color:#5a4a1a;line-height:1.8}
.menu-legal a{color:#5a4a1a}

/* ---------- Barra inferior ---------- */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:40;background:#CC0001;
  display:-webkit-box;display:-webkit-flex;display:flex;
  padding-bottom:env(safe-area-inset-bottom);
}
.barra a{
  -webkit-box-flex:1;-webkit-flex:1;flex:1;text-align:center;color:#FDF4C9;text-decoration:none;
  font-size:14px;padding:9px 0 11px;min-height:60px
}
.barra a svg{margin:0 auto 3px}
.barra a.ativo{background:#a30001;font-weight:700}

/* ---------- Rodapé ---------- */
.rodape{text-align:center;font-size:15px;color:#5a4a1a;padding:10px 20px 24px;line-height:1.8}
.rodape a{color:#5a4a1a}

/* ---------- Página: blocos comuns ---------- */
.hero{text-align:center;padding:24px 20px 6px}
.hero-metodo{font-size:15px;letter-spacing:2px;font-style:italic;margin-bottom:12px}
.hero-h1{font-size:30px;font-weight:700;line-height:1.15}
.hero-h1 span{display:block;color:#CC0001}
.hero-p{font-size:18px;line-height:1.55;margin:14px auto 0;max-width:30em}
.sec{font-size:15px;font-weight:700;color:#CC0001;letter-spacing:2px;text-transform:uppercase;padding:18px 18px 7px}
.caixa{margin:0 16px 14px;background:#FAE9BE;border:1px solid #efb3b3;border-radius:12px;padding:16px}

/* Carta do dia */
.carta-dia{display:-webkit-box;display:-webkit-flex;display:flex}
.carta-dia svg{-webkit-flex:0 0 66px;flex:0 0 66px;margin-right:13px}
.carta-nome{font-size:21px;font-weight:700;color:#CC0001;line-height:1.15}
.carta-data{font-size:14px;color:#5a4a1a}
.carta-txt{font-size:16px;font-style:italic;line-height:1.45;margin-top:5px}

/* Formulário em passos */
.passos-topo{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;font-size:15px;color:#5a4a1a}
.passos-topo b{color:#CC0001}
.progresso{height:7px;background:#FDF4C9;border:1px solid #e9d7a4;border-radius:4px;overflow:hidden;margin-top:7px}
.progresso i{display:block;height:100%;width:25%;background:#CC0001;-webkit-transition:width .3s;transition:width .3s}
.rotulo{display:block;font-size:17px;font-weight:700;color:#CC0001;margin:16px 0 8px}
.rotulo small{font-weight:400;color:#5a4a1a;font-size:15px}
.campo{
  display:block;width:100%;background:#FDF4C9;border:1px solid #d9c894;border-radius:10px;
  padding:12px 13px;font-size:17px;color:#000;-webkit-appearance:none;appearance:none
}
textarea.campo{min-height:120px;resize:vertical;line-height:1.45}
.campo::-webkit-input-placeholder{color:#8a7f60}
.campo::placeholder{color:#8a7f60}
.opcoes{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin-right:-7px}
.opcao{position:relative;margin:0 7px 7px 0}
.opcao input{position:absolute;opacity:0;width:1px;height:1px}
.opcao span{
  display:block;border:1.5px solid #CC0001;border-radius:10px;padding:10px 12px;min-height:46px;
  text-align:center;color:#CC0001;background:#FDF4C9;font-size:16px;cursor:pointer
}
.opcao input:checked + span{background:#CC0001;color:#FDF4C9;font-weight:700}
.opcao input:focus-visible + span{outline:3px solid #990F16;outline-offset:2px}
.opcoes.q4 .opcao{width:calc(25% - 7px)}
.opcoes.q2 .opcao{width:calc(50% - 7px)}
.erro{color:#CC0001;font-size:15px;min-height:1.4em;margin-top:8px}
.nav-passos{display:-webkit-box;display:-webkit-flex;display:flex;margin-top:6px}
.btn{
  display:block;width:100%;border:0;border-radius:12px;background:#CC0001;color:#FDF4C9;
  font-size:19px;font-weight:700;padding:14px;cursor:pointer;text-align:center;text-decoration:none;min-height:50px
}
.btn-sec{background:transparent;border:1.5px solid #CC0001;color:#CC0001;width:auto;padding:14px 18px;margin-right:8px;font-weight:400}
.btn-grande{font-size:22px;padding:19px;border-radius:14px;box-shadow:0 5px 0 #8a0001}
.btn-contorno{background:transparent;border:2px solid #CC0001;color:#CC0001}

/* Grátis */
.gratis{display:-webkit-box;display:-webkit-flex;display:flex;margin:0 12px 6px}
.gratis a{
  -webkit-box-flex:1;-webkit-flex:1;flex:1;margin:0 4px;background:#FAE9BE;border:1px solid #efb3b3;border-radius:12px;
  padding:12px 6px;text-align:center;text-decoration:none;color:#5a4a1a;font-size:13px
}
.gratis a svg{margin:0 auto}
.gratis b{display:block;font-size:17px;color:#CC0001;line-height:1.15;margin-top:6px}

/* Provas */
.provas{display:-webkit-box;display:-webkit-flex;display:flex;background:#FDF4C9;border:1px solid #efb3b3;border-radius:10px;padding:12px 6px;text-align:center;margin-top:12px}
.provas div{-webkit-box-flex:1;-webkit-flex:1;flex:1}
.provas b{display:block;font-size:24px;color:#CC0001}
.provas span{font-size:14px;color:#5a4a1a}

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