@charset "UTF-8";
/* =============================================================================
 * style.css · Joyería Acacio · CSS completo del sitio
 * Carga DESPUÉS de style.tokens.css.
 *
 * Capas:  reset > tokens > base > layout > typography > components > utilities > overrides
 * Mobile-first. Breakpoints: 480 / 768 / 1024 / 1440 / 1920.
 * Animaciones infinitas: shineSlide, shimmer, marqueeScroll, livePulse+ping, floatBob (= 5).
 * Compat: Chrome/Edge 110+, Safari 16+, Firefox 110+. Features +nuevas tras @supports.
 * ============================================================================= */

@layer reset, tokens, base, layout, typography, components, utilities, overrides;

/* ─── @layer reset ────────────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    scrollbar-gutter: stable;
    color-scheme: dark;
  }

  body { margin: 0; min-block-size: 100svh; }

  img, video, svg, canvas, picture {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  input, select, textarea { font-size: max(1rem, 16px); }

  input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button { appearance: none; -webkit-appearance: none; margin: 0; }

  .amount, .product-card__price, .gold-card__price, .calc-result__value {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .product-card__media img,
  .product-gallery__main img,
  .product-gallery__thumb img { -webkit-touch-callout: none; }
}

/* ─── @layer base · defaults visuales ────────────────────────────────────── */
@layer base {
  body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image:
      radial-gradient(ellipse 1100px 600px at 8% -10%, var(--gold-a14), transparent 55%),
      radial-gradient(ellipse 900px 500px at 110% 10%, rgb(160 100 220 / 6%), transparent 50%),
      radial-gradient(ellipse 1400px 800px at 50% 110%, var(--gold-a5), transparent 60%);
    background-repeat: no-repeat;
  }

  ::selection { background: color-mix(in oklch, var(--gold) 35%, transparent); color: var(--bg-2); }
  * { -webkit-tap-highlight-color: color-mix(in oklch, var(--gold) 15%, transparent); }

  * { scrollbar-width: thin; scrollbar-color: var(--gold-soft) rgb(255 255 255 / 4%); }
  *::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
  *::-webkit-scrollbar-track { background: rgb(11 11 13 / 50%); }
  *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gold-soft), color-mix(in oklch, var(--gold-deep) 50%, transparent));
    border-radius: var(--radius-full);
    border: 2px solid rgb(11 11 13 / 50%);
  }
  *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold-2), var(--gold)); }

  .skip-link {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: 1rem;
    z-index: var(--z-skip);
    padding: 0.75rem 1rem;
    background: var(--gold);
    color: var(--bg-2);
    font-weight: 700;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: inset-block-start var(--dur-base) var(--ease-out-expo);

    &:focus, &:focus-visible {
      inset-block-start: 0;
      outline: 2px solid #fff;
      outline-offset: 2px;
    }
  }

  :where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
  }
}

/* ─── @layer layout ─────────────────────────────────────────────────────── */
@layer layout {
  .container {
    inline-size: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: max(1.25rem, env(safe-area-inset-left)) max(1.25rem, env(safe-area-inset-right));

    @media (min-width: 768px) {
      padding-inline: max(2rem, env(safe-area-inset-left)) max(2rem, env(safe-area-inset-right));
    }
  }
  @media (max-width: 360px) {
    .container {
      padding-inline: max(0.8rem, env(safe-area-inset-left)) max(0.8rem, env(safe-area-inset-right));
    }
  }

  .app-content { position: relative; z-index: var(--z-content); min-block-size: 100svh; isolation: isolate; }

  .section {
    position: relative;
    padding-block: var(--section-py);

    &.section--alt {
      background: linear-gradient(180deg, transparent, color-mix(in oklch, var(--panel) 50%, transparent), transparent);
    }
  }
  @media (max-width: 360px) { .section { padding-block: 2rem; } }

  .section-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-block-end: clamp(1.5rem, 4vw, 2.5rem);

    &.center {
      text-align: center;
      align-items: center;

      & .section-sub { margin-inline: auto; }
    }
  }

  .ambient-layer {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-base);
    overflow: hidden;
    background:
      radial-gradient(35rem 35rem at 5% 5%, var(--gold-a14), transparent 70%),
      radial-gradient(30rem 30rem at 100% 100%, rgb(120 80 200 / 8%), transparent 70%);
  }

  .noise-layer {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image:
      repeating-linear-gradient(0deg, transparent 0 2px, rgb(255 255 255 / 5%) 2px 3px),
      repeating-linear-gradient(90deg, transparent 0 2px, rgb(0 0 0 / 4%) 2px 3px);

    @media (max-width: 767px), (prefers-reduced-motion: reduce) { display: none; }
  }
}

/* ─── @layer typography ─────────────────────────────────────────────────── */
@layer typography {
  .font-serif { font-family: var(--font-serif); }
  .font-sans  { font-family: var(--font-sans); }
  .text-gold  { color: var(--gold); }
  .text-muted { color: var(--muted); }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--muted);

    &::before {
      content: "";
      inline-size: 1.8rem;
      block-size: 1.5px;
      border-radius: var(--radius-full);
      background: linear-gradient(90deg, transparent, var(--gold-2));
    }
    &.center { justify-content: center; &::before { display: none; } }
  }
  @media (max-width: 480px) {
    .eyebrow { letter-spacing: 0.18em; font-size: 0.68rem; }
  }

  .section-title {
    font-family: var(--font-serif);
    font-size: var(--step-4);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0.5rem 0 0.75rem;
    text-wrap: balance;
  }

  .section-sub {
    color: var(--muted);
    font-size: var(--step-0);
    max-inline-size: var(--container-text);
    line-height: var(--lh-relaxed);
    text-wrap: pretty;
  }

  .section-heading {
    position: relative;
    display: inline-block;
    padding-block-end: 0.4rem;

    &::after {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      inset-block-end: 0;
      block-size: 2px;
      inline-size: 0;
      max-inline-size: 7rem;
      border-radius: var(--radius-full);
      background: linear-gradient(90deg,
        transparent, color-mix(in oklch, var(--gold) 95%, transparent) 35%,
        var(--gold-light) 50%,
        color-mix(in oklch, var(--gold) 95%, transparent) 65%, transparent);
      animation: headingLine 0.85s var(--ease-out-expo) forwards;
    }
    &.center { display: block; text-align: center; &::after { inset-inline-start: 50%; translate: -50% 0; } }
  }

  /* text-shine · fallback dorado sólido para forced-colors y motores legacy */
  .text-shine {
    color: var(--gold);
    background-image: linear-gradient(115deg,
      #fff6dd, var(--gold-light) 25%, var(--gold) 48%,
      var(--gold-deep) 62%, var(--gold-light) 88%, #fff);
    background-size: 220% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 6px 28px var(--gold-a14);
    animation: shineSlide 8s ease-in-out infinite;
  }

  .uppercase   { text-transform: uppercase; letter-spacing: var(--tracking-wide); }
  .text-center { text-align: center; }
  .text-right  { text-align: end; }
  .text-sm     { font-size: var(--step--1); }
  .text-xs     { font-size: var(--step--2); }
  .text-lg     { font-size: var(--step-1); }
  .font-bold   { font-weight: 700; }
  .font-semi   { font-weight: 600; }
  .opacity-70  { opacity: 0.7; }
  .amount      { font-feature-settings: "tnum" 1, "lnum" 1; }

  @keyframes shineSlide  { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } }
  @keyframes headingLine { to { inline-size: 100%; } }
}

