/* ============================================================
   MARLY OLIVEIRA — CATÁLOGO DE TERAPIAS INTEGRATIVAS E MASSAGENS
   Estética: editorial premium de wellness — madeira, linho,
   verde oliva, areia, branco quente, respiro.
   Tokens do DESIGN-SYSTEM.md do projeto.
   ============================================================ */

:root{
  --verde-escuro:#3a4a38;
  --verde:#5d7052;
  --verde-suave:#8a9a7e;
  --terracota:#b5764f;
  --terracota-claro:#d9a984;
  --dourado:#a98c4b;
  --creme:#faf6ef;
  --creme-escuro:#f1e9dc;
  --branco-quente:#fffdf9;
  --texto:#3c3a34;
  --texto-suave:#6b6759;
  --maxw:1160px;
  --raio:20px;
  --sombra:0 24px 60px -30px rgba(58,74,56,.35);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);
  font-size:19px;
  line-height:1.65;
  color:var(--texto);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
ul{list-style:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.wrap--narrow{max-width:740px}
.center{text-align:center}

section{padding:clamp(90px,11vw,150px) 0}

/* ---------- Tipografia ---------- */
.kicker{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--terracota);
  margin-bottom:26px;
}
.kicker--claro{color:var(--terracota-claro)}

h1,h2,h3{font-family:var(--serif);color:var(--verde-escuro);font-weight:600;line-height:1.12}

.display{
  font-size:clamp(2.3rem,5vw,3.8rem);
  letter-spacing:-.01em;
  margin-bottom:28px;
}
.lead{
  font-size:clamp(1.15rem,1.8vw,1.35rem);
  color:var(--texto-suave);
  max-width:620px;
}
.center .lead{margin:0 auto}

