/* laluna terapias — estilos */
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

/* Layout: "o arco" — a porta do espaço como moldura recorrente. Base clara cor de areia rosada, bordô na tipografia, dourado só em detalhes. Aparência única, clara por escolha. */
:root{
  --areia:#EFE3DC;          /* fundo, rosado derivado do bordô */
  --areia-2:#E5D3CA;
  --bordo:#5A1A2B;
  --bordo-escuro:#3D0F1C;
  --dourado:#B48A3C;        /* dourado mais denso para ler sobre fundo claro */
  --dourado-claro:#E6C98A;
  --texto:#3D0F1C;
  --texto-suave:#6E4A50;
  --creme:#F5EDE3;
  --linha:rgba(90,26,43,.18);

  --f-display:"Josefin Sans","Futura","Century Gothic",system-ui,sans-serif;
  --f-texto:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;

  --t-h1:clamp(2.8rem,1.4rem + 5.6vw,6.6rem);
  --t-h2:clamp(2.2rem,1.3rem + 3.6vw,4.4rem);
  --ease:cubic-bezier(.22,.8,.24,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--areia)}
body{margin:0;background:var(--areia);color:var(--texto);font-family:var(--f-texto);font-weight:300;font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--areia)}
a{color:inherit}
:focus-visible{outline:2px solid var(--dourado);outline-offset:4px}
::selection{background:var(--bordo);color:var(--creme)}

