/* Site Júlia Santos — Reiki e Cartomancia
   Estilo misto: seções claras para o Reiki e seção escura para a cartomancia.
   Cores e fontes ficam nas variáveis abaixo, para trocar a paleta em um só lugar. */
:root{
  --creme:#FAF5EC; --areia:#EFE6D6; --rosa:#E9CFC4; --salvia:#8FA08A; --verde:#3F5545; --verde-escuro:#2f4135;
  --ameixa:#2E1F45; --ameixa2:#43305F; --lilas:#B9A6DE; --dourado:#C39A5B; --dourado-claro:#DDB97A;
  --texto:#3A3A38; --claro:#EFE9F8; --branco:#fff;
  --fonte-titulo:'Fraunces',serif; --fonte-texto:'DM Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{font-family:var(--fonte-texto);font-weight:300;color:var(--texto);background:var(--creme);line-height:1.75;font-size:17px;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--fonte-titulo);font-weight:400;line-height:1.15;color:var(--verde)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--dourado);outline-offset:3px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dourado);font-weight:500;margin-bottom:14px;display:block}
section{padding:96px 0;position:relative}
h2{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:18px}
.center{text-align:center}
.lead{max-width:620px;margin:0 auto 48px;font-size:1.05rem}
.ramo{width:190px;height:auto;margin:0 auto 14px;opacity:.9}
.pular{position:absolute;left:-999px;top:0;background:var(--verde);color:#fff;padding:10px 16px;z-index:100}
.pular:focus{left:12px;top:12px}

/* Cabeçalho */
header{--nav-h:132px;--logo-t:112px;--nome-t:1.8rem;--sub-t:.72rem;position:sticky;top:0;z-index:30;transition:box-shadow .3s;background:rgba(250,245,236,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(195,154,91,.25)}
header.compacto{--nav-h:80px;--logo-t:58px;--nome-t:1.3rem;--sub-t:.62rem;box-shadow:0 8px 24px -18px rgba(46,31,69,.5)}
.nav.wrap{max-width:1240px}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:20px;transition:height .3s}
.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo img{height:var(--logo-t);width:var(--logo-t);transition:height .3s,width .3s;border-radius:50%;box-shadow:0 0 0 1px var(--dourado),0 6px 16px -8px rgba(46,31,69,.6)}
.logo-texto{display:flex;flex-direction:column;line-height:1.15}
.logo-texto strong{font-family:var(--fonte-titulo);font-weight:500;font-size:var(--nome-t);transition:font-size .3s;color:var(--verde)}
.logo-texto small{font-size:var(--sub-t);transition:font-size .3s;letter-spacing:.16em;text-transform:uppercase;color:var(--dourado);font-weight:500;margin-top:3px}
.logo-contato{width:180px;height:180px;border-radius:50%;margin:0 auto 26px;box-shadow:0 0 0 1px var(--dourado),0 0 60px 4px rgba(226,190,128,.3)}
nav ul{display:flex;gap:20px;white-space:nowrap;list-style:none;font-size:.9rem;letter-spacing:.05em}
nav a{transition:color .2s}
nav a:hover{color:var(--dourado)}
.menu-btn{display:none;background:none;border:1px solid var(--dourado);border-radius:8px;width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-btn span{display:block;width:20px;height:1.5px;background:var(--verde);transition:.3s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Botões */
.btn{display:inline-block;padding:14px 32px;border-radius:40px;background:var(--verde);color:#fff;font-weight:400;letter-spacing:.05em;font-size:.95rem;transition:.3s;border:1px solid var(--verde);cursor:pointer}
.btn:hover{background:var(--verde-escuro);transform:translateY(-2px)}
.btn.line{background:transparent;color:var(--verde)}
.btn.line:hover{background:var(--verde);color:#fff}
.btn.ouro{background:linear-gradient(135deg,#D4AE6C,#B98F45);color:#251838;border-color:transparent}
.btn.pequeno{padding:11px 24px;font-size:.88rem}

/* Hero */
.hero{padding:70px 0 100px;overflow:hidden;background:radial-gradient(circle at 12% 15%,var(--rosa) 0,transparent 45%),radial-gradient(circle at 90% 70%,#DDE5D6 0,transparent 50%),var(--creme)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.2rem);margin-bottom:22px}
.hero h1 em{color:var(--dourado)}
.hero p{max-width:480px;margin-bottom:34px;font-size:1.08rem}
.hero .acoes{display:flex;gap:14px;flex-wrap:wrap}
.hero-foto{position:relative;max-width:400px;margin-left:auto;width:100%}
.hero-foto .mandala{position:absolute;width:150%;left:-25%;top:-12%;opacity:.22;animation:gira 120s linear infinite;pointer-events:none}
.hero-foto .arco{position:relative}
.arco{aspect-ratio:3/4;border-radius:200px 200px 24px 24px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(63,85,69,.55)}
/* Foto "afastada": a imagem é reduzida dentro do quadro e o entorno é preenchido por uma cópia borrada dela mesma.
   Ajuste --zoom-foto (1 = sem afastar; 0.8 = bem afastada). */
:root{--zoom-foto:.9}
.arco{background:var(--salvia)}
.arco::before,.foto-clip::before{content:"";position:absolute;inset:-12%;background:url(../img/julia.jpg) center 30%/cover;filter:blur(22px) saturate(1.05);opacity:.95}
.arco::after,.foto-clip::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 62% at 50% 48%,rgba(255,238,200,0) 45%,rgba(226,190,128,.42) 100%)}
.arco{box-shadow:0 0 70px 4px rgba(226,190,128,.38),0 30px 60px -30px rgba(63,85,69,.55)}
.foto-clip{box-shadow:0 0 60px 4px rgba(226,190,128,.38)}
.arco img,.foto-clip img{position:relative;width:100%;height:100%;object-fit:cover;transform:scale(var(--zoom-foto));transform-origin:50% 42%;-webkit-mask-image:radial-gradient(ellipse 52% 60% at 50% 56%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 52% 60% at 50% 56%,#000 62%,transparent 100%)}
.hero-foto::after{content:"";position:absolute;inset:-14px;border:1px solid var(--dourado);border-radius:214px 214px 34px 34px;opacity:.6;pointer-events:none}
.selo-flutuante{position:absolute;left:-26px;bottom:44px;background:#fff;border-radius:16px;padding:12px 18px;box-shadow:0 14px 30px -14px rgba(63,85,69,.5);font-size:.85rem;line-height:1.35;z-index:2;display:flex;gap:10px;align-items:center}
.selo-flutuante svg{color:var(--dourado);flex:none}
.selo-flutuante strong{font-weight:500;color:var(--verde);display:block}
@keyframes gira{to{transform:rotate(360deg)}}

/* Reiki */
.reiki{background:#fff}
.intro-reiki{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center;margin-bottom:70px;text-align:left}
.intro-reiki img{width:100%;max-width:440px;margin:0 auto}
.intro-reiki .lead{margin:0 0 20px;max-width:none}
.destaque{margin-top:22px;padding:18px 22px;border-left:3px solid var(--dourado);background:var(--creme);border-radius:0 14px 14px 0;font-size:.95rem}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{padding:38px 30px;border-radius:22px;background:var(--creme);border:1px solid var(--areia);text-align:left;transition:.3s}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -24px rgba(63,85,69,.5)}
.card .ic{width:52px;height:52px;border-radius:50%;background:var(--areia);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--verde)}
.card h3{font-size:1.45rem;margin-bottom:8px}
.card p{font-size:.97rem}

/* Como é uma sessão */
.sessao{background:linear-gradient(rgba(250,245,236,.84),rgba(250,245,236,.92)),url(../img/ambiente.jpg) center/cover}
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;margin-top:10px}
.passos::before{content:"";position:absolute;top:32px;left:12%;right:12%;height:1px;background:repeating-linear-gradient(90deg,var(--dourado) 0 6px,transparent 6px 12px);opacity:.7}
.passo{text-align:center;position:relative}
.passo .n{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:#fff;border:1px solid var(--dourado);display:flex;align-items:center;justify-content:center;color:var(--verde);position:relative;box-shadow:0 10px 24px -14px rgba(63,85,69,.5)}
.passo .n b{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;background:var(--dourado);color:#fff;font:500 .75rem var(--fonte-texto);display:flex;align-items:center;justify-content:center}
.passo h3{font-size:1.3rem;margin-bottom:8px}
.passo p{font-size:.94rem}
.nota-sessao{max-width:640px;margin:44px auto 0;padding:22px 28px;border-radius:18px;background:#fff;border:1px solid var(--areia);font-size:.95rem}

/* Transição ondulada */
.onda{display:block;width:100%;height:60px;margin-bottom:-1px}

/* Cartomancia */
.carto{background:var(--ameixa);color:#D8D0EA;padding-top:60px;overflow:hidden}
.carto::before{content:"";position:absolute;width:600px;height:600px;left:-200px;top:-100px;background:radial-gradient(circle,rgba(185,166,222,.22),transparent 65%)}
.carto h2,.carto h3{color:var(--claro)}
.carto .eyebrow{color:var(--dourado-claro)}
.carto .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;position:relative}
.carto p{margin-bottom:16px}
.carto ul{list-style:none;margin:20px 0 30px}
.carto li{padding:8px 0 8px 30px;position:relative}
.carto li::before{content:"✦";position:absolute;left:0;color:var(--dourado-claro);font-size:.85rem;top:10px}

/* Fotos temáticas (geradas com IA) */
.foto-tema{display:block;width:100%;height:auto;max-width:420px;aspect-ratio:4/5;object-fit:cover;margin:0 auto;border-radius:26px;border:1px solid rgba(195,154,91,.55);box-shadow:0 30px 60px -30px rgba(63,85,69,.55)}
.carto-foto{position:relative;max-width:420px;width:100%;margin:0 auto}
.carto-foto .mandala-fundo{position:absolute;width:135%;left:-17%;top:-10%;opacity:.14;animation:gira 140s linear infinite;pointer-events:none}
.carto-foto .foto-tema{position:relative;border-color:rgba(221,185,122,.6);box-shadow:0 0 70px 2px rgba(226,190,128,.22),0 30px 60px -30px rgba(0,0,0,.7)}

/* Atendimentos */
.atend{background:var(--areia)}
.lista{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.item{background:#fff;border-radius:22px;padding:40px;display:flex;gap:22px;text-align:left}
.item .num{font-family:var(--fonte-titulo);font-size:2.8rem;color:var(--dourado);line-height:1}
.item h3{font-size:1.6rem;margin-bottom:8px}
.item p{font-size:.97rem;margin-bottom:14px}
.item a{color:var(--verde);border-bottom:1px solid var(--dourado);font-size:.9rem}
.item.escuro{background:var(--ameixa);color:#D8D0EA}
.item.escuro h3{color:var(--claro)}
.item.escuro a{color:var(--dourado-claro);border-color:var(--dourado-claro)}
.item.escuro .num{color:var(--dourado-claro)}

/* Sobre */
.sobre .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.foto{aspect-ratio:1;border-radius:50%;max-width:360px;width:100%;position:sticky;top:110px}
.foto-clip{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--salvia)}
.foto-clip img{object-fit:cover;object-position:50% 18%}
.foto::after{content:"";position:absolute;inset:-12px;border:1px solid var(--dourado);border-radius:50%;opacity:.6}
.sobre p{margin-bottom:16px}
.citacao{margin:24px 0 8px;padding:6px 0 6px 22px;border-left:2px solid var(--dourado);font-family:var(--fonte-titulo);font-style:italic;font-size:1.3rem;line-height:1.45;color:var(--verde)}
.selos{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.selos span{padding:7px 18px;border:1px solid var(--salvia);border-radius:30px;font-size:.85rem;color:var(--verde)}

/* FAQ */
.faq{background:#fff}
.faq .wrap{max-width:820px}
.grupo{font-family:var(--fonte-titulo);font-size:1.25rem;color:var(--dourado);margin:38px 0 10px;font-style:italic}
details{border-bottom:1px solid var(--areia)}
summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-family:var(--fonte-titulo);font-size:1.15rem;color:var(--verde);position:relative;transition:color .2s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--dourado)}
summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--fonte-texto);font-size:1.6rem;font-weight:300;color:var(--dourado);transition:.3s}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{padding:0 40px 22px 0;font-size:.98rem}
.faq-cta{margin-top:48px;text-align:center;padding:36px 24px;border-radius:22px;background:var(--creme)}
.faq-cta p{margin-bottom:16px}

/* Contato */
.contato{background:linear-gradient(135deg,var(--ameixa),#4A3670);text-align:center;color:#D8D0EA;overflow:hidden}
.contato .mandala-fundo{position:absolute;width:560px;left:50%;top:50%;margin:-280px 0 0 -280px;opacity:.12;animation:gira 160s linear infinite}
.contato .wrap{position:relative}
.contato h2{color:#fff}
.contato .eyebrow{color:var(--dourado-claro)}
.contato-info{margin-top:30px;font-size:.92rem;opacity:.85}
footer{background:#1F1430;color:#9d92b8;text-align:center;padding:30px 24px;font-size:.85rem}
footer p+p{margin-top:6px;font-size:.78rem;opacity:.75}

/* WhatsApp flutuante */
.wpp{position:fixed;right:22px;bottom:22px;z-index:50;width:62px;height:62px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:.3s}
.wpp:hover{transform:scale(1.08)}
.wpp svg{width:34px;height:34px;fill:#fff}
.wpp::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:pulso 2.4s infinite}
@keyframes pulso{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}

/* Aparecer ao rolar */
.js .surgir{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.js .surgir.visivel{opacity:1;transform:none}

@media(max-width:1300px){.logo-texto small{display:none}}
@media(max-width:1100px){.nav > .btn{display:none}}
@media(max-width:1000px){
  .menu-btn{display:flex}
  header{--nav-h:96px;--logo-t:76px;--nome-t:1.45rem}
  header.compacto{--nav-h:70px;--logo-t:50px;--nome-t:1.15rem}
  nav{position:absolute;top:var(--nav-h);left:0;right:0;background:var(--creme);border-bottom:1px solid rgba(195,154,91,.25);display:none;padding:10px 24px 22px}
  nav.aberto{display:block}
  nav ul{flex-direction:column;gap:0}
  nav li a{display:block;padding:13px 0;border-bottom:1px solid var(--areia)}
}
@media(max-width:900px){
  .sessao{background:linear-gradient(to bottom,rgba(250,245,236,.3) 0,rgba(250,245,236,.62) 260px,var(--creme) 600px),url(../img/ambiente.jpg) 80% top/auto 600px no-repeat,var(--creme)}
  .hero .wrap,.sobre .wrap,.carto .wrap,.intro-reiki,.cols3,.lista,.passos{grid-template-columns:1fr}
  .passos::before{display:none}
  .hero-foto{margin:20px auto 0;max-width:320px}
  .selo-flutuante{left:-8px}
  .intro-reiki{gap:30px;text-align:center}
  .intro-reiki .lead{margin:0 auto 20px}
  .destaque{text-align:left}
  .foto{margin:0 auto;position:relative;top:auto}
  .item{padding:30px}
  section{padding:70px 0}
}
@media(max-width:480px){
  body{font-size:16px}

  .item{flex-direction:column;gap:10px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .surgir{opacity:1;transform:none}
}