/* ---------- Botões ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:#fff;
  background:var(--terracota);
  padding:19px 42px;
  border-radius:60px;
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{background:#a06340;transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(181,118,79,.6)}
.btn--lg{padding:22px 54px;font-size:.9rem}
.btn--sm{padding:12px 26px;font-size:.72rem}
.btn--outline{
  background:transparent;
  color:var(--terracota);
  box-shadow:inset 0 0 0 1.5px var(--terracota);
}
.btn--outline:hover{background:var(--terracota);color:#fff}
.btn--ghost{
  background:rgba(250,246,239,.88);
  color:var(--verde-escuro);
  box-shadow:inset 0 0 0 1.5px rgba(58,74,56,.35);
}
.btn--ghost:hover{background:var(--verde-escuro);color:var(--creme);box-shadow:none}

/* ---------- Topbar ---------- */
.topbar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  padding:14px 0;
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
.topbar.scrolled{
  background:rgba(250,246,239,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(58,74,56,.1);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between}
.brand{
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:600;
  color:var(--verde-escuro);
  text-decoration:none;
  letter-spacing:.01em;
  padding:8px 18px;
  border-radius:40px;
  background:rgba(250,246,239,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.topbar.scrolled .brand{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.brand span{margin-left:4px}

/* ---------- Hero (duas colunas: texto + foto emoldurada) ---------- */
.hero{
  padding-top:clamp(140px,16vw,190px);
  padding-bottom:clamp(70px,9vw,110px);
  background:
    radial-gradient(1100px 500px at 85% -10%,rgba(217,169,132,.16),transparent 60%),
    var(--creme);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(40px,6vw,90px);
  align-items:center;
}
.hero h1{
  font-size:clamp(2.4rem,4.4vw,3.8rem);
  line-height:1.1;
  margin-bottom:26px;
}
.hero h1 em{font-style:italic;color:var(--verde)}
.hero-sub{
  font-size:clamp(1.15rem,1.7vw,1.3rem);
  color:var(--texto-suave);
  max-width:520px;
  margin-bottom:38px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:26px}
.hero-note{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--texto-suave);
}
.hero-media{position:relative;justify-self:end;max-width:440px}
.hero-media img{
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  border:1px solid rgba(58,74,56,.1);
}
.hero-selo{
  position:absolute;
  left:50%;bottom:-16px;
  transform:translateX(-50%);
  white-space:nowrap;
  font-family:var(--sans);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--verde-escuro);
  background:var(--branco-quente);
  border:1px solid rgba(58,74,56,.14);
  border-radius:40px;
  padding:9px 20px;
  box-shadow:0 10px 24px -14px rgba(58,74,56,.4);
}

/* ---------- Faixa de credenciais (loop infinito) ---------- */
.creds{
  background:var(--verde-escuro);
  padding:22px 0;
  overflow:hidden;
}
.creds-track{
  display:flex;
  width:max-content;
  animation:creds-loop 36s linear infinite;
}
.creds-track:hover{animation-play-state:paused}
.creds-group{
  display:flex;
  align-items:center;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--creme-escuro);
  white-space:nowrap;
}
.creds-group span{padding:0 22px}
.creds-dot{color:var(--terracota-claro);padding:0!important}
@keyframes creds-loop{
  to{transform:translateX(-50%)}
}

/* ---------- Sobre ---------- */
.sobre{background:var(--branco-quente)}
.sobre-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:clamp(40px,6vw,90px);
  align-items:center;
}
.sobre-media img{border-radius:var(--raio);box-shadow:var(--sombra)}
.sobre-copy h2{font-size:clamp(2rem,3.4vw,3rem);margin-bottom:14px}
.sobre-creds{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--verde);
  margin-bottom:24px;
}
.sobre-copy>p:not(.sobre-creds):not(.kicker){color:var(--texto-suave);margin-bottom:22px}
.sobre-quote{
  font-size:clamp(1.3rem,2vw,1.6rem);
  font-style:italic;
  color:var(--verde-escuro);
  border-left:3px solid var(--terracota);
  padding-left:24px;
  line-height:1.4;
  margin:30px 0 26px;
}
.sobre-insta{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--terracota);
  text-decoration:none;
  border-bottom:1px solid var(--terracota-claro);
  padding-bottom:3px;
}
.sobre-insta:hover{color:#a06340}

/* ---------- Catálogo (cardápio de terapias) ---------- */
.menu-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:clamp(50px,6vw,80px);
}
.terapia{
  display:flex;
  flex-direction:column;
  background:var(--branco-quente);
  border:1px solid rgba(58,74,56,.12);
  border-radius:var(--raio);
  overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.terapia:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 60px -28px rgba(58,74,56,.35);
  border-color:var(--verde-suave);
}
/* foto no topo do card, como num cardápio */
.terapia-foto{
  margin:0;
  aspect-ratio:16/10;
  overflow:hidden;
  border-bottom:1px solid rgba(58,74,56,.08);
}
.terapia-foto img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.terapia:hover .terapia-foto img{transform:scale(1.05)}
/* variante ornamental para terapias ainda sem foto */
.terapia-foto--orn{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif);
  font-size:3.4rem;
  color:var(--terracota-claro);
  background:
    radial-gradient(420px 200px at 50% 120%,rgba(217,169,132,.25),transparent 70%),
    var(--creme-escuro);
}
.terapia-corpo{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:clamp(24px,2.8vw,34px);
}
.terapia-tag{
  font-family:var(--sans);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dourado);
  margin-bottom:16px;
}
.terapia h3{font-size:1.45rem;margin-bottom:10px}
.terapia-corpo>p:not(.terapia-tag){font-size:.98rem;color:var(--texto-suave);flex:1}
.terapia-rodape{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid rgba(58,74,56,.12);
}
.terapia-preco{
  font-family:var(--serif);
  font-size:1.7rem;
  font-weight:600;
  color:var(--verde-escuro);
}
.terapia-preco em{
  display:block;
  font-family:var(--sans);
  font-style:normal;
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--texto-suave);
  margin-top:2px;
}
.terapia-cta{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--terracota);
  text-decoration:none;
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.terapia-cta:hover{color:#a06340}
/* card solitário na última linha do grid de 3 colunas fica centralizado */
@media(min-width:1025px){
  .menu-grid .terapia:last-child:nth-child(3n+1){grid-column:2}
}
.catalogo-nota{
  font-size:1.15rem;
  font-style:italic;
  color:var(--texto-suave);
  max-width:520px;
  margin:clamp(50px,6vw,70px) auto 26px;
}

/* ---------- Galeria ---------- */
.galeria{background:var(--creme-escuro)}
.galeria-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  margin-top:clamp(50px,6vw,80px);
}
.galeria-item{position:relative;border-radius:var(--raio);overflow:hidden}
.galeria-item img{aspect-ratio:3/4;object-fit:cover;width:100%;transition:transform .8s var(--ease)}
.galeria-item:hover img{transform:scale(1.04)}
.galeria-item figcaption{
  position:absolute;
  inset:auto 0 0 0;
  padding:70px 22px 22px;
  background:linear-gradient(to top,rgba(30,38,29,.85),transparent);
}
.galeria-item h3{color:#fff;font-size:1.4rem;margin-bottom:4px}
.galeria-item p{color:rgba(250,246,239,.85);font-size:.92rem;line-height:1.45}

/* ---------- Pacotes ---------- */
.pacotes{background:var(--branco-quente)}
.pacotes-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  margin-top:clamp(50px,6vw,80px);
}
.pacote{
  background:var(--creme);
  border:1px solid rgba(58,74,56,.12);
  border-radius:var(--raio);
  padding:clamp(34px,4vw,52px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.pacote--destaque{
  grid-column:1/-1;
  background:var(--verde-escuro);
  border-color:var(--verde-escuro);
  box-shadow:0 40px 90px -34px rgba(58,74,56,.65);
}
.pacote-tag{
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--terracota);
  margin-bottom:18px;
}
.pacote--destaque .pacote-tag{color:var(--terracota-claro)}
.pacote h3{font-size:clamp(1.7rem,2.6vw,2.2rem);margin-bottom:14px}
.pacote--destaque h3{color:var(--creme)}
.pacote-desc{color:var(--texto-suave);margin-bottom:22px;max-width:720px}
.pacote--destaque .pacote-desc{color:rgba(250,246,239,.78)}
.pacote-sub{
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dourado);
  margin:8px 0 10px;
}
.pacote--destaque .pacote-sub{color:var(--terracota-claro)}
.pacote-lista{margin-bottom:14px}
.pacote-lista li{
  padding:6px 0 6px 24px;
  position:relative;
  font-size:1.02rem;
}
.pacote--destaque .pacote-lista li{color:var(--creme-escuro)}
.pacote-lista li::before{
  content:'✓';
  position:absolute;left:0;
  color:var(--verde);
  font-family:var(--sans);
  font-weight:600;
  font-size:.9rem;
}
.pacote--destaque .pacote-lista li::before{color:var(--terracota-claro)}
.pacote-preco{
  font-family:var(--serif);
  font-size:clamp(2.2rem,3.4vw,2.8rem);
  font-weight:600;
  color:var(--verde-escuro);
  line-height:1.1;
  margin:auto 0 24px;
  padding-top:18px;
}
.pacote--destaque .pacote-preco{color:var(--creme)}
.pacote-preco em{
  display:block;
  font-family:var(--sans);
  font-style:normal;
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--texto-suave);
  margin-top:4px;
}
.pacote--destaque .pacote-preco em{color:rgba(250,246,239,.6)}