.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:760px){.wrap{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}

.h2{font-family:var(--f-display);font-weight:200;font-size:var(--t-h2);line-height:1.02;margin:0;color:var(--bordo);text-wrap:balance}
.intro{color:var(--texto-suave);max-width:46ch;margin:18px 0 0}
.divisor{display:flex;align-items:center;gap:12px;width:180px}
.divisor i{flex:1;height:1px;background:var(--dourado)}
.divisor b{width:6px;height:6px;border-radius:50%;background:var(--dourado)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;border-radius:999px;padding:.85em 1.7em;font:400 .95rem/1 var(--f-texto);letter-spacing:.03em;cursor:pointer;border:1px solid var(--bordo);color:var(--bordo);background:transparent;transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.btn:hover{background:var(--bordo);color:var(--creme)}
.btn.cheio{background:var(--bordo);color:var(--creme)}
.btn.cheio:hover{background:var(--bordo-escuro);transform:translateY(-2px)}
.btn.claro{border-color:var(--dourado-claro);color:var(--dourado-claro)}
.btn.claro:hover{background:var(--dourado-claro);color:var(--bordo-escuro)}

/* Revelação ao rolar (só quando o JS está ativo) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---------- Header ---------- */
.topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(239,227,220,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linha)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.logo{display:flex;flex-direction:column;align-items:center;text-decoration:none;line-height:1}
.logo span{font-family:var(--f-display);font-weight:200;font-size:1.9rem;color:var(--bordo)}
.logo small{font-family:var(--f-display);font-size:.52rem;letter-spacing:.55em;padding-left:.55em;color:var(--dourado);margin-top:4px}
.nav{display:flex;align-items:center;gap:30px}
.nav a:not(.btn){text-decoration:none;font-size:.93rem;color:var(--texto-suave);transition:color .3s}
.nav a:not(.btn):hover{color:var(--bordo)}
@media (max-width:820px){.nav a:not(.btn){display:none}.nav .btn{padding:.7em 1.2em}}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(40px,7vw,100px) clamp(60px,8vw,120px)}
.hero .wrap{display:grid;gap:48px;align-items:center}
@media (min-width:900px){.hero .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.hero h1{font-family:var(--f-display);font-weight:200;font-size:var(--t-h1);line-height:1;margin:0;color:var(--bordo);text-wrap:balance}
.hero h1 .linha{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .linha span{display:inline-block;animation:sobe 1.3s var(--ease) both}
.hero h1 .linha:nth-child(2) span{animation-delay:.15s}
.hero h1 .linha:nth-child(3) span{animation-delay:.3s}
@keyframes sobe{from{transform:translateY(105%)}to{transform:none}}
.hero p{max-width:40ch;color:var(--texto-suave);font-size:1.15rem;margin:28px 0 36px;animation:aparece 1.2s .6s var(--ease) both}
.hero .acoes{display:flex;flex-wrap:wrap;gap:14px;animation:aparece 1.2s .8s var(--ease) both}
@keyframes aparece{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* O arco com a lua nascendo */
.arco{position:relative;width:min(100%,440px);aspect-ratio:4/5.4;max-width:100%;margin-inline:auto;border-radius:999px 999px 6px 6px;overflow:hidden;
  background:linear-gradient(180deg,#2A0912 0%,var(--bordo-escuro) 45%,var(--bordo) 100%)}
.arco::before{content:"";position:absolute;inset:14px;border:1px solid rgba(230,201,138,.4);border-radius:999px 999px 2px 2px;z-index:3;pointer-events:none}
.arco .lua{position:absolute;left:50%;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#FFF3D6,var(--dourado-claro) 30%,#C9A04E 62%,#8A6428);
  box-shadow:0 0 70px 18px rgba(230,201,138,.35);transform:translate(-50%,0);top:24%;animation:nasce 2.6s .2s var(--ease) both}
@keyframes nasce{from{top:88%;opacity:.2}to{top:24%;opacity:1}}
.arco .mar{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,rgba(61,15,28,0),#2A0912 70%);z-index:2}
.arco .reflexo{position:absolute;left:50%;bottom:6%;width:14%;height:26%;transform:translateX(-50%);z-index:2;
  background:repeating-linear-gradient(180deg,rgba(230,201,138,.55) 0 2px,transparent 2px 9px);filter:blur(.6px);opacity:.6;animation:ondula 4s ease-in-out infinite}
@keyframes ondula{0%,100%{transform:translateX(-50%) scaleX(1)}50%{transform:translateX(-50%) scaleX(1.5)}}
.arco .estrela{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--dourado-claro);animation:pisca 3s ease-in-out infinite}
@keyframes pisca{0%,100%{opacity:.2}50%{opacity:1}}
.arco .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;animation:aparece 1.6s .3s var(--ease) both}
.arco figcaption{position:absolute;left:0;right:0;bottom:22px;text-align:center;z-index:4;font-size:.8rem;color:rgba(245,237,227,.7)}

/* Faixa de palavras em movimento */
.faixa{background:var(--bordo);color:var(--dourado-claro);overflow:hidden;padding-block:20px;border-block:1px solid rgba(230,201,138,.25)}
.faixa .trilho{display:flex;width:max-content;animation:corre 38s linear infinite}
.faixa span{font-family:var(--f-display);font-weight:200;font-size:clamp(1.4rem,1rem + 1.6vw,2.2rem);padding-inline:28px;white-space:nowrap;display:flex;align-items:center;gap:56px}
.faixa span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--dourado-claro)}
@keyframes corre{to{transform:translateX(-50%)}}

/* ---------- O espaço ---------- */
.secao{padding-block:clamp(80px,11vw,150px)}
.espaco .wrap{display:grid;gap:56px}
@media (min-width:900px){.espaco .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.espaco .destaque{font-family:var(--f-display);font-weight:200;font-size:clamp(1.6rem,1.1rem + 1.8vw,2.5rem);line-height:1.3;color:var(--bordo);margin:0 0 28px;max-width:28ch}
.espaco p{color:var(--texto-suave);max-width:58ch;margin:0 0 1.1em}
.pilares{display:grid;gap:0;margin-top:44px;border-top:1px solid var(--linha)}
.pilar{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;padding:24px 0;border-bottom:1px solid var(--linha)}
.pilar svg{width:44px;height:44px}
.pilar h3{font-family:var(--f-display);font-weight:300;font-size:1.35rem;margin:0 0 4px;color:var(--bordo)}
.pilar p{margin:0}
.nota{font-size:.82rem;color:var(--dourado);margin-top:20px}
/* Coluna do título do espaço: fixa ao rolar só no computador. No celular rola junto com a página. */
.espaco .sticky-tit{position:relative;top:auto}
@media (min-width:900px){.espaco .sticky-tit{position:sticky;top:110px}}
@media (max-width:899px){.espaco .sticky-tit,.espaco .sticky-tit *{position:relative!important;top:auto!important}}
.foto-espaco{margin:32px 0 0;width:min(100%,300px);aspect-ratio:4/5.4;max-width:100%;border-radius:999px 999px 6px 6px;overflow:hidden;background:var(--bordo)}
.foto-espaco img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Serviços: lista que abre + arco que muda ---------- */
.servicos{background:var(--areia-2)}
.serv-grid{display:grid;gap:48px;margin-top:56px}
@media (min-width:900px){.serv-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:start}}
.acordeao{border-top:1px solid var(--linha)}
.ter{border-bottom:1px solid var(--linha)}
.ter button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;width:100%;padding:22px 0;cursor:pointer}
.ter button:focus-visible{outline:2px solid var(--dourado);outline-offset:4px}
.ter h3{font-family:var(--f-display);font-weight:200;font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem);margin:0;color:var(--bordo);transition:transform .5s var(--ease)}
.ter button:hover h3{transform:translateX(10px)}
.ter .mais{width:30px;height:30px;position:relative;flex:none}
.ter .mais::before,.ter .mais::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:1px;background:var(--bordo);transition:transform .45s var(--ease)}
.ter .mais::after{transform:rotate(90deg)}
.ter.aberta .mais::after{transform:rotate(0)}
.ter .corpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.ter.aberta .corpo{grid-template-rows:1fr}
.ter .corpo > div{overflow:hidden}
.ter .corpo p{margin:0 0 14px;color:var(--texto-suave);max-width:48ch}
.ter .mini{width:100%;max-width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:120px 120px 4px 4px;margin:0 0 16px;display:block}
@media (min-width:900px){.ter .mini{display:none}}
.ter .meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-bottom:24px;font-size:.85rem;color:var(--texto-suave)}
.ter .meta a{color:var(--bordo);text-underline-offset:4px}
.vitrine{position:sticky;top:110px;display:none}
@media (min-width:900px){.vitrine{display:block}}
.vitrine .arco{width:100%}
.vitrine .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s var(--ease),transform 1.2s var(--ease);opacity:0;transform:scale(1.06)}
.vitrine .foto.on{transform:none}
.vitrine .foto.on{opacity:1}
.vitrine .rotulo{position:absolute;left:0;right:0;bottom:36px;text-align:center;z-index:4;font-family:var(--f-display);font-weight:200;font-size:1.6rem;color:var(--creme)}

