/* =================================================================
   Ópticas Völker — Tienda (Editorial Premium) Design Tokens
   -----------------------------------------------------------------
   v2 · 2026-04-18 · Rediseño editorial premium.
   - Paleta evolucionada: Midnight (azul profundo), Brass (acento cálido),
     Ivory (crema), Ink (negro cálido), escala de neutros tibios.
   - Tipografía dual: Fraunces (display editorial variable) + Inter (UI).
   - Yrsa + Open Sans quedan como alias de compatibilidad hacia atrás
     para que el HTML/CSS existente no se rompa.
   - Nuevos componentes: .vk-btn (primary/ghost/brass/link),
     .vk-eyebrow, .vk-section, .vk-container, .vk-display,
     .vk-quote, .vk-marquee, .vk-divider, .vk-chip, utilidades de grain.

   Convención:
     --vk-*         : prefijo tienda (evita choque con tokens.css del ERP)
     --ink-*        : tinta (textos y CTAs oscuros)
     --ivory-*      : crema (fondos cálidos)
     --midnight-*   : azul profundo (primario brand)
     --brass-*      : dorado cálido (acento premium)
     --surface-*    : fondos semánticos
     --text-*       : jerarquía tipográfica
     --radius/--shadow/--space/--fs/--fw/--ease : escalas tokens

   Compat: --black/--white/--gray-*/--font-body/--font-heading se
   conservan como alias para que tienda_productos.php y otros CSS
   in-page existentes sigan funcionando sin cambios.
   ================================================================= */