/* ---------- Consultas ---------- */
.consultas-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:26px;
  margin-top:clamp(50px,6vw,80px);
}
.consulta-card{
  background:var(--branco-quente);
  border:1px solid rgba(58,74,56,.12);
  border-radius:var(--raio);
  padding:clamp(34px,4vw,52px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.consulta-card--escura{
  background:var(--verde-escuro);
  border-color:var(--verde-escuro);
}
.consulta-tag{
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--terracota);
  margin-bottom:18px;
}
.consulta-card--escura .consulta-tag{color:var(--terracota-claro)}
.consulta-card h3{font-size:clamp(1.6rem,2.4vw,2rem);margin-bottom:14px}
.consulta-card--escura h3{color:var(--creme)}
.consulta-card>p:not(.consulta-tag):not(.consulta-preco){color:var(--texto-suave);margin-bottom:20px}
.consulta-card--escura>p:not(.consulta-tag):not(.consulta-preco){color:rgba(250,246,239,.78)}
.consulta-lista{margin-bottom:10px}
.consulta-lista li{
  padding:6px 0 6px 24px;
  position:relative;
  font-size:1.02rem;
  color:var(--creme-escuro);
}
.consulta-lista li::before{
  content:'✓';
  position:absolute;left:0;
  color:var(--terracota-claro);
  font-family:var(--sans);
  font-weight:600;
  font-size:.9rem;
}
.consulta-preco{
  font-family:var(--serif);
  font-size:clamp(2rem,3vw,2.5rem);
  font-weight:600;
  color:var(--verde-escuro);
  line-height:1.1;
  margin:auto 0 24px;
  padding-top:16px;
}
.consulta-card--escura .consulta-preco{color:var(--creme)}
.consulta-preco em{
  display:block;
  font-family:var(--sans);
  font-style:normal;
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--texto-suave);
  margin-top:4px;
}
.consulta-card--escura .consulta-preco em{color:rgba(250,246,239,.6)}

