/* =====================================================================
   STYLE.CSS - MOBILE-FIRST
   As regras "soltas" são para o CELULAR (o padrão).
   Os blocos @media (min-width: ...) mais abaixo ACRESCENTAM o layout de telas maiores:
     481px+  = celulares grandes / tablets pequenos
     821px+  = tablet deitado e computador
   Efeitos de "passar o mouse" ficam só em @media (hover:hover), para não
   ficarem "presos" depois de um toque no celular.
   ===================================================================== */

/* ---------- cores, fontes e medidas ---------- */
:root{--deep:#16002B;--main:#6C20C9;--violet:#8A2BE2;--lilac:#C59CFF;--black:#08060D;--white:#fff;--gold:#E8C98A;
--glass:rgba(255,255,255,.06);--line:rgba(197,156,255,.22);--muted:rgba(255,255,255,.72);
--serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',system-ui,sans-serif;
--hh:64px;   /* altura do cabeçalho */
--gut:18px;  /* margem lateral */
--gap:16px;  /* espaço entre os cards do carrossel */
box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 12px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--white);font:400 16px/1.6 var(--sans);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
body.menu-open{overflow:hidden} /* trava a rolagem enquanto o menu do celular está aberto */
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:2px solid var(--lilac);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 max(var(--gut),env(safe-area-inset-right,0px)) 0 max(var(--gut),env(safe-area-inset-left,0px))}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;line-height:1.05}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- cabeçalho ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);
background:rgba(8,6,13,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:var(--hh)}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.mark{height:36px;width:36px;flex:none;border-radius:10px;display:block;box-shadow:0 0 14px rgba(138,43,226,.35)}
.logo{font-family:var(--serif);font-size:1.6rem;letter-spacing:.06em;font-weight:600}
.logo span{color:var(--lilac)}
.bar .logo{font-size:1.2rem;letter-spacing:.04em;white-space:nowrap}