:root {
    /* ============================================================
       PALETA EDITORIAL (Brand System v2)
       ============================================================ */

    /* ---- Ink — negros cálidos, nunca un gris-TV puro ---- */
    --ink:             #0E1013;   /* título, CTA primario */
    --ink-soft:        #1A1D22;
    --ink-muted:       #3A3F47;

    /* ---- Ivory — cremas y nieblas cálidas ---- */
    --ivory:           #F8F3EA;   /* fondo brand principal */
    --ivory-2:         #F1EADC;   /* card secundaria */
    --ivory-3:         #E8DFCD;   /* divider cálido */
    --bone:            #FAF6EF;   /* fondo sutil, hero */

    /* ---- Midnight — azul profundo (primario) ---- */
    --midnight:        #0A1729;   /* brand primario */
    --midnight-2:      #13253F;   /* hover */
    --midnight-3:      #1B3256;
    --midnight-soft:   #EAF0F9;   /* lavender / halo */

    /* ---- Brass — dorado cálido (acento premium) ---- */
    --brass:           #B08642;   /* acento */
    --brass-2:         #8F6A31;   /* hover */
    --brass-deep:      #8A5E24;   /* alias deep para texto eyebrow sobre ivory */
    --brass-soft:      #F3E9D2;   /* fondo halo */
    --brass-ink:       #3E2D0E;

    /* ---- Bone variants ---- */
    --bone-2:          #EBE4D6;   /* bone más profundo */

    /* ---- Líneas editoriales (derivadas del ink) ---- */
    --line:            color-mix(in srgb, var(--ink) 12%, transparent);
    --line-soft:       color-mix(in srgb, var(--ink) 7%, transparent);

    /* ---- Accents semánticos (mantener compat) ---- */
    --vk-accent:       var(--midnight);
    --vk-accent-2:     var(--midnight-2);
    --vk-accent-soft:  var(--midnight-soft);

    --vk-warm:         var(--brass);
    --vk-warm-2:       var(--brass-2);

    --vk-success:      #15803D;
    --vk-success-soft: #DCFCE7;
    --vk-warning:      #B45309;
    --vk-danger:       #B42331;
    --vk-danger-soft:  #FCE8EA;

    /* ---- Escala de neutros (cálidos, no gris-TV) ---- */
    --vk-black:        var(--ink);
    --vk-gray-950:     #151820;
    --vk-gray-900:     #1F232B;
    --vk-gray-800:     #2A2F39;
    --vk-gray-700:     #454B56;
    --vk-gray-500:     #787B83;
    --vk-gray-400:     #A7A9AE;
    --vk-gray-300:     #D6D3CA;    /* warm */
    --vk-gray-200:     #E5E1D6;    /* warm */
    --vk-gray-100:     #F2EEE4;    /* warm */
    --vk-gray-50:      #FAF7EF;    /* warm */
    --vk-white:        #FFFFFF;

    /* ---- Badges de producto ---- */
    --badge-new-bg:       var(--ink);
    --badge-new-fg:       var(--bone);
    --badge-sale-bg:      var(--vk-danger);
    --badge-sale-fg:      var(--vk-white);
    --badge-last-bg:      var(--brass);
    --badge-last-fg:      var(--vk-white);
    --badge-stock-bg:     var(--vk-success-soft);
    --badge-stock-fg:     var(--vk-success);
    --badge-outstock-bg:  var(--vk-gray-200);
    --badge-outstock-fg:  var(--vk-gray-700);

    /* ---- Brand semántico (aliases) ---- */
    --brand-bg:        var(--ivory);
    --brand-fg:        var(--ink);
    --brand-cta-bg:    var(--ink);
    --brand-cta-fg:    var(--bone);
    --brand-cta-hover: var(--midnight);

    /* ---- Superficies ---- */
    --surface-0:       var(--bone);         /* app bg */
    --surface-1:       var(--vk-white);     /* card */
    --surface-2:       var(--ivory);        /* sección alternada */
    --surface-3:       var(--ivory-2);      /* hover/pressed */
    --surface-invert:  var(--ink);          /* footer, top-bar */
    --surface-dark:    var(--midnight);     /* hero, heavy */

    /* ---- Texto ---- */
    --text-primary:    var(--ink);
    --text-secondary:  var(--ink-muted);
    --text-muted:      var(--vk-gray-500);
    --text-subtle:     var(--vk-gray-400);
    --text-on-dark:    var(--bone);
    --text-on-brand:   var(--bone);
    --text-link:       var(--ink);
    --text-link-hover: var(--brass);

    /* ---- Borders ---- */
    --border-subtle:   var(--vk-gray-100);
    --border:          var(--vk-gray-200);
    --border-strong:   var(--vk-gray-300);
    --border-ink:      var(--ink);
    --border-focus:    var(--brass);

    /* ---- Fuentes — dual system ----
       Fraunces  → display editorial (headings, hero, quotes)
       Inter     → body + UI (labels, navs, precios tabulares)
       Yrsa      → fallback display (compat)
       Open Sans → fallback body (compat)
    */
    --font-display:  'Fraunces', 'Yrsa', 'Georgia', 'Times New Roman', serif;
    --font-body:     'Inter', 'Open Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    --font-heading:  'Fraunces', 'Yrsa', 'Georgia', serif;      /* alias compat */
    --font-mono:     'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    --font-num:      'Inter', 'Open Sans', system-ui, sans-serif;

    /* ---- Escala tipográfica ---- */
    --fs-xs:    11px;
    --fs-sm:    12px;
    --fs-base:  14px;
    --fs-md:    16px;
    --fs-lg:    18px;
    --fs-xl:    20px;
    --fs-2xl:   24px;
    --fs-3xl:   clamp(28px, 2.4vw, 34px);
    --fs-4xl:   clamp(36px, 3.6vw, 50px);
    --fs-5xl:   clamp(46px, 5vw, 72px);
    --fs-6xl:   clamp(56px, 7vw, 104px);   /* editorial display */

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;
    --fw-heavy:   800;

    --lh-tight:  1.05;
    --lh-snug:   1.2;
    --lh-base:   1.55;
    --lh-relax:  1.7;

    --tracking-tight:  -0.02em;
    --tracking-snug:   -0.005em;
    --tracking-normal: 0;
    --tracking-wide:   0.05em;
    --tracking-wider:  0.14em;
    --tracking-widest: 0.22em;

    /* ---- Radios ---- */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-pill: 999px;

    /* ---- Sombras editoriales (suaves, cálidas) ---- */
    --shadow-xs:  0 1px 2px rgba(14,16,19,.04);
    --shadow-sm:  0 2px 4px rgba(14,16,19,.05), 0 1px 2px rgba(14,16,19,.04);
    --shadow-md:  0 8px 24px rgba(14,16,19,.06), 0 2px 6px rgba(14,16,19,.04);
    --shadow-lg:  0 24px 48px rgba(14,16,19,.08), 0 6px 12px rgba(14,16,19,.05);
    --shadow-xl:  0 40px 80px rgba(14,16,19,.12), 0 12px 24px rgba(14,16,19,.06);
    --shadow-card-hover: 0 28px 60px rgba(14,16,19,.12);
    --shadow-brass-glow:  0 0 0 3px color-mix(in srgb, var(--brass) 20%, transparent);
    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--brass) 32%, transparent);

    /* ---- Espaciado (4px base) ---- */
    --space-0:   0;
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;
    --space-32:  128px;

    /* ---- Motion ---- */
    --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in:      cubic-bezier(0.64, 0, 0.78, 0);
    --ease-io:      cubic-bezier(0.45, 0, 0.55, 1);
    --ease-plush:   cubic-bezier(0.16, 1, 0.3, 1);     /* gentle, editorial */
    --dur-instant:  0.08s;
    --dur-fast:     0.18s;
    --dur-base:     0.32s;
    --dur-slow:     0.55s;
    --dur-xslow:    0.85s;

    /* ---- Z-index ---- */
    --z-base:     1;
    --z-sticky:   100;
    --z-header:   500;
    --z-dropdown: 1000;
    --z-drawer:   1400;
    --z-overlay:  1500;
    --z-modal:    1600;
    --z-toast:    1800;

    /* ---- Layout ---- */
    --container-max:    1400px;
    --container-narrow: 1080px;
    --container-prose:  680px;
    --container-pad:    clamp(20px, 4vw, 56px);

    /* =================================================================
       Compat legacy — mantener alias para no romper CSS existente
       ================================================================= */
    --black:     var(--ink);
    --white:     var(--vk-white);
    --gray-50:   var(--vk-gray-50);
    --gray-100:  var(--vk-gray-100);
    --gray-200:  var(--vk-gray-200);
    --gray-300:  var(--vk-gray-300);
    --gray-400:  var(--vk-gray-400);
    --gray-500:  var(--vk-gray-500);
    --gray-700:  var(--vk-gray-700);
    --gray-800:  var(--vk-gray-800);
    --gray-900:  var(--vk-gray-900);
}