/* ---------- Terapeutas: carrossel ---------- */
.terapeutas .cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px}
.setas{display:flex;gap:10px}
.seta{width:52px;height:52px;border-radius:50%;border:1px solid var(--bordo);background:transparent;color:var(--bordo);cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s}
.seta:hover:not(:disabled){background:var(--bordo);color:var(--creme)}
.seta:disabled{opacity:.3;cursor:default}
.seta svg{width:20px;height:20px}
.carrossel{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:48px 0 12px;margin-top:8px;scrollbar-width:none;cursor:grab;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));scroll-padding-inline:max(16px,env(safe-area-inset-left,0px))}
.carrossel::-webkit-scrollbar{display:none}
.carrossel.arrastando{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
@media (min-width:760px){.carrossel{padding-left:max(40px,calc((100vw - 1320px)/2 + 40px));padding-right:40px;scroll-padding-inline:max(40px,calc((100vw - 1320px)/2 + 40px))}}
.card{flex:0 0 min(78vw,320px);scroll-snap-align:start;user-select:none}
.card .foto-t{position:relative;aspect-ratio:3/4;max-width:100%;border-radius:999px 999px 6px 6px;overflow:hidden;display:grid;place-items:center;
  transition:transform .7s var(--ease)}
.card:hover .foto-t{transform:translateY(-8px)}
.foto-img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.card .foto-t .foto-img{position:absolute;inset:0;transition:transform 1s var(--ease)}
.card:hover .foto-t .foto-img{transform:scale(1.04)}
.card h3{font-family:var(--f-display);font-weight:300;font-size:1.55rem;color:var(--bordo);margin:20px 0 2px}
.card p{margin:0 0 14px;color:var(--texto-suave);font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.chips li{list-style:none;font-size:.78rem;padding:4px 12px;border:1px solid var(--linha);border-radius:999px;color:var(--texto-suave)}
.chips{padding:0;margin-top:0}
.card a{font-size:.92rem;color:var(--bordo);text-underline-offset:4px}
.pontos{display:flex;justify-content:center;gap:8px;margin-top:28px}
.pontos button{width:28px;height:16px;border:0;background:none;cursor:pointer;position:relative;padding:0}
.pontos button::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--linha);transition:background .3s}
.pontos button[aria-current="true"]::after{background:var(--bordo)}
.aviso{display:inline-block;font-size:.8rem;color:var(--dourado);border:1px dashed rgba(180,138,60,.6);border-radius:999px;padding:3px 12px;margin-top:14px}

