/* Sistema base compartido — Mauro & Javi */
:root{
  /* Cosmos noche */
  --void:#0a0612;
  --night:#1a0f2e;
  --purple-deep:#2a1b4a;
  --purple-mid:#3d2a6e;
  --purple-soft:#5a3a8a;
  --purple-mist:rgba(90,58,138,.18);

  /* Dorado */
  --gold:#c9a14a;
  --gold-light:#e8c87a;
  --gold-pale:#f5e4b8;
  --gold-glow:rgba(201,161,74,.14);

  /* Washi (día) */
  --washi:#f5efe4;
  --washi-alt:#ebe2d0;
  --washi-warm:#f0e6d2;
  --paper:#fffdf7;

  /* Tinta sumi */
  --ink:#1a1520;
  --ink-mid:#4a3f50;
  --ink-light:#8a8090;
  --ink-faint:rgba(26,21,32,.08);

  /* Cream para texto sobre oscuro */
  --cream:#f0e8d8;
  --cream-soft:rgba(240,232,216,.7);
  --cream-muted:rgba(240,232,216,.4);

  /* Soporte */
  --green:#5a8a50;
  --red-soft:#c46a55;

  /* Tipos */
  --f-display:'Cormorant Garamond',serif;
  --f-cinzel:'Cinzel',serif;
  --f-body:'Manrope',sans-serif;
  --f-jp:'Noto Serif JP',serif;

  /* Forma */
  --r:14px;
  --rs:8px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);background:var(--void);color:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ── Sumi-e divider ── */
.sumi-divider{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:1.5rem auto;max-width:340px}
.sumi-divider::before,.sumi-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}
.sumi-divider .d-mark{font-family:var(--f-jp);font-size:1.1rem;color:var(--gold);opacity:.7}

/* ── Enso (círculo zen) ── */
.enso{display:inline-block;width:60px;height:60px;border-radius:50%;border:1.5px solid var(--gold);border-right-color:transparent;border-bottom-color:rgba(201,161,74,.4);transform:rotate(-25deg);opacity:.8}

/* ── Tarot card frame ── */
.tarot-frame{position:relative;border:1.5px solid var(--gold);border-radius:6px;padding:1.5rem;background:linear-gradient(180deg,rgba(58,40,110,.08) 0%,rgba(42,27,74,.04) 100%)}
.tarot-frame::before,.tarot-frame::after{content:'';position:absolute;width:24px;height:24px;border:1.5px solid var(--gold-light)}
.tarot-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.tarot-frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ── Botones ── */
.btn-g{display:inline-block;padding:.85rem 2rem;background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 100%);color:var(--void);border:0;border-radius:50px;font-family:var(--f-cinzel);font-weight:500;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:transform .25s,box-shadow .25s;text-decoration:none}
.btn-g:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(201,161,74,.25)}
.btn-ghost{display:inline-block;padding:.8rem 1.8rem;background:transparent;color:var(--gold);border:1px solid var(--gold);border-radius:50px;font-family:var(--f-cinzel);font-weight:500;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background .3s}
.btn-ghost:hover{background:var(--gold-glow)}

/* ── Toast ── */
.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(120%);background:var(--ink);color:var(--cream);padding:.9rem 1.8rem;border-radius:50px;font-size:.9rem;z-index:300;transition:transform .4s ease;border:1px solid var(--gold);box-shadow:0 8px 32px rgba(0,0,0,.3)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ── Animaciones ── */
@keyframes fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes float-petal{0%{transform:translateY(-10px) rotate(0deg);opacity:0}10%{opacity:.7}90%{opacity:.5}100%{transform:translateY(110vh) rotate(360deg);opacity:0}}
@keyframes pulse-soft{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
@keyframes draw-stroke{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}

/* ── Sakura petal ── */
.sakura-layer{position:fixed;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.petal{position:absolute;width:10px;height:10px;animation:float-petal linear infinite}
.petal svg{width:100%;height:100%}

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