/* ═══════════════════════════════════════════
   DESIGN SYSTEM — Liliane Medeiros, Psicóloga
═══════════════════════════════════════════ */

:root{
  /* Paleta oficial (verde-sálvia / terracota) */
  --sage-900:#2E3A2B;
  --sage-800:#3B4A37;
  --sage-700:#4B5D45;
  --sage-600:#5D7155;
  --sage-500:#71876A;   /* primária */
  --sage-400:#8CA184;
  --sage-300:#ABBFA4;
  --sage-100:#E4ECDF;
  --sage-050:#F9FAF6;   /* fundo */

  --clay-700:#A8593D;
  --clay-600:#BC6746;
  --clay-500:#C97B5A;    /* acento */
  --clay-400:#D89676;
  --clay-100:#F6E5DB;

  --ink:#2B3129;
  --ink-2:#525F4E;
  --dim:#93A28D;

  --card:#FFFFFF;
  --card-2:#F2F5EE;
  --line:rgba(74,93,69,.16);
  --line-soft:rgba(74,93,69,.09);

  --shadow-sm:0 2px 10px -4px rgba(46,58,43,.16);
  --shadow-md:0 14px 34px -18px rgba(46,58,43,.28);
  --shadow-lg:0 26px 60px -28px rgba(46,58,43,.38);

  --r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:28px;

  --ff-display:'Fraunces',Georgia,serif;
  --ff-sans:'Jost',system-ui,-apple-system,sans-serif;
  --ff-mono:'JetBrains Mono',monospace;

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--sage-050)}
body{
  font-family:var(--ff-sans);font-weight:300;color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:var(--clay-600);text-decoration:none}
::selection{background:var(--sage-100);color:var(--sage-900)}

/* ── Ambiente: brumas suaves no fundo ── */
#amb{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#amb i{position:absolute;display:block;border-radius:50%;filter:blur(60px);opacity:.45}
#amb i:nth-child(1){width:340px;height:340px;top:-90px;left:-110px;background:var(--sage-100);animation:drift 22s ease-in-out infinite}
#amb i:nth-child(2){width:280px;height:280px;top:38%;right:-120px;background:var(--clay-100);animation:drift 28s ease-in-out infinite reverse}
#amb i:nth-child(3){width:320px;height:320px;bottom:-120px;left:-80px;background:var(--sage-100);animation:drift 26s ease-in-out infinite}

/* ══════════════════════════════
   SISTEMA DE PÁGINAS (SPA)
══════════════════════════════ */
.pg{
  position:fixed;inset:0;z-index:10;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  background:var(--sage-050);
  transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s;will-change:transform;
}
#home{z-index:5;transform:none;background:transparent}
#home.behind{transform:scale(.94) translateX(-4%);opacity:.4;pointer-events:none}
.subpg{transform:translateX(100%);z-index:20}
.subpg.active{transform:translateX(0)}

/* ══════════════════════════════
   COMPONENTES COMPARTILHADOS
══════════════════════════════ */

.eyebrow{
  font-family:var(--ff-mono);font-size:9px;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:var(--sage-600);
}

.dv{display:flex;align-items:center;gap:12px;padding:34px 0 16px}
.dl{height:1px;flex:1;background:var(--line)}
.dt{
  font-family:var(--ff-mono);font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--sage-600);white-space:nowrap;
}

.tag{
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  font-size:11.5px;letter-spacing:.06em;color:var(--sage-800);background:rgba(255,255,255,.55);
}

.cta-btn{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;padding:17px 22px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--sage-600),var(--sage-800));
  color:#F8FBF5;font-size:15.5px;font-weight:400;letter-spacing:.01em;
  box-shadow:var(--shadow-md);transition:transform .2s,box-shadow .2s;
}
.cta-btn:active{transform:scale(.985)}
.cta-btn .cta-sub{display:block;font-size:12px;color:rgba(248,251,245,.72);margin-top:3px}
.cta-btn .cta-arr{font-size:17px;color:#EFF6EA;flex-shrink:0}

.cta-ghost{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:15px 22px;border-radius:var(--r-lg);
  border:1px solid var(--sage-300);color:var(--sage-800);
  font-size:14.5px;background:rgba(255,255,255,.6);transition:border-color .2s,background .2s;
}
.cta-ghost:active{background:var(--sage-100)}

.ripple{position:absolute;border-radius:50%;background:rgba(113,135,106,.20);transform:scale(0);animation:rip .5s ease-out;pointer-events:none}

/* ── Carrossel: uma foto por vez, passando sozinho (ver bindCarrossel
   em js/app.js). Usado nas Novidades da home, em Gotas de terapia e no
   detalhe de cada clínica.
   `contain` + proporção quadrada: mostra a arte inteira, sem cortar
   texto — as artes vêm do Instagram, então recortar come o conteúdo. ── */
.carrossel{overflow:hidden}
.carrossel-trilha{
  display:flex;align-items:flex-start;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.carrossel-trilha::-webkit-scrollbar{display:none}
/* a foto define a altura do slide — sem fundo sobrando em volta, e a
   arte aparece inteira, seja ela quadrada ou em pé */
.carrossel-slide{
  flex:0 0 100%;scroll-snap-align:center;position:relative;
  padding:0;display:block;overflow:hidden;
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
}
.carrossel-slide img{width:100%;height:auto;display:block}
.carrossel-dots{display:flex;justify-content:center;gap:7px;padding:12px 0 2px}
.carrossel-dot{
  width:6px;height:6px;border-radius:50%;padding:0;border:none;
  background:var(--line);transition:background .2s,transform .2s;
}
.carrossel-dot.active{background:var(--clay-500);transform:scale(1.4)}

/* ── Animações ── */
@keyframes fadeU{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeD{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes rip{to{transform:scale(4);opacity:0}}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,-30px)}}
@keyframes td{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-5px);opacity:1}}
@keyframes bk{0%,100%{opacity:1}50%{opacity:.3}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}