/* =================================================================
   BASE — reset suave + body editorial
   ================================================================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--surface-0);
    line-height: var(--lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11", "ss03";
}

/* Variable Fraunces: suaviza el contraste de los optical sizes */
.vk-display, .vk-hero__title, .vk-section__title, .vk-quote {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 96, "SOFT" 50;
}

/* =================================================================
   UTILIDADES GLOBALES
   ================================================================= */

/* Números tabulares para precios */
.vk-nums,
.product-price,
.product-price-new,
.product-price-old,
.result-details strong,
.vk-card__price,
.vk-card__price-old {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Focus ring dorado consistente */
.vk-focusable:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

/* Contenedores */
.vk-container     { width: 100%; max-width: var(--container-max);    margin-inline: auto; padding-inline: var(--container-pad); }
.vk-container--nw { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--container-pad); }
.vk-container--p  { width: 100%; max-width: var(--container-prose);  margin-inline: auto; padding-inline: var(--container-pad); }

/* Eyebrow — pequeña etiqueta sobre títulos (tracking widest) */
.vk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}
.vk-eyebrow::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}
.vk-eyebrow--center { justify-content: center; }
.vk-eyebrow--dark   { color: var(--text-on-dark); opacity: 0.8; }
.vk-eyebrow--brass  { color: var(--brass); }

/* Display title — fluido editorial */
.vk-display {
    font-family: var(--font-display);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}
.vk-display--xl { font-size: var(--fs-6xl); }
.vk-display--lg { font-size: var(--fs-5xl); }
.vk-display--md { font-size: var(--fs-4xl); }
.vk-display--sm { font-size: var(--fs-3xl); }
.vk-display em  {
    font-style: italic;
    font-weight: var(--fw-regular);
    color: var(--brass);
    font-variation-settings: "opsz" 144, "SOFT" 100;
}

/* Section wrapper */
.vk-section {
    padding-block: clamp(64px, 8vw, 128px);
}
.vk-section--cream    { background: var(--surface-2); }
.vk-section--bone     { background: var(--surface-0); }
.vk-section--ink      { background: var(--surface-invert); color: var(--text-on-dark); }
.vk-section--midnight { background: var(--surface-dark);   color: var(--text-on-dark); }
.vk-section--brass    { background: var(--brass-soft); }
.vk-section--tight    { padding-block: clamp(48px, 5vw, 80px); }
.vk-section--flush    { padding-block: 0; }

