:root{
/* base — night */
--night-950:#07080f;
--night-900:#0c0e1a;
--night-800:#12162a;
--night-700:#1b2140;
--night-600:#262c52;
--night-500:#38406e;
/* base — crimson (from logo) */
--crimson-700:#8c0f12;
--crimson-600:#a5121a;
--crimson-500:#bf1315;
--crimson-400:#d81e27;
--crimson-300:#e8525a;
/* base — neon accents */
--neon-cyan:#2de2e6;
--neon-cyan-dim:#1a9ea3;
--neon-magenta:#ff1ab4;
--neon-magenta-dim:#a3116f;
/* base — neutrals (warm paper tones for light surfaces / text on dark) */
--paper-100:#f7f1ea;
--paper-200:#ece2d6;
--stone-400:#9ca3b8;
--stone-600:#6b7290;
--stone-800:#3c4160;

/* semantic */
--bg-canvas:var(--night-950);
--bg-surface:var(--night-900);
--bg-surface-raised:var(--night-800);
--bg-surface-hover:var(--night-700);
--border-subtle:var(--night-600);
--border-strong:var(--stone-600);

--text-primary:var(--paper-100);
--text-secondary:var(--stone-400);
--text-on-crimson:var(--paper-100);
--text-on-neon:var(--night-950);

--brand-primary:var(--crimson-500);
--brand-primary-hover:var(--crimson-400);
--brand-primary-active:var(--crimson-700);

--accent-cyan:var(--neon-cyan);
--accent-magenta:var(--neon-magenta);

--state-success:#3fce6e;
--state-warning:#f0b429;
--state-danger:var(--crimson-400);
--state-info:var(--neon-cyan);

--focus-ring:var(--neon-cyan);
}

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;1,400&family=Sora:wght@400;500;600;700&display=swap');
:root{
--font-display:'Cormorant', 'Times New Roman', serif;
--font-body:'Sora', -apple-system, sans-serif;
--text-display-xl:5.5rem;
--text-display-lg:3.75rem;
--text-display-md:2.5rem;
--text-h1:2rem;
--text-h2:1.5rem;
--text-h3:1.25rem;
--text-body-lg:1.125rem;
--text-body:1rem;
--text-small:0.875rem;
--text-caption:0.75rem;

--leading-tight:1.1;
--leading-snug:1.3;
--leading-normal:1.6;

--tracking-wide:0.04em;
--tracking-wider:0.12em;
}

:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
--space-10:128px;

--radius-sm:4px;
--radius-md:8px;
--radius-lg:14px;
--radius-pill:999px;

--shadow-card:0 8px 24px rgba(0,0,0,0.45);
--shadow-raised:0 2px 8px rgba(0,0,0,0.35);
--shadow-glow-cyan:0 0 24px rgba(45,226,230,0.35);
--shadow-glow-magenta:0 0 24px rgba(255,26,180,0.35);

--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
--duration-fast:120ms; /* @kind other */
--duration-base:220ms; /* @kind other */
}

*{box-sizing:border-box}
body{margin:0;background:var(--night-950)}
@media (max-width:720px){
.cs-nav{padding:12px 20px!important}
.cs-nav-links{display:none!important}
.cs-nav-burger{display:block!important}
.cs-hero{padding:0 20px 40px!important;min-height:460px!important}
.cs-grid-2{grid-template-columns:1fr!important}
.cs-grid-3{grid-template-columns:1fr 1fr!important}
section{padding-left:20px!important;padding-right:20px!important}
}
@media (max-width:460px){
.cs-grid-3{grid-template-columns:1fr!important}
}
/* ===== UX MOVIL — se conserva INTEGRA la linea grafica (colores, familias de fuente, acentos neon y la identidad). Solo se ajusta escala tipografica, tamaños y espaciado para que en celular la carta/menu/sitio se lean y operen bien ===== */
@media (max-width:768px){
  :root{
    --text-display-xl:3.4rem;
    --text-display-lg:2.55rem;
    --text-display-md:2.05rem;
    --text-h1:1.6rem;
    --text-h2:1.32rem;
    --text-h3:1.12rem;
    --text-body-lg:1.03rem;
  }
}
@media (max-width:600px){
  section.cs-hero{min-height:440px!important}
}
@media (max-width:480px){
  :root{
    --text-display-xl:2.85rem;
    --text-display-lg:2.1rem;
    --text-display-md:1.78rem;
    --text-h1:1.5rem;
    --text-h2:1.2rem;
    --text-h3:1.05rem;
  }
  .cs-nav{padding:10px 16px!important}
}
/* Mejoras de UX movil (sin alterar la linea grafica): evitan desbordes y dan mejor tacto */
html,body{overflow-x:hidden}
img{max-width:100%}
button,a{touch-action:manipulation; -webkit-tap-highlight-color:rgba(255,26,180,0.12)}
.cs-tabs-scroll{-webkit-overflow-scrolling:touch; scrollbar-width:none}
.cs-tabs-scroll::-webkit-scrollbar{display:none}
/* Fotos de productos mas protagonistas en celular (misma linea grafica, mismo redondeo y orden) */
@media (max-width:600px){
.cs-m-img{width:64px!important;height:64px!important}
.cs-m-img.cs-m-single{width:88px!important;height:88px!important;border-radius:12px!important}
.cs-m-img.cs-m-group{width:58px!important;height:58px!important}
}
@media (max-width:380px){
.cs-m-img.cs-m-single{width:76px!important;height:76px!important}
}

@media (max-width:680px){.cs-cats{grid-template-columns:1fr!important;gap:16px!important}}
@media (max-width:380px){.cs-cats img{border-radius:12px 12px 0 0}}