/* botão de 3 tracinhos (só no celular) */
.burger{display:block;background:none;border:0;width:46px;height:46px;margin-right:-8px;cursor:pointer;color:#fff}
.burger span{display:block;width:24px;height:2px;background:currentColor;margin:5px auto;transition:.25s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* menu do celular: painel que desce do cabeçalho */
nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;
max-height:calc(100svh - var(--hh) - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;
padding:4px var(--gut) calc(24px + env(safe-area-inset-bottom,0px));background:rgba(22,0,43,.97);border-bottom:1px solid var(--line)}
nav.open{display:flex}
nav a.l{padding:16px 0;font-size:1.05rem;color:var(--muted);border-bottom:1px solid var(--line);transition:color .2s}
nav a.l:active{color:#fff}
nav .btn{margin-top:18px}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:999px;border:1px solid transparent;
font:700 .95rem var(--sans);cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn:active{transform:scale(.97)}
.btn.p{background:linear-gradient(135deg,var(--violet),var(--main));color:#fff;box-shadow:0 0 24px rgba(138,43,226,.45)}
.btn.s{background:var(--glass);border-color:var(--line);color:#fff}

/* ---------- topo (hero) ---------- */
/* Celular: logo em cima, depois textos, depois pagamento (grid-template-areas) */
.hero{position:relative;overflow:hidden;padding:calc(var(--hh) + 28px + env(safe-area-inset-top,0px)) 0 56px;
background:radial-gradient(80% 45% at 50% 22%,rgba(108,32,201,.55),transparent 70%),radial-gradient(60% 40% at 10% 95%,rgba(138,43,226,.25),transparent 70%),linear-gradient(180deg,var(--deep),var(--black))}
.stars{position:absolute;inset:0;pointer-events:none}
.stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--lilac);box-shadow:0 0 10px var(--lilac);opacity:.7}
.hero .wrap{position:relative;display:grid;grid-template-areas:"logo" "text" "pay";gap:28px;text-align:center}
.hero-text{grid-area:text}
.eyebrow{margin:0 0 16px;font:700 .72rem/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.hero h1{font-size:clamp(2.25rem,9.4vw,4.9rem);line-height:1.04;letter-spacing:.01em;background:linear-gradient(180deg,#fff 35%,#e6d4ff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 22px rgba(138,43,226,.4))}
.hero h1 em{display:block;-webkit-text-fill-color:var(--lilac);font-style:italic;font-weight:500;color:var(--lilac);font-size:.86em;margin-top:.08em}
/* botões um embaixo do outro, largura cheia (fácil de tocar com o polegar) */
.cta{display:grid;gap:12px;width:100%;max-width:340px;margin:28px auto 0}

/* logo grande */
.visual{grid-area:logo;position:relative;justify-self:center;width:100%;max-width:340px;aspect-ratio:16/9}
.visual::before{content:"";position:absolute;inset:-14%;border-radius:50%;background:radial-gradient(closest-side,rgba(138,43,226,.5),transparent)}
.hero-logo{position:relative;width:100%;height:100%;object-fit:cover;display:block;
-webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 30%,transparent 100%);
mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 30%,transparent 100%)}
@keyframes fl{50%{transform:translateY(-12px)}}

/* formas de pagamento */
.pay{grid-area:pay;text-align:center}
.pay p{margin:0 0 12px;font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--lilac)}
.pay ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pay li{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--glass);font-weight:700;font-size:.9rem}
.pay svg{width:18px;height:18px;flex:none;stroke:var(--lilac);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* animação de entrada (uma vez só, ao abrir a página) */
.in{opacity:0;transform:translateY(22px);animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
.in:nth-child(2){animation-delay:.15s}.in:nth-child(3){animation-delay:.3s}.in:nth-child(4){animation-delay:.45s}
@keyframes up{to{opacity:1;transform:none}}

/* ---------- seções de catálogo ---------- */
section.cat{padding:64px 0 32px;position:relative}
section.cat:nth-of-type(odd){background:linear-gradient(180deg,var(--black),var(--deep) 50%,var(--black))}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.head h2{font-size:clamp(2rem,8.4vw,3.8rem);letter-spacing:.06em;background:linear-gradient(180deg,#fff 30%,var(--lilac));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 16px rgba(138,43,226,.3))}
.orn{display:block;width:160px;height:14px;margin-top:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 14'%3E%3Cdefs%3E%3ClinearGradient id='a'%3E%3Cstop offset='0' stop-color='%238A2BE2' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23C59CFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect y='6.5' width='118' height='1' fill='url(%23a)'/%3E%3Cpath d='M132 0l2.4 4.6L139 7l-4.6 2.4L132 14l-2.4-4.6L125 7l4.6-2.4z' fill='%23E8C98A'/%3E%3C/svg%3E") no-repeat left center/contain}
.head p{color:var(--muted);margin:10px 0 0;max-width:48ch}
.arrows{display:none;gap:10px} /* setas só aparecem no computador; no celular se arrasta com o dedo */
.arrows button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:#fff;font-size:1.2rem;cursor:pointer;transition:.2s}

/* abas do catálogo (largura cheia no celular) */
.tabs{display:flex;gap:4px;padding:5px;margin-bottom:4px;border-radius:999px;border:1px solid var(--line);background:var(--glass);max-width:100%}
.tabs button{flex:1;min-height:44px;padding:0 10px;border:0;border-radius:999px;background:none;color:var(--muted);font:700 .9rem var(--sans);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.tabs button[aria-selected=true]{background:linear-gradient(135deg,var(--violet),var(--main));color:#fff}
.panel[hidden]{display:none}

/* carrossel: faixa que rola de lado com o dedo */
.track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;
padding:20px var(--gut) 24px;scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.track.drag{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}

/* cards */
.card{position:relative;flex:0 0 min(300px,80vw);scroll-snap-align:center;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;
transition:transform .35s,box-shadow .35s,border-color .35s;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.card.center{border-color:rgba(197,156,255,.55);box-shadow:0 0 30px rgba(138,43,226,.28),0 14px 40px rgba(0,0,0,.45)}
.badge{position:absolute;top:14px;left:14px;z-index:2;padding:6px 14px;border-radius:999px;background:var(--gold);color:#2a1440;font:700 .72rem var(--sans);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.card .img{aspect-ratio:4/5;overflow:hidden;background:var(--deep)}
.card .img.empty{padding:14px}
.ph-empty{height:100%;display:grid;place-content:center;justify-items:center;gap:12px;border-radius:20px;border:1.5px dashed rgba(197,156,255,.5);background:radial-gradient(70% 60% at 50% 40%,rgba(138,43,226,.25),transparent),rgba(255,255,255,.03);color:var(--lilac);font-weight:700;font-size:.95rem;text-align:center}
.ph-empty svg{width:42px;height:42px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card .img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s;pointer-events:none}
.card .body{padding:18px;display:flex;flex-direction:column;gap:12px;flex:1}
.card h3{font-size:1.55rem}
.card h3 small{display:block;font-size:inherit;font-weight:inherit}
.card p{margin:0;color:var(--muted);font-size:.92rem}
.notes{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.85rem;color:var(--muted)}
.notes li{position:relative;padding-left:20px}
.notes li::before{content:"\2726";position:absolute;left:0;top:0;color:var(--gold)}
.prices{margin-top:auto;border-top:1px solid var(--line);padding-top:12px;display:grid;gap:6px;font-size:.9rem}
.prices div{display:flex;justify-content:space-between;gap:12px;color:var(--muted)}
.prices .obs{justify-content:flex-end;margin-top:-4px;font-size:.8rem}
.prices s{color:rgba(255,255,255,.5)}
.prices b{color:var(--white);font-weight:700;white-space:nowrap}
.prices .main b{color:var(--gold);font-size:1.15rem}
.card .btn{width:100%}

/* bolinhas do carrossel (área de toque maior que o desenho) */
.dots{display:flex;justify-content:center;gap:2px;margin-top:0}
.dots button{position:relative;width:20px;height:24px;padding:0;border:0;background:none;cursor:pointer;transition:width .3s}
.dots button::before{content:"";position:absolute;left:6px;right:6px;top:8px;height:8px;border-radius:99px;background:var(--line);transition:background .3s}
.dots button.on{width:38px}
.dots button.on::before{background:var(--lilac)}

/* aparecer ao rolar */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.rv.show{opacity:1;transform:none}

/* ---------- dúvidas (perguntas que abrem e fecham) ---------- */
section.tips-sec{padding-bottom:0}
.faq{display:grid;gap:12px;max-width:820px}
.faq details{border-radius:18px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025));transition:border-color .2s}
.faq details[open]{border-color:rgba(197,156,255,.45)}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:16px 48px 16px 42px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"\2726";position:absolute;left:16px;top:16px;color:var(--gold)}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.4rem;font-weight:400;color:var(--lilac);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{margin:0;padding:0 20px 18px 42px;color:var(--muted);font-size:.95rem}

/* ---------- rodapé ---------- */
footer{margin-top:64px;padding:48px 0 calc(24px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:radial-gradient(60% 100% at 50% 0,rgba(108,32,201,.3),transparent),var(--black)}
.fg{display:grid;grid-template-columns:1fr;gap:32px}
.fg p{color:var(--muted);margin:10px 0 0}
.fg h4{margin:0 0 12px;font-family:var(--serif);font-size:1.3rem;color:var(--lilac)}
.fg ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;color:var(--muted)}
.fg ul a{display:block;padding:6px 0} /* área de toque maior nos links */
.soc{display:flex;gap:12px;margin-top:6px}
.soc a{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--glass);transition:.2s}
.soc svg{width:22px;height:22px;fill:#fff}
.copy{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);text-align:center;color:rgba(255,255,255,.5);font-size:.85rem}
.dev{margin:10px 0 0;text-align:center;color:rgba(255,255,255,.4);font-size:.78rem}
.dev a{color:rgba(255,255,255,.6);text-decoration:underline;text-underline-offset:3px}


/* =====================================================================
   481px+ : celulares grandes / tablets pequenos
   ===================================================================== */
@media(min-width:481px){
:root{--gut:24px}
.bar .logo{font-size:1.45rem;letter-spacing:.06em}
.cta{display:flex;flex-wrap:wrap;justify-content:center;max-width:none}
.cta .btn{width:auto}
.tabs{display:inline-flex}
.tabs button{flex:none;padding:0 22px;font-size:.95rem}
.fg ul{grid-template-columns:1fr}
}

/* =====================================================================
   821px+ : tablet deitado e computador
   ===================================================================== */
@media(min-width:821px){
:root{--hh:72px;--gap:22px}
.mark{height:40px;width:40px}
.brand{gap:12px}
.bar .logo{font-size:1.6rem}

/* menu na horizontal; some o botão de 3 tracinhos */
.burger{display:none}
nav{position:static;display:flex;flex-direction:row;align-items:center;gap:32px;max-height:none;overflow:visible;padding:0;background:none;border:0}
nav a.l{padding:0;font-size:.95rem;border:0}
nav .btn{margin-top:0}

/* topo em 2 colunas: textos à esquerda, logo e pagamento à direita */
.hero{min-height:100svh;display:flex;align-items:center;padding:120px 0 72px;
background:radial-gradient(60% 50% at 78% 38%,rgba(108,32,201,.55),transparent 70%),radial-gradient(40% 40% at 10% 90%,rgba(138,43,226,.28),transparent 70%),linear-gradient(180deg,var(--deep),var(--black))}
.hero .wrap{grid-template-columns:1.1fr .9fr;grid-template-areas:"text logo" "text pay";column-gap:48px;row-gap:22px;align-items:center;text-align:left}
.hero-text{align-self:center}
.eyebrow{font-size:.78rem;letter-spacing:.18em;margin-bottom:18px}
.hero h1{font-size:clamp(3rem,5.6vw,4.9rem);line-height:1.02}
.cta{justify-content:flex-start;margin:32px 0 0}
.visual{max-width:540px;align-self:end}
.pay{align-self:start;max-width:540px;justify-self:center;width:100%}
.hero-logo{animation:fl 7s ease-in-out infinite} /* logo flutuando: só no computador */

section.cat{padding:96px 0 40px}
.head{margin-bottom:36px}
.head h2{font-size:clamp(2.3rem,5vw,3.8rem);letter-spacing:.08em}
.arrows{display:flex}
.tabs{margin-bottom:8px}
.track{padding:24px max(24px,calc((100vw - 1200px)/2 + 24px)) 28px;scroll-padding-inline:max(24px,calc((100vw - 1200px)/2 + 24px));cursor:grab}
.card{flex-basis:320px;border-radius:28px}
.card .body{padding:22px}
.card h3{font-size:1.7rem}

.faq summary{padding:18px 56px 18px 46px}
.faq summary::before{left:18px;top:18px}
.faq details p{padding:0 24px 20px 46px}

footer{margin-top:80px;padding-top:64px}
.fg{grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.fg ul a{padding:2px 0}
.copy{margin-top:44px}
}

/* =====================================================================
   Efeitos de passar o mouse: só em aparelhos com mouse
   ===================================================================== */
@media(hover:hover){
nav a.l:hover{color:var(--white)}
.btn.p:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(138,43,226,.75)}
.btn.s:hover{background:rgba(197,156,255,.16)}
.arrows button:hover{background:rgba(138,43,226,.35);border-color:var(--lilac)}
.tabs button:hover{color:#fff}
.card:hover{transform:translateY(-6px);border-color:var(--lilac)}
.card:hover .img img{transform:scale(1.06)}
.soc a:hover{background:rgba(138,43,226,.35);border-color:var(--lilac)}
.fg a:hover,.dev a:hover{color:#fff}
}

/* Quem pediu ao celular/computador para reduzir animações: desliga tudo */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.in,.rv{opacity:1;transform:none}}