.vk-section__head {
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 72px);
    max-width: 720px;
    margin-inline: auto;
}
.vk-section__title {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: inherit;
    margin: 0 0 var(--space-3);
}
.vk-section__subtitle {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    line-height: var(--lh-relax);
    max-width: 560px;
    margin-inline: auto;
}
.vk-section--ink .vk-section__subtitle,
.vk-section--midnight .vk-section__subtitle { color: color-mix(in srgb, var(--text-on-dark) 75%, transparent); }

/* Botones premium */
.vk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 32px;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: var(--bone);
    cursor: pointer;
    transition: transform var(--dur-base) var(--ease-plush),
                background var(--dur-base) var(--ease-plush),
                color var(--dur-base) var(--ease-plush),
                border-color var(--dur-base) var(--ease-plush),
                box-shadow var(--dur-base) var(--ease-plush);
    white-space: nowrap;
}
.vk-btn:hover { transform: translateY(-1px); background: var(--midnight); box-shadow: var(--shadow-md); }
.vk-btn:active { transform: translateY(0); }

.vk-btn--brass    { background: var(--brass); color: var(--vk-white); }
.vk-btn--brass:hover { background: var(--brass-2); }

.vk-btn--ghost    { background: transparent; color: var(--ink); border-color: var(--ink); }
.vk-btn--ghost:hover { background: var(--ink); color: var(--bone); }

.vk-btn--ghost-inv { background: transparent; color: var(--bone); border-color: color-mix(in srgb, var(--bone) 40%, transparent); }
.vk-btn--ghost-inv:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }

.vk-btn--sq { border-radius: var(--radius-xs); }
.vk-btn--sm { padding: 11px 22px; font-size: 10px; }
.vk-btn--lg { padding: 18px 40px; }
.vk-btn--wide { padding-inline: 56px; }

/* Link con flecha */
.vk-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    transition: color var(--dur-fast) var(--ease-out),
                gap var(--dur-fast) var(--ease-out);
}
.vk-link::after { content: "→"; font-size: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.vk-link:hover { color: var(--brass); gap: 14px; }
.vk-link:hover::after { transform: translateX(4px); }
.vk-link--dark  { color: var(--bone); }
.vk-link--brass { color: var(--brass); }

/* Divider editorial (línea + símbolo centro) */
.vk-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-block: var(--space-8);
    color: var(--brass);
    font-size: 14px;
}
.vk-divider::before,
.vk-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ivory-3);
    max-width: 120px;
}
.vk-divider-sym {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 22px;
    letter-spacing: 6px;
}

/* Chip / tag */
.vk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--ivory-2);
    border: 1px solid var(--ivory-3);
    color: var(--ink);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    letter-spacing: var(--tracking-wide);
}
.vk-chip--brass { background: var(--brass-soft); border-color: var(--brass); color: var(--brass-ink); }
.vk-chip--dark  { background: var(--ink); border-color: var(--ink); color: var(--bone); }

/* Grain / noise sutil (editorial feel) */
.vk-grain { position: relative; }
.vk-grain::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: multiply;
    z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* Quote editorial */
.vk-quote {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-snug);
    font-style: italic;
    color: var(--text-primary);
}
.vk-quote::before { content: "\201C"; font-family: var(--font-display); color: var(--brass); margin-right: 6px; }
.vk-quote::after  { content: "\201D"; font-family: var(--font-display); color: var(--brass); margin-left: 4px; }
.vk-quote-cite { display: block; margin-top: var(--space-4); font-family: var(--font-body); font-style: normal; font-size: var(--fs-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-muted); }

/* Skeleton shimmer */
@keyframes vk-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.vk-skeleton {
    background: linear-gradient(90deg, var(--vk-gray-100) 0%, var(--vk-gray-200) 50%, var(--vk-gray-100) 100%);
    background-size: 800px 100%;
    animation: vk-shimmer 1.4s linear infinite;
    border-radius: var(--radius-md);
}
@media (prefers-reduced-motion: reduce) { .vk-skeleton { animation: none; } }

/* Imagen blur-up progresivo */
.vk-img-blur { filter: blur(12px); transition: filter var(--dur-base) var(--ease-out); }
.vk-img-blur[data-loaded="1"] { filter: blur(0); }

