/* ════════════════════════════════════════════════════════════════
   BELLALTY · SISTEMA DE DISEÑO "LACA Y CROMO"
   Tokens, base, componentes y animaciones para toda la plataforma.
   Importa este archivo en cualquier página:
     <link rel="stylesheet" href="bellalty-design-system.css">
   Fuentes (cabecera del HTML):
     <link href="https://api.fontshare.com/v2/css?f[]=boska@500,600,700&f[]=switzer@400,500,600,700&display=swap" rel="stylesheet">
   ════════════════════════════════════════════════════════════════ */

/* ─────────────────────────  TOKENS  ───────────────────────── */
:root{
  /* — Color · tinta y fondo — */
  --ink:#241626;            /* berenjena ahumada · fondos oscuros */
  --ink-2:#2E1B30;          /* tinta alterna */
  --ivory-ink:#2E2030;      /* tinta porcelana · texto sobre claro */
  --porcelain:#F8F3F5;      /* porcelana rosada · fondo base */
  --surface:#FFFFFF;        /* superficie de tarjetas */

  /* — Color · marca (laca cereza) — */
  --lacquer:#CE2A52;        /* laca cereza · acción primaria */
  --lacquer-deep:#8E1B3A;   /* cereza oscura · hover/activo */
  --lacquer-soft:#F08CA8;   /* rosa laca · acentos sobre oscuro */
  --lacquer-tint:#FBF0F3;   /* lavado cereza · fondos sutiles */

  /* — Color · neutros de apoyo — */
  --mauve:#9A8295;          /* malva té · etiquetas, metadatos */
  --muted:#6E5A6B;          /* texto secundario sobre claro */
  --mut-d:rgba(248,243,245,.74); /* texto secundario sobre oscuro */

  /* — Color · líneas — */
  --line-l:rgba(46,32,48,.1);   /* borde sobre claro */
  --line-d:rgba(255,255,255,.12);/* borde sobre oscuro */

  /* — Cromo (joyería · solo datos clave o bordes firma) — */
  --chrome:linear-gradient(135deg,#D9C8F0 0%,#BFE8DC 50%,#F4CBD8 100%);

  /* — Marca del negocio (white-label · personalizable por salón) — */
  --salon-deep:#7A4E70; --salon-soft:#D9B8D0; --salon-bg:#F7EFF4;

  /* — Tipografía — */
  --font-display:'Boska',Georgia,serif;   /* títulos y cifras grandes */
  --font-body:'Switzer',Inter,-apple-system,sans-serif;

  /* — Radios — */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-2xl:26px; --r-pill:999px;

  /* — Sombras (todas con tinte berenjena, nunca negro puro) — */
  --sh-sm:0 14px 36px -20px rgba(46,32,48,.3);
  --sh-md:0 20px 60px -30px rgba(46,32,48,.25);   /* tarjeta estándar */
  --sh-lg:0 34px 80px -30px rgba(46,32,48,.4);    /* tarjeta destacada */
  --sh-xl:0 40px 90px -30px rgba(36,22,38,.7);    /* elemento firma */
  --sh-lacquer:inset 0 1px 0 rgba(255,255,255,.35),0 14px 34px -12px rgba(206,42,82,.55);

  /* — Espaciado — */
  --gap:18px; --pad-card:30px 26px; --section-y:104px;

  /* — Movimiento — */
  --ease:cubic-bezier(.16,1,.3,1);  /* el ease de toda la marca */
  --t-fast:.18s; --t:.3s; --t-slow:.85s;
}

/* ─────────────────────────  RESET / BASE  ───────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--porcelain);color:var(--ivory-ink);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;line-height:1.55;
}
.display,h1,h2{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.05;text-wrap:balance;font-weight:600}
h3{letter-spacing:-.01em}
em{font-style:italic}
p{text-wrap:pretty}
a{color:inherit}
::selection{background:var(--lacquer);color:#fff}
:focus-visible{outline:2px solid var(--lacquer);outline-offset:3px;border-radius:4px}

/* ─────────────────────────  LAYOUT  ───────────────────────── */
.wrap{max-width:1140px;margin:0 auto;padding:0 24px;position:relative}
section{padding:var(--section-y) 0;scroll-margin-top:84px}
@media(max-width:640px){section{padding:68px 0}.wrap{padding:0 20px}}

/* secciones oscuras — invierten color de texto, etiquetas y acentos */
.s-dark{background:var(--ink);color:var(--porcelain);position:relative}
.s-dark .lead{color:var(--mut-d)}
.s-dark .eyebrow{color:#B89DB3}
.s-dark .h2 em{color:var(--lacquer-soft)}
/* grano de película · solo en secciones oscuras */
.s-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.s-dark>*{position:relative;z-index:1}

/* orbes de luz difusa (decorativos) */
.orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}

/* ─────────────────────────  TIPOGRAFÍA UI  ───────────────────────── */
.eyebrow{
  display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mauve);margin-bottom:18px;
}
.h2{font-size:clamp(38px,5.4vw,68px);margin-bottom:18px}
.h2 em{color:var(--lacquer)}
.lead{font-size:clamp(16.5px,2vw,19px);max-width:580px;color:var(--muted)}
/* texto cromo · reservado a datos clave (joyería tipográfica) */
.chrome-text{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ─────────────────────────  BOTONES  ───────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 30px;border-radius:var(--r-pill);font-size:16px;font-weight:600;font-family:inherit;
  text-decoration:none;cursor:pointer;border:none;
  transition:transform var(--t-fast) var(--ease),background .25s ease,box-shadow .25s ease;
}
.btn:active{transform:scale(.98)}
/* primario · laca con highlight de esmalte húmedo */
.btn-lacquer{background:var(--lacquer);color:#fff;box-shadow:var(--sh-lacquer)}
.btn-lacquer:hover{background:var(--lacquer-deep);transform:scale(1.02);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 18px 40px -12px rgba(142,27,58,.6)}
/* claro sobre oscuro */
.btn-porcelain{background:var(--porcelain);color:var(--lacquer-deep);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 16px 40px -14px rgba(36,22,38,.5)}
.btn-porcelain:hover{background:#fff;transform:scale(1.02)}
/* fantasma · sobre claro y sobre oscuro */
.btn-ghost-l{background:transparent;color:var(--ivory-ink);box-shadow:0 0 0 1.5px var(--line-l) inset}
.btn-ghost-l:hover{box-shadow:0 0 0 1.5px rgba(46,32,48,.35) inset}
.btn-ghost-d{background:transparent;color:var(--porcelain);box-shadow:0 0 0 1.5px rgba(255,255,255,.22) inset}
.btn-ghost-d:hover{box-shadow:0 0 0 1.5px rgba(255,255,255,.45) inset}

/* ─────────────────────────  TARJETAS  ───────────────────────── */
.card{background:var(--surface);border-radius:var(--r-xl);padding:var(--pad-card);box-shadow:var(--sh-md);transition:transform var(--t) var(--ease)}
.card-hover:hover{transform:translateY(-5px)}
/* borde cromo firma — envuelve un .card-inner oscuro */
.card-chrome{padding:1.5px;border-radius:var(--r-2xl);background:var(--chrome);box-shadow:var(--sh-lg)}
.card-chrome .card-inner{background:var(--ink);color:var(--porcelain);border-radius:calc(var(--r-2xl) - 3px);padding:28.5px 24.5px}
/* tarjeta de vidrio sobre fondo oscuro */
.card-glass{background:rgba(255,255,255,.05);border:1px solid var(--line-d);border-radius:var(--r-xl);padding:30px 28px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

/* ─────────────────────────  PÍLDORAS / CHIPS / BADGES  ───────────────────────── */
.chip{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--r-pill);font-size:13px;font-weight:500;background:var(--surface);box-shadow:var(--sh-sm)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--lacquer-tint);color:var(--lacquer-deep)}
/* niveles VIP */
.badge-bronce{background:#F3E3D6;color:#8A5A33}
.badge-plata{background:#E9E6EE;color:#5E5970}
.badge-oro{background:#F6EBC9;color:#937412}

/* ─────────────────────────  ICONO EN GOTA (drop)  ───────────────────────── */
.drop{
  width:46px;height:46px;border-radius:50% 50% 50% 4px;
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:19px;
  background:var(--lacquer);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.4),0 10px 22px -8px rgba(206,42,82,.5);
}

/* ─────────────────────────  FORMULARIOS  ───────────────────────── */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.input{
  font-family:inherit;font-size:15px;color:var(--ivory-ink);
  padding:13px 16px;border-radius:var(--r-sm);border:1.5px solid var(--line-l);
  background:var(--surface);transition:border-color .2s ease,box-shadow .2s ease;
}
.input::placeholder{color:var(--mauve)}
.input:focus{outline:none;border-color:var(--lacquer);box-shadow:0 0 0 3px rgba(206,42,82,.12)}

/* ─────────────────────────  DIVISORES  ───────────────────────── */
.hr{height:1px;border:none;background:var(--line-l)}
.s-dark .hr{background:var(--line-d)}

/* ─────────────────────────  ANIMACIONES / REVELADO  ───────────────────────── */
/* .rv → revelar al hacer scroll (añade .in vía IntersectionObserver) */
.rv{opacity:0;transform:translateY(30px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.rv.in{opacity:1;transform:none}
/* [data-stagger] → escalona la entrada de los hijos */
[data-stagger]>*{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
[data-stagger].in>*{opacity:1;transform:none}
[data-stagger].in>*:nth-child(1){transition-delay:.05s}
[data-stagger].in>*:nth-child(2){transition-delay:.17s}
[data-stagger].in>*:nth-child(3){transition-delay:.29s}
[data-stagger].in>*:nth-child(4){transition-delay:.41s}
[data-stagger].in>*:nth-child(5){transition-delay:.53s}
[data-stagger].in>*:nth-child(6){transition-delay:.65s}
/* .hc → coreografía de entrada inmediata (héroes, sin esperar scroll) */
.hc{opacity:0;transform:translateY(26px);animation:hcIn .9s var(--ease) forwards}
.hc-1{animation-delay:.05s}.hc-2{animation-delay:.17s}.hc-3{animation-delay:.29s}.hc-4{animation-delay:.41s}
@keyframes hcIn{to{opacity:1;transform:none}}

/* respeta usuarios con movimiento reducido y exportación/impresión */
@media(prefers-reduced-motion:reduce){
  .rv,[data-stagger]>*,.hc{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
}
/* en táctil: sin hover-lift, feedback por :active */
@media(hover:none){
  .card-hover:hover{transform:none}
  .card-hover:active{transform:scale(.985)}
  .btn-lacquer:hover{background:var(--lacquer);transform:none}
}

/* ─────────────────────────  HELPER · OBSERVER  ─────────────────────────
   Pega esto una vez por página para activar .rv / [data-stagger]:

   <script>
   const io=new IntersectionObserver((es)=>es.forEach(e=>{
     if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}
   }),{threshold:.15});
   document.querySelectorAll('.rv,[data-stagger]').forEach(el=>io.observe(el));
   </script>
   ──────────────────────────────────────────────────────────────────── */