/* ---------- No dia da sessão ---------- */
.preparo{background:var(--branco-quente)}
.preparo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:38px;
  margin-top:clamp(50px,6vw,80px);
}
.dica{border-top:1px solid rgba(58,74,56,.18);padding-top:26px}
.dica-num{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--dourado);
  display:block;
  margin-bottom:14px;
}
.dica h3{font-size:1.4rem;margin-bottom:10px}
.dica p{font-size:1rem;color:var(--texto-suave)}

/* ---------- Política + Pagamento ---------- */
.infos{padding-top:0;background:var(--branco-quente)}
.infos-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
}
.info-bloco{
  background:var(--creme);
  border:1px solid rgba(58,74,56,.1);
  border-radius:var(--raio);
  padding:clamp(32px,3.6vw,46px);
}
.info-bloco .kicker{margin-bottom:20px}
.info-lista li{
  padding:11px 0;
  border-bottom:1px solid rgba(58,74,56,.09);
  font-size:1.05rem;
  color:var(--texto-suave);
}
.info-lista li:last-child{border-bottom:none}
.info-lista strong{color:var(--verde-escuro);font-weight:600}

/* ---------- CTA Final ---------- */
.final{position:relative;overflow:hidden;padding:clamp(120px,15vw,200px) 0}
.final-bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center 30%;
}
.final-bg::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(rgba(30,38,29,.78),rgba(30,38,29,.86));
}
.final-inner{position:relative;z-index:1}
.final .display{color:var(--creme)}
.final-sub{
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(250,246,239,.75);
  margin-bottom:40px;
}
.final-insta{margin-top:30px}
.final-insta a{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--terracota-claro);
  text-decoration:none;
  border-bottom:1px solid rgba(217,169,132,.5);
  padding-bottom:3px;
}
.final-insta a:hover{color:var(--creme)}

/* ---------- Footer ---------- */
.footer{background:var(--verde-escuro);padding:56px 0}
.footer-inner{text-align:center}
.footer-brand{
  font-family:var(--serif);
  font-size:1.15rem;
  color:var(--creme);
  margin-bottom:14px;
}
.footer-note{
  font-size:.92rem;
  color:rgba(250,246,239,.6);
  max-width:520px;
  margin:0 auto 18px;
}
.footer-copy{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(250,246,239,.45);
}

/* ---------- Botão flutuante WhatsApp ---------- */
.zap-flutuante{
  position:fixed;
  right:22px;bottom:22px;
  z-index:70;
  width:58px;height:58px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25d366;
  color:#fff;
  box-shadow:0 14px 34px -12px rgba(20,80,40,.55);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.zap-flutuante svg{width:30px;height:30px}
.zap-flutuante:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 18px 40px -12px rgba(20,80,40,.65)}

/* ---------- Barra CTA mobile ---------- */
.cta-mobile{
  position:fixed;
  inset:auto 0 0 0;
  z-index:60;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:rgba(250,246,239,.96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(58,74,56,.15);
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  transform:translateY(110%);
  transition:transform .4s var(--ease);
}
.cta-mobile.show{transform:translateY(0)}
.cta-mobile-info strong{
  display:block;
  font-family:var(--sans);
  font-size:.8rem;
  color:var(--verde-escuro);
}
.cta-mobile-info span{
  font-family:var(--sans);
  font-size:.68rem;
  color:var(--texto-suave);
}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsivo ---------- */
@media(max-width:1024px){
  .menu-grid{grid-template-columns:repeat(2,1fr)}
  .galeria-grid{grid-template-columns:repeat(2,1fr)}
  .preparo-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-media{justify-self:center;max-width:420px;margin-top:10px}
  .sobre-grid{grid-template-columns:1fr}
  .sobre-media{max-width:420px}
  .consultas-grid,.pacotes-grid{grid-template-columns:1fr}
  .infos-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  body{font-size:17.5px}
  section{padding:72px 0}
  .cta-mobile{display:flex}
  .topbar .btn{display:none}
  .menu-grid{grid-template-columns:1fr}
  .zap-flutuante{bottom:84px;right:16px;width:52px;height:52px}
  .zap-flutuante svg{width:26px;height:26px}
  .footer{padding-bottom:110px}
}
@media(max-width:520px){
  .galeria-grid{grid-template-columns:1fr}
  .galeria-item img{aspect-ratio:4/3}
  .preparo-grid{grid-template-columns:1fr}
  .hero-actions .btn{width:100%;text-align:center}
}

/* ---------- Acessibilidade ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.galeria-item img,.terapia,.zap-flutuante{transition:none}
  .creds-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .creds-group{flex-wrap:wrap;justify-content:center;white-space:normal}
  .creds-group[aria-hidden]{display:none}
}