/* Reveal animations (usado por JS existente en tienda_layout.php) */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--dur-slow) var(--ease-plush), transform var(--dur-slow) var(--ease-plush); }
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* =================================================================
   PRODUCT CARD (evolucionado)
   ================================================================= */

.vk-card {
    position: relative;
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        transform var(--dur-base) var(--ease-plush),
        box-shadow var(--dur-base) var(--ease-plush),
        border-color var(--dur-base) var(--ease-plush);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.vk-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border);
}

/* Media — "estudio de producto": spotlight radial + sombra simulada bajo el objeto */
.vk-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    --mx: 50%;
    --my: 42%;
    /* capa 1: sombra elíptica bajo el producto (70% alto) simula apoyo en mesa
       capa 2: spotlight cálido desde el centro-superior
       capa 3: fade bone en los bordes para fundir con la página */
    background:
        radial-gradient(ellipse 38% 6% at 50% 82%, rgba(14,16,19,0.12), transparent 75%),
        radial-gradient(ellipse 85% 65% at 50% 42%, #ffffff 0%, var(--ivory) 58%, color-mix(in srgb, var(--ivory) 86%, var(--bone)) 100%);
    transition: background var(--dur-slow) var(--ease-plush);
}
.vk-card__media::before {
    /* spotlight brillante que sigue al cursor */
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle 200px at var(--mx) var(--my), rgba(255,255,255,0.55), transparent 70%);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-plush);
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 1;
}
.vk-card:hover .vk-card__media::before { opacity: 1; }
.vk-card__media::after {
    /* viñeta cálida sutil + brillo diagonal tipo estudio */
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(168,119,52,0.05) 0%, transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(14,16,19,0.05), transparent 55%);
    pointer-events: none;
    mix-blend-mode: multiply;
}
.vk-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 22px 22px 30px;
    /* multiply elimina el blanco puro de la foto de producto */
    mix-blend-mode: multiply;
    /* sombra muy leve del producto simula volumen */
    filter: drop-shadow(0 8px 10px rgba(14,16,19,0.08));
    transition: opacity var(--dur-base) var(--ease-plush),
                transform var(--dur-slow) var(--ease-plush),
                filter var(--dur-slow) var(--ease-plush);
}
.vk-card:hover .vk-card__media img {
    filter: drop-shadow(0 14px 18px rgba(14,16,19,0.14));
}
.vk-card__media img.vk-card__img--alt { opacity: 0; transform: scale(1.03); }
.vk-card:hover .vk-card__media img.vk-card__img--base { opacity: 0; }
.vk-card:hover .vk-card__media img.vk-card__img--alt  { opacity: 1; }
.vk-card__media:not(:has(.vk-card__img--alt)):hover img.vk-card__img--base {
    transform: scale(1.06);
    opacity: 1;
}
.vk-card__no-image {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-subtle);
    font-size: 48px;
}

/* Badges — editoriales, no invasivos. Viven abajo-izquierda para no tapar el producto */
.vk-badges {
    position: absolute;
    bottom: var(--space-3);
    left: var(--space-3);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 4;
    pointer-events: none;
}
.vk-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid transparent;
    transition: transform var(--dur-base) var(--ease-plush);
}
.vk-card:hover .vk-badge { transform: translateY(-2px); }

/* "Nuevo" — chip editorial con Fraunces italic, fondo hueso translúcido (NO bloque oscuro sobre el producto) */
.vk-badge--new {
    background: color-mix(in srgb, var(--bone) 78%, transparent);
    color: var(--ink);
    border-color: color-mix(in srgb, var(--ink) 14%, transparent);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .02em;
    text-transform: none;
    padding: 4px 12px 4px 10px;
}
.vk-badge--new::before {
    /* punto brass parpadeante para indicar novedad sin ser invasivo */
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--brass);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 22%, transparent);
    animation: vk-pulse-dot 2.4s var(--ease-plush) infinite;
}
@keyframes vk-pulse-dot {
    0%, 100% { transform: scale(1);   box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 22%, transparent); }
    50%      { transform: scale(1.2); box-shadow: 0 0 0 6px color-mix(in srgb, var(--brass) 0%,  transparent); }
}

/* "Sale" — brass sólido (es un evento comercial, merece presencia) */
.vk-badge--sale {
    background: var(--brass);
    color: var(--bone);
    border-color: color-mix(in srgb, var(--brass) 40%, transparent);
}

