/* Página de venda do Tarot da Jaya. Mesma paleta e tipografia do deck e da
   porta de entrada (/tarot/acesso.css), com pergaminho quente nos fundos. */
:root{
  --teal-ink:#002f3b; --teal-heading:#152d38; --meta-teal:#517d86;
  --amber:#fcb655; --amber-soft:#f3b867; --cream:#f6f5f0; --warm-white:#fffaf5;
  --parchment:#f4e8cd; --parchment-deep:#ead9b3; --gold:#a97a1f;
  --text:#1f1f1f; --excerpt:#55565a; --hairline:#e2dfd3;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Open Sans',sans-serif;font-size:clamp(17px,15px + .3vw,19px);line-height:1.7;color:var(--text);background:var(--cream);padding-bottom:76px}
h1,h2,h3{font-family:'Marcellus',serif;font-weight:400;color:var(--teal-heading);line-height:1.12}
h2{font-size:clamp(30px,3.6vw,38px);margin-bottom:18px}
h3{font-size:22px;margin-bottom:6px}
p{margin-bottom:14px}
a{color:var(--teal-ink)}
img{display:block;max-width:100%;height:auto}

.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--meta-teal);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--amber);flex:none}

/* ---------- topo ---------- */
.topo{position:absolute;inset:0 0 auto 0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px clamp(16px,4vw,48px)}
.topo a{text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.topo__entrar{background:rgba(255,250,245,.88);padding:8px 14px;border:1px solid var(--parchment-deep);color:var(--teal-ink)}
.topo__marca{font-family:'Marcellus',serif;font-size:20px!important;letter-spacing:.08em!important;text-transform:none!important;color:var(--teal-heading)}

/* ---------- botões ---------- */
.cta{display:inline-block;background:var(--teal-ink);color:var(--amber-soft);text-decoration:none;font-weight:600;font-size:16px;letter-spacing:.06em;padding:16px 30px;transition:background .25s,color .25s,box-shadow .25s;text-align:center}
.cta:hover,.cta:focus-visible{background:transparent;color:var(--teal-ink);box-shadow:inset 0 0 0 1px var(--teal-ink)}
.cta--cheio{display:block;width:100%}
.cta--cheio:hover,.cta--cheio:focus-visible{background:var(--warm-white)}

/* ---------- hero ---------- */
.hero{--hero-fade:244,232,205;position:relative;min-height:min(88vh,780px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;background:radial-gradient(120% 90% at 85% 40%,var(--parchment-deep) 0%,var(--parchment) 55%,#f8f0dc 100%);overflow:hidden}
.hero__texto{position:relative;z-index:2;grid-column:2;max-width:560px;padding:120px clamp(24px,5vw,72px) 72px 24px}
.hero h1{font-size:clamp(34px,4.1vw,54px);margin-bottom:20px}
.hero__lead{font-size:22px;color:#3c3d40;max-width:34ch;margin-bottom:26px}
.hero__nota{font-size:16px;color:#4a4b4e;margin:14px 0 0;max-width:34ch}
.hero__foto{position:absolute;inset:0;z-index:0}
.hero__retrato{display:block;width:100%;height:100%;object-fit:cover;object-position:18% 45%}
.hero__foto::after{content:"";position:absolute;inset:0;background:radial-gradient(34% 22% at 0% 0%,rgba(var(--hero-fade),.9) 0%,rgba(var(--hero-fade),0) 100%),linear-gradient(90deg,rgba(var(--hero-fade),0) 0%,rgba(var(--hero-fade),0) 38%,rgba(var(--hero-fade),.88) 60%,rgba(var(--hero-fade),.97) 100%);pointer-events:none}

/* ---------- blocos ---------- */
.bloco{padding:60px clamp(20px,5vw,64px)}
.bloco--estreito{max-width:860px;margin:0 auto}
.bloco--estreito p:not(.eyebrow){color:#3c3d40}
.bloco--duas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);max-width:1080px;margin:0 auto}
.bloco--duas h2{font-size:clamp(26px,3.2vw,36px)}
.bloco--duas p:not(.eyebrow){color:#3c3d40}

/* ---------- galeria ---------- */
.galeria{background:linear-gradient(180deg,var(--parchment) 0%,var(--cream) 100%);padding-top:60px}
.galeria .bloco{padding-top:0;padding-bottom:28px}
.galeria__fila{display:flex;gap:16px;list-style:none;overflow-x:auto;padding:8px clamp(20px,5vw,64px) 40px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.galeria__fila li{flex:0 0 clamp(150px,19vw,230px);scroll-snap-align:start}
.galeria__fila img{width:100%;border:1px solid var(--parchment-deep);box-shadow:0 10px 28px rgba(60,40,10,.18)}
.galeria__fila span{display:block;font-family:'Marcellus',serif;font-size:15px;color:var(--teal-heading);margin-top:10px;text-align:center}

/* ---------- tiragem de exemplo ---------- */
.tiragem{display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:clamp(28px,5vw,72px);align-items:center;max-width:1000px;margin:0 auto}
.tiragem__img{border:1px solid var(--parchment-deep);box-shadow:0 14px 36px rgba(60,40,10,.2)}
.tiragem--larga{grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);max-width:1320px}
.tiragem__texto p:not(.eyebrow){color:#3c3d40}
.tiragem__nota{font-size:15px;color:var(--excerpt)!important}

/* ---------- o que você recebe ---------- */
.itens{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1000px;margin:36px auto 0}
.itens li{background:var(--warm-white);border:1px solid var(--hairline);border-top:3px solid var(--amber);padding:26px 26px 14px}
.itens p{color:var(--excerpt);font-size:inherit}

/* ---------- Jaya ---------- */
.jaya{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:clamp(24px,4vw,48px);align-items:center;max-width:1000px}
.jaya__foto{border:1px solid var(--parchment-deep);box-shadow:0 12px 30px rgba(60,40,10,.2)}

/* ---------- passos ---------- */
.passos{background:transparent}
.passos ol{list-style:none;counter-reset:p;margin-top:8px}
.passos li{counter-increment:p;position:relative;padding:0 0 22px 58px;color:#3c3d40}
.passos li::before{content:counter(p);position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:50%;background:var(--parchment);border:1px solid var(--gold);color:var(--gold);font-family:'Marcellus',serif;font-size:20px;display:grid;place-items:center}

/* ---------- oferta ---------- */
.oferta{background:linear-gradient(180deg,var(--cream) 0%,var(--parchment) 100%);padding:60px clamp(20px,5vw,64px)}
.oferta__caixa{max-width:480px;margin:0 auto;background:var(--warm-white);border:1px solid var(--parchment-deep);box-shadow:0 18px 44px rgba(60,40,10,.18);padding:36px clamp(22px,4vw,40px);text-align:center}
.oferta__caixa .eyebrow{justify-content:center}
.oferta__preco{font-family:'Marcellus',serif;font-size:64px;line-height:1;color:var(--teal-heading);margin-bottom:6px}
.oferta__preco span{font-size:26px;vertical-align:.9em;margin-right:4px}
.oferta__sub{color:var(--excerpt);font-size:15px;margin-bottom:8px}
.oferta__mes{font-size:16px;color:var(--teal-heading);margin-bottom:22px}
.oferta__lista{list-style:none;text-align:left;margin-bottom:26px;border-top:1px solid var(--hairline)}
.oferta__lista li{padding:11px 0 11px 28px;border-bottom:1px solid var(--hairline);position:relative;font-size:16px}
.oferta__lista li::before{content:"";position:absolute;left:4px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--amber)}
.oferta__garantia{font-size:14.5px;color:var(--excerpt);margin:16px 0 0}

/* ---------- dúvidas ---------- */
.faq details{border-bottom:1px solid var(--hairline);padding:4px 0}
.faq summary{cursor:pointer;font-weight:600;padding:16px 28px 16px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:24px;color:var(--gold);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px;color:#3c3d40}

/* ---------- rodapé e barra fixa ---------- */
.rodape{background:var(--teal-ink);color:#cfe0e3;padding:44px clamp(20px,5vw,64px) 56px;font-size:14px;text-align:center}
.rodape p{max-width:720px;margin:0 auto 10px}
.rodape a{color:var(--amber-soft)}
.barra-cta{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--teal-ink);color:var(--amber-soft);text-align:center;text-decoration:none;font-weight:600;letter-spacing:.06em;padding:18px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -6px 22px rgba(0,0,0,.25)}

a:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* ---------- celular ---------- */
@media (max-width:760px){
  body{font-size:16.5px}
  .topo{position:absolute}
  .hero{display:flex;flex-direction:column;min-height:0;background:radial-gradient(130% 70% at 50% 18%,var(--parchment-deep) 0%,var(--parchment) 60%,var(--cream) 100%)}
  .hero__foto{position:relative;inset:auto;order:-1;width:100%;aspect-ratio:4/3}
  .hero__foto::after{background:linear-gradient(180deg,rgba(var(--hero-fade),0) 55%,rgba(var(--hero-fade),1) 100%)}
  .hero__texto{grid-column:auto;max-width:none;padding:8px 20px 48px}
  .hero__texto .cta{display:block}
  .bloco{padding:60px 20px}
  .bloco--duas{grid-template-columns:1fr}
  .tiragem{grid-template-columns:1fr}
  .tiragem__img{max-width:360px;margin:0 auto}
  .tiragem--larga{grid-template-columns:1fr}
  .tiragem--larga .tiragem__img{max-width:100%}
  .itens{grid-template-columns:1fr}
  .jaya{grid-template-columns:1fr}
  .jaya__foto{max-width:320px}
  .topo__marca{color:var(--teal-heading);text-shadow:0 0 12px rgba(244,232,205,.9)}
}
@media (min-width:761px){
  .barra-cta{display:none}
  body{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}