/* ═══════════════════════════════════════════
   DESIGN SYSTEM — Dra. Clara Dantas
   Tokens, reset, sistema de páginas e
   componentes compartilhados.
═══════════════════════════════════════════ */

:root {
  /* Paleta oficial (rosé / nude) */
  --rose-900:#5F3F37;
  --rose-800:#744E44;
  --rose-700:#8E6357;
  --rose-600:#9E7368;
  --rose-500:#AF867B;   /* primária */
  --rose-400:#C09B91;
  --rose-300:#CEAEA5;
  --rose-200:#E8D5D0;
  --rose-100:#F3E4DF;
  --rose-050:#FEF7F4;   /* fundo */

  /* Tipografia / superfícies */
  --ink:#2B211E;
  --ink-2:#55443E;
  --dim:#9B837B;
  --card:#FFFFFF;
  --card-2:#FDF3EF;
  --line:rgba(175,134,123,.22);
  --line-soft:rgba(175,134,123,.13);

  --shadow-sm:0 2px 10px -4px rgba(94,63,55,.18);
  --shadow-md:0 14px 34px -18px rgba(94,63,55,.34);
  --shadow-lg:0 26px 60px -28px rgba(94,63,55,.45);

  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);

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

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

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

/* Rótulo micro (eyebrow) */
.eyebrow{
  font-family:var(--ff-mono);font-size:9px;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:var(--rose-600);
}

/* Divisor com título central */
.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(--rose-600);white-space:nowrap;
}

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

/* Botão principal */
.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(--rose-500),var(--rose-700));
  color:#FFF8F5;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(255,244,240,.72);margin-top:3px}
.cta-btn .cta-arr{font-size:17px;color:#FFF1EC;flex-shrink:0}

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

/* Ripple */
.ripple{position:absolute;border-radius:50%;background:rgba(175,134,123,.20);transform:scale(0);animation:rip .5s ease-out;pointer-events:none}

/* ── 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}
}