/* "Últimas X" — ink suave con texto bone (urgencia pero con calma) */
.vk-badge--last {
    background: color-mix(in srgb, var(--ink) 88%, transparent);
    color: var(--bone);
    border-color: color-mix(in srgb, var(--ink) 30%, transparent);
}

/* Wishlist — etéreo, no invasivo. Aparece al hover de la card. */
.vk-wish {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bone) 80%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-soft);
    font-size: 14px;
    z-index: 4;
    opacity: 0;
    transform: translateY(-6px);
    transition: transform var(--dur-base) var(--ease-plush),
                color var(--dur-fast) var(--ease-plush),
                border-color var(--dur-fast) var(--ease-plush),
                background var(--dur-fast) var(--ease-plush),
                opacity var(--dur-base) var(--ease-plush);
}
.vk-card:hover .vk-wish,
.vk-wish:focus-visible,
.vk-wish[aria-pressed="true"] { opacity: 1; transform: translateY(0); }
.vk-wish:hover { transform: translateY(0) scale(1.08); border-color: var(--brass); color: var(--brass); }
.vk-wish[aria-pressed="true"] {
    color: var(--vk-danger);
    border-color: color-mix(in srgb, var(--vk-danger) 40%, transparent);
    background: color-mix(in srgb, var(--vk-danger) 8%, var(--bone));
}
.vk-wish[aria-pressed="true"] i::before { content: "\F415"; }
/* Touch devices: no hay hover, wish debe estar visible por defecto */
@media (hover: none) {
    .vk-wish { opacity: 1; transform: translateY(0); }
    .vk-card__media::before, .home-card__media::before, .pdp-related__media::before { display: none; }
}

/* Swatches */
.vk-swatches {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: var(--space-2);
    flex-wrap: wrap;
}
.vk-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--border);
    box-shadow: inset 0 0 0 2px var(--vk-white);
}
.vk-swatch--more {
    font-size: 9px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    border: none;
    box-shadow: none;
    margin-left: 2px;
}

/* Info */
.vk-card__info {
    padding: var(--space-5) var(--space-4) var(--space-4);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}
.vk-card__brand {
    font-size: 10px;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: var(--fw-bold);
}
.vk-card__name {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-snug);
}
.vk-card__price-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.vk-card__price {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
}
.vk-card__price-old {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-decoration: line-through;
}
.vk-card__stock { font-size: var(--fs-xs); margin-top: 2px; }
.vk-card__stock--ok  { color: var(--vk-success); }
.vk-card__stock--low { color: var(--vk-warm); }
.vk-card__stock--off { color: var(--vk-danger); }

/* CTA */
.vk-card__cta {
    display: block;
    width: 100%;
    padding: 13px;
    background: var(--brand-cta-bg);
    color: var(--brand-cta-fg);
    border: none;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-plush),
                color var(--dur-fast) var(--ease-plush);
    border-radius: 0;
    margin-top: auto;
}
.vk-card__cta:hover  { background: var(--midnight); }
.vk-card__cta.added  { background: var(--vk-success); }
.vk-card__cta:disabled {
    background: var(--vk-gray-200);
    color: var(--vk-gray-500);
    cursor: not-allowed;
}

/* Skeleton card */
.vk-skeleton-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.vk-skeleton-card__media {
    aspect-ratio: 1 / 1;
    background: linear-gradient(90deg, var(--vk-gray-100) 0%, var(--vk-gray-200) 50%, var(--vk-gray-100) 100%);
    background-size: 800px 100%;
    animation: vk-shimmer 1.4s linear infinite;
}
.vk-skeleton-card__info { padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.vk-skeleton-line {
    background: linear-gradient(90deg, var(--vk-gray-100) 0%, var(--vk-gray-200) 50%, var(--vk-gray-100) 100%);
    background-size: 800px 100%;
    animation: vk-shimmer 1.4s linear infinite;
    border-radius: var(--radius-xs);
    height: 12px;
    width: 100%;
}
.vk-skeleton-line--sm    { width: 40%; height: 10px; }
.vk-skeleton-line--md    { width: 70%; height: 14px; }
.vk-skeleton-line--price { width: 50%; height: 16px; margin-top: 4px; }
.vk-skeleton-card__cta   { height: 42px; background: var(--vk-gray-100); margin-top: auto; }
@media (prefers-reduced-motion: reduce) {
    .vk-skeleton-card__media, .vk-skeleton-line { animation: none; }
}

/* =================================================================
   MARQUEE (brand strip editorial)
   ================================================================= */

.vk-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.vk-marquee__track {
    display: flex;
    align-items: center;
    gap: clamp(48px, 6vw, 96px);
    animation: vk-marquee 42s linear infinite;
    width: max-content;
    will-change: transform;
}
.vk-marquee__track:hover { animation-play-state: paused; }
@keyframes vk-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .vk-marquee__track { animation: none; }
}