/* ─── @layer components ─────────────────────────────────────────────────── */
@layer components {

  /* §1 · pill / dot / chip ------------------------------------------------ */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--gold-a28);
    border-radius: var(--radius-full);
    background: linear-gradient(145deg, color-mix(in oklch, var(--panel-2) 95%, transparent), color-mix(in oklch, var(--bg-2) 85%, transparent));
    padding: 0.45rem 0.95rem;
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: color-mix(in oklch, var(--text) 88%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in oklch, var(--gold-light) 6%, transparent);
    transition: border-color var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo), translate var(--dur-base) var(--ease-out-expo);

    & .dot {
      inline-size: 6px; block-size: 6px;
      border-radius: var(--radius-full);
      background: var(--gold);
      box-shadow: 0 0 10px var(--gold-a70);
      animation: livePulse 1.6s ease-in-out infinite;
    }
  }
  @media (hover: hover) {
    .pill:hover {
      border-color: var(--gold-a60);
      box-shadow: 0 0 24px var(--gold-a18), inset 0 1px 0 color-mix(in oklch, var(--gold-light) 18%, transparent);
      translate: 0 -1px;
    }
  }

  .dot-live {
    position: relative;
    display: inline-flex;
    inline-size: 0.65rem; block-size: 0.65rem;

    &::before {
      content: ""; position: absolute; inset: 0;
      border-radius: var(--radius-full);
      background: color-mix(in oklch, var(--ok) 40%, transparent);
      animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
    }
    &::after {
      content: ""; position: absolute; inset: 0; margin: auto;
      inline-size: 0.55rem; block-size: 0.55rem;
      border-radius: var(--radius-full);
      background: var(--ok);
      box-shadow: 0 0 10px color-mix(in oklch, var(--ok) 60%, transparent);
    }
  }
  @keyframes ping      { 75%, 100% { transform: scale(2.2); opacity: 0; } }
  @keyframes livePulse { 0%, 100% { opacity: 0.4; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }

  /* §2 · botones --------------------------------------------------------- */
  .btn {
    position: relative;
    display: inline-flex;
    align-items: center; justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.45rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: var(--step--1);
    letter-spacing: 0.01em;
    white-space: nowrap;
    user-select: none;
    transition: translate var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo),
                background-color var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo),
                color var(--dur-base) var(--ease-out-expo), filter var(--dur-base) var(--ease-out-expo);

    &:active { translate: 0 1px; scale: 0.99; }
    &:disabled, &[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
  }

  .btn-primary {
    color: #1a140a;
    background: linear-gradient(135deg, #faecb5, var(--gold-2) 30%, var(--gold) 55%, var(--gold-deep));
    box-shadow: 0 12px 32px var(--gold-a32), inset 0 1px 0 rgb(255 255 255 / 40%), inset 0 -1px 0 rgb(80 60 0 / 30%);

    &::after {
      content: ""; position: absolute; inset: 0;
      border-radius: inherit;
      background: linear-gradient(115deg, transparent 0%, rgb(255 255 255 / 45%) 50%, transparent 100%);
      translate: -150%;
      transition: translate 0.8s var(--ease-out-expo);
      pointer-events: none;
    }
  }
  @media (hover: hover) {
    .btn-primary:hover {
      translate: 0 -2px;
      filter: brightness(1.04);
      box-shadow: 0 18px 44px color-mix(in oklch, var(--gold) 44%, transparent), inset 0 1px 0 rgb(255 255 255 / 50%), inset 0 -1px 0 rgb(80 60 0 / 30%);
      &::after { translate: 150%; }
    }
  }

  .btn-ghost, .btn-outline {
    position: relative; overflow: hidden;
    &::before {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(115deg, transparent, var(--gold-a18) 50%, transparent);
      translate: -130%;
      transition: translate 0.7s var(--ease-out-expo);
      pointer-events: none;
    }
  }
  @media (hover: hover) {
    .btn-ghost:hover::before, .btn-outline:hover::before { translate: 130%; }
  }

  .btn-ghost {
    color: var(--text);
    background: rgb(255 255 255 / 4%);
    border-color: var(--gold-soft);
  }
  @media (hover: hover) {
    .btn-ghost:hover {
      background: var(--gold-a8);
      border-color: var(--gold-a70);
      translate: 0 -2px;
      box-shadow: 0 12px 30px rgb(0 0 0 / 45%);
    }
  }

  .btn-outline {
    color: var(--gold);
    background: transparent;
    border-color: var(--gold-dim);
  }
  @media (hover: hover) {
    .btn-outline:hover { border-color: var(--gold); background: var(--gold-faint); }
  }

  .btn-whatsapp {
    color: #fff;
    background: linear-gradient(135deg, #2bf078, var(--wa-1) 38%, var(--wa-2));
    box-shadow: 0 12px 32px color-mix(in oklch, var(--wa-1) 32%, transparent), inset 0 1px 0 rgb(255 255 255 / 30%);
  }
  @media (hover: hover) {
    .btn-whatsapp:hover {
      translate: 0 -2px;
      box-shadow: 0 18px 44px color-mix(in oklch, var(--wa-1) 45%, transparent), inset 0 1px 0 rgb(255 255 255 / 40%);
    }
  }

  .btn-sm { padding: 0.55rem 1rem; font-size: var(--step--2); border-radius: var(--radius-sm); }

  /* §3 · inputs / select / segmented / field ----------------------------- */
  .field { display: flex; flex-direction: column; gap: 0.45rem; }
  .field-label { font-size: var(--step--2); color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

  .input, .select, textarea.input {
    inline-size: 100%;
    padding: 0.75rem 0.95rem;
    background: rgb(0 0 0 / 35%);
    border: 1px solid var(--gold-a30);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: max(1rem, 16px);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-out-expo), box-shadow var(--dur-fast) var(--ease-out-expo), background-color var(--dur-fast) var(--ease-out-expo);

    &::placeholder { color: var(--muted-2); }
    &:focus, &:focus-visible {
      border-color: var(--gold);
      box-shadow: var(--shadow-focus-gold), 0 0 22px var(--gold-a14);
      background: rgb(0 0 0 / 50%);
      outline: none;
    }
    &:not(:placeholder-shown):valid { border-color: var(--gold-dim); }
  }

  @supports (field-sizing: content) {
    textarea.input { field-sizing: content; min-block-size: 4lh; max-block-size: 12lh; }
  }

  .select {
    appearance: none; -webkit-appearance: none;
    padding-inline-end: 2.5rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
  }

  .segmented {
    display: inline-flex;
    padding: 0.25rem;
    border-radius: var(--radius-full);
    background: rgb(0 0 0 / 35%);
    border: 1px solid var(--gold-dim);
    gap: 0.15rem;

    & button {
      padding: 0.5rem 1rem;
      border-radius: var(--radius-full);
      font-size: var(--step--1);
      font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--muted);
      transition: color var(--dur-fast) var(--ease-out-expo), background-color var(--dur-fast) var(--ease-out-expo);

      &:hover { color: var(--text); }
      &.is-active {
        color: #1a140a;
        background: linear-gradient(135deg, #f5d78a, var(--gold) 60%, var(--gold-deep));
        box-shadow: 0 6px 18px var(--gold-a30);
      }
    }
  }

  /* §4 · glass / luxe-card / luxe-stat / luxe-shine / notice / empty ---- */
  .glass {
    background: linear-gradient(145deg, rgb(27 27 33 / 92%), rgb(20 20 24 / 86%));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }

  .luxe-card {
    position: relative;
    border: 1px solid var(--gold-a32);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, color-mix(in oklch, var(--panel) 96%, transparent), color-mix(in oklch, var(--bg-2) 96%, transparent));
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: translate var(--dur-slow) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo);

    &::before {
      content: ""; position: absolute; inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: radial-gradient(120% 80% at 10% 0%, var(--gold-a14), transparent 55%);
      opacity: 0;
      transition: opacity var(--dur-slow) ease;
    }
    &.no-hover {
      &:hover { translate: 0; border-color: var(--gold-a32); box-shadow: var(--shadow-sm); }
      &::before { display: none; }
    }
  }
  @media (hover: hover) {
    .luxe-card:hover {
      translate: 0 -6px;
      border-color: color-mix(in oklch, var(--gold) 75%, transparent);
      box-shadow: var(--shadow-lg), 0 0 0 1px var(--gold-a18), 0 0 60px color-mix(in oklch, var(--gold) 12%, transparent);
      &::before { opacity: 1; }
    }
    .luxe-card:active { translate: 0 -3px; scale: 0.995; }
  }

  .luxe-shine {
    position: relative; overflow: hidden;
    &::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(115deg, transparent 0%, var(--gold-a6) 45%, var(--gold-a32) 50%, var(--gold-a6) 55%, transparent 100%);
      translate: -130% 0;
      animation: shimmer 6.5s ease-in-out infinite;
      pointer-events: none;
    }
  }
  @keyframes shimmer { 0% { translate: -130% 0; opacity: 0; } 20% { opacity: 0.45; } 100% { translate: 160% 0; opacity: 0; } }

  .luxe-stat {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--gold-a18);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 2%));
    padding: 1rem 1.1rem;
    transition: translate var(--dur-base) var(--ease-out-expo), background-color var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo);

    & .label { font-size: var(--step--2); color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
    & .value { font-size: var(--step-1); font-weight: 600; margin-block-start: 0.4rem; font-feature-settings: "tnum" 1, "lnum" 1; }
  }
  @media (hover: hover) {
    .luxe-stat:hover {
      translate: 0 -3px;
      background: rgb(255 255 255 / 8%);
      border-color: var(--gold-a40);
      box-shadow: 0 12px 28px rgb(0 0 0 / 35%);
    }
  }

  .notice {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--gold-a30);
    background: linear-gradient(135deg, var(--gold-a8), var(--gold-a3));
    font-size: var(--step--1);

    &.warn  { border-color: color-mix(in oklch, var(--warn) 40%, transparent); background: linear-gradient(135deg, color-mix(in oklch, var(--warn) 8%, transparent), color-mix(in oklch, var(--warn) 3%, transparent)); }
    &.error { border-color: color-mix(in oklch, var(--bad) 40%, transparent);  background: linear-gradient(135deg, color-mix(in oklch, var(--bad) 8%, transparent),  color-mix(in oklch, var(--bad) 3%, transparent)); }
  }

  .empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px dashed var(--gold-dim);
    background: rgb(255 255 255 / 3%);

    & h3 { font-family: var(--font-serif); font-size: var(--step-1); margin: 0; }
    & p  { margin: 0.4rem auto 0; color: var(--muted); max-inline-size: 28rem; font-size: var(--step--1); }

    & .empty-state__icon {
      inline-size: 3.5rem; block-size: 3.5rem;
      border-radius: var(--radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, var(--gold-a18), var(--gold-a3));
      border: 1px solid var(--gold-dim);
      color: var(--gold);
      margin-block-end: 0.85rem;
    }
  }

  /* §5 · header / brand / nav / mobile drawer / icon-btn ------------------ */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background: linear-gradient(180deg, color-mix(in oklch, var(--bg-2) 82%, transparent), color-mix(in oklch, var(--bg-2) 65%, transparent));
    border-block-end: 1px solid var(--gold-a18);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    transition: background-color var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo);

    &::after {
      content: ""; position: absolute;
      inset-inline: 0; inset-block-end: -1px;
      block-size: 1px;
      background: var(--line-gold);
      opacity: 0.5;
      transition: opacity var(--dur-base) var(--ease-out-expo);
    }
    &.is-scrolled {
      background: linear-gradient(180deg, color-mix(in oklch, var(--bg-2) 94%, transparent), color-mix(in oklch, var(--bg-2) 86%, transparent));
      border-block-end-color: var(--gold-a32);
      box-shadow: 0 12px 40px rgb(0 0 0 / 50%);
      &::after { opacity: 1; }
    }
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
  }
  @media (max-height: 520px) { .site-header__inner { padding-block: 0.6rem; } }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;

    & .brand__logo {
      inline-size: 3rem; block-size: 3rem;
      border-radius: var(--radius-full);
      border: 2px solid var(--gold-a60);
      object-fit: cover;
      background: #0a0a0c;
      box-shadow: 0 0 0 1px rgb(0 0 0 / 35%), 0 8px 24px var(--gold-a18);
      transition: box-shadow var(--dur-base) var(--ease-out-expo), rotate var(--dur-base) var(--ease-out-expo), scale var(--dur-base) var(--ease-out-expo);
    }
    & .brand__title { font-family: var(--font-serif); font-weight: 700; font-size: var(--step-1); line-height: var(--lh-tight); }
    & .brand__sub   { font-size: var(--step--2); color: var(--muted); letter-spacing: var(--tracking-wide); }
  }
  @media (hover: hover) {
    .brand:hover .brand__logo {
      rotate: -3deg; scale: 1.05;
      box-shadow: 0 0 0 1px rgb(0 0 0 / 35%), 0 12px 36px color-mix(in oklch, var(--gold) 35%, transparent);
    }
  }
  @media (max-width: 360px) {
    .brand__sub { display: none; }
    .brand .brand__logo { inline-size: 2.4rem; block-size: 2.4rem; }
    .brand__title { font-size: var(--step-0); }
  }

  .nav {
    display: none;
    align-items: center;
    gap: 0.25rem;

    & a {
      position: relative;
      padding: 0.5rem 0.85rem;
      font-size: var(--step--1);
      color: var(--muted);
      border-radius: var(--radius-sm);
      transition: color var(--dur-base) var(--ease-out-expo), background-color var(--dur-base) var(--ease-out-expo);

      &::after {
        content: ""; position: absolute;
        inset-inline-start: 50%; inset-block-end: 0.3rem;
        translate: -50% 0;
        inline-size: 0; block-size: 2px;
        background: linear-gradient(90deg, transparent, var(--gold), transparent);
        transition: inline-size var(--dur-base) var(--ease-out-expo);
      }
      &:hover, &.is-active, &[aria-current="page"] { color: var(--text); &::after { inline-size: 70%; } }
      &[aria-current="page"] { color: var(--gold); font-weight: 700; }
    }

    @media (min-width: 900px) { display: inline-flex; }
  }

  .header-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
  @media (max-width: 360px) { .header-actions { gap: 0.35rem; } }
  @media (min-width: 640px) and (max-width: 899px) { .header-actions { gap: 0.5rem; } }

  .icon-btn, .icon-btn-sm {
    display: inline-flex;
    align-items: center; justify-content: center;
    background: rgb(255 255 255 / 4%);
    border: 1px solid var(--gold-dim);
    color: var(--text);
    transition: background-color var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo), translate var(--dur-base) var(--ease-out-expo);
  }
  .icon-btn    { inline-size: 2.6rem; block-size: 2.6rem; border-radius: 0.7rem; }
  .icon-btn-sm { inline-size: 2.1rem; block-size: 2.1rem; border-radius: 0.55rem; }
  @media (max-width: 360px) { .icon-btn { inline-size: 2.3rem; block-size: 2.3rem; } }
  @media (hover: hover) {
    .icon-btn:hover, .icon-btn-sm:hover {
      background: color-mix(in oklch, var(--gold) 12%, transparent);
      border-color: var(--gold-a60);
      translate: 0 -2px;
    }
    .icon-btn-sm.danger:hover {
      background: color-mix(in oklch, var(--bad) 18%, transparent);
      border-color: color-mix(in oklch, var(--bad) 55%, transparent);
      color: #f88;
    }
  }

  .mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }
  @media (min-width: 900px) { .mobile-toggle { display: none; } }

  .mobile-drawer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem 1.4rem;
    border-block-start: 1px solid var(--line);
    background: color-mix(in oklch, var(--bg-2) 96%, transparent);
    animation: slideDown var(--dur-base) var(--ease-out-expo);

    & a {
      display: block;
      padding: 0.85rem 0.95rem;
      border-radius: 0.7rem;
      color: var(--muted);
      border: 1px solid transparent;
      font-size: var(--step-0);
      transition: color var(--dur-fast) var(--ease-out-expo), background-color var(--dur-fast) var(--ease-out-expo), border-color var(--dur-fast) var(--ease-out-expo);

      &:hover {
        color: var(--text);
        background: var(--gold-a8);
        border-color: var(--gold-a20);
      }
    }
  }
  @keyframes slideDown { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }

  /* §6 · hero + scroll indicator ----------------------------------------- */
  .hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2rem, 8vw, 7rem) clamp(1.5rem, 7vw, 5rem);
    container-type: inline-size;
    container-name: hero;
    contain: layout paint;

    &::before {
      content: ""; position: absolute;
      inset-block-start: 8%; inset-inline-start: -10%;
      inline-size: 60%; block-size: 60%;
      background: radial-gradient(circle, var(--gold-a14), transparent 60%);
      pointer-events: none;
      z-index: -1;
    }
  }
  @media (hover: hover) and (min-width: 1024px) {
    .hero::before { filter: blur(40px); }
  }

  .hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;

    @media (min-width: 1024px) { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; }
  }

  .hero__title {
    font-family: var(--font-serif);
    font-size: var(--step-6);
    line-height: 1.02;
    letter-spacing: var(--tracking-tight);
    margin: 0.5rem 0 1.25rem;
    font-weight: 700;
    text-wrap: balance;

    & .reveal-word {
      display: inline-block;
      opacity: 0;
      transform: translateY(20px) rotateX(-30deg);
      animation: revealWord 0.9s var(--ease-out-expo) forwards;
      margin-inline-end: 0.25em;
      transform-origin: bottom center;
    }
  }
  @keyframes revealWord { to { opacity: 1; transform: translateY(0) rotateX(0); } }
  @media (max-width: 360px) {
    .hero__title { font-size: clamp(1.75rem, 9vw, 2.2rem); margin-block-end: 1rem; }
  }
  @media (min-width: 1440px) {
    .hero__title { font-size: clamp(3rem, 4.5vw, 5.6rem); }
  }

  .hero__lead {
    color: var(--muted);
    font-size: var(--step-0);
    line-height: var(--lh-relaxed);
    max-inline-size: 38rem;
    margin: 0 0 1.75rem;
    text-wrap: pretty;
  }
  @media (max-width: 360px) { .hero__lead { font-size: 0.95rem; margin-block-end: 1.25rem; } }

  .hero__cta {
    display: flex; flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-end: 1.75rem;

    & .btn { flex: 1 1 auto; }
    @media (min-width: 480px) { & .btn { flex: 0 0 auto; } }
  }
  @media (max-width: 360px) {
    .hero__cta { gap: 0.5rem; & .btn { padding: 0.75rem 1rem; font-size: 0.85rem; } }
  }

  .hero__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    max-inline-size: 32rem;

    @container hero (min-width: 360px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @container hero (min-width: 540px) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 360px) { .hero__stats { gap: 0.4rem; } .luxe-stat { padding: 0.75rem 0.85rem; & .value { font-size: 1.15rem; } } }

  .hero__visual { position: relative; perspective: 1200px; }

  .hero__image {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--gold-a45);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--gold-a18), 0 0 60px color-mix(in oklch, var(--gold) 16%, transparent);
    background: linear-gradient(135deg, #1a1a22, var(--bg));
    aspect-ratio: 4 / 5;

    & img {
      inline-size: 100%; block-size: 100%;
      object-fit: cover;
      transition: transform 1.2s var(--ease-out-expo);
    }
    &::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 50%, rgb(7 7 10 / 70%) 100%);
      pointer-events: none;
    }
  }
  @media (max-width: 1023px) {
    .hero__image { aspect-ratio: 4 / 5; max-block-size: 70vh; }
  }
  @media (max-height: 520px) and (orientation: landscape) {
    .hero__image { aspect-ratio: 16 / 9; }
  }

  /* Floating cards · mobile-first: inline en flow; tablet+: absolute */
  .hero__floating {
    display: inline-flex;
    flex-direction: column;
    margin-block: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-radius: 1rem;
    background: linear-gradient(140deg, color-mix(in oklch, var(--panel-2) 95%, transparent), color-mix(in oklch, var(--bg-2) 95%, transparent));
    border: 1px solid var(--gold-a45);
    box-shadow: 0 16px 40px rgb(0 0 0 / 55%), 0 0 0 1px color-mix(in oklch, var(--gold) 16%, transparent), 0 0 28px var(--gold-a18);

    & .badge-label { display: block; font-size: var(--step--2); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--muted); }
    & .badge-value { display: block; font-family: var(--font-serif); font-size: var(--step-1); font-weight: 700; color: var(--gold); margin-block-start: 0.2rem; }
  }
  @media (min-width: 768px) {
    .hero__floating {
      position: absolute;
      z-index: 5;
      padding: 0.85rem 1.05rem;
      &.top    { inset-block-start: 1.5rem; inset-inline-start: -1rem; }
      &.bottom { inset-block-end: 2rem;     inset-inline-end: -1rem; }
    }
  }

  .scroll-indicator {
    position: absolute;
    inset-block-end: 1.5rem;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: 1.5rem; block-size: 2.4rem;
    border: 1px solid var(--gold-a55);
    border-radius: var(--radius-full);
    display: flex;
    justify-content: center;
    padding-block-start: 0.45rem;
    pointer-events: auto;

    &::before {
      content: "";
      inline-size: 3px; block-size: 6px;
      border-radius: var(--radius-full);
      background: var(--gold);
      animation: scrollDot 1.8s ease-in-out infinite;
    }
  }
  @keyframes scrollDot { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0.85rem); opacity: 0; } }

  /* §7 · marquee --------------------------------------------------------- */
  .marquee {
    position: relative;
    overflow: hidden;
    border-block: 1px solid var(--gold-a28);
    background:
      radial-gradient(60% 100% at 50% 50%, var(--gold-a6), transparent 75%),
      linear-gradient(90deg, var(--bg-2), color-mix(in oklch, var(--panel) 60%, transparent), var(--bg-2));
    mask-image: linear-gradient(90deg, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
  }

  .marquee__track {
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    padding-block: 0.85rem;
    white-space: nowrap;
    animation: marqueeScroll 38s linear infinite;
    will-change: transform;
  }

  .marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--step--1);
    color: color-mix(in oklch, var(--text) 92%, transparent);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;

    & .star { color: var(--gold); font-size: 1rem; line-height: 0; text-shadow: 0 0 12px var(--gold-a55); }
  }
  @keyframes marqueeScroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

  /* §8 · reveal entry animations ---------------------------------------- */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s var(--ease-out-expo), transform 0.85s var(--ease-out-expo);
    will-change: opacity, transform;

    &.is-in-view { opacity: 1; transform: translateY(0); }
    &.up    { transform: translateY(28px); }
    &.down  { transform: translateY(-28px); }
    &.left  { transform: translateX(28px); }
    &.right { transform: translateX(-28px); }
    &.zoom  { transform: scale(0.94); }
    &.is-in-view.up, &.is-in-view.down  { transform: translateY(0); }
    &.is-in-view.left, &.is-in-view.right { transform: translateX(0); }
    &.is-in-view.zoom { transform: scale(1); }
  }
  .delay-1 { transition-delay: 60ms; }
  .delay-2 { transition-delay: 140ms; }
  .delay-3 { transition-delay: 220ms; }
  .delay-4 { transition-delay: 300ms; }
  .delay-5 { transition-delay: 380ms; }
  .delay-6 { transition-delay: 460ms; }

  /* §9 · gold grid + gold card ------------------------------------------ */
  .gold-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    container-type: inline-size;
    container-name: golds;

    @container golds (min-width: 480px) { grid-template-columns: repeat(2, 1fr); }
    @container golds (min-width: 720px) { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  }

  .gold-card {
    position: relative;
    padding: 1.4rem 1.4rem 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gold-a32);
    background:
      radial-gradient(120% 100% at 50% 0%, var(--gold-a8), transparent 60%),
      linear-gradient(160deg, var(--panel), #0e0e12);
    overflow: hidden;
    transition: translate var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo);

    &::before {
      content: ""; position: absolute;
      inset-block-start: -40%; inset-inline-end: -40%;
      inline-size: 220px; block-size: 220px;
      border-radius: var(--radius-full);
      background: radial-gradient(circle, var(--gold-a18), transparent 70%);
      pointer-events: none;
    }

    & .gold-card__karat { font-family: var(--font-serif); font-size: var(--step-1); font-weight: 700; color: var(--gold); }
    & .gold-card__sub   { font-size: var(--step--2); color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
    & .gold-card__row   { display: flex; align-items: baseline; justify-content: space-between; margin-block-start: 1rem; gap: 1rem; }
    & .gold-card__price {
      font-size: var(--step-2); font-weight: 700;
      font-family: var(--font-serif);
      font-feature-settings: "tnum" 1;
      color: var(--gold);

      & small { font-size: var(--step--2); color: var(--muted); margin-inline-start: 0.4rem; font-family: var(--font-sans); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
    }
  }
  @media (hover: hover) {
    .gold-card:hover {
      translate: 0 -6px;
      border-color: var(--gold-a70);
      box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in oklch, var(--gold) 25%, transparent);
    }
  }

  /* §10 · filters -------------------------------------------------------- */
  .filters {
    display: flex; flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 1.75rem;
  }
  @media (max-width: 640px) {
    .filters {
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-block-end: 0.25rem;
      margin-inline: calc(-1 * max(1rem, env(safe-area-inset-left))) calc(-1 * max(1rem, env(safe-area-inset-right)));
      padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
      mask-image: linear-gradient(90deg, #000 0, #000 85%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 85%, transparent 100%);

      &::-webkit-scrollbar { display: none; }
    }
    .filter-chip { flex: 0 0 auto; scroll-snap-align: start; }
  }
  @media (max-width: 480px) {
    .filters { gap: 0.35rem; }
    .filter-chip { padding: 0.45rem 0.85rem; font-size: 0.78rem; }
  }

  .filter-chip {
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in oklch, var(--gold) 22%, transparent);
    background: rgb(255 255 255 / 3%);
    font-size: var(--step--1);
    color: var(--muted);
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: color var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo), background-color var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo), translate var(--dur-base) var(--ease-out-expo);

    &:hover { color: var(--text); border-color: var(--gold-soft); }
    &.is-active {
      color: #1a140a;
      background: linear-gradient(135deg, #f5d78a, var(--gold) 60%, var(--gold-deep));
      border-color: transparent;
      box-shadow: 0 10px 24px var(--gold-a30), 0 0 0 1px color-mix(in oklch, var(--gold-light) 45%, transparent);
    }
  }
  @media (hover: hover) { .filter-chip:hover { translate: 0 -1px; } }

  /* §11 · product grid + product card ----------------------------------- */
  .product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    container-type: inline-size;
    container-name: products;

    @container products (min-width: 360px) { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    @container products (min-width: 540px) { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
    @container products (min-width: 768px) { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
    @container products (min-width: 1200px){ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
  }

  .product-card {
    position: relative;
    display: flex; flex-direction: column;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, color-mix(in oklch, var(--panel) 96%, transparent), color-mix(in oklch, var(--bg) 96%, transparent));
    overflow: hidden;
    transition: translate var(--dur-slow) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-slow) var(--ease-out-expo);

    &:has(.product-card__status.is-sold) { opacity: 0.92; }
    &:focus-within { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }

    & .product-card__media {
      position: relative;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      background: linear-gradient(135deg, #1a1a22, #0a0a0d);

      & img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out-expo), filter 0.6s ease; }
      &::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(7 7 10 / 85%) 100%); pointer-events: none; }
    }

    & .product-card__tag {
      position: absolute;
      inset-block-start: 0.85rem; inset-inline-start: 0.85rem;
      z-index: 2;
      padding: 0.3rem 0.65rem;
      border-radius: var(--radius-full);
      background: linear-gradient(135deg, var(--gold-a18), color-mix(in oklch, var(--bg-2) 85%, transparent));
      border: 1px solid var(--gold-a45);
      color: var(--gold);
      font-size: var(--step--2);
      letter-spacing: var(--tracking-wider);
      font-weight: 700;
      text-transform: uppercase;
      box-shadow: 0 6px 18px rgb(0 0 0 / 35%), inset 0 0 0 1px var(--gold-a32);
    }

    & .product-card__overlay {
      position: absolute;
      inset: auto 0 0;
      z-index: 2;
      display: flex; flex-direction: column;
      gap: 0.25rem;
      padding: 1rem 1.1rem;
      translate: 0 100%;
      transition: translate var(--dur-slow) var(--ease-out-expo);

      & .actions { display: inline-flex; gap: 0.5rem; margin-block-start: 0.4rem; }
    }

    & .product-card__body {
      padding: 1rem 1.1rem 1.2rem;
      display: flex; flex-direction: column;
      gap: 0.25rem;
      border-block-start: 1px solid var(--line-soft);
    }
    & .product-card__category { font-size: var(--step--2); color: var(--muted); text-transform: uppercase; letter-spacing: var(--tracking-wider); }
    & .product-card__name     { font-family: var(--font-serif); font-size: var(--step-0); font-weight: 600; line-height: 1.25; }
    & .product-card__meta     { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-block-start: 0.35rem; }
    & .product-card__price    { font-size: var(--step-0); font-weight: 800; color: var(--gold); font-feature-settings: "tnum" 1; }
    & .product-card__weight   { font-size: var(--step--2); color: var(--muted); }

    /* Status pill (esquina sup-derecha) · color + icono Unicode */
    & .product-card__status {
      position: absolute;
      inset-block-start: 0.85rem; inset-inline-end: 0.85rem;
      z-index: 3;
      padding: 0.35rem 0.7rem;
      border-radius: var(--radius-full);
      font-size: var(--step--2);
      font-weight: 700;
      letter-spacing: var(--tracking-wider);
      text-transform: uppercase;

      &.is-sold {
        background: color-mix(in oklch, #b41e1e 85%, transparent);
        border: 1px solid rgb(255 100 100 / 60%);
        color: #fff;
        &::before { content: "✕"; margin-inline-end: 0.3em; font-weight: 900; }
      }
      &.is-reserved {
        background: color-mix(in oklch, var(--warn) 90%, transparent);
        border: 1px solid color-mix(in oklch, var(--warn) 80%, transparent);
        color: #1a140a;
        &::before { content: "⏱"; margin-inline-end: 0.3em; }
      }
    }

    /* Card en estado vendido */
    &.is-sold .product-card__media img { filter: grayscale(0.85) brightness(0.65); }
    &.is-sold .product-card__media::before {
      content: "VENDIDO";
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      z-index: 2;
      font-family: var(--font-serif);
      font-size: var(--step-2);
      font-weight: 700;
      letter-spacing: 0.4em;
      color: rgb(255 255 255 / 92%);
      text-shadow: 0 4px 16px rgb(0 0 0 / 60%);
      transform: rotate(-12deg);
      pointer-events: none;
    }
    &.is-reserved             { border-color: color-mix(in oklch, var(--warn) 50%, transparent); }
    &.is-sold .product-card__price { text-decoration: line-through; opacity: 0.6; }
  }

  @media (hover: hover) {
    .product-card:hover {
      translate: 0 -6px;
      border-color: var(--gold-soft);
      box-shadow: var(--shadow-lg), 0 0 0 1px var(--gold-a30), 0 0 50px var(--gold-a14);

      & .product-card__media img { transform: scale(1.08); filter: saturate(1.05); }
      & .product-card__overlay   { translate: 0 0; }
      & .product-card__price {
        background-image: linear-gradient(115deg, var(--gold-light), var(--gold) 45%, var(--gold-deep) 75%, var(--gold-light));
        background-size: 200% auto;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: shineSlide 4s ease-in-out infinite;
      }
    }
  }
  @media (hover: none) {
    .product-card__overlay { position: static; translate: 0 0; padding: 0.5rem 1.1rem 0; opacity: 1; }
  }

  @supports (content-visibility: auto) {
    .product-card, .gold-card, .feature {
      content-visibility: auto;
      contain-intrinsic-size: 360px 480px;
    }
  }

  @supports (view-transition-name: none) {
    .product-card { view-transition-name: var(--vt-name, none); }
  }

  /* §12 · feature grid + feature ---------------------------------------- */
  .feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    container-type: inline-size;
    container-name: features;

    @container features (min-width: 480px) { grid-template-columns: repeat(2, 1fr); }
    @container features (min-width: 720px) { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  }

  .feature {
    position: relative;
    padding: 1.5rem 1.4rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background:
      radial-gradient(80% 100% at 100% 0%, var(--gold-a5), transparent 60%),
      linear-gradient(160deg, color-mix(in oklch, var(--panel-2) 85%, transparent), color-mix(in oklch, var(--bg-2) 70%, transparent));
    transition: translate var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo);

    & .feature__icon {
      display: inline-flex;
      align-items: center; justify-content: center;
      inline-size: 2.6rem; block-size: 2.6rem;
      border-radius: 0.85rem;
      background:
        radial-gradient(80% 100% at 50% 0%, color-mix(in oklch, var(--gold-light) 28%, transparent), var(--gold-a10) 60%, transparent 80%),
        linear-gradient(135deg, var(--gold-a18), var(--gold-a3));
      border: 1px solid color-mix(in oklch, var(--gold) 50%, transparent);
      color: var(--gold);
      margin-block-end: 0.85rem;
      box-shadow: inset 0 1px 0 color-mix(in oklch, var(--gold-light) 25%, transparent);
    }
    & .feature__title { font-family: var(--font-serif); font-size: var(--step-1); font-weight: 600; margin-block-end: 0.35rem; }
    & .feature__text  { font-size: var(--step--1); color: var(--muted); line-height: 1.55; text-wrap: pretty; }
  }
  @media (hover: hover) {
    .feature:hover {
      translate: 0 -4px;
      border-color: var(--gold-a45);
      box-shadow: 0 22px 50px rgb(0 0 0 / 50%), 0 0 0 1px var(--gold-a18);
    }
  }

  /* §13 · calculator (exchange) ----------------------------------------- */
  .calc-panel {
    position: relative;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gold-a40);
    background:
      radial-gradient(140% 90% at 0% 0%, var(--gold-a8), transparent 60%),
      linear-gradient(160deg, color-mix(in oklch, var(--panel-2) 94%, transparent), color-mix(in oklch, var(--bg-2) 92%, transparent));
    padding: clamp(1.5rem, 3vw, 2.4rem);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    max-inline-size: 56rem;
    margin-inline: auto;
  }

  .calc-result {
    display: flex; flex-direction: column;
    gap: 0.4rem;
    padding: 1.4rem 1.5rem;
    border-radius: var(--radius-lg);
    background:
      radial-gradient(120% 100% at 0% 0%, var(--gold-a20), transparent 55%),
      linear-gradient(160deg, var(--gold-a10), color-mix(in oklch, var(--gold-deep) 4%, transparent));
    border: 1px solid var(--gold-a45);
    box-shadow: var(--shadow-inset-line);

    & .calc-result__label { font-size: var(--step--2); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--muted); }
    & .calc-result__value { font-family: var(--font-serif); font-size: var(--step-5); font-weight: 700; color: var(--gold); line-height: 1.05; font-feature-settings: "tnum" 1; letter-spacing: var(--tracking-tight); }
    & .calc-result__sub   { font-size: var(--step--1); color: var(--muted); }
  }

  /* Focus dorado especial para input de gramos en /exchange (#gramos-oro) */
  #compra-oro #gramos-oro:focus {
    outline: none;
    border-color: var(--gold-a55);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--gold) 15%, transparent);
  }

  /* §14 · tablas ---------------------------------------------------------- */
  .table-shell {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--gold-a32);
    background: var(--panel);
    box-shadow: var(--shadow-md), inset 0 1px 0 var(--gold-a8);
  }
  .table-scroll {
    max-block-size: min(540px, 60vh);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-soft) rgb(255 255 255 / 5%);
  }
  @media (hover: none) {
    .table-scroll { scroll-snap-type: y proximity; }
    .luxe-table tbody tr { scroll-snap-align: start; }
  }

  .luxe-table {
    inline-size: 100%; min-inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--step--1);

    & thead { position: sticky; inset-block-start: 0; z-index: 1; background: color-mix(in oklch, var(--panel) 95%, transparent); }
    & th { text-align: start; padding: 0.85rem 1rem; color: var(--muted); font-weight: 500; font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.1em; border-block-end: 1px solid var(--line); }
    & td { padding: 0.85rem 1rem; border-block-start: 1px solid var(--line); }
    & tbody tr { transition: background-color var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo); }
  }
  @media (hover: hover) {
    .luxe-table tbody tr:hover {
      background: linear-gradient(90deg, var(--gold-a8), color-mix(in oklch, var(--gold) 2%, transparent) 60%, transparent);
      box-shadow: inset 4px 0 0 0 var(--gold);
    }
  }

  .entity-cell { display: flex; align-items: center; gap: 0.7rem; }

  .entity-logo {
    inline-size: 1.6rem; block-size: 1.6rem;
    border-radius: var(--radius-full);
    background: #fff;
    padding: 2px;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    box-shadow: 0 2px 6px rgb(0 0 0 / 35%);
    transition: scale var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo);
  }
  .entity-fallback {
    display: inline-flex;
    align-items: center; justify-content: center;
    inline-size: 1.6rem; block-size: 1.6rem;
    border-radius: var(--radius-full);
    font-size: var(--step--2);
    font-weight: 700;
    background: linear-gradient(135deg, var(--gold-a40), color-mix(in oklch, var(--gold-deep) 20%, transparent));
    color: var(--gold);
    border: 1px solid var(--gold-a45);
  }
  @media (hover: hover) {
    .luxe-table tbody tr:hover .entity-logo { scale: 1.12; box-shadow: 0 0 14px var(--gold-a40); }
  }
  @media (max-width: 768px) {
    #entidades .table-scroll { inline-size: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #entidades .luxe-table { min-inline-size: 32rem; }
    #entidades .entity-cell { max-inline-size: 14rem; overflow-wrap: anywhere; word-break: break-word; }
  }

  /* §15 · footer + socials ---------------------------------------------- */
  .site-footer {
    position: relative;
    margin-block-start: 4rem;
    background:
      radial-gradient(60% 100% at 50% 0%, var(--gold-a5), transparent 70%),
      linear-gradient(180deg, transparent, color-mix(in oklch, var(--bg-2) 70%, transparent));
    border-block-start: 1px solid var(--gold-a20);

    &::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 1px; background: var(--line-gold); opacity: 0.7; }

    & h4 {
      position: relative; display: inline-block;
      font-family: var(--font-serif); font-size: var(--step-0);
      margin: 0 0 0.85rem;
      padding-block-end: 0.4rem;

      &::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; inline-size: 1.6rem; block-size: 2px; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--gold), transparent); }
    }
    & p, & li { color: var(--muted); font-size: var(--step--1); line-height: var(--lh-relaxed); }
    & ul { list-style: none; padding: 0; margin: 0; }
    & a { transition: color var(--dur-base) var(--ease-out-expo); &:hover { color: var(--gold-2); } }
  }

  .site-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.4rem;
    padding: 2rem 0 1rem;

    @media (min-width: 600px)  { grid-template-columns: repeat(2, 1fr); gap: 2rem; padding-block-start: 3rem; }
    @media (min-width: 1024px) { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  }

  .footer__brand img { aspect-ratio: 1 / 1; inline-size: clamp(72px, 16vw, 120px); block-size: auto; }

  .footer-bar {
    display: flex; flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.25rem 0 2rem;
    font-size: var(--step--1);
    color: var(--muted-2);
    border-block-start: 1px solid var(--line);

    @media (max-width: 480px) {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0.5rem;
      padding-block-end: max(2rem, env(safe-area-inset-bottom));
    }
  }
  .socials { display: inline-flex; gap: 0.5rem; }

  /* §16 · float WhatsApp + Cajas FAB ------------------------------------ */
  .float-wa {
    position: fixed;
    inset-block-end: max(1.25rem, env(safe-area-inset-bottom));
    inset-inline-end: max(1.25rem, env(safe-area-inset-right));
    z-index: var(--z-fab);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.2rem;
    border-radius: var(--radius-full);
    color: #fff;
    background: linear-gradient(135deg, #2bf078, var(--wa-1) 38%, var(--wa-2));
    box-shadow: 0 14px 36px color-mix(in oklch, var(--wa-1) 40%, transparent), 0 0 0 6px color-mix(in oklch, var(--wa-1) 6%, transparent);
    animation: floatBob 4.5s ease-in-out infinite;
    transition: box-shadow var(--dur-base) var(--ease-out-expo), translate var(--dur-base) var(--ease-out-expo);
    will-change: transform;

    & svg { inline-size: 1.1rem; block-size: 1.1rem; }
  }
  @media (hover: hover) {
    .float-wa:hover {
      animation: none;
      translate: 0 -3px;
      box-shadow: 0 18px 44px color-mix(in oklch, var(--wa-1) 55%, transparent), 0 0 0 10px color-mix(in oklch, var(--wa-1) 10%, transparent);
    }
  }
  @media (max-width: 480px) {
    .float-wa { padding: 0.7rem 1rem; font-size: var(--step--1); & svg { inline-size: 1rem; block-size: 1rem; } }
  }
  @media (max-width: 360px) { .float-wa { padding: 0.65rem 0.9rem; font-size: 0.8rem; & svg { inline-size: 1rem; block-size: 1rem; } } }
  @keyframes floatBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

  .acacio-cajas-fab {
    position: fixed;
    inset-block-end: max(1.25rem, env(safe-area-inset-bottom));
    inset-inline-end: max(5.5rem, calc(env(safe-area-inset-right) + 5.5rem));
    z-index: var(--z-fab);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #1a1305;
    background: linear-gradient(135deg, #f6e7a8, var(--gold) 55%, #8b6914);
    border: 1px solid var(--gold-soft);
    box-shadow: 0 10px 28px var(--gold-a32), 0 2px 8px rgb(0 0 0 / 35%);
    text-decoration: none;
    transition: filter var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo), translate var(--dur-base) var(--ease-out-expo), opacity var(--dur-base) var(--ease-out-expo);
    opacity: 0;
    translate: 0 8px;
    pointer-events: none;

    & svg { inline-size: 16px; block-size: 16px; }
  }
  html[data-cajas-fab="on"] .acacio-cajas-fab { opacity: 1; translate: 0 0; pointer-events: auto; }
  @media (hover: hover) {
    .acacio-cajas-fab:hover {
      filter: brightness(1.06);
      translate: 0 -2px;
      box-shadow: 0 14px 32px var(--gold-a40), 0 2px 8px rgb(0 0 0 / 40%);
    }
  }
  @media (max-width: 540px) { .acacio-cajas-fab { inset-inline-end: 1rem; inset-block-end: max(5rem, env(safe-area-inset-bottom)); } }

  /* §17 · modal + toast + lightbox -------------------------------------- */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgb(0 0 0 / 65%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center; justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.2s var(--ease-out-expo);

    @supports (transition-behavior: allow-discrete) {
      transition: opacity var(--dur-base) var(--ease-out-expo), display var(--dur-base) allow-discrete;
      @starting-style { opacity: 0; }
    }

    @media (max-width: 640px) { padding: 0; align-items: flex-end; }
  }

  .modal {
    inline-size: 100%;
    max-inline-size: 38rem;
    max-block-size: 92dvh;
    overflow-y: auto;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gold-a40);
    background: linear-gradient(160deg, var(--panel), #0c0c10);
    box-shadow: var(--shadow-lg);
    padding: 1.6rem;
    animation: modalIn 0.28s var(--ease-out-expo);
    scrollbar-width: thin;
    scrollbar-color: var(--gold-soft) rgb(255 255 255 / 5%);

    @media (max-width: 640px) {
      max-inline-size: 100%;
      max-block-size: 95dvh;
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      padding: 1.2rem 1rem 1.4rem;
    }
  }
  @keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
  @keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

  .modal__header { display: flex; align-items: center; justify-content: space-between; margin-block-end: 1.2rem; gap: 1rem; }
  .modal__title {
    font-family: var(--font-serif);
    font-size: var(--step-2);
    font-weight: 700;
    margin: 0;
    text-wrap: balance;

    @media (max-width: 640px) { font-size: var(--step-1); }
  }
  .modal__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;

    @media (min-width: 480px) { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  }

  .toast-stack {
    position: fixed;
    inset-block-start: 1.2rem;
    inset-inline-end: 1.2rem;
    z-index: var(--z-toast);
    display: flex; flex-direction: column;
    gap: 0.6rem;
    pointer-events: none;

    @media (max-width: 640px) {
      inset-block-start: auto;
      inset-block-end: max(5rem, calc(env(safe-area-inset-bottom) + 5rem));
      inset-inline: 0.75rem;
    }
  }

  .toast {
    pointer-events: auto;
    min-inline-size: 18rem; max-inline-size: 22rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--gold-a30);
    background:
      radial-gradient(80% 100% at 0% 0%, var(--gold-a10), transparent 55%),
      linear-gradient(160deg, color-mix(in oklch, var(--panel) 96%, transparent), color-mix(in oklch, var(--bg-2) 95%, transparent));
    box-shadow: var(--shadow-md), 0 0 0 1px var(--gold-a18);
    display: flex; align-items: flex-start;
    gap: 0.7rem;
    animation: toastIn 0.28s var(--ease-out-back);

    @media (max-width: 640px) { min-inline-size: 0; max-inline-size: 100%; }

    & .toast__title { font-weight: 700; font-size: var(--step--1); }
    & .toast__msg   { font-size: var(--step--2); color: var(--muted); margin-block-start: 0.15rem; }

    &.success { border-color: color-mix(in oklch, var(--ok) 45%, transparent);  box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in oklch, var(--ok) 45%, transparent); }
    &.warn    { border-color: color-mix(in oklch, var(--warn) 45%, transparent); box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in oklch, var(--warn) 45%, transparent); }
    &.error   { border-color: color-mix(in oklch, var(--bad) 45%, transparent); box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in oklch, var(--bad) 45%, transparent); }
  }
  @keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

  .lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-lightbox);
    background: radial-gradient(60% 80% at 50% 50%, var(--gold-a6), transparent 70%), color-mix(in oklch, var(--bg) 96%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center; justify-content: center;
    animation: fadeIn 0.22s var(--ease-out-expo);
    cursor: zoom-out;

    & .lightbox__img {
      max-inline-size: 92vw;
      max-block-size: 88vh;
      border-radius: var(--radius-md);
      border: 1px solid var(--gold-a32);
      box-shadow: 0 26px 80px rgb(0 0 0 / 70%), 0 0 0 1px var(--gold-a18), 0 0 60px color-mix(in oklch, var(--gold) 16%, transparent);
      cursor: default;
      user-select: none;

      @media (max-width: 640px) { max-inline-size: 96vw; max-block-size: 80vh; }
    }

    & .lightbox__close, & .lightbox__nav {
      position: absolute;
      z-index: 1;
      inline-size: 3rem; block-size: 3rem;
      border-radius: var(--radius-full);
      border: 1px solid var(--gold-a40);
      background: color-mix(in oklch, var(--panel) 90%, transparent);
      color: var(--gold);
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background-color var(--dur-fast) var(--ease-out-expo), border-color var(--dur-fast) var(--ease-out-expo), scale var(--dur-fast) var(--ease-out-expo);

      &:hover { background: var(--gold-a18); border-color: var(--gold); scale: 1.06; }
    }

    & .lightbox__close { inset-block-start: max(1rem, env(safe-area-inset-top)); inset-inline-end: max(1rem, env(safe-area-inset-right)); }
    & .lightbox__nav.prev { inset-inline-start: 1rem; inset-block-start: 50%; translate: 0 -50%; }
    & .lightbox__nav.next { inset-inline-end: 1rem;   inset-block-start: 50%; translate: 0 -50%; }

    & .lightbox__counter {
      position: absolute;
      inset-block-end: max(1rem, env(safe-area-inset-bottom));
      inset-inline-start: 50%;
      translate: -50% 0;
      background: color-mix(in oklch, var(--panel) 90%, transparent);
      border: 1px solid var(--gold-a30);
      border-radius: var(--radius-full);
      padding: 0.4rem 0.95rem;
      font-size: var(--step--2);
      color: var(--muted);
      letter-spacing: var(--tracking-wide);
    }

    @media (max-width: 640px) {
      & .lightbox__close, & .lightbox__nav { inline-size: 2.6rem; block-size: 2.6rem; }
      & .lightbox__nav.prev { inset-inline-start: 0.5rem; }
      & .lightbox__nav.next { inset-inline-end: 0.5rem; }
    }
  }

  /* §18 · skeleton / spinner / pagination ------------------------------- */
  .skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: rgb(255 255 255 / 6%);

    &::after {
      content: ""; position: absolute; inset: 0;
      translate: -100% 0;
      background: linear-gradient(90deg, transparent 0%, var(--gold-a8) 35%, var(--gold-a18) 50%, var(--gold-a8) 65%, transparent 100%);
      animation: skeletonSweep 1.4s ease-in-out infinite;
    }
  }
  @keyframes skeletonSweep { to { translate: 100% 0; } }

  .skeleton-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: linear-gradient(160deg, var(--panel), #0c0c10);
    overflow: hidden;
    display: flex; flex-direction: column;

    & .skeleton-card__media { aspect-ratio: 4 / 5; background: rgb(255 255 255 / 4%); }
    & .skeleton-card__body  { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; border-block-start: 1px solid var(--line-soft); }
    & .skeleton-line        { block-size: 0.7rem; border-radius: 0.4rem; }
  }

  .spinner {
    display: inline-block;
    inline-size: 2.25rem; block-size: 2.25rem;
    border-radius: var(--radius-full);
    border: 2px solid var(--gold-a14);
    border-block-start-color: var(--gold);
    border-inline-end-color: var(--gold-2);
    animation: spinSoft 0.9s linear infinite;
    filter: drop-shadow(0 0 10px var(--gold-a30));
  }
  @keyframes spinSoft { to { transform: rotate(360deg); } }

  .pagination {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-block-start: 1rem;
    flex-wrap: wrap;
    justify-content: center;

    & button {
      padding: 0.45rem 0.85rem;
      border-radius: 0.55rem;
      background: rgb(255 255 255 / 3%);
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: var(--step--1);

      &.is-active { color: #1a140a; background: linear-gradient(135deg, #f5d78a, var(--gold) 60%, var(--gold-deep)); border-color: transparent; font-weight: 700; }
      &:disabled { opacity: 0.4; cursor: not-allowed; }
    }

    @media (max-width: 480px) { gap: 0.2rem; & button { padding: 0.55rem 0.75rem; font-size: 0.8rem; } }
  }

  .drag-handle { cursor: grab; color: var(--muted); padding: 0 0.2rem; &:active { cursor: grabbing; } }
  .row-actions { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }

  /* §19 · login --------------------------------------------------------- */
  .login-shell {
    min-block-size: 100svh;
    display: flex;
    align-items: center; justify-content: center;
    padding: 2rem 1rem;

    @media (max-width: 480px) {
      padding-block-start: max(2rem, env(safe-area-inset-top));
      padding-block-end: max(2rem, env(safe-area-inset-bottom));
    }
    @media (max-height: 520px) and (orientation: landscape) {
      padding: 1rem;
      min-block-size: 100svh;
    }
  }

  .login-card {
    inline-size: 100%;
    max-inline-size: 26rem;
    padding: 2.2rem 2rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gold-a40);
    background:
      radial-gradient(60% 80% at 100% 0%, var(--gold-a18), transparent 55%),
      linear-gradient(160deg, color-mix(in oklch, var(--panel-2) 95%, transparent), color-mix(in oklch, var(--bg-2) 95%, transparent));
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--gold-a30), 0 0 70px color-mix(in oklch, var(--gold) 12%, transparent);
    position: relative;
    overflow: hidden;

    @media (max-width: 480px) { padding: 1.6rem 1.3rem; }
  }

  /* §20 · admin --------------------------------------------------------- */
  .admin-layout {
    display: grid;
    grid-template-columns: 1fr;
    min-block-size: 100svh;

    @media (min-width: 768px) and (max-width: 1023px) { grid-template-columns: 220px 1fr; }
    @media (min-width: 1024px) { grid-template-columns: 240px 1fr; }
  }
  .admin-shell { display: grid; grid-template-columns: 1fr; gap: 1.25rem; padding-block: 1.5rem; }

  .admin-sidebar {
    background:
      radial-gradient(80% 60% at 0% 0%, var(--gold-a5), transparent 70%),
      linear-gradient(180deg, color-mix(in oklch, var(--bg-2) 96%, transparent), color-mix(in oklch, var(--panel) 95%, transparent));
    border-inline-end: 1px solid var(--gold-a18);
    padding: 1.5rem 1.2rem;
    position: sticky;
    inset-block-start: 0;
    block-size: max-content;
    min-block-size: 100svh;

    & .admin-sidebar__brand {
      display: flex; align-items: center;
      gap: 0.7rem;
      padding-block-end: 1.2rem;
      border-block-end: 1px solid var(--line);
      margin-block-end: 1rem;

      & img { inline-size: 2.4rem; block-size: 2.4rem; border-radius: var(--radius-full); border: 1.5px solid var(--gold-a55); }
    }

    @media (max-width: 1023px) {
      position: relative;
      min-block-size: 0;
      border-inline-end: none;
      border-block-end: 1px solid var(--line);
      padding: 0.85rem 1rem;

      & .admin-sidebar__brand { padding-block-end: 0.8rem; margin-block-end: 0.8rem; }
    }
    @media (min-width: 768px) and (max-width: 1023px) { padding: 1.2rem 0.9rem; }
  }

  .admin-nav {
    display: flex; flex-direction: column;
    gap: 0.2rem;

    & a {
      padding: 0.7rem 0.9rem;
      border-radius: 0.7rem;
      font-size: var(--step--1);
      color: var(--muted);
      border: 1px solid transparent;
      display: flex; align-items: center;
      gap: 0.7rem;
      transition: color var(--dur-fast) var(--ease-out-expo), background-color var(--dur-fast) var(--ease-out-expo), border-color var(--dur-fast) var(--ease-out-expo), box-shadow var(--dur-fast) var(--ease-out-expo);

      &:hover { color: var(--text); background: var(--gold-a6); }
      &.is-active, &[aria-current="page"] {
        color: var(--text);
        background: radial-gradient(80% 100% at 100% 0%, var(--gold-a18), transparent 60%), var(--gold-a8);
        border-color: var(--gold-a40);
        box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--gold) 16%, transparent);
      }
    }

    @media (max-width: 1023px) {
      flex-direction: row;
      overflow-x: auto;
      scrollbar-width: none;
      gap: 0.35rem;
      padding-block-end: 0.25rem;

      &::-webkit-scrollbar { display: none; }
      & a { flex: 0 0 auto; padding: 0.55rem 0.9rem; font-size: var(--step--1); white-space: nowrap; }
    }
  }

  .admin-main {
    padding: 1.5rem 1.5rem 3rem;
    max-inline-size: 100%;

    @media (min-width: 768px) { padding: 2rem 2.5rem 4rem; }
    @media (min-width: 768px) and (max-width: 1023px) { padding: 1.5rem 1.5rem 3rem; }
  }

  .admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-block-end: 1rem; }

  .admin-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: linear-gradient(160deg, var(--panel), #0c0c10);
    padding: 1.4rem 1.5rem;
  }

  .admin-tabs {
    display: inline-flex; flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.3rem;
    border-radius: var(--radius-full);
    background: rgb(0 0 0 / 35%);
    border: 1px solid var(--gold-dim);

    & button {
      padding: 0.55rem 1.05rem;
      border-radius: var(--radius-full);
      font-size: var(--step--1);
      font-weight: 600;
      color: var(--muted);
      transition: color var(--dur-base) var(--ease-out-expo), background-color var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo);

      &:hover { color: var(--text); }
      &.is-active { color: #1a140a; background: linear-gradient(135deg, #f5d78a, var(--gold) 60%, var(--gold-deep)); box-shadow: 0 6px 18px var(--gold-a30); }
    }
  }

  .admin-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
    margin-block-end: 1.5rem;

    @media (min-width: 480px) { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.85rem; }
  }

  .admin-stat {
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: linear-gradient(160deg, color-mix(in oklch, var(--panel-2) 85%, transparent), color-mix(in oklch, var(--bg-2) 85%, transparent));
    padding: 1rem 1.15rem;

    & .label { font-size: var(--step--2); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
    & .value { font-family: var(--font-serif); font-size: var(--step-3); font-weight: 700; margin-block-start: 0.3rem; }
    &.gold .value { color: var(--gold); }

    @media (max-width: 480px) { & .value { font-size: 1.4rem; } }
  }

  /* admin-table · scroll horizontal en mobile vía display:block hack */
  .admin-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--step--1);

    & th {
      text-align: start;
      padding: 0.85rem 1rem;
      color: var(--muted);
      font-weight: 500;
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      border-block-end: 1px solid var(--line);
      background: color-mix(in oklch, var(--panel) 95%, transparent);
      position: sticky;
      inset-block-start: 0;
      z-index: 1;
    }
    & td { padding: 0.85rem 1rem; border-block-start: 1px solid var(--line); vertical-align: middle; }
    & tbody tr { transition: background-color var(--dur-base) var(--ease-out-expo); }
  }
  @media (hover: hover) {
    .admin-table tbody tr:hover {
      background: linear-gradient(90deg, var(--gold-a8), color-mix(in oklch, var(--gold) 2%, transparent) 60%, transparent);
      box-shadow: inset 4px 0 0 0 var(--gold);
    }
  }

  .admin-card .admin-table, .admin-card > .admin-table {
    display: block;
    inline-size: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .admin-card .admin-table > thead, .admin-card .admin-table > tbody {
    inline-size: 100%; display: table; min-inline-size: 640px;
  }

  .admin-thumb {
    inline-size: 56px; block-size: 56px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: rgb(255 255 255 / 4%);
    border: 1px solid var(--line);

    &.placeholder { display: inline-flex; align-items: center; justify-content: center; color: var(--gold); font-family: var(--font-serif); font-size: 1rem; }
  }

  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-full);
    font-size: var(--step--2);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid currentColor;

    &::before { content: ""; inline-size: 0.5em; block-size: 0.5em; border-radius: var(--radius-full); background: currentColor; flex: 0 0 auto; }
    &.available { color: var(--ok);   background: var(--ok-soft); }
    &.reserved  { color: var(--warn); background: var(--warn-soft); &::before { content: "⏱"; background: transparent; inline-size: auto; block-size: auto; } }
    &.sold      { color: var(--bad);  background: var(--bad-soft); &::before { content: "✕"; background: transparent; inline-size: auto; block-size: auto; } }
    &.hidden    { color: var(--muted); background: rgb(255 255 255 / 4%); &::before { content: "👁"; background: transparent; inline-size: auto; block-size: auto; } }
  }

  .image-drop {
    border: 1.5px dashed var(--gold-dim);
    border-radius: var(--radius-md);
    padding: 1.5rem 1rem;
    text-align: center;
    background: rgb(255 255 255 / 2%);
    transition: border-color var(--dur-base) var(--ease-out-expo), background-color var(--dur-base) var(--ease-out-expo);
    cursor: pointer;

    &:hover, &.is-dragging { border-color: var(--gold); background: var(--gold-a6); }
  }

  .image-preview {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a22, #0a0a0d);
    border: 1px solid var(--line);

    & img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  }

  .image-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--line);
    background: rgb(255 255 255 / 4%);

    & img { inline-size: 100%; block-size: 100%; object-fit: cover; }
    & .image-tile__remove {
      position: absolute;
      inset-block-start: 0.4rem; inset-inline-end: 0.4rem;
      inline-size: 1.8rem; block-size: 1.8rem;
      border-radius: var(--radius-full);
      background: color-mix(in oklch, var(--panel) 90%, transparent);
      color: var(--bad);
      border: 1px solid color-mix(in oklch, var(--bad) 40%, transparent);
      display: inline-flex; align-items: center; justify-content: center;
    }
  }

  /* §21 · product detail / gallery -------------------------------------- */
  .product-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-block: clamp(2rem, 5vw, 4rem);

    @media (min-width: 768px) and (max-width: 1023px) { grid-template-columns: 1fr 1fr; gap: 2rem; }
    @media (min-width: 1024px) { grid-template-columns: 1.05fr 1fr; gap: 3rem; }
  }

  .product-gallery {
    display: flex; flex-direction: column; gap: 0.85rem;

    & .product-gallery__main {
      position: relative;
      aspect-ratio: 4 / 5;
      border-radius: var(--radius-xl);
      overflow: hidden;
      border: 1px solid var(--gold-a32);
      background: linear-gradient(135deg, #1a1a22, var(--bg));
      box-shadow: var(--shadow-lg);

      & img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1s var(--ease-out-expo); }
    }
    & .product-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.5rem; }
    & .product-gallery__thumb {
      aspect-ratio: 1 / 1;
      border-radius: var(--radius-sm);
      overflow: hidden;
      border: 1px solid var(--line);
      background: rgb(255 255 255 / 4%);
      cursor: pointer;
      transition: border-color var(--dur-base) var(--ease-out-expo), translate var(--dur-base) var(--ease-out-expo);

      & img { inline-size: 100%; block-size: 100%; object-fit: cover; }
      &.is-active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-a30); }
    }
  }
  @media (hover: hover) {
    .product-gallery__main { cursor: zoom-in; }
    .product-gallery__main:hover img { transform: scale(1.04); }
    .product-gallery__thumb:hover { border-color: var(--gold-soft); translate: 0 -2px; }
  }
  @media (hover: none) { .product-gallery__main { cursor: default; } }

  .product-info {
    & h1 { font-family: var(--font-serif); font-size: var(--step-4); line-height: 1.1; margin: 0.6rem 0 1rem; text-wrap: balance; }
    & .product-info__meta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-end: 1.2rem; }
    & .product-info__price { font-family: var(--font-serif); font-size: var(--step-3); font-weight: 700; color: var(--gold); font-feature-settings: "tnum" 1; }
  }

  .product-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.6rem;
    margin-block: 1.5rem;

    @media (min-width: 481px) and (max-width: 767px) { grid-template-columns: repeat(2, 1fr); }

    & .product-specs__item {
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 0.85rem 1rem;
      background: rgb(255 255 255 / 3%);

      & .label { font-size: var(--step--2); color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
      & .value { font-family: var(--font-serif); font-size: var(--step-0); font-weight: 600; margin-block-start: 0.3rem; }
    }
  }

  /* §22 · page transitions + image fallbacks ---------------------------- */
  .page-fade { opacity: 0; transform: translateY(8px); animation: pageFadeIn 0.48s var(--ease-out-expo) forwards; }
  @keyframes pageFadeIn { to { opacity: 1; transform: translateY(0); } }

  .entities-table img, .entities-table picture { aspect-ratio: 1 / 1; object-fit: contain; }
  .about__image, .about__image > img           { aspect-ratio: 4 / 3; object-fit: cover; }
  .product-card__image { aspect-ratio: 3 / 4; background: linear-gradient(135deg, #1a1a22, #0a0a0d); }

  img:not([src]), img[src=""], img.broken {
    background: linear-gradient(135deg, #1a1a22, #0a0a0d);
    border: 1px dashed var(--line);
  }
}

/* ─── @layer utilities ──────────────────────────────────────────────────── */
@layer utilities {
  .flex { display: flex; }
  .inline-flex { display: inline-flex; }
  .grid { display: grid; }
  .items-center { align-items: center; }
  .items-start { align-items: flex-start; }
  .justify-between { justify-content: space-between; }
  .justify-center { justify-content: center; }
  .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }

  .gap-1 { gap: 0.4rem; } .gap-2 { gap: 0.6rem; } .gap-3 { gap: 0.85rem; } .gap-4 { gap: 1.1rem; } .gap-6 { gap: 1.5rem; }
  .mt-1 { margin-block-start: 0.4rem; } .mt-2 { margin-block-start: 0.7rem; } .mt-3 { margin-block-start: 1rem; }
  .mt-4 { margin-block-start: 1.4rem; } .mt-6 { margin-block-start: 2rem; }
  .mb-2 { margin-block-end: 0.7rem; } .mb-4 { margin-block-end: 1.4rem; } .mb-6 { margin-block-end: 2rem; }

  .sr-only, .visually-hidden {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .sr-only-focusable:focus, .sr-only-focusable:focus-within {
    position: static; inline-size: auto; block-size: auto;
    margin: 0; overflow: visible; clip: auto; white-space: normal;
  }

  pre, code { overflow-x: auto; word-break: normal; white-space: pre; }

  button:disabled, .btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.5; cursor: not-allowed; pointer-events: none;
  }

  @media (hover: none) {
    .icon-btn, .icon-btn-sm, .filter-chip, .nav a, .mobile-drawer a,
    .pagination button, .admin-tabs button, .segmented button,
    .lightbox__close, .lightbox__nav { min-block-size: 44px; min-inline-size: 44px; }
    .mobile-drawer a { padding: 1rem 1.1rem; font-size: var(--step-0); min-block-size: 48px; }
  }
}

/* ─── @layer overrides ──────────────────────────────────────────────────── */
@layer overrides {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.05ms !important;
      scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .scroll-indicator, .noise-layer { display: none; }
    .text-shine, .product-card__price {
      animation: none !important;
      background: none;
      -webkit-background-clip: initial;
      background-clip: initial;
      color: var(--gold);
      -webkit-text-fill-color: var(--gold);
    }
    .marquee__track { animation: none !important; justify-content: center; }
  }

  @media (forced-colors: active) {
    .text-shine, .product-card__price, .calc-result__value, .product-info__price {
      background: none;
      -webkit-text-fill-color: CanvasText;
      color: CanvasText;
    }
    .btn-primary, .filter-chip.is-active, .admin-tabs button.is-active,
    .segmented button.is-active, .pagination button.is-active {
      background: ButtonFace !important;
      color: ButtonText !important;
      border: 1px solid ButtonText !important;
    }
    .luxe-card, .product-card, .feature, .gold-card, .admin-card { border: 1px solid CanvasText; }
  }

  /* Helper para IntersectionObserver: pausar animaciones off-screen. */
  .pause-when-offscreen.is-offscreen,
  .pause-when-offscreen.is-offscreen *,
  .pause-when-offscreen.is-offscreen *::before,
  .pause-when-offscreen.is-offscreen *::after { animation-play-state: paused !important; }

  /* Container width adaptativo por viewport extra-grande. */
  @media (min-width: 1440px) { :root { --container: 92rem; } }
  @media (min-width: 1920px) { :root { --container: 110rem; } html { font-size: 18px; } }
  @media (min-width: 2800px) { :root { --container: 120rem; } }

  @media print {
    .ambient-layer, .noise-layer, .site-header, .site-footer, .float-wa,
    .acacio-cajas-fab, .marquee, .hero__floating, .scroll-indicator,
    .skip-link, .toast-stack, .lightbox, .modal-backdrop { display: none !important; }

    body { background: #fff !important; color: #000 !important; }
    .product-detail { grid-template-columns: 1fr 1fr !important; page-break-inside: avoid; }
    .product-card, .luxe-card, .gold-card, .feature {
      box-shadow: none !important;
      border-color: #ccc !important;
      background: #fff !important;
      color: #000 !important;
    }
    a { color: #000 !important; text-decoration: underline; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
  }

  @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
}