/* ---------- Onde estamos ---------- */
.onde{background:var(--bordo-escuro);color:var(--creme)}
.onde .h2{color:var(--creme)}
.onde .wrap{display:grid;gap:48px}
@media (min-width:900px){.onde .wrap{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:center}}
.onde address{font-style:normal;font-size:1.15rem;margin:28px 0 8px;line-height:1.6}
.onde .sub{color:rgba(245,237,227,.68);font-size:.95rem;margin:0 0 30px;max-width:40ch}
.onde .acoes{display:flex;flex-wrap:wrap;gap:12px}
.copiar{background:none;border:0;padding:0;margin-top:18px;font:inherit;font-size:.88rem;color:rgba(245,237,227,.7);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.mapa{position:relative;aspect-ratio:16/11;max-width:100%;border-radius:220px 220px 8px 8px;overflow:hidden;background:#2A0912;border:1px solid rgba(230,201,138,.25)}
.mapa svg.ilustra{position:absolute;inset:0;width:100%;height:100%}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:sepia(.35) saturate(.85)}
.pino{position:absolute;left:58%;top:46%;transform:translate(-50%,-100%);display:grid;justify-items:center;z-index:2}
.pino b{width:20px;height:20px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--dourado-claro);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.pino::after{content:"";position:absolute;bottom:-8px;width:16px;height:16px;border-radius:50%;border:1px solid var(--dourado-claro);animation:onda 2.4s ease-out infinite}
@keyframes onda{from{transform:scale(.6);opacity:1}to{transform:scale(3.4);opacity:0}}
.pino span{position:absolute;bottom:34px;white-space:nowrap;background:var(--creme);color:var(--bordo);font-size:.8rem;padding:4px 12px;border-radius:999px}

/* ---------- Final ---------- */
.final{text-align:center}
.final .h2{margin-inline:auto;max-width:16ch}
.final .divisor{margin:34px auto}
.rodape{border-top:1px solid var(--linha);padding-block:36px}
.rodape .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 30px;font-size:.88rem;color:var(--texto-suave)}
.rodape nav{display:flex;flex-wrap:wrap;gap:22px}
.rodape a{text-decoration:none}.rodape a:hover{color:var(--bordo)}

.wa{position:fixed;z-index:45;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--bordo);color:var(--dourado-claro);box-shadow:0 10px 26px rgba(61,15,28,.35);transition:transform .35s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:26px;height:26px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html,.carrossel{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none}
}