/* =================================================================
   Utilidades menores
   ================================================================= */
.vk-u-center { text-align: center; }
.vk-u-mt-0 { margin-top: 0 !important; }
.vk-u-mb-0 { margin-bottom: 0 !important; }
.vk-u-hidden-sm { display: initial; }
@media (max-width: 768px) { .vk-u-hidden-sm { display: none !important; } }
.vk-u-only-sm { display: none; }
@media (max-width: 768px) { .vk-u-only-sm { display: initial; } }

/* Stretch link — toda la card se clickea aunque el link sea uno interior */
.vk-stretch { position: relative; }
.vk-stretch__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ==================================================================
   MOTION SYSTEM · animaciones editoriales premium
   Diseñadas como capas sutiles que suman "pulso" sin distraer.
   Todo respeta prefers-reduced-motion.
================================================================== */

/* Scroll progress bar — cinta brass en el top del viewport */
.vk-scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, var(--brass) 0%, color-mix(in srgb, var(--brass) 60%, var(--midnight)) 100%);
    z-index: 9999;
    pointer-events: none;
    transition: width .08s linear, opacity .3s ease;
    will-change: width;
}

/* Reveal · base — elementos aparecen con fade + ligera traslación */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s var(--ease-plush), transform .9s var(--ease-plush);
    will-change: opacity, transform;
}
.reveal.revealed { opacity: 1; transform: translateY(0); }

/* Reveal · split — para frases editoriales, stagger por palabra/línea */
.reveal-split .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease-plush), transform .7s var(--ease-plush);
    transition-delay: calc(var(--i, 0) * 60ms);
}
.reveal-split.revealed .word { opacity: 1; transform: translateY(0); }

/* Reveal · clip — texto aparece "debajo de una cortina" */
.reveal-clip {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1s var(--ease-plush);
}
.reveal-clip.revealed { clip-path: inset(0 0 0 0); }

/* Reveal · divider draw-in — línea horizontal que se extiende sola */
.reveal-line {
    position: relative;
    overflow: hidden;
}
.reveal-line::after {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    height: 1px;
    width: 0;
    background: currentColor;
    transition: width 1.2s var(--ease-plush);
}
.reveal-line.revealed::after { width: 100%; }

/* Counter — números grandes (stats) que aparecen con scale */
.vk-counter {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 96, "SOFT" 40;
    font-weight: 500;
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* Magnetic · botones que siguen sutilmente al cursor */
.vk-magnetic {
    transition: transform .3s var(--ease-plush);
    will-change: transform;
}

/* Tilt · cards con mouse-follow spotlight (usa --mx/--my desde JS) */
.vk-tilt {
    position: relative;
    transition: transform var(--dur-base) var(--ease-plush);
}

/* Float · elemento flota lentamente (hero media, featured badge) */
@keyframes vk-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.vk-float { animation: vk-float 5s var(--ease-plush) infinite; }

/* Shimmer · texto brass que resplandece (CTAs destacados) */
@keyframes vk-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.vk-shimmer {
    background: linear-gradient(
        90deg,
        var(--ink) 0%, var(--ink) 40%,
        var(--brass) 50%,
        var(--ink) 60%, var(--ink) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: vk-shimmer 3s linear infinite;
}

/* Ken Burns — zoom lento de fondos */
@keyframes vk-kenburns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.12) translate(-2%, -1%); }
}
.vk-kenburns { animation: vk-kenburns 14s ease-out forwards; }

/* Page intro — al cargar la página todo entra suave */
@keyframes vk-page-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
body { animation: vk-page-in .6s var(--ease-plush) both; }

/* Reduce motion — respeta preferencia del usuario */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-split .word, .reveal-clip, .reveal-line::after,
    .vk-float, .vk-shimmer, .vk-kenburns, body {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        width: 100% !important;
    }
    .vk-scroll-progress { display: none; }
}