/* NOVA TCG v10 · archivo generado por bin/build_css.php — edita assets/css/src/ */

/* ---- 01-base.css ---- */
/* =====================================================================
   NOCTRA · Sistema visual 1.0
   Capa 01: fuentes, tokens de tema, reset y tipografía base.
   Toda la paleta vive aquí; las demás capas solo consumen variables.
   ===================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff") format("woff");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italic-var.woff") format("woff");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var.woff") format("woff");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Tema oscuro (predeterminado): morado profundo con detalles dorados. */
:root {
  color-scheme: dark;
  /* Superficies */
  --bg: #0c0814;
  --bg-2: #110b1b;
  --bg-3: #150e21;
  --surface: #171023;
  --surface-2: #1e152d;
  --surface-3: #281c3b;
  --glass: rgba(23, 16, 35, .72);
  --glass-strong: rgba(17, 11, 27, .9);
  /* Texto */
  --text: #f7f3fc;
  --text-soft: #dcd5e6;
  --muted: #aaa2b8;
  --faint: #7d7490;
  /* Marca */
  --gold: #c8a56a;
  --gold-2: #dcc08e;
  --gold-3: #a8864f;
  --gold-ink: #160f05;
  --gold-grad: linear-gradient(180deg, #d6b67e 0%, #c8a56a 100%);
  --gold-text: linear-gradient(180deg, #e2c895 0%, #c8a56a 100%);
  --violet: #7952c7;
  --violet-2: #a78bfa;
  --violet-deep: #33215a;
  --magenta: #a78bfa;
  /* Estados */
  --green: #5fd3a2;
  --green-bg: rgba(95, 211, 162, .12);
  --amber: #e9b75c;
  --amber-bg: rgba(233, 183, 92, .13);
  --red: #f2788a;
  --red-bg: rgba(242, 120, 138, .12);
  --blue: #8fb4ff;
  --blue-bg: rgba(143, 180, 255, .12);
  /* Líneas */
  --line: rgba(200, 165, 106, .14);
  --line-strong: rgba(200, 165, 106, .34);
  --line-soft: rgba(247, 243, 252, .07);
  --line-violet: rgba(167, 139, 250, .24);
  /* Tipografía: Fraunces (editorial) para titulares, Manrope para interfaz. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  /* Formas */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .18);
  --shadow: 0 24px 48px -24px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .2);
  --shadow-gold: 0 8px 24px -12px rgba(200, 165, 106, .45);
  --shadow-violet: 0 24px 60px -28px rgba(121, 82, 199, .55);
  --ring: 0 0 0 3px rgba(167, 139, 250, .38);
  /* Ritmo y movimiento */
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 9vw, 120px);
  --header-h: 68px;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --glow-a: rgba(121, 82, 199, .16);
  --glow-b: rgba(200, 165, 106, .05);
}

/* Tema claro: crema cálido con dorado, tono editorial. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f3e9;
  --bg-2: #f1ebdd;
  --bg-3: #ebe3d2;
  --surface: #fffcf6;
  --surface-2: #faf5ec;
  --surface-3: #f1e9da;
  --glass: rgba(255, 252, 246, .8);
  --glass-strong: rgba(255, 252, 246, .95);
  --text: #241c2a;
  --text-soft: #3d3443;
  --muted: #746b75;
  --faint: #9a919a;
  --gold: #a7803d;
  --gold-2: #8f6b2e;
  --gold-3: #7a5a24;
  --gold-ink: #fffcf6;
  --gold-grad: linear-gradient(180deg, #b38a45 0%, #a7803d 100%);
  --gold-text: linear-gradient(180deg, #a7803d 0%, #8a6630 100%);
  --violet: #6a45b4;
  --violet-2: #5b3aa0;
  --violet-deep: #ece4f8;
  --magenta: #6a45b4;
  --green: #16805a;
  --green-bg: rgba(22, 128, 90, .1);
  --amber: #9a6400;
  --amber-bg: rgba(154, 100, 0, .1);
  --red: #b8324a;
  --red-bg: rgba(184, 50, 74, .09);
  --blue: #2d5fb8;
  --blue-bg: rgba(45, 95, 184, .09);
  --line: #e9dfce;
  --line-strong: #d6c6aa;
  --line-soft: rgba(36, 28, 42, .07);
  --line-violet: rgba(106, 69, 180, .2);
  --shadow-sm: 0 1px 2px rgba(60, 44, 20, .06), 0 2px 8px rgba(60, 44, 20, .05);
  --shadow: 0 24px 48px -28px rgba(60, 44, 20, .28), 0 2px 6px rgba(60, 44, 20, .05);
  --shadow-gold: 0 8px 24px -14px rgba(167, 128, 61, .5);
  --shadow-violet: 0 24px 50px -30px rgba(106, 69, 180, .3);
  --ring: 0 0 0 3px rgba(167, 128, 61, .3);
  --glow-a: rgba(106, 69, 180, .06);
  --glow-b: rgba(167, 128, 61, .07);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html { overflow-x: clip; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 85% -10%, var(--glow-a), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, var(--glow-b), transparent 60%),
    var(--bg);
}
/* Transición de tema: solo se activa durante el cambio para no penalizar el resto. */
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), fill .35s var(--ease) !important;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; line-height: 1.12; letter-spacing: -.01em; color: var(--text); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
small { font-size: var(--fs-sm); }
strong, b { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
table { border-collapse: collapse; width: 100%; }
dialog { color: inherit; }
::selection { background: rgba(167, 139, 250, .32); color: var(--text); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--surface-3), var(--violet-deep)); border-radius: 20px; border: 3px solid var(--bg-2); }

.container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.container.narrow { width: min(100% - (var(--gutter) * 2), 880px); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 9999; padding: 10px 16px; border-radius: 10px; background: var(--gold); color: var(--gold-ink); font-weight: 700; transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: none; }
.is-hidden { display: none !important; }
.nv-muted, .muted, .muted-copy { color: var(--muted); }
.gold { color: var(--gold); }
.nv-gold-text, .nv-display em, .nv-title em {
  background: var(--gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.nv-display em, .nv-title em { font-style: italic; font-weight: 500; padding-right: .06em; }

.ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---- 02-components.css ---- */
/* =====================================================================
   Capa 02: componentes reutilizables (botones, tipografía editorial,
   formularios, badges, paneles, acordeón, cuenta regresiva, diálogos).
   ===================================================================== */

/* ---------- Tipografía editorial ---------- */
.nv-eyebrow, .eyebrow, .kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.nv-eyebrow-line::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .8; }
.nv-display, .nv-title, .page-hero h1{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -.022em;
}
.nv-display { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.02; }
.nv-display-md { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.nv-title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.08; }
.nv-title-lg { font-size: clamp(1.55rem, 2.6vw, 2.05rem); }
.nv-lead { color: var(--text-soft); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.65; max-width: 60ch; }
:root[data-theme="light"] .nv-lead { color: var(--muted); }

.nv-section { position: relative; padding-block: clamp(48px, 6.5vw, 88px); }
.section { position: relative; padding-block: clamp(44px, 6vw, 80px); }
.section.alt, .nv-section.alt { background: linear-gradient(180deg, transparent, rgba(121, 82, 199, .04), transparent); }
.nv-section-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.nv-section-head .nv-eyebrow { margin-bottom: 8px; }

/* ---------- Enlaces ---------- */
.nv-link, .clear-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
  transition: color .2s, gap .25s var(--ease);
}
.nv-link .ico{ color: var(--gold); transition: transform .25s var(--ease); }
.nv-link:hover{ color: var(--gold-2); }
.nv-link:hover .ico { transform: translate(2px, -2px); }
.nv-link-sm { font-size: .82rem; color: var(--muted); }
.clear-link { color: var(--muted); font-weight: 600; font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Botones ---------- */
.nv-btn, .btn, .auth-submit, .proof-submit, .action-btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-bd: var(--line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--btn-bd);
  border-radius: 12px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 650;
  letter-spacing: .005em;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .25s, background .2s, border-color .2s, color .2s;
}
.nv-btn .ico, .btn .ico { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease); }
.nv-btn:hover, .btn:hover { transform: translateY(-1px); }
.nv-btn:hover .ico:last-child { transform: translateX(2px); }
.nv-btn:active, .btn:active { transform: translateY(0) scale(.985); }
.nv-btn:disabled, .btn:disabled, .btn.disabled, .nv-btn.is-disabled { opacity: .5; pointer-events: none; }

.nv-btn-gold, .btn.primary, .btn.yellow, .auth-submit, .proof-submit {
  --btn-bg: var(--gold-grad);
  --btn-fg: var(--gold-ink);
  --btn-bd: transparent;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.nv-btn-gold:hover, .btn.primary:hover, .btn.yellow:hover { box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, .32); filter: brightness(1.04); }
:root[data-theme="light"] .nv-btn-gold, :root[data-theme="light"] .btn.primary, :root[data-theme="light"] .btn.yellow { --btn-fg: #fffaf0; }

.nv-btn-outline, .btn.secondary, .btn.ghost {
  --btn-bg: rgba(255, 255, 255, .02);
  --btn-fg: var(--text);
  --btn-bd: var(--line-strong);
  backdrop-filter: blur(6px);
}
.nv-btn-outline:hover, .btn.secondary:hover, .btn.ghost:hover { --btn-bd: var(--gold); --btn-bg: rgba(200, 165, 106, .07); color: var(--gold-2); }
:root[data-theme="light"] .nv-btn-outline:hover, :root[data-theme="light"] .btn.ghost:hover, :root[data-theme="light"] .btn.secondary:hover { color: var(--gold-3); }
.nv-btn-ghost { --btn-bg: transparent; --btn-bd: var(--line-soft); --btn-fg: var(--text-soft); }
.nv-btn-ghost:hover { --btn-bd: var(--line-strong); } .btn.dark { --btn-bg: var(--violet); --btn-fg: #fff; --btn-bd: transparent; box-shadow: var(--shadow-violet); } .btn.danger { --btn-bg: var(--red-bg); --btn-fg: var(--red); --btn-bd: rgba(255, 107, 125, .35); }
.nv-btn-sm, .btn.small, .btn.tiny { min-height: 36px; padding: 0 14px; font-size: .8rem; border-radius: 9px; }
.btn.tiny { min-height: 32px; padding: 0 11px; }
.nv-btn-lg { min-height: 54px; padding: 0 28px; font-size: .95rem; border-radius: 11px; }
.nv-btn-block, .btn.full, .full { width: 100%; }

.nv-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .02);
  color: var(--text);
  transition: border-color .2s, background .2s, color .2s, transform .2s;
}
.nv-icon-btn:hover { border-color: var(--line-strong); color: var(--gold-2); background: rgba(200, 165, 106, .06); }
.nv-icon-btn .ico { width: 19px; height: 19px; }
.button-spinner { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: nv-spin .7s linear infinite; }
@keyframes nv-spin { to { transform: rotate(360deg); } }

/* ---------- Badges, chips y estados ---------- */
.nv-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: rgba(10, 7, 14, .72);
  color: var(--gold-2);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
:root[data-theme="light"] .nv-badge{ background: rgba(255, 252, 246, .88); color: var(--gold-3); }
.nv-badge-gold { background: var(--gold-grad); color: var(--gold-ink); border-color: transparent; }
:root[data-theme="light"] .nv-badge-gold { color: #fffaf0; }
.nv-badge-new { background: linear-gradient(135deg, #3dd598, #18a874); color: #04140d; border-color: transparent; }
.nv-badge-sale { background: linear-gradient(135deg, #ff6b7d, #d63a5a); color: #fff; border-color: transparent; }
.nv-badge-muted { color: var(--muted); border-color: var(--line-soft); }

.nv-stock{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  white-space: nowrap;
}
.nv-stock i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.nv-stock.is-in{ color: var(--green); background: var(--green-bg); }
.nv-stock.is-low { color: var(--amber); background: var(--amber-bg); }
.nv-stock.is-out{ color: var(--red); background: var(--red-bg); }
.nv-stock.out { color: var(--red); background: var(--red-bg); }
.green:not(.btn) { color: var(--green); }
.red:not(.btn) { color: var(--red); }

.nv-rarity { display: inline-flex; align-items: center; gap: 6px; }
.nv-rarity i { width: 8px; height: 8px; border-radius: 50%; background: #b9b2c2; }
.r-uncommon i, i.r-uncommon { background: #5fd3a2; }
.r-rare i, i.r-rare { background: #74a8ff; }
.r-epic i, i.r-epic { background: #c48bff; }
.r-legend i, i.r-legend { background: var(--gold); box-shadow: 0 0 8px rgba(200, 165, 106, .7); }

/* ---------- Paneles ---------- */
.nv-panel, .legal-card, .info-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%),
    var(--glass);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.nv-panel { padding: clamp(22px, 2.6vw, 32px); }
.nv-panel > p { color: var(--muted); } .nv-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(34px, 5vw, 56px) 24px;
  text-align: center;
  grid-column: 1 / -1;
}
.nv-empty { border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: rgba(255, 255, 255, .015); }
.nv-empty > .ico { width: 38px; height: 38px; color: var(--gold); } .nv-empty p { color: var(--muted); max-width: 46ch; }

/* ---------- Mensajes ---------- */
.form-message, .alert, .form-error, .form-ok, .auth-error, .auth-success, .auth-notice, .client-flash, .nv-alert, .proof-alert, .tracking-v77-alert, .mp-message-v71 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 11px;
  background: rgba(200, 165, 106, .07);
  color: var(--text);
  font-size: .92rem;
}
.form-message.success, .form-ok, .auth-success, .alert.success, .nv-alert-success, .client-flash.success { border-color: rgba(69, 211, 154, .3); border-left-color: var(--green); background: var(--green-bg); }
.form-message.error, .form-error, .auth-error, .alert.error, .alert.danger, .nv-alert-error, .client-flash.error, .proof-alert.error { border-color: rgba(255, 107, 125, .3); border-left-color: var(--red); background: var(--red-bg); }
.alert.warning, .nv-alert-warning { border-left-color: var(--amber); background: var(--amber-bg); }
.alert.info, .nv-alert-info, .auth-notice { border-left-color: var(--blue); background: var(--blue-bg); }

/* ---------- Formularios ---------- */
label{ display: block; margin: 0 0 7px; color: var(--text-soft); font-size: .82rem; font-weight: 700; letter-spacing: .01em; }
:root[data-theme="light"] label { color: var(--text-soft); }
/* :where() deja estos estilos base en especificidad 0 para que cualquier componente pueda ajustarlos. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 6, 12, .55);
  color: var(--text);
  font-size: .95rem;
  line-height: 1.4;
  transition: border-color .2s, box-shadow .2s, background .2s;
  appearance: none;
}
:where(:root[data-theme="light"]) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]), select, textarea) { background: var(--surface); }
textarea { min-height: 120px; resize: vertical; }
select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8a56a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
select option { background: var(--surface); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: var(--ring); }
input[readonly] { opacity: .8; }
input[type="checkbox"], input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--gold);
  cursor: pointer;
}
input[type="range"] { width: 100%; accent-color: var(--gold); }
input[type="file"] { width: 100%; padding: 10px; border: 1px dashed var(--line-strong); border-radius: 10px; background: rgba(255, 255, 255, .02); color: var(--muted); font-size: .85rem; }
input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--surface-3); color: var(--text); font-weight: 700; cursor: pointer; }
.nv-field { display: grid; gap: 7px; }
.nv-field + .nv-field { margin-top: 16px; }
.nv-field-row, .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nv-input-icon { position: relative; }
.nv-input-icon > .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.nv-input-icon input { padding-left: 42px !important; }
.password-wrap, .auth-input-wrap { position: relative; display: flex; align-items: center; }
.password-wrap button, .auth-password-toggle { position: absolute; right: 8px; padding: 6px 10px; border-radius: 7px; color: var(--gold); font-size: .78rem; font-weight: 700; }
.password-wrap input { padding-right: 84px !important; }

/* ---------- Ruta / breadcrumbs ---------- */
.nv-crumbs, .nova-detail-breadcrumb .container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--muted); font-size: .8rem; font-weight: 600; }
.nv-crumbs a:hover{ color: var(--gold-2); }
.nv-crumbs i { font-style: normal; opacity: .45; }

/* ---------- Acordeón ---------- */ details.nv-details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
  transition: border-color .2s, background .2s;
}

/* ---------- Cuenta regresiva ---------- */
.nv-countdown { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nv-countdown > div { display: grid; justify-items: center; min-width: 58px; padding: 9px 8px 7px; border: 1px solid var(--line); border-radius: 11px; background: rgba(8, 6, 12, .6); }
:root[data-theme="light"] .nv-countdown > div { background: var(--surface); }
.nv-countdown b { font-family: var(--font-display); font-size: 1.55rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.nv-countdown small { margin-top: 4px; color: var(--muted); font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nv-countdown-label { width: 100%; color: var(--gold); font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.nv-countdown-lg > div { min-width: 72px; padding: 12px 10px 9px; }
.nv-countdown-lg b { font-size: 2rem; }

/* ---------- Toast del carrito ---------- */
.nv-toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 900; pointer-events: none; }
.nv-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(380px, calc(100vw - 36px));
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--glass-strong);
  box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, .2);
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity .3s, transform .35s var(--ease-out);
}
.nv-toast.show { opacity: 1; transform: none; pointer-events: auto; }
.nv-toast > div { flex: 1; display: grid; font-size: .8rem; color: var(--muted); }
.nv-toast strong { color: var(--text); font-size: .9rem; }
.nv-toast a { padding: 8px 12px; border-radius: 9px; background: var(--gold-grad); color: var(--gold-ink); font-size: .78rem; font-weight: 800; }
.nv-toast-check { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--green-bg); color: var(--green); }
.nv-toast.is-error .nv-toast-check { background: var(--red-bg); color: var(--red); }
.nv-toast.is-error strong::after { content: " · revisa"; color: var(--red); }

/* ---------- Diálogo de vista rápida ---------- */
.nv-quickview {
  width: min(880px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .8);
  overflow: auto;
}
.nv-quickview::backdrop { background: rgba(5, 3, 8, .72); backdrop-filter: blur(6px); }
.nv-quickview[open] { animation: nv-pop .35s var(--ease-out); }
@keyframes nv-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.nv-quickview-close { position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--glass-strong); }
.nv-quickview-grid { display: grid; grid-template-columns: 1fr 1fr; }
.nv-quickview-art { position: relative; min-height: 380px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(121, 82, 199, .3), transparent 65%), var(--bg-2); }
.nv-quickview-art img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.nv-quickview-noimage { width: 60%; }
.nv-quickview-info { display: flex; flex-direction: column; gap: 12px; padding: 34px 30px; }
.nv-quickview-info p { color: var(--muted); font-size: .92rem; }
.nv-quickview-price { display: flex; align-items: baseline; gap: 10px; }
.nv-quickview-price strong { font-family: var(--font-display); font-size: 1.8rem; }
.nv-quickview-price del { color: var(--faint); }
.nv-quickview-buy { display: grid; grid-template-columns: 90px 1fr; align-items: end; gap: 10px; margin-top: 6px; }
.nv-quickview-buy label { grid-column: 1 / -1; margin: 0; }

/* ---------- Modal público ---------- */
.public-modal { position: fixed; inset: 0; z-index: 950; display: none; place-items: center; padding: 18px; }
.public-modal.open { display: grid; }
.public-modal-backdrop { position: absolute; inset: 0; background: rgba(5, 3, 8, .74); backdrop-filter: blur(6px); }
.public-modal-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 30px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .8);
  animation: nv-pop .35s var(--ease-out);
}
.public-modal-panel h2 { font-family: var(--font-display); font-size: 1.7rem; margin-bottom: 8px; }
.public-modal-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; font-size: 1.3rem; color: var(--muted); }
.public-modal-close:hover { color: var(--gold-2); border-color: var(--line-strong); }
body.public-modal-open { overflow: hidden; }

/* ---------- Paginación ---------- */
.pagination{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.page-numbers { display: flex; gap: 6px; align-items: center; }
.page-numbers a, .page-direction {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-weight: 700;
  font-size: .86rem;
  transition: border-color .2s, color .2s, background .2s;
}
.page-direction { display: inline-flex; gap: 8px; }
.page-numbers a:hover, .page-direction:hover { border-color: var(--line-strong); color: var(--gold-2); }
.page-numbers a[aria-current="page"] { background: var(--gold-grad); color: var(--gold-ink); border-color: transparent; }
.page-direction.disabled { opacity: .35; pointer-events: none; }
.page-ellipsis { color: var(--faint); }

/* ---------- Revelado por scroll ---------- */
.js [data-reveal].nova-reveal-pending, .js .nova-reveal-pending { opacity: 0; transform: translateY(26px); }
.js [data-reveal], .js .nova-reveal-pending, .js .is-visible { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--nova-stagger, 0ms); }
.js .is-visible { opacity: 1; transform: none; }

/* ---- 03-layout.css ---- */
/* =====================================================================
   Capa 03: estructura global — franja superior, cabecera, menú móvil,
   pie de página y encabezados de páginas secundarias.
   ===================================================================== */

/* ---------- Franja superior ---------- */
.nv-topbar { position: relative; z-index: 60; border-bottom: 1px solid var(--line-soft); background: rgba(6, 4, 9, .9); font-size: .7rem; }
:root[data-theme="light"] .nv-topbar { background: #1c1524; color: #f7f3fc; }
.nv-topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 34px; }
.nv-topbar-brand { color: var(--gold); font-weight: 800; letter-spacing: .2em; }
:root[data-theme="light"] .nv-topbar-brand { color: #c8a56a; }
.nv-topbar-note { display: inline-flex; align-items: center; gap: 7px; color: #aaa2b8; font-weight: 600; }
.nv-topbar-note .ico { width: 14px; height: 14px; color: #c8a56a; }

/* ---------- Cabecera ---------- */
.nv-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(9, 7, 13, .72);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  transition: background .3s, box-shadow .3s;
}
:root[data-theme="light"] .nv-header { background: rgba(246, 241, 232, .82); }
.nv-header.is-scrolled { box-shadow: 0 12px 40px -24px rgba(0, 0, 0, .9); }
.nv-nav { display: flex; align-items: center; gap: 22px; min-height: var(--header-h); }
.nv-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--text);
}
.nv-brand { align-items: center; gap: 10px; }
.nv-brand-mark { width: 1.15em; height: 1.15em; color: var(--gold); flex: 0 0 auto; }
.nv-brand-word { font-size: .62em; font-weight: 700; letter-spacing: .34em; margin-right: -.34em; }
.nv-brand-sm { font-size: 1rem; margin-right: 8px; }
.nv-menu { flex: 1; display: flex; justify-content: center; }
.nv-menu-links { display: flex; align-items: center; gap: 4px; }
.nv-menu-link {
  position: relative;
  padding: 10px 13px;
  border-radius: 9px;
  color: var(--text-soft);
  font-size: .86rem;
  font-weight: 650;
  transition: color .2s, background .2s;
}
.nv-menu-link::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 4px;
  height: 1px;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nv-menu-link:hover { color: var(--text); }
.nv-menu-link:hover::after, .nv-menu-link[aria-current="page"]::after { transform: scaleX(1); }
.nv-menu-link[aria-current="page"] { color: var(--text); }
.nv-drawer-head, .nv-drawer-body { display: none; }
.nv-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nv-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .02);
  color: var(--text);
  font-size: .85rem;
  font-weight: 750;
  transition: border-color .2s, background .2s, color .2s;
}
.nv-pill-btn:hover { border-color: var(--line-strong); background: rgba(200, 165, 106, .06); }
.nv-pill-btn .ico { width: 18px; height: 18px; color: var(--text-soft); }
.nv-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--gold-grad);
  color: var(--gold-ink);
  font-size: .72rem;
  font-weight: 800;
}
:root[data-theme="light"] .nv-count { color: #fffaf0; }
.nv-count.pulse { animation: nv-pulse .5s var(--ease-out); }
@keyframes nv-pulse { 40% { transform: scale(1.35); } }
.nv-theme-btn .ico-sun { display: none; }
:root[data-theme="light"] .nv-theme-btn .ico-sun { display: block; }
:root[data-theme="light"] .nv-theme-btn .ico-moon { display: none; }
.nv-menu-toggle { display: none; }
.nv-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(4, 2, 7, .62); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.nv-backdrop.show { opacity: 1; pointer-events: auto; }

@media (max-width: 1080px) {
  .nv-menu-link { padding: 10px 9px; font-size: .82rem; }
  .nv-pill-label { display: none; }
  .nv-pill-btn { padding: 0 12px; }
}
@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .nv-topbar-note { display: none; }
  .nv-topbar .container { justify-content: center; }
  .nv-menu-toggle { display: inline-grid; }
  .nv-brand { font-size: 1.45rem; }
  .nv-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    width: min(380px, 88vw);
    height: 100dvh;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 0 24px;
    border-left: 1px solid var(--line);
    background: var(--surface);
    box-shadow: -30px 0 80px rgba(0, 0, 0, .6);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .4s var(--ease-out), visibility 0s linear .4s;
  }
  .nv-menu.open { transform: none; visibility: visible; transition: transform .4s var(--ease-out); }
  .nv-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; background: var(--surface); z-index: 1; }
  .nv-menu-links { flex-direction: column; align-items: stretch; gap: 2px; padding: 14px 12px; border-bottom: 1px solid var(--line-soft); }
  .nv-menu-link { padding: 13px 12px; font-size: 1rem; font-family: var(--font-display); font-weight: 600; }
  .nv-menu-link::after { display: none; }
  .nv-menu-link[aria-current="page"] { color: var(--gold-2); background: rgba(200, 165, 106, .06); }
  .nv-drawer-body { display: grid; gap: 18px; padding: 18px 12px 0; }
  .nv-drawer-body section { display: grid; gap: 2px; }
  .nv-drawer-caption { padding: 0 12px 6px; color: var(--gold); font-size: .66rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
  .nv-drawer-body a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: var(--text-soft); font-size: .9rem; font-weight: 600; }
  .nv-drawer-body a:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
  .nv-drawer-body a .ico:first-child { color: var(--gold); }
  .nv-drawer-body a span { flex: 1; }
  .nv-drawer-body a .ico:last-child { width: 14px; opacity: .4; }
  body.mobile-nav-open { overflow: hidden; }
}
@media (max-width: 520px) {
  .nv-actions { gap: 6px; }
  .nv-theme-btn { display: none; }
  .nv-pill-btn, .nv-icon-btn { height: 40px; }
  .nv-icon-btn { width: 40px; }
}

/* ---------- Pie de página ---------- */
.nv-footer { position: relative; margin-top: clamp(40px, 6vw, 80px); padding-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(10, 7, 14, .4), #07050a 60%); overflow: hidden; }
:root[data-theme="light"] .nv-footer { background: linear-gradient(180deg, transparent, #ece3d3 60%); }
.nv-footer-glow { position: absolute; left: 50%; top: -220px; width: 900px; height: 420px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(121, 82, 199, .18), transparent); pointer-events: none; }
.nv-footer-grid { position: relative; display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.nv-footer-about p { margin-top: 16px; color: var(--muted); font-size: .9rem; max-width: 36ch; }
.nv-footer nav { display: grid; align-content: start; gap: 9px; }
.nv-footer h2 { margin-bottom: 8px; color: var(--gold); font-family: var(--font-sans); font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.nv-footer nav a { color: var(--text-soft); font-size: .88rem; transition: color .2s; width: fit-content; }
.nv-footer nav a:hover { color: var(--gold-2); }
.nv-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.nv-social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 11px; color: var(--text-soft); transition: color .2s, border-color .2s, transform .2s; }
.nv-social a:hover { color: var(--gold-2); border-color: var(--line-strong); transform: translateY(-2px); }
.nv-footer-note { position: relative; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-soft); color: var(--faint); font-size: .78rem; }
.nv-footer-note a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px; }
.nv-footer-bottom { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 22px 0 28px; color: var(--muted); font-size: .76rem; letter-spacing: .04em; }
.nv-footer-bottom > span:first-child { display: inline-flex; align-items: baseline; text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; }
.nv-footer-bottom > span:last-child { text-align: right; }
.nv-footer-emblem .nova-emblem { width: 30px; height: 30px; }
@media (max-width: 960px) {
  .nv-footer-grid { grid-template-columns: repeat(2, 1fr); }
  .nv-footer-about { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .nv-footer-bottom { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .nv-footer-bottom > span:last-child { text-align: center; }
}

/* Emblema genérico */
.nova-emblem path, .nova-emblem circle, .nc-emblem path, .nc-emblem circle{ stroke: var(--gold); stroke-width: 2.2; fill: none; }
.nova-emblem .em-inner, .nc-emblem .em-inner { stroke-width: 1.4; opacity: .75; }
.nova-emblem .em-cross, .nc-emblem .em-cross { stroke-width: 1.2; opacity: .6; }

/* ---------- Encabezado de páginas secundarias ---------- */
.nv-page-hero { position: relative; padding: clamp(46px, 7vw, 92px) 0 clamp(34px, 5vw, 60px); overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.nv-hero-atmos { position: absolute; inset: 0; pointer-events: none; }
.nv-hero-atmos span { position: absolute; border-radius: 50%; filter: blur(70px); }
.nv-hero-atmos span:nth-child(1) { width: 520px; height: 420px; right: -80px; top: -140px; background: rgba(121, 82, 199, .22); }
.nv-hero-atmos span:nth-child(2) { width: 360px; height: 300px; left: -120px; bottom: -160px; background: rgba(200, 165, 106, .1); }
.nv-hero-atmos span:nth-child(3) { width: 220px; height: 220px; right: 30%; bottom: -120px; background: rgba(167, 139, 250, .12); }
:root[data-theme="light"] .nv-hero-atmos span { opacity: .55; }
.nv-page-hero-grid { position: relative; display: grid; gap: 34px; align-items: center; }
.nv-page-hero.has-aside .nv-page-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.nv-page-hero-copy .nv-lead { margin-top: 18px; }
@media (max-width: 920px) { .nv-page-hero.has-aside .nv-page-hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- 04-cards.css ---- */
/* =====================================================================
   Capa 04: carta NOVA 3D, arte generativo de productos/categorías y
   tarjetas de producto.
   ===================================================================== */

@property --orbit-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- Carta 3D ---------- */
.nova-card-stage {
  --card-w: clamp(210px, 23vw, 320px);
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--card-w) * 1.9);
  max-width: 100%;
  aspect-ratio: 1 / 1.05;
  perspective: 1300px;
  transform-style: preserve-3d;
}
.nova-card-stage > * { grid-area: 1 / 1; }
.nova-card3d {
  position: relative;
  width: var(--card-w);
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s var(--ease-out);
  animation: nc-float 7s ease-in-out infinite;
}
.nc-spin { position: absolute; inset: 0; transform-style: preserve-3d; animation: nc-spin 16s ease-in-out infinite; }
.nc-face {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--card-w) * .055);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.nc-front {
  background:
    radial-gradient(circle at 50% 46%, rgba(121, 82, 199, .32), transparent 46%),
    radial-gradient(1px 1px at 18% 22%, rgba(255, 240, 210, .9) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 18%, rgba(255, 240, 210, .7) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 82% 64%, rgba(255, 240, 210, .8) 50%, transparent 51%),
    radial-gradient(1px 1px at 26% 76%, rgba(255, 240, 210, .6) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 84%, rgba(255, 240, 210, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 34%, rgba(255, 240, 210, .5) 50%, transparent 51%),
    linear-gradient(160deg, #241536 0%, #120a1c 48%, #1b0f2a 100%);
  box-shadow:
    0 0 0 1.5px rgba(246, 220, 157, .9),
    0 0 40px rgba(200, 165, 106, .45),
    0 30px 80px -10px rgba(0, 0, 0, .8),
    inset 0 0 50px rgba(121, 82, 199, .25);
}
.nc-back {
  transform: rotateY(180deg);
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(200, 165, 106, .07) 0 2px, transparent 2px 14px),
    radial-gradient(circle at 50% 50%, rgba(121, 82, 199, .35), transparent 60%),
    linear-gradient(160deg, #1a0f29, #0d0814);
  box-shadow: 0 0 0 1.5px rgba(246, 220, 157, .9), 0 0 40px rgba(200, 165, 106, .4);
}
.nc-frame { position: absolute; inset: 6%; border: 1.5px solid rgba(240, 205, 130, .85); border-radius: calc(var(--card-w) * .03); pointer-events: none; }
.nc-frame-2 { inset: 8.5%; border-width: 1px; border-color: rgba(240, 205, 130, .4); }
.nc-frame::before, .nc-frame::after { content: ""; position: absolute; width: 14%; aspect-ratio: 1; border: 1.5px solid rgba(240, 205, 130, .9); }
.nc-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.nc-frame::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.nc-frame-2::before, .nc-frame-2::after { display: none; }
.nc-title {
  position: absolute;
  top: 13%;
  left: 0;
  right: 0;
  text-align: center;
  color: #d6b67e;
  font-family: var(--font-display);
  font-size: calc(var(--card-w) * .07);
  font-weight: 600;
  letter-spacing: .24em;
  line-height: 1.25;
  text-shadow: 0 0 18px rgba(200, 165, 106, .6);
}
.nc-emblem { position: absolute; left: 50%; top: 52%; width: 52%; transform: translate(-50%, -50%); filter: drop-shadow(0 0 10px rgba(200, 165, 106, .7)); }
.nc-back .nc-emblem { top: 50%; width: 46%; opacity: .55; }
.nc-back-mark { position: absolute; font-family: var(--font-sans); font-weight: 800; font-size: calc(var(--card-w) * .2); color: rgba(246, 220, 157, .85); text-shadow: 0 0 24px rgba(200, 165, 106, .8); }
.nc-foot { position: absolute; bottom: 12%; left: 0; right: 0; text-align: center; color: rgba(242, 208, 138, .78); font-size: calc(var(--card-w) * .034); font-weight: 700; letter-spacing: .26em; line-height: 1.6; }
.nc-shine {
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 240, 210, .22) 46%, rgba(220, 170, 255, .18) 52%, transparent 60%);
  animation: nc-shine 6s ease-in-out infinite;
  mix-blend-mode: screen;
}
.nc-floor { width: calc(var(--card-w) * 1.4); height: calc(var(--card-w) * .22); align-self: end; margin-bottom: 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(121, 82, 199, .55), transparent); filter: blur(14px); transform: rotateX(70deg); animation: nc-floor 7s ease-in-out infinite; }
.nc-orbit {
  width: calc(var(--card-w) * 1.85);
  height: calc(var(--card-w) * .62);
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from var(--orbit-a), transparent 0deg, rgba(167, 139, 250, .1) 120deg, rgba(240, 160, 255, .95) 200deg, rgba(255, 230, 180, 1) 214deg, transparent 236deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, .9));
  transform: rotate(-14deg);
  animation: nc-orbit 5.5s linear infinite;
}
.nc-orbit-b { width: calc(var(--card-w) * 1.6); height: calc(var(--card-w) * .5); transform: rotate(18deg); animation-duration: 7.5s; animation-direction: reverse; background: conic-gradient(from var(--orbit-a), transparent 0deg, rgba(200, 165, 106, .08) 140deg, rgba(246, 220, 157, .95) 220deg, transparent 250deg, transparent 360deg); filter: drop-shadow(0 0 6px rgba(200, 165, 106, .8)); }
.nc-orbit-c { width: calc(var(--card-w) * 2.05); height: calc(var(--card-w) * .9); transform: rotate(-32deg); animation-duration: 11s; opacity: .55; }

@keyframes nc-spin { 0% { transform: rotateY(-20deg); } 25% { transform: rotateY(20deg); } 50%, 60% { transform: rotateY(-20deg); } 82%, 100% { transform: rotateY(340deg); } }
@keyframes nc-float { 0%, 100% { translate: 0 -6px; } 50% { translate: 0 8px; } }
@keyframes nc-floor { 0%, 100% { opacity: .9; scale: 1; } 50% { opacity: .6; scale: .86; } }
@keyframes nc-shine { 0%, 100% { transform: translateX(-30%); } 50% { transform: translateX(30%); } }
@keyframes nc-orbit { to { --orbit-a: 360deg; } }

.nova-card-small { --card-w: clamp(130px, 14vw, 180px); }
.nova-card-float { --card-w: clamp(120px, 12vw, 170px); }
.nova-card-intro { --card-w: clamp(170px, 26vh, 270px); }
.nova-card-float .nc-spin, .nova-card-small .nc-spin { animation-duration: 20s; }

/* ---------- Arte generativo de productos ---------- */

/* ---------- Arte de categorías ---------- */
.cat-art { position: absolute; right: -4%; top: 50%; width: 58%; height: 120%; transform: translateY(-50%); pointer-events: none; transition: transform .6s var(--ease-out); }
.ca-card { position: absolute; top: 50%; left: 50%; width: 36%; aspect-ratio: 5 / 7; border-radius: 6px; background: linear-gradient(160deg, #2c1a45, #120a1d); box-shadow: 0 0 0 1px rgba(240, 205, 130, .75), 0 14px 26px -8px rgba(0, 0, 0, .8); transform-origin: 50% 120%; }
.ca-card i { position: absolute; inset: 9% 9% 38%; border-radius: 4px; background: radial-gradient(circle at 50% 40%, rgba(167, 139, 250, .8), #2a1250 70%); }
.ca-card.c1 { transform: translate(-50%, -50%) rotate(-22deg) translateX(-28%); filter: hue-rotate(40deg) brightness(.85); }
.ca-card.c2 { transform: translate(-50%, -50%) rotate(-4deg); z-index: 1; }
.ca-card.c3 { transform: translate(-50%, -50%) rotate(16deg) translateX(30%); filter: hue-rotate(-40deg) brightness(.9); }
.ca-pack { position: absolute; top: 50%; left: 50%; width: 30%; aspect-ratio: 3 / 5; display: grid; justify-items: center; align-content: start; padding-top: 18%; border-radius: 3px; background: linear-gradient(115deg, #1b1027, #3e2264 35%, #1b1027 55%, #4b2a75); box-shadow: 0 0 0 1px rgba(240, 205, 130, .5), 0 18px 30px -10px rgba(0, 0, 0, .85); }
.ca-pack b { color: #d6b67e; font-size: .8rem; font-weight: 800; letter-spacing: -.02em; }
.ca-pack small { color: #d6b67e; font-size: .4rem; font-weight: 800; letter-spacing: .4em; }
.ca-pack.p1 { transform: translate(-80%, -50%) rotate(-12deg); filter: brightness(.8); }
.ca-pack.p2 { transform: translate(-18%, -46%) rotate(8deg); }
.ca-box { position: absolute; top: 50%; left: 50%; width: 36%; aspect-ratio: .9; display: grid; place-items: center; border-radius: 5px; background: linear-gradient(160deg, #2c1a45, #100916); box-shadow: 0 0 0 1px rgba(240, 205, 130, .65), 0 18px 30px -10px rgba(0, 0, 0, .85); transform: translate(-30%, -50%) rotate(-6deg); }
.ca-box b { color: #d6b67e; font-size: 1.5rem; font-weight: 800; text-shadow: 0 0 14px rgba(200, 165, 106, .7); }
.ca-box-2 { transform: translate(-95%, -40%) rotate(-14deg); filter: brightness(.6); z-index: -1; }
.ca-mat { position: absolute; top: 50%; left: 50%; width: 70%; aspect-ratio: 1.5; border-radius: 8px; transform: translate(-50%, -50%) perspective(400px) rotateX(50deg) rotateZ(-12deg); background: radial-gradient(circle, rgba(121, 82, 199, .5), transparent 70%), linear-gradient(135deg, #22143a, #0e0816); box-shadow: 0 0 0 1px rgba(240, 205, 130, .6); }
.ca-die { position: absolute; width: 16%; aspect-ratio: 1; border-radius: 5px; background: radial-gradient(circle at 30% 30%, #fff 0 9%, transparent 10%), radial-gradient(circle at 70% 70%, #fff 0 9%, transparent 10%), linear-gradient(135deg, #5e34a8, #2a1250); box-shadow: 0 0 0 1px rgba(240, 205, 130, .6), 0 8px 14px -4px rgba(0, 0, 0, .8); }
.ca-die.d1 { left: 52%; top: 58%; transform: rotate(18deg); }
.ca-die.d2 { left: 70%; top: 48%; transform: rotate(-12deg); filter: hue-rotate(60deg); }

/* ---------- Tarjeta de producto ---------- */
.nv-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.nv-product {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 30%), var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .45s var(--ease-out), border-color .3s, box-shadow .4s;
}
.nv-product::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, transparent 40%, rgba(246, 220, 157, .12) 50%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 120% 0; transition: background-position .9s var(--ease-out); }
.nv-product:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(200, 165, 106, .12), 0 0 40px -12px rgba(121, 82, 199, .4); }
.nv-product:hover::after { background-position: -20% 0; }
.nv-fav-form { position: absolute; top: 10px; right: 10px; z-index: 3; margin: 0; }
.nv-fav { position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10, 7, 14, .7); color: var(--text); backdrop-filter: blur(8px); transition: color .2s, border-color .2s, transform .2s; }
.nv-fav-form .nv-fav { position: static; }
:root[data-theme="light"] .nv-fav { background: rgba(255, 252, 246, .9); }
.nv-fav .ico { width: 17px; height: 17px; }
.nv-fav:hover { color: var(--red); border-color: rgba(255, 107, 125, .5); transform: scale(1.06); }
.nv-fav.is-active { color: var(--red); }
.nv-fav.is-active .ico { fill: currentColor; }
.nv-cart-square { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--gold-grad); color: var(--gold-ink); box-shadow: var(--shadow-gold); transition: transform .2s, box-shadow .2s; }
.nv-cart-square:hover { transform: translateY(-2px) scale(1.04); }
.nv-cart-square .ico { width: 18px; height: 18px; }
.nv-cart-square.added { background: var(--green); color: #04140d; }
.nv-cart-square.is-disabled { background: var(--surface-3); color: var(--faint); box-shadow: none; }
:root[data-theme="light"] .nv-cart-square { color: #fffaf0; }
.nv-points { display: inline-flex; align-items: center; gap: 5px; color: var(--violet-2); font-size: .72rem; font-weight: 700; }
.nv-points .ico { width: 13px; height: 13px; }

/* Lista (vista de tienda) */
.nv-grid-list .nv-product { flex-direction: row; }
.nv-grid-list { grid-template-columns: minmax(0, 1fr) !important; }

/* ---- 05-home.css ---- */
/* =====================================================================
   Capa 05: portada — intro cinematográfica, hero, categorías y
   secciones narrativas de la home.
   ===================================================================== */

/* ---------- Intro (storyboard 6 escenas · 6 s) ---------- */

/* Escena 02: emblema dibujado con una chispa dorada */

/* Escena 03: logotipo NOVA con dolly-in y barrido de luz */

/* Escenas 04–05: la carta emerge, rota y se voltea con golpe de luz */

/* Escena 06: lockup final */

@keyframes ni-fade-in { to { opacity: 1; } }
@keyframes ni-draw { to { stroke-dashoffset: 0; } }
@keyframes ni-spark { 0% { opacity: 1; left: 50%; top: 7%; } 25% { left: 93%; top: 50%; } 50% { left: 50%; top: 93%; } 75% { left: 7%; top: 50%; } 96% { opacity: 1; left: 50%; top: 7%; } 100% { opacity: 0; left: 50%; top: 7%; } }
@keyframes ni-emblem { 0%, 9% { opacity: 0; transform: scale(.9); } 11% { opacity: 1; } 22% { opacity: 1; transform: scale(1); } 27% { opacity: 0; transform: scale(1.25); } 100% { opacity: 0; } }
@keyframes ni-logo { 0%, 22% { opacity: 0; transform: scale(.82); filter: blur(8px); } 28% { opacity: 1; filter: blur(0); } 36% { opacity: 1; transform: scale(1); } 40% { opacity: 0; transform: scale(1.08); } 100% { opacity: 0; } }
@keyframes ni-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes ni-card { 0%, 36% { opacity: 0; transform: translateY(60px) scale(.6); filter: brightness(.4); } 46% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); } 72% { opacity: 1; transform: scale(1.05); } 79% { opacity: 0; transform: scale(1.5); filter: brightness(2); } 100% { opacity: 0; } }
@keyframes ni-card-spin { 0%, 38% { transform: rotateY(-50deg) rotateX(14deg); } 54% { transform: rotateY(18deg) rotateX(4deg); } 62% { transform: rotateY(-6deg); } 74% { transform: rotateY(180deg); } 100% { transform: rotateY(200deg); } }
@keyframes ni-burst { 0%, 66% { opacity: 0; transform: scale(.2); } 72% { opacity: 1; transform: scale(1); } 86% { opacity: 0; transform: scale(2.2); } 100% { opacity: 0; } }
@keyframes ni-world { 0%, 55% { opacity: 0; transform: scale(1.15); } 76% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1.03); } }
@keyframes ni-lockup { 0%, 76% { opacity: 0; transform: scale(1.12); filter: blur(6px); } 84% { opacity: 1; transform: scale(1); filter: blur(0); } 96% { opacity: 1; } 100% { opacity: 1; transform: scale(.98); } }
@keyframes ni-progress { to { width: 100%; } }

/* ---------- Hero ---------- */
.nv-hero {
  position: relative;
  min-height: min(calc(100vh - var(--header-h) - 34px), 700px);
  display: grid;
  align-items: center;
  padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 7vw, 90px);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line-soft);
}
.nv-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background:
  radial-gradient(ellipse 50% 60% at 72% 45%, rgba(121, 82, 199, .32), transparent 65%),
  radial-gradient(ellipse 40% 50% at 92% 10%, rgba(167, 139, 250, .2), transparent 70%),
  radial-gradient(ellipse 45% 55% at 8% 70%, rgba(200, 165, 106, .08), transparent 70%),
  linear-gradient(180deg, #0b0712 0%, #120a1d 55%, var(--bg) 100%); }
:root[data-theme="light"] .nv-hero-bg { background:
  radial-gradient(ellipse 50% 60% at 72% 45%, rgba(135, 88, 222, .2), transparent 65%),
  radial-gradient(ellipse 45% 55% at 8% 70%, rgba(200, 150, 61, .12), transparent 70%),
  linear-gradient(180deg, #efe6f8 0%, #f3ece1 60%, var(--bg) 100%); }
.nv-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, transparent 45%), linear-gradient(0deg, var(--bg) 0%, transparent 25%); opacity: .85; }
.nv-hero-photo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.nv-hero-photo.is-active { opacity: .55; }
.nv-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
@keyframes nv-lamp { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.nv-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.nv-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 60px); }
.nv-hero-copy { position: relative; display: grid; }
.nv-hero-slide { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease-out); pointer-events: none; }
.nv-hero-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.nv-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.nv-hero-meta { display: flex; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.nv-hero-pager { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .8rem; font-weight: 700; }
.nv-hero-pager b { color: var(--gold); }
.nv-hero-visual { position: relative; display: grid; place-items: center; }
.nv-hero-visual .nova-card-stage { width: 100%; }
@keyframes nv-cue { 0% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 14px); } }
@media (max-width: 900px) {
  .nv-hero { min-height: 0; padding-top: 28px; }
  .nv-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .nv-hero-visual { order: -1; max-width: 420px; margin: 0 auto -20px; }
  .nv-hero-visual .nova-card-stage { --card-w: clamp(150px, 42vw, 220px); }
  .nv-hero-bg::after { background: linear-gradient(0deg, var(--bg) 0%, transparent 40%); }
}

/* ---------- Categorías ---------- */

/* ---------- Comunidad ---------- */
.nv-stat-row { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 26px; list-style: none; }
.nv-stat-row li { display: grid; }
.nv-stat-row strong { font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; line-height: 1; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nv-stat-row span { margin-top: 6px; color: var(--muted); font-size: .78rem; font-weight: 700; }

/* ---------- Promociones ---------- */

/* ---------- Torneos (home) ---------- */
.nv-event-banner { position: relative; display: grid; gap: 14px; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: radial-gradient(circle at 88% 22%, rgba(167, 139, 250, .35), transparent 50%), linear-gradient(140deg, #1c1030, #0d0914 70%); overflow: hidden; box-shadow: var(--shadow-violet); }
:root[data-theme="light"] .nv-event-banner { background: radial-gradient(circle at 88% 22%, rgba(135, 88, 222, .2), transparent 50%), var(--surface); }
.nv-event-banner > *:not(.nv-event-trophy) { position: relative; z-index: 1; }
.nv-event-banner .nv-badge { justify-self: start; }
.nv-event-banner h3 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.3rem); max-width: 70%; }
.nv-event-banner .nv-btn { justify-self: start; }
.nv-event-trophy { position: absolute; right: -10px; top: -10px; display: grid; place-items: center; width: 220px; height: 220px; color: rgba(200, 165, 106, .2); }
.nv-event-trophy .ico { width: 100%; height: 100%; stroke-width: .7; filter: drop-shadow(0 0 20px rgba(200, 165, 106, .5)); }
.nv-event-trophy b { position: absolute; top: 28%; color: rgba(246, 220, 157, .7); font-size: 2.4rem; font-weight: 800; }
.nv-event-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; color: var(--text-soft); font-size: .84rem; font-weight: 600; }
.nv-event-meta li { display: inline-flex; align-items: center; gap: 7px; }
.nv-event-meta .ico { color: var(--gold); width: 16px; height: 16px; }
.nv-event-banner.is-empty p { color: var(--muted); max-width: 60%; }
@media (max-width: 860px) { .nv-event-banner h3 { max-width: 100%; } .nv-event-trophy { opacity: .5; } }

/* ---------- Trío: lanzamientos · guía · beneficios ---------- */ .nv-icon-list { display: grid; gap: 8px; list-style: none; margin-bottom: 6px; } .nv-icon-list a { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255, 255, 255, .015); transition: border-color .2s, background .2s; } .nv-icon-list a:hover { border-color: var(--line-strong); background: rgba(200, 165, 106, .04); } .nv-icon-list a > span { display: grid; flex: 1; min-width: 0; } .nv-icon-list strong { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nv-icon-list small { color: var(--muted); font-size: .74rem; }
.nv-icon-list a > .ico { width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: rgba(200, 165, 106, .08); color: var(--gold); flex: 0 0 38px; }
.nv-benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.nv-benefit-grid span { display: grid; justify-items: center; gap: 8px; padding: 16px 10px; border: 1px solid var(--line-soft); border-radius: 12px; text-align: center; font-size: .76rem; font-weight: 700; color: var(--text-soft); }
.nv-benefit-grid .ico { width: 30px; height: 30px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold); }

/* ---------- Testimonios · FAQ · redes ---------- */

/* ---------- CTA final ---------- */
.nv-final-grid { position: relative; display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; gap: 30px; padding: clamp(30px, 5vw, 60px); border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: radial-gradient(circle at 85% 50%, rgba(121, 82, 199, .35), transparent 55%), radial-gradient(circle at 0% 100%, rgba(200, 165, 106, .12), transparent 50%), linear-gradient(140deg, #170d26, #0c0812); box-shadow: var(--shadow-violet); }
:root[data-theme="light"] .nv-final-grid { background: radial-gradient(circle at 85% 50%, rgba(135, 88, 222, .22), transparent 55%), var(--surface); }
.nv-final-art { display: grid; place-items: center; }
@media (max-width: 760px) { .nv-final-grid { grid-template-columns: minmax(0, 1fr); } .nv-final-art { display: none; } }

/* ---- 06-shop.css ---- */
/* =====================================================================
   Capa 06: tienda (filtros, pestañas, columna lateral), ficha de
   producto, consulta de precios y promociones.
   ===================================================================== */

/* ---------- Banner de colección destacada (hero de tienda) ---------- */
.nv-feature-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 18px;
  padding: 26px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: radial-gradient(circle at 70% 30%, rgba(121, 82, 199, .35), transparent 55%), linear-gradient(140deg, #1b1030, #0d0914);
  box-shadow: var(--shadow-violet);
  overflow: hidden;
}
:root[data-theme="light"] .nv-feature-banner { background: radial-gradient(circle at 70% 30%, rgba(135, 88, 222, .2), transparent 55%), var(--surface); }
.nv-feature-banner-copy { position: relative; z-index: 1; display: grid; align-content: start; gap: 10px; }
.nv-feature-banner-copy p { color: var(--muted); font-size: .9rem; margin: 0; }
.nv-feature-banner-copy .nv-btn { justify-self: start; margin-top: 6px; }
.nv-feature-banner-art { position: absolute; right: 40px; top: 50%; width: 40%; transform: translateY(-50%); opacity: .22; pointer-events: none; }
@media (max-width: 560px) { .nv-feature-banner { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Distribución de la tienda ---------- */

/* Filtros */
.nv-filter-note { margin: 10px 0 0; color: var(--faint); font-size: .72rem; }

/* Cabecera y barra de herramientas */

/* Columna lateral */
.nv-side-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.nv-side-head .nv-eyebrow { margin-bottom: 4px; }
.nv-cart-empty-art { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin-bottom: 6px; border-radius: 50%; background: radial-gradient(closest-side, rgba(121, 82, 199, .35), transparent); color: var(--gold); }
.nv-cart-empty-art .ico { width: 46px; height: 46px; stroke-width: 1.2; filter: drop-shadow(0 0 10px rgba(200, 165, 106, .5)); }
.nv-cart-empty-art span { position: absolute; width: 18px; aspect-ratio: 5 / 7; border-radius: 3px; border: 1px solid var(--gold); background: var(--surface-3); top: 8px; left: 14px; transform: rotate(-20deg); animation: nc-float 5s ease-in-out infinite; }
.nv-cart-empty-art span + span { left: auto; right: 12px; top: 14px; transform: rotate(18deg); animation-delay: -2s; }
.nv-side-sub { margin: 18px 0 10px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-family: var(--font-sans); font-size: .82rem; font-weight: 800; }

/* ---------- Ficha de producto ---------- */
.nova-detail-breadcrumb { padding-top: 26px; }
.nv-detail { padding: 10px 0 clamp(40px, 6vw, 70px); }
.nv-detail-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.nv-gallery { position: sticky; top: calc(var(--header-h) + 18px); display: grid; gap: 12px; }
.nv-gallery-stage { position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--bg-2); }
.nv-gallery-stage img { width: 100%; height: 100%; object-fit: contain; background: radial-gradient(circle, rgba(121, 82, 199, .15), transparent 70%); }
.nv-gallery-tag { position: absolute; top: 14px; left: 14px; z-index: 2; }
.nv-gallery-zoom { position: absolute; right: 14px; top: 14px; z-index: 2; background: var(--glass-strong); }
.nv-gallery-counter { position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: 5px 10px; border-radius: 8px; background: var(--glass-strong); font-size: .76rem; font-weight: 800; color: var(--muted); }
.nv-gallery-counter span { color: var(--gold); }
.nv-gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; }
.nv-gallery-thumbs button { width: 74px; height: 74px; flex: 0 0 74px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; opacity: .6; transition: opacity .2s, border-color .2s; }
.nv-gallery-thumbs button.active, .nv-gallery-thumbs button:hover { opacity: 1; border-color: var(--gold); }
.nv-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.nv-detail-info { display: grid; gap: 16px; }
.nv-detail-info h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
.nv-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.nv-detail-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nv-detail-price strong { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 600; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nv-detail-price del { color: var(--faint); font-size: 1.05rem; }
.nv-detail-desc { color: var(--text-soft); line-height: 1.7; }
.nv-spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.nv-spec-grid div { display: grid; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255, 255, 255, .015); }
.nv-spec-grid span { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nv-spec-grid strong { font-size: .9rem; }
.nv-buy-box { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); }
.nv-buy-form { display: grid; grid-template-columns: 140px 1fr; gap: 10px; align-items: end; margin: 0; }
.nv-qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; height: 50px; }
.nv-qty button { width: 42px; height: 100%; color: var(--gold); display: grid; place-items: center; }
.nv-qty button:hover { background: rgba(200, 165, 106, .08); }
.nv-qty input { width: 56px !important; min-height: 0 !important; height: 100%; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; text-align: center; font-weight: 800; box-shadow: none !important; -moz-appearance: textfield; }
.nv-qty input::-webkit-inner-spin-button, .nv-qty input::-webkit-outer-spin-button { -webkit-appearance: none; }
.nv-buy-extra { display: flex; flex-wrap: wrap; gap: 10px; }
.nv-buy-extra form { margin: 0; }
.nv-trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nv-trust-row span { display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--line-soft); border-radius: 12px; color: var(--muted); font-size: .72rem; font-weight: 700; text-align: center; }
.nv-trust-row .ico { color: var(--gold); width: 20px; height: 20px; }
.nv-branch-stock { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.nv-branch-stock article { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.nv-branch-stock h3 { font-size: 1rem; }
.nv-branch-stock p { margin: 0; color: var(--muted); font-size: .82rem; }
.nv-lightbox { position: fixed; inset: 0; z-index: 980; display: grid; place-items: center; padding: 24px; background: rgba(4, 2, 7, .92); }
.nv-lightbox img { max-width: min(1100px, 100%); max-height: calc(100vh - 48px); object-fit: contain; border-radius: 14px; }
.nv-lightbox button { position: absolute; top: 18px; right: 18px; }
html.gallery-lightbox-open-v77 { overflow: hidden; }
@media (max-width: 900px) { .nv-detail-grid { grid-template-columns: minmax(0, 1fr); } .nv-gallery { position: static; } }
@media (max-width: 520px) { .nv-buy-form { grid-template-columns: minmax(0, 1fr); } .nv-trust-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Consultar precio ---------- */
.price-lookup-panel { display: grid; gap: 18px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: radial-gradient(circle at 90% 0%, rgba(121, 82, 199, .3), transparent 50%), var(--surface); box-shadow: var(--shadow); }
.price-search-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.price-search-field { position: relative; display: flex; align-items: center; }
.price-search-icon { position: absolute; left: 16px; color: var(--gold); font-size: 1.1rem; pointer-events: none; }
.price-search-field input { min-height: 58px !important; padding-left: 46px !important; font-size: 1.05rem !important; border-radius: 14px !important; }
.price-clear { position: absolute; right: 12px; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
.price-search-button { min-height: 58px; border-radius: 14px; }
.quick-searches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: .82rem; }
.quick-searches a, .quick-searches button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-soft); font-weight: 700; font-size: .78rem; }
.quick-searches a:hover, .quick-searches button:hover { border-color: var(--gold); color: var(--gold-2); }
.search-trust { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: .8rem; }
.price-results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 14px; }
.price-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.price-results.is-loading { opacity: .5; }
.price-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 24px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); flex-wrap: wrap; }
.price-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(200, 165, 106, .1); color: var(--gold); font-size: 1.4rem; }
.price-empty > div:nth-child(2) { flex: 1; }
.price-live-status { color: var(--muted); font-size: .8rem; }
.price-discover { margin-top: 30px; }
.price-popular-grid, .nova-price-unified-grid, .nova-commerce-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.price-help-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.price-result-card { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.price-result-media { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.price-result-media img { width: 100%; height: 100%; object-fit: cover; }
.price-result-value, .price-result-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.price-result-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: .72rem; }
.price-result-main h3 { font-size: .92rem; }
.price-result-main p { margin: 0; color: var(--muted); font-size: .78rem; }
@media (max-width: 560px) { .price-search-form { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Promociones ---------- */
.nv-promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.nv-promo-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; border: 1px solid var(--line); border-radius: var(--r-xl); background: radial-gradient(circle at 100% 0%, rgba(121, 82, 199, .25), transparent 50%), var(--surface); overflow: hidden; transition: border-color .3s, transform .4s var(--ease-out); }
.nv-promo-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.nv-promo-card .nv-badge { align-self: flex-start; }
.nv-promo-card h2 { font-family: var(--font-display); font-size: 1.6rem; }
.nv-promo-card p { color: var(--muted); margin: 0; }
.nv-promo-value { font-family: var(--font-display); font-size: 3rem; line-height: 1; font-weight: 600; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nv-promo-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nv-promo-facts span { display: grid; padding: 10px; border: 1px solid var(--line-soft); border-radius: 10px; color: var(--muted); font-size: .7rem; font-weight: 700; }
.nv-promo-facts strong { color: var(--text); font-size: .82rem; }
.nv-promo-card details { border-top: 1px solid var(--line-soft); padding-top: 10px; }
.nv-promo-card summary { cursor: pointer; color: var(--gold-2); font-weight: 700; font-size: .84rem; }
.nv-promo-card details p { margin-top: 8px; font-size: .84rem; }
.nv-promo-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; flex-wrap: wrap; }
/* Evita desbordes en móvil: los hijos de grid/flex pueden encogerse */
.nv-buy-extra { flex-wrap: wrap; }
.nv-buy-extra .nv-link { white-space: normal; }

/* ---- 07-pages.css ---- */
/* =====================================================================
   Capa 07: páginas secundarias — sucursales (mapa), torneos, contacto,
   guía, carrito.
   ===================================================================== */

/* ---------- Sucursales ---------- */
@keyframes nv-dash { to { stroke-dashoffset: -200; } }
@keyframes nv-pin { 0%, 100% { transform: scale(.8); opacity: .35; } 50% { transform: scale(1.25); opacity: .7; } }
.nv-open { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 800; }
.nv-open i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }
.nv-open-open { color: var(--green); }
.nv-open-closed { color: var(--red); }
.nv-open-unknown { color: var(--muted); }
.nv-branch-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); overflow: hidden; transition: border-color .3s, transform .4s var(--ease-out), box-shadow .4s; scroll-margin-top: calc(var(--header-h) + 20px); }
.nv-branch-card:hover, .nv-branch-card:target { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow); }

/* ---------- Torneos ---------- */
.nv-arena-hero .nv-stat-row { margin-top: 20px; }
.nv-arena-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.nv-tour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.nv-tour-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-xl); background: radial-gradient(circle at 100% 0%, rgba(121, 82, 199, .25), transparent 55%), var(--surface); overflow: hidden; scroll-margin-top: calc(var(--header-h) + 20px); transition: border-color .3s, transform .4s var(--ease-out); }
.nv-tour-card:hover, .nv-tour-card:target { border-color: var(--line-strong); transform: translateY(-3px); }
.nv-tour-card > *:not(.nv-tour-art) { position: relative; z-index: 1; }
.nv-tour-card h3 { font-family: var(--font-display); font-size: 1.4rem; padding-right: 60px; }
.nv-tour-card > p { color: var(--muted); font-size: .86rem; margin: 0; }
.nv-tour-card .nv-btn { margin-top: auto; }
.nv-tour-card .nv-eyebrow { margin: 0; }
.nv-tour-art { position: absolute; right: -20px; bottom: 70px; width: 140px; height: 140px; color: rgba(200, 165, 106, .08); display: grid; place-items: center; }
.nv-tour-art .ico { width: 100%; height: 100%; stroke-width: .8; }
.nv-tour-art b { position: absolute; top: 30%; color: rgba(200, 165, 106, .3); font-weight: 800; font-size: 1.4rem; }
.nv-tour-date { position: absolute !important; right: 18px; top: 18px; display: grid; justify-items: center; min-width: 54px; padding: 8px 6px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(8, 6, 12, .7); }
:root[data-theme="light"] .nv-tour-date { background: var(--surface-2); }
.nv-tour-date strong { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }
.nv-tour-date span { color: var(--gold); font-size: .62rem; font-weight: 800; letter-spacing: .15em; }
.nv-tour-prize { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 10px; background: rgba(200, 165, 106, .08); color: var(--gold-2); font-size: .82rem; font-weight: 700; }
:root[data-theme="light"] .nv-tour-prize { color: var(--gold-3); }
.nv-tour-prize .ico { width: 18px; height: 18px; }
.nv-capacity > div:first-child { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.nv-capacity strong { color: var(--text); }
.nv-progress { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.nv-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7952c7, #c8a56a); }
.nv-arena-side { position: sticky; top: calc(var(--header-h) + 16px); }
.nv-my-regs { display: grid; gap: 8px; }
.nv-my-regs div { display: grid; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px; }
.nv-my-regs strong { font-size: .84rem; }
.nv-my-regs small { color: var(--muted); font-size: .74rem; }
.nv-benefit-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .nv-arena-layout { grid-template-columns: minmax(0, 1fr); } .nv-arena-side { position: static; } }
@media (max-width: 600px) { .nv-benefit-grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Contacto ---------- */
.nv-contact-grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.nv-support-list { display: grid; gap: 8px; margin-top: 26px; list-style: none; }
.nv-support-list a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(255, 255, 255, .015); transition: border-color .2s, background .2s, transform .2s; }
.nv-support-list a:hover, .nv-support-list a[aria-current="true"] { border-color: var(--line-strong); background: rgba(200, 165, 106, .05); transform: translateX(3px); }
.nv-support-list a > .ico:first-child { width: 40px; height: 40px; padding: 10px; border-radius: 11px; background: rgba(200, 165, 106, .08); color: var(--gold); flex: 0 0 40px; }
.nv-support-list a > span { display: grid; flex: 1; }
.nv-support-list strong { font-size: .9rem; }
.nv-support-list small { color: var(--muted); font-size: .76rem; }
.nv-support-list a > .ico:last-child { width: 15px; color: var(--faint); }
.nv-contact-form { display: grid; gap: 4px; }
.nv-contact-form .nv-title { margin-bottom: 16px; }
.nv-contact-form .nv-btn { margin-top: 12px; }
.nv-hint { margin: 6px 0 10px; color: var(--faint); font-size: .76rem; }
.nv-hint a { color: var(--gold-2); text-decoration: underline; }
.nv-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) { .nv-contact-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .nv-field-row, .form-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Guía ---------- */
.nv-guide-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.nv-guide-nav { position: sticky; top: calc(var(--header-h) + 16px); }
.nv-guide-content { display: grid; gap: 18px; }
.nv-guide-article { scroll-margin-top: calc(var(--header-h) + 20px); }
.nv-guide-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.nv-guide-head > .ico { width: 56px; height: 56px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 16px; color: var(--gold); background: rgba(200, 165, 106, .07); }
.nv-guide-head .nv-eyebrow { margin-bottom: 4px; }
.nv-guide-items { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nv-guide-items div { padding: 16px; border: 1px solid var(--line-soft); border-radius: 14px; }
.nv-guide-items span { color: var(--gold); font-family: var(--font-display); }
.nv-guide-items h3 { margin: 4px 0 6px; font-size: .98rem; }
.nv-guide-items p { margin: 0; color: var(--muted); font-size: .86rem; }
.nv-guide-cta { margin-top: 12px; }
@media (max-width: 900px) { .nv-guide-layout { grid-template-columns: minmax(0, 1fr); } .nv-guide-nav { position: static; } }
@media (max-width: 600px) { .nv-guide-items { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Carrito ---------- */
.nv-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.nv-cart-main { display: grid; gap: 18px; min-width: 0; }
.nv-cart-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.nv-cart-head .nv-eyebrow { margin-bottom: 4px; }
.nv-cart-form { display: grid; gap: 14px; margin: 0; }
.nv-cart-list { display: grid; gap: 12px; }
.nv-cart-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); transition: border-color .2s; }
.nv-cart-item:hover { border-color: var(--line-strong); }
.nv-cart-thumb { position: relative; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-soft); }
.nv-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nv-cart-info { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.nv-cart-info small { color: var(--faint); font-size: .7rem; font-weight: 700; letter-spacing: .06em; }
.nv-cart-info h3 { font-size: 1rem; font-weight: 750; font-family: var(--font-sans); }
.nv-cart-info h3 a:hover { color: var(--gold-2); }
.nv-cart-unit { color: var(--muted); font-size: .84rem; }
.nv-cart-unit del { color: var(--faint); }
.nv-alert-inline { padding: 6px 10px; border-radius: 8px; background: var(--amber-bg); color: var(--amber); font-size: .76rem; }
.nv-cart-qty { display: grid; justify-items: center; gap: 6px; }
.nv-cart-qty .nv-qty { height: 42px; }
.nv-cart-qty .nv-qty button { width: 36px; }
.nv-cart-qty .nv-qty input { width: 44px !important; }
.nv-cart-remove { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .74rem; font-weight: 700; }
.nv-cart-remove:hover { color: var(--red); }
.nv-cart-remove .ico { width: 14px; height: 14px; }
.nv-cart-line { display: grid; justify-items: end; min-width: 120px; }
.nv-cart-line small { color: var(--muted); font-size: .72rem; }
.nv-cart-line strong { font-size: 1.05rem; }
.nv-cart-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.nv-cart-empty-big { display: grid; justify-items: center; gap: 12px; padding: clamp(36px, 6vw, 64px) 24px; text-align: center; }
.nv-cart-empty-big p { color: var(--muted); max-width: 46ch; }
.nv-cart-empty-big .nv-cart-empty-art { width: 130px; height: 130px; }
.nv-cart-empty-big .nv-cart-empty-art .ico { width: 64px; height: 64px; }
.nv-cart-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nv-cart-tools a { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--surface); transition: border-color .2s; }
.nv-cart-tools a:hover { border-color: var(--line-strong); }
.nv-cart-tools a > .ico:first-child { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: rgba(200, 165, 106, .08); color: var(--gold); flex: 0 0 36px; }
.nv-cart-tools a > span { display: grid; flex: 1; }
.nv-cart-tools strong { font-size: .84rem; }
.nv-cart-tools small { color: var(--muted); font-size: .72rem; }
.nv-cart-tools a > .ico:last-child { width: 14px; color: var(--faint); }
.nv-order-rows { display: grid; gap: 8px; }
.nv-order-rows article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 12px; }
.nv-order-rows article > div:first-child { display: grid; }
.nv-order-rows small { color: var(--faint); font-size: .72rem; }
.nv-order-rows span { color: var(--muted); font-size: .78rem; }
.nv-row-actions { display: flex; gap: 6px; }
.nv-cart-login { display: grid; grid-template-columns: auto 1fr; gap: 20px; }
.nv-cart-login-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--gold-grad); color: var(--gold-ink); font-size: 1.8rem; font-weight: 800; }
.nv-tick-list { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0 6px; }
.nv-tick-list span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: .82rem; font-weight: 650; }
.nv-tick-list .ico { color: var(--green); width: 16px; height: 16px; }
.nv-summary { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 12px; }
.nv-summary-lines { display: grid; gap: 10px; margin: 6px 0 0; }
.nv-summary-lines div { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.nv-summary-lines dt { color: var(--muted); }
.nv-summary-lines dd { margin: 0; font-weight: 700; text-align: right; }
.nv-summary-lines .is-discount dd { color: var(--green); }
.nv-summary-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-block: 1px solid var(--line); }
.nv-summary-total strong { font-family: var(--font-display); font-size: 1.8rem; }
.nv-safe { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--green-bg); color: var(--text-soft); font-size: .78rem; }
.nv-safe .ico { color: var(--green); width: 18px; height: 18px; flex: 0 0 18px; }
.nv-summary-links { display: grid; gap: 8px; }
.nv-summary-links a { display: inline-flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .82rem; font-weight: 700; }
.nv-summary-links a:hover { color: var(--gold-2); }
.nv-summary-links .ico { width: 14px; color: var(--gold); }
@media (max-width: 1000px) { .nv-cart-layout { grid-template-columns: minmax(0, 1fr); } .nv-summary { position: static; } }
@media (max-width: 720px) {
  .nv-cart-item { grid-template-columns: 72px minmax(0, 1fr); }
  .nv-cart-thumb { width: 72px; height: 72px; }
  .nv-cart-qty { grid-column: 1 / 2; justify-items: start; }
  .nv-cart-line { grid-column: 2; align-self: end; }
  .nv-cart-tools { grid-template-columns: minmax(0, 1fr); }
  .nv-order-rows article { grid-template-columns: 1fr auto; }
  .nv-row-actions { grid-column: 1 / -1; }
  .nv-cart-login { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 08-flows.css ---- */
/* =====================================================================
   Capa 08: flujos de compra y cuenta — checkout, pago, comprobantes,
   cuenta del cliente, seguimiento, autenticación y páginas legales.
   (Estiliza el marcado funcional existente sin alterar su lógica.)
   ===================================================================== */

/* ---------- Encabezados heredados ---------- */
.subhero, .page-hero, .client-v77-hero, .proof-hero {
  position: relative;
  padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--line-soft);
  background: radial-gradient(ellipse 45% 70% at 90% 0%, rgba(121, 82, 199, .2), transparent 70%), radial-gradient(ellipse 30% 60% at 0% 100%, rgba(200, 165, 106, .07), transparent 70%);
  overflow: hidden;
}
.subhero h1, .page-hero h1, .client-v77-hero h1, .proof-hero h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.04; letter-spacing: -.02em; margin-bottom: 12px; }
.subhero p, .page-hero p, .client-v77-hero p, .proof-hero p { color: var(--text-soft); max-width: 62ch; }
.client-v77-hero .container { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.client-v77-account-badge { display: grid; gap: 4px; min-width: 240px; padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--glass); backdrop-filter: blur(10px); }
.client-v77-account-badge span { color: var(--gold); font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.client-v77-account-badge strong { font-size: 1.1rem; word-break: break-word; }
.client-v77-account-badge small { color: var(--muted); }
.client-v77-hero-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.client-v77-hero-kpis article { display: grid; min-width: 104px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); }
.client-v77-hero-kpis strong { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.client-v77-hero-kpis span { color: var(--muted); font-size: .74rem; font-weight: 700; margin-top: 4px; }
.proof-hero-inner { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.proof-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.proof-back { color: var(--gold-2); font-weight: 700; font-size: .88rem; }
.nv-page-hero.has-banner .nv-page-hero-photo { position: absolute; inset: 0; opacity: .35; }
.nv-page-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.nv-hero-card-aside { display: grid; place-items: center; }
@media (max-width: 920px) { .nv-hero-card-aside { display: none; } }

/* ---------- Paneles genéricos de cuenta ---------- */
.client-v77-panel, .client-v77-latest-order, .client-v77-recent, .tracking-v77-main, .tracking-v77-summary, .tracking-v77-select, .summary-card, .checkout-form, .proof-card, .return-v77-request, .account-address-section-v68, .address-card-v68 {
  position: relative;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent 40%), var(--surface);
  box-shadow: var(--shadow-sm);
}
.client-v77-section-head, .proof-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.client-v77-section-head h2, .client-v77-section-head h3, .summary-card h2, .proof-card h2, .tracking-v77-summary h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.client-v77-section-head p { color: var(--muted); margin: 4px 0 0; font-size: .86rem; }
.client-v77-section-head > div:last-child:not(:first-child) { display: grid; justify-items: end; gap: 6px; }
.clear { color: var(--gold-2); font-size: .84rem; font-weight: 700; }
.client-v77-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.client-v77-kpis article { display: grid; gap: 4px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.client-v77-kpis span { color: var(--gold); font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.client-v77-kpis strong { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; }
.client-v77-kpis small { color: var(--muted); font-size: .76rem; }
.client-v77-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 18px 0; }
.client-v77-latest-order, .client-v77-recent { margin-bottom: 18px; }
.client-v77-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.client-v77-menu-grid a { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 14px; transition: border-color .2s, transform .2s; }
.client-v77-menu-grid a:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.client-v77-menu-grid span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(200, 165, 106, .09); color: var(--gold); font-size: 1rem; margin-bottom: 4px; }
.client-v77-menu-grid b { font-size: .88rem; }
.client-v77-menu-grid small { color: var(--muted); font-size: .74rem; }
.client-v77-form, .client-v77-form > label { display: grid; gap: 12px; }
.client-v77-form label > span:first-child { display: block; margin-bottom: 6px; color: var(--text-soft); font-size: .8rem; font-weight: 700; }
.client-v77-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.client-v77-form .btn { justify-self: start; }
.client-v77-check, .auth-check, .checkout-legal-consent-v70, .checkout-save-address-v68, .address-check-v68 { display: flex !important; align-items: flex-start; gap: 10px; color: var(--text-soft); font-size: .86rem; font-weight: 600; cursor: pointer; }
.client-v77-check input, .auth-check input, .checkout-legal-consent-v70 input, .checkout-save-address-v68 input { margin-top: 2px; }
.checkout-legal-consent-v70 a, .auth-check a { color: var(--gold-2); text-decoration: underline; }
.client-v77-password, .auth-input-wrap { position: relative; display: flex; align-items: center; }
.client-v77-password input { padding-right: 70px !important; }
.client-v77-password button { position: absolute; right: 8px; padding: 6px 10px; border-radius: 7px; color: var(--gold); font-size: .78rem; font-weight: 700; }
.client-v772-session-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.client-v772-session-box p { color: var(--muted); font-size: .8rem; margin: 4px 0 0; max-width: 40ch; }
.client-v772-logout-btn { min-height: 40px; padding: 0 16px; border: 1px solid rgba(255, 107, 125, .4); border-radius: 10px; color: var(--red); font-weight: 750; font-size: .84rem; }
.client-v772-logout-btn:hover { background: var(--red-bg); }
.client-v77-mini-list, .client-v77-points-list { display: grid; gap: 8px; }
.client-v77-mini-list > div, .client-v77-points-list article { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 12px; }
.client-v77-mini-list > div > span, .client-v77-points-list article > div:nth-child(2) { display: grid; flex: 1; }
.client-v77-mini-list small, .client-v77-points-list small, .client-v77-points-list span { color: var(--muted); font-size: .74rem; }
.positive { color: var(--green); }
.negative { color: var(--red); }
.client-v77-points-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-weight: 800; }
.client-v77-points-icon.positive { background: var(--green-bg); }
.client-v77-points-icon.negative { background: var(--red-bg); }
.client-v77-points-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.client-v77-points-guide article { display: flex; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.client-v77-points-guide span { color: var(--gold); font-family: var(--font-display); font-size: 1.3rem; }
.client-v77-points-guide p { color: var(--muted); font-size: .82rem; margin: 4px 0 0; }
.client-v77-order-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.client-v77-order-strip a { display: grid; gap: 2px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 12px; transition: border-color .2s; }
.client-v77-order-strip a:hover { border-color: var(--line-strong); }
.client-v77-order-strip span, .client-v77-order-strip small { color: var(--muted); font-size: .74rem; }
.client-v77-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 20px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); text-align: center; }
.client-v77-empty.compact { padding: 18px; }
.client-v77-empty p { color: var(--muted); }
.client-v77-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.client-v77-actions.vertical { flex-direction: column; }
.client-v77-actions.vertical .btn { width: 100%; }
.client-v77-status, .status-badge, .proof-status { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--amber-bg); color: var(--amber); font-size: .7rem; font-weight: 800; letter-spacing: .04em; }
.client-v77-status.pagado, .client-v77-status.completado, .client-v77-status.listo_recoger, .proof-status.approved, .proof-status.aprobado { background: var(--green-bg); color: var(--green); }
.client-v77-status.preparando, .client-v77-status.enviado, .client-v77-status.en_reparto { background: var(--blue-bg); color: var(--blue); }
.client-v77-status.cancelado, .client-v77-status.incidencia, .proof-status.rejected, .proof-status.rechazado { background: var(--red-bg); color: var(--red); }
.client-v77-progress { height: 8px; margin: 10px 0; border-radius: 8px; background: var(--surface-3); overflow: hidden; }
.client-v77-progress.compact { height: 5px; }
.client-v77-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7952c7, #c8a56a); }
.client-v77-step-labels { display: grid; grid-template-columns: repeat(var(--steps, 4), 1fr); gap: 6px; }
.client-v77-step-labels span { color: var(--faint); font-size: .72rem; font-weight: 700; }
.client-v77-step-labels span.done { color: var(--text-soft); }
.client-v77-step-labels span.current { color: var(--gold-2); }
.client-v77-filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.client-v77-filter-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 10px; color: var(--muted); font-size: .84rem; font-weight: 700; }
.client-v77-filter-tabs a b { padding: 1px 7px; border-radius: 999px; background: var(--surface-3); font-size: .7rem; }
.client-v77-filter-tabs a.active { background: rgba(200, 165, 106, .1); color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.client-v77-orders { display: grid; gap: 14px; }
.client-v77-order-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.client-v77-order-media { display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: radial-gradient(circle, rgba(121, 82, 199, .3), transparent 70%), var(--bg-2); font-size: 2rem; }
.client-v77-order-media img { width: 100%; height: 100%; object-fit: cover; }
.client-v77-order-top { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.client-v77-order-top h2 { font-family: var(--font-display); font-size: 1.35rem; }
.client-v77-order-top p { color: var(--muted); font-size: .82rem; margin: 2px 0 0; }
.client-v77-order-top > div:last-child { display: grid; justify-items: end; gap: 6px; }
.client-v77-order-products { display: grid; gap: 2px; margin: 10px 0; color: var(--text-soft); font-size: .84rem; }
.client-v77-order-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: .8rem; }
.client-v77-order-meta b { color: var(--text); margin-right: 6px; }
.client-v77-policy-note { padding: 12px 14px; border-radius: 12px; background: var(--blue-bg); color: var(--text-soft); font-size: .84rem; margin-bottom: 16px; }
@media (max-width: 860px) { .client-v77-dashboard-grid, .client-v77-points-guide { grid-template-columns: minmax(0, 1fr); } .client-v77-form-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .client-v77-order-card { grid-template-columns: minmax(0, 1fr); } .client-v77-order-media { max-width: 120px; } }

/* Favoritos */
.favorite-v77-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.favorite-v77-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.favorite-v77-card.is-out .favorite-v77-image { filter: grayscale(.6) brightness(.7); }
.favorite-v77-image { display: grid; place-items: center; aspect-ratio: 4 / 3; background: radial-gradient(circle, rgba(121, 82, 199, .3), transparent 70%), var(--bg-2); font-size: 3rem; }
.favorite-v77-image img { width: 100%; height: 100%; object-fit: cover; }
.favorite-v77-copy { display: grid; gap: 8px; padding: 16px; }
.favorite-v77-copy h2 { font-size: 1rem; font-family: var(--font-sans); font-weight: 750; }
.product-type { color: var(--muted); font-size: .72rem; font-weight: 700; }
.favorite-v77-stock.ok{ color: var(--green); font-size: .78rem; font-weight: 700; }
.favorite-v77-stock.no{ color: var(--red); font-size: .78rem; font-weight: 700; }
.favorite-v77-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.favorite-v77-price strong { font-size: 1.15rem; }
.favorite-v77-price-change { font-size: .74rem; font-weight: 700; }
.favorite-v77-price-change.down { color: var(--green); }
.favorite-v77-price-change.up { color: var(--amber); }
.favorite-v77-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.favorite-v77-actions form, .favorite-v77-inline { margin: 0; }

/* Devoluciones */
.return-v77-items { display: grid; gap: 10px; margin: 12px 0; }
.return-v77-items label, .return-v77-list article { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 12px; }
.return-v77-product-image { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--bg-2); }
.return-v77-upload { display: grid; gap: 8px; }
.return-v77-preview { display: flex; gap: 8px; flex-wrap: wrap; }
.return-v77-preview-item { display: grid; gap: 4px; width: 90px; font-size: .7rem; color: var(--muted); }
.return-v77-preview-item img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; }
.return-v77-list { display: grid; gap: 12px; }
.return-v77-list article { display: grid; align-items: start; }
.return-v77-state, .return-v77-resolution, .return-v77-refund { color: var(--text-soft); font-size: .84rem; }
.return-v77-evidence-links { display: flex; gap: 8px; flex-wrap: wrap; }
.return-v77-evidence-links a { color: var(--gold-2); font-size: .8rem; font-weight: 700; }

/* ---------- Seguimiento ---------- */
.tracking-v77-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.tracking-v77-main { display: grid; gap: 20px; }
.tracking-v77-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tracking-v77-head h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); }
.tracking-v77-head p { color: var(--muted); }
.tracking-v77-stepper { position: relative; display: grid; grid-template-columns: repeat(var(--steps, 4), 1fr); gap: 6px; padding-top: 4px; }
.tracking-v77-step-line { position: absolute; left: 18px; right: 18px; top: 22px; height: 3px; border-radius: 3px; background: var(--surface-3); }
.tracking-v77-step-line i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7952c7, #c8a56a); }
.tracking-v77-step { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
.tracking-v77-step span { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--muted); font-weight: 800; font-size: .84rem; }
.tracking-v77-step.done span { border-color: transparent; background: var(--gold-grad); color: var(--gold-ink); }
.tracking-v77-step.current span { box-shadow: 0 0 0 5px rgba(200, 165, 106, .2); }
.tracking-v77-step b { color: var(--muted); font-size: .74rem; }
.tracking-v77-step.done b { color: var(--text); }
.tracking-v77-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.tracking-v77-info-grid div, .tracking-v77-address { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 12px; }
.tracking-v77-info-grid span, .tracking-v77-address span { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tracking-v77-address small { color: var(--muted); }
.tracking-v77-products, .tracking-v77-history { display: grid; gap: 10px; }
.tracking-v77-product { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line-soft); border-radius: 12px; }
.tracking-v77-product > div { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.tracking-v77-product img { width: 100%; height: 100%; object-fit: cover; }
.tracking-v77-product p { display: grid; flex: 1; margin: 0; }
.tracking-v77-product small { color: var(--muted); }
.tracking-v77-event { position: relative; display: flex; gap: 14px; padding-left: 4px; }
.tracking-v77-event > span { width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(200, 165, 106, .15); flex: 0 0 12px; }
.tracking-v77-event p { margin: 2px 0; color: var(--text-soft); font-size: .86rem; }
.tracking-v77-event small { color: var(--muted); }
.tracking-v77-summary { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 14px; }
.tracking-v77-alert { flex-direction: column; gap: 2px; }
.tracking-v77-alert.danger { border-left-color: var(--red); background: var(--red-bg); }
.tracking-v77-alert.warning { border-left-color: var(--amber); background: var(--amber-bg); }
.tracking-v77-order-list { display: grid; gap: 8px; }
.tracking-v77-order-list a { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 12px; }
.tracking-v77-order-list a > div { display: grid; flex: 1; }
.tracking-v77-order-list a span { color: var(--muted); font-size: .8rem; }
@media (max-width: 960px) { .tracking-v77-layout { grid-template-columns: minmax(0, 1fr); } .tracking-v77-summary { position: static; } }

/* ---------- Checkout ---------- */
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.checkout-form { display: grid; gap: 14px; }
.checkout-form > label { margin: 4px 0 -6px; }
.checkout-v77-trustbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.checkout-v77-trustbar div { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 12px; }
.checkout-v77-trustbar span { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 4px; border-radius: 8px; background: rgba(200, 165, 106, .1); color: var(--gold); font-size: .72rem; font-weight: 800; }
.checkout-v77-trustbar strong { font-size: .82rem; }
.checkout-v77-trustbar small { color: var(--muted); font-size: .72rem; }
.checkout-section-title { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.checkout-section-title > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--gold-grad); color: var(--gold-ink); font-weight: 800; }
:root[data-theme="light"] .checkout-section-title > span { color: #fffaf0; }
.checkout-section-title h2 { font-family: var(--font-display); font-size: 1.4rem; }
.checkout-delivery-choice-v68 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checkout-delivery-choice-v68 label, .checkout-address-option-v68 { position: relative; display: flex !important; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.checkout-delivery-choice-v68 label:has(input:checked), .checkout-address-option-v68.is-selected, .checkout-address-option-v68:has(input:checked) { border-color: var(--gold); background: rgba(200, 165, 106, .06); }
.checkout-delivery-choice-v68 span, .address-radio-copy { display: grid; gap: 2px; }
.checkout-delivery-choice-v68 small, .address-radio-copy small, .address-radio-copy p { color: var(--muted); font-size: .8rem; margin: 0; font-weight: 500; }
.address-radio-copy > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.address-default-badge-v68 { padding: 2px 8px; border-radius: 6px; background: rgba(200, 165, 106, .12); color: var(--gold-2); font-size: .66rem; font-weight: 800; }
.checkout-address-section-v68 { display: grid; gap: 12px; }
.checkout-address-head-v68 { display: flex; justify-content: space-between; gap: 12px; }
.checkout-address-head-v68 > div { display: grid; }
.checkout-address-head-v68 small { color: var(--muted); }
.address-link-v68 { color: var(--gold-2); font-weight: 700; font-size: .84rem; }
.checkout-address-list-v68 { display: grid; gap: 8px; }
.checkout-v77-edit-address { justify-self: start; margin-top: 6px; color: var(--gold-2); font-size: .76rem; font-weight: 700; text-decoration: underline; }
.checkout-new-address-v68 { display: none; gap: 12px; padding: 16px; border: 1px dashed var(--line-strong); border-radius: 14px; }
.checkout-new-address-v68.is-open { display: grid; }
.address-form-grid-v68 { display: grid; gap: 12px; }
.address-form-grid-v68.two { grid-template-columns: 1fr 1fr; }
.address-form-grid-v68.three { grid-template-columns: 1fr 1.4fr 1.4fr; }
.address-form-grid-v68.two-number { grid-template-columns: 1fr 1fr; }
.address-form-grid-v68 label > span, .checkout-new-address-v68 > label > span, .address-form-v68 label > span { display: block; margin-bottom: 6px; color: var(--text-soft); font-size: .8rem; font-weight: 700; }
.checkout-country-lock-v730 { display: grid; padding: 12px 14px; border-radius: 12px; background: var(--blue-bg); font-size: .82rem; }
.checkout-country-lock-v730 small { color: var(--muted); }
.checkout-branch-help { display: grid; gap: 8px; margin: 4px 0; }
.checkout-branch-item { padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: 11px; background: rgba(255, 255, 255, .02); color: var(--muted); font-size: .8rem; }
.checkout-branch-item strong { color: var(--text); }
.checkout-branch-item.ok { border-color: rgba(69, 211, 154, .3); background: var(--green-bg); }
.checkout-branch-item.bad { border-color: rgba(255, 107, 125, .3); background: var(--red-bg); }
.checkout-stock-alert { padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(242, 181, 74, .4); background: var(--amber-bg); color: var(--text-soft); font-size: .82rem; }
.checkout-stock-alert strong { display: block; color: var(--amber); margin-bottom: 4px; }
.checkout-form > .btn.secondary { justify-self: start; }
.checkout-payment-mode-v69 { display: none; gap: 14px; }
.checkout-payment-mode-v69.is-visible { display: grid; }
.payment-choice-head-v835 { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; }
.payment-choice-head-v835 > div:first-child { display: grid; }
.payment-choice-kicker-v835 { font-weight: 800; }
.payment-choice-head-v835 small { color: var(--muted); font-size: .8rem; }
.payment-selected-summary-v835 { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(200, 165, 106, .06); }
.payment-selected-summary-v835 > span:nth-child(2) { display: grid; }
.payment-selected-summary-v835 small { color: var(--muted); font-size: .68rem; }
.payment-selected-summary-v835 i { color: var(--green); font-style: normal; }
.payment-selected-icon-v835 svg, .payment-method-icon-v835 svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.payment-selected-icon-v835 { color: var(--gold); }
.payment-native-select-v835 { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px !important; min-height: 0 !important; }
.payment-method-grid-v835 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.payment-method-card-v835 { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .015); text-align: left; transition: border-color .2s, background .2s, transform .2s; }
.payment-method-card-v835:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.payment-method-card-v835.selected { border-color: var(--gold); background: rgba(200, 165, 106, .08); box-shadow: inset 0 0 0 1px rgba(200, 165, 106, .3); }
.payment-method-card-v835.unavailable { opacity: .55; }
.payment-method-icon-v835 { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(121, 82, 199, .12); color: var(--violet-2); }
.payment-method-copy-v835 { display: grid; gap: 2px; }
.payment-method-copy-v835 b { font-size: .88rem; }
.payment-method-copy-v835 small { color: var(--muted); font-size: .74rem; }
.payment-card-brands-v835 { display: flex; gap: 4px; margin-top: 4px; }
.payment-card-brands-v835 em { padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; font-style: normal; font-size: .6rem; font-weight: 800; color: var(--muted); }
.payment-method-state-v835 { grid-column: 2; justify-self: start; padding: 2px 8px; border-radius: 6px; background: var(--green-bg); color: var(--green); font-size: .66rem; font-weight: 800; }
.payment-method-card-v835.unavailable .payment-method-state-v835 { background: var(--surface-3); color: var(--muted); }
.payment-transfer-explain-v835 { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line-violet); border-radius: 14px; background: rgba(121, 82, 199, .06); }
.payment-transfer-head-v835 { display: flex; gap: 12px; }
.payment-transfer-head-v835 > div { display: grid; }
.payment-transfer-head-v835 small { color: var(--muted); font-size: .8rem; }
.payment-transfer-steps-v835 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.payment-transfer-steps-v835 span { display: grid; gap: 4px; padding: 10px; border-radius: 10px; background: var(--surface); color: var(--muted); font-size: .74rem; }
.payment-transfer-steps-v835 b { color: var(--gold); font-family: var(--font-display); font-size: 1.1rem; }
.payment-transfer-warning-v835 { margin: 0; color: var(--amber); font-size: .8rem; }
.checkout-payment-note-v835 { display: flex; gap: 10px; margin: 0; padding: 12px; border-radius: 12px; background: var(--green-bg); color: var(--text-soft); font-size: .78rem; }
.payment-note-lock-v835 { color: var(--green); }
.checkout-v77-confirm { min-height: 56px; font-size: 1rem; }
.btn.red, .btn.blue { --btn-bg: var(--gold-grad); --btn-fg: var(--gold-ink); --btn-bd: transparent; box-shadow: var(--shadow-gold); }
:root[data-theme="light"] .btn.red, :root[data-theme="light"] .btn.blue { --btn-fg: #fffaf0; }
.btn.is-processing { opacity: .7; pointer-events: none; }
.summary-card { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 10px; }
.checkout-line, .summary-line { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; color: var(--text-soft); }
.checkout-line strong, .summary-line strong { color: var(--text); white-space: nowrap; }
.summary-line.discount strong { color: var(--green); }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.summary-total strong { font-family: var(--font-display); font-size: 1.8rem; }
@media (max-width: 1000px) { .checkout-grid { grid-template-columns: minmax(0, 1fr); } .summary-card { position: static; order: -1; } }
@media (max-width: 640px) { .checkout-v77-trustbar, .checkout-delivery-choice-v68, .address-form-grid-v68.two, .address-form-grid-v68.three { grid-template-columns: minmax(0, 1fr); } .payment-transfer-steps-v835 { grid-template-columns: 1fr 1fr; } }

/* ---------- Pedido confirmado / pago ---------- */
.success-page { padding: clamp(40px, 7vw, 90px) 0; }
.success-card { display: grid; justify-items: center; gap: 14px; width: min(760px, calc(100% - (var(--gutter) * 2))); margin: 0 auto; padding: clamp(26px, 4vw, 44px); border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: radial-gradient(circle at 50% 0%, rgba(121, 82, 199, .3), transparent 55%), var(--surface); box-shadow: var(--shadow-violet); text-align: center; }
.success-card h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); }
.success-card > p { color: var(--text-soft); max-width: 56ch; }
.success-icon { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--gold-grad); color: var(--gold-ink); font-size: 2rem; font-weight: 800; box-shadow: var(--shadow-gold); }
.order-code { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: min(420px, 100%); padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; }
.order-code span { color: var(--muted); font-size: .8rem; }
.order-code strong { font-family: var(--font-display); font-size: 1.2rem; }
.success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.mp-pay-panel-v71 { display: grid; gap: 12px; width: 100%; padding: 18px; border: 1px solid var(--line-violet); border-radius: 16px; background: rgba(121, 82, 199, .06); text-align: left; }
.mp-pay-head-v71 { display: flex; justify-content: space-between; gap: 14px; }
.mp-pay-head-v71 span { color: var(--gold); font-size: .68rem; font-weight: 800; letter-spacing: .16em; }
.mp-pay-head-v71 h2 { font-family: var(--font-display); font-size: 1.3rem; margin: 4px 0; }
.mp-pay-head-v71 p { color: var(--muted); font-size: .84rem; margin: 0; }
.mp-pay-head-v71 > b { color: var(--violet-2); white-space: nowrap; }
.mp-security-note-v71 { color: var(--faint); font-size: .74rem; }
.bank-transfer-data-v834 { display: grid; gap: 8px; }
.bank-transfer-data-v834 > div { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px; }
.bank-transfer-data-v834 span { min-width: 110px; color: var(--muted); font-size: .76rem; }
.bank-transfer-data-v834 strong { flex: 1; font-variant-numeric: tabular-nums; word-break: break-all; }
.bank-transfer-data-v834 button, .proof-reference button { padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--gold-2); font-size: .74rem; font-weight: 700; }

/* ---------- Comprobante de transferencia ---------- */
.proof-page { padding: clamp(28px, 4vw, 48px) 0; }
.proof-shell { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.proof-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.proof-main, .proof-sidebar { display: grid; gap: 18px; }
.proof-card-head { display: flex; gap: 14px; margin-bottom: 16px; }
.proof-card-head p { color: var(--muted); font-size: .86rem; }
.proof-card-icon, .proof-drop-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; background: rgba(200, 165, 106, .1); color: var(--gold); }
.proof-card-icon svg, .proof-drop-icon svg { width: 24px; height: 24px; }
.proof-form { display: grid; gap: 14px; }
.proof-dropzone { position: relative; display: grid; justify-items: center; gap: 6px; padding: 34px 20px; border: 1.5px dashed var(--line-strong); border-radius: 16px; background: rgba(200, 165, 106, .03); text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.proof-dropzone:hover, .proof-dropzone.is-dragging, .proof-dropzone.dragover { border-color: var(--gold); background: rgba(200, 165, 106, .07); }
.proof-dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.proof-dropzone span, .proof-dropzone small { color: var(--muted); font-size: .84rem; }
.proof-dropzone b { color: var(--gold-2); }
.proof-file-selected { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.proof-file-selected > div { display: grid; flex: 1; }
.proof-file-selected small { color: var(--muted); }
.proof-file-type, .proof-history-doc { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--surface-3); color: var(--gold); font-size: .7rem; font-weight: 800; }
.proof-client-error { color: var(--red); font-size: .84rem; }
.proof-submit { justify-self: start; }
.proof-submit svg { width: 18px; height: 18px; }
.proof-security { margin: 0; color: var(--muted); font-size: .78rem; }
.proof-review-note { padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; background: var(--red-bg); font-size: .84rem; }
.proof-review-note p { margin: 4px 0 0; color: var(--text-soft); }
.proof-state-panel { display: flex; gap: 14px; padding: 16px; border-radius: 14px; background: var(--blue-bg); }
.proof-state-panel.closed { background: var(--green-bg); }
.proof-state-icon { font-size: 1.6rem; }
.proof-state-panel p { color: var(--muted); font-size: .84rem; }
.proof-history-count { display: grid; place-items: center; min-width: 32px; height: 32px; border-radius: 10px; background: var(--surface-3); font-weight: 800; }
.proof-history-list { display: grid; gap: 10px; }
.proof-history-row { display: flex; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 12px; flex-wrap: wrap; }
.proof-history-file { display: flex; gap: 12px; }
.proof-history-file > div { display: grid; }
.proof-history-file small, .proof-history-file p { color: var(--muted); font-size: .76rem; margin: 0; }
.proof-history-actions { display: flex; align-items: center; gap: 10px; }
.proof-view { color: var(--gold-2); font-size: .8rem; font-weight: 700; }
.proof-summary { display: grid; gap: 12px; }
.proof-order-number, .proof-amount, .proof-reference { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 12px; }
.proof-order-number span, .proof-amount span, .proof-reference > span { color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.proof-amount strong { font-family: var(--font-display); font-size: 1.7rem; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.proof-reference > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.proof-reference small { color: var(--muted); font-size: .74rem; }
.proof-steps ol { display: grid; gap: 10px; list-style: none; margin-top: 10px; }
.proof-steps li { display: flex; gap: 12px; opacity: .55; }
.proof-steps li.done, .proof-steps li.active { opacity: 1; }
.proof-steps li > span { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: .76rem; font-weight: 800; }
.proof-steps li.done > span { background: var(--gold-grad); color: var(--gold-ink); border-color: transparent; }
.proof-steps li.active > span { box-shadow: 0 0 0 4px rgba(200, 165, 106, .2); }
.proof-steps li > div { display: grid; }
.proof-steps small { color: var(--muted); font-size: .76rem; }
.proof-side-actions { display: flex; gap: 10px; }
.proof-side-actions a { flex: 1; padding: 11px; border: 1px solid var(--line); border-radius: 11px; text-align: center; font-size: .84rem; font-weight: 700; }
.proof-side-actions a:hover { border-color: var(--line-strong); color: var(--gold-2); }
@media (max-width: 960px) { .proof-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Direcciones ---------- */
.account-address-toolbar-v68 { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.address-grid-v68 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.address-card-top-v68 { display: flex; gap: 12px; align-items: flex-start; }
.address-icon-v68, .address-legacy-icon-v68, .address-empty-icon-v68 { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; background: rgba(200, 165, 106, .1); color: var(--gold); }
.address-title-row-v68 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.address-main-v68 { color: var(--text-soft); font-size: .86rem; margin: 10px 0; }
.address-actions-v68 { display: flex; gap: 8px; flex-wrap: wrap; }
.address-actions-v68 form { margin: 0; }
.address-legacy-v68, .address-empty-v68 { display: flex; gap: 12px; align-items: center; padding: 16px; border: 1px dashed var(--line-strong); border-radius: 14px; margin-bottom: 14px; }
.address-form-v68, .address-form-block-v68 { display: grid; gap: 12px; }
.address-form-block-head-v68 { display: grid; gap: 2px; margin-bottom: 4px; }
.address-form-block-head-v68 small { color: var(--muted); }
.address-form-actions-v68 { display: flex; gap: 10px; justify-content: flex-end; }
.address-form-error-v68 { color: var(--red); font-size: .84rem; }
.address-modal-panel-v68 { width: min(720px, 100%); }
.address-modal-head-v68 { margin-bottom: 14px; }

/* ---------- Autenticación de clientes ---------- */
.client-auth-page { padding: clamp(30px, 5vw, 70px) 0; }
.client-auth-wrap { width: min(100% - (var(--gutter) * 2), 1120px); margin-inline: auto; }
.client-auth-shell { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-strong); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-violet); background: var(--surface); }
.client-auth-showcase { position: relative; display: grid; align-content: center; gap: 18px; padding: clamp(28px, 4vw, 52px); background: radial-gradient(circle at 80% 10%, rgba(121, 82, 199, .45), transparent 55%), radial-gradient(circle at 0% 100%, rgba(200, 165, 106, .14), transparent 50%), linear-gradient(160deg, #1a0f2b, #0b0812); color: #f7f3fc; overflow: hidden; }
.client-auth-showcase::after { content: ""; position: absolute; right: -60px; bottom: -40px; width: 220px; aspect-ratio: 5 / 7; border-radius: 14px; border: 1.5px solid rgba(240, 205, 130, .6); transform: rotate(16deg); background: radial-gradient(circle, rgba(121, 82, 199, .3), transparent 70%); box-shadow: 0 0 40px rgba(200, 165, 106, .3); }
.client-auth-showcase h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.7rem); color: #f7f3fc; }
.client-auth-showcase p { color: #d9d0c3; }
.client-auth-kicker { display: inline-flex; align-items: center; gap: 10px; color: #c8a56a; font-size: .7rem; font-weight: 800; letter-spacing: .2em; }
.client-auth-kicker i { width: 24px; height: 1px; background: currentColor; }
.client-auth-benefits { position: relative; z-index: 1; display: grid; gap: 10px; }
.client-auth-benefit { display: flex; gap: 12px; padding: 12px; border: 1px solid rgba(200, 165, 106, .2); border-radius: 12px; background: rgba(10, 6, 16, .5); }
.client-auth-benefit > span { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: rgba(200, 165, 106, .12); color: #c8a56a; }
.client-auth-benefit > div { display: grid; }
.client-auth-benefit small { color: #aaa2b8; font-size: .76rem; }
.client-auth-trust { position: relative; z-index: 1; display: flex; gap: 10px; align-items: center; color: #aaa2b8; font-size: .78rem; }
.client-auth-trust-dot { width: 8px; height: 8px; border-radius: 50%; background: #5fd3a2; box-shadow: 0 0 0 4px rgba(69, 211, 154, .2); flex: 0 0 8px; }
.client-auth-form-side { display: grid; align-content: center; padding: clamp(26px, 4vw, 52px); }
.client-auth-form { display: grid; gap: 14px; }
.client-auth-form h2 { font-family: var(--font-display); font-size: 2rem; }
.client-auth-lead { color: var(--muted); margin: -6px 0 4px; }
.auth-field { display: grid; gap: 6px; }
.auth-field label { display: flex; justify-content: space-between; margin: 0; }
.auth-field label a { color: var(--gold-2); font-weight: 600; }
.auth-input-icon { position: absolute; left: 14px; color: var(--faint); pointer-events: none; font-size: .9rem; }
.auth-input-wrap input { padding-left: 40px !important; padding-right: 64px !important; }
.auth-input-wrap input:not([type="password"]):not([id*="assword"]) { padding-right: 14px !important; }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-submit { width: 100%; min-height: 52px; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-secondary { display: grid; place-items: center; min-height: 48px; border: 1px solid var(--line-strong); border-radius: 10px; font-weight: 750; }
.auth-secondary:hover { border-color: var(--gold); color: var(--gold-2); }
.auth-security-note { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: var(--green-bg); color: var(--text-soft); font-size: .78rem; }
.auth-security-note > span { color: var(--green); }
.auth-password-meter { height: 5px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.auth-password-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--red), var(--amber), var(--green)); transition: width .3s; }
.auth-password-hint { color: var(--muted); font-size: .76rem; }
.auth-dev-link { word-break: break-all; color: var(--gold-2); }
@media (max-width: 880px) { .client-auth-shell { grid-template-columns: minmax(0, 1fr); } .client-auth-showcase { display: none; } }
@media (max-width: 520px) { .auth-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Login administrativo y formularios genéricos ---------- */
.login-layout{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 60px); align-items: center; }
.login-layout h1 { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; margin-bottom: 16px; }
.login-layout p { color: var(--text-soft); }
.contact-form { display: grid; gap: 10px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-violet); }
.contact-form h2 { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 6px; }
.contact-form .btn { margin-top: 8px; }
@media (max-width: 860px) { .login-layout{ grid-template-columns: minmax(0, 1fr); } }

/* ---------- Legal ---------- */
.legal-card { width: min(100% - (var(--gutter) * 2), 860px); margin-inline: auto; padding: clamp(24px, 4vw, 44px); }
.legal-card h2 { font-family: var(--font-display); font-size: 1.45rem; margin: 26px 0 8px; }
.legal-card h2:first-child { margin-top: 0; }
.legal-card p, .legal-card li { color: var(--text-soft); }
.legal-card ul, .legal-card ol { padding-left: 20px; margin-bottom: 1em; }
.legal-card a { color: var(--gold-2); text-decoration: underline; }
.narrow { width: min(100% - (var(--gutter) * 2), 860px); margin-inline: auto; }

/* ---------- Testimonio desde la cuenta ---------- */
.nv-testimonial-form { display: grid; gap: 12px; }
.nv-rating { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.nv-rating input { position: absolute; opacity: 0; pointer-events: none; }
.nv-rating label { margin: 0; font-size: 1.6rem; line-height: 1; color: var(--surface-3); cursor: pointer; transition: color .15s; }
.nv-rating input:checked ~ label, .nv-rating label:hover, .nv-rating label:hover ~ label { color: var(--gold); }
.nv-rating input:focus-visible + label { outline: 2px solid var(--gold); border-radius: 4px; }
.client-v772-session-box > div { display: grid; gap: 2px; }

/* ---- 09-reviews.css ---- */
/* =====================================================================
   NOCTRA · Capa 09: reseñas de producto (resumen, filtros, lista, formulario).
   ===================================================================== */

.rv-grid { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.rv-summary { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 16px; }
.rv-heading { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 500; letter-spacing: -.02em; }
.rv-muted, .rv-empty { color: var(--muted); font-size: var(--fs-sm); }
.rv-empty { padding: 28px; border: 1px dashed var(--line); border-radius: var(--r-lg); text-align: center; }

.rv-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.rv-stars svg { width: 16px; height: 16px; fill: var(--surface-3); }
.rv-stars svg.is-on { fill: var(--gold); }

.rv-score { display: flex; align-items: center; gap: 16px; }
.rv-score > strong { font-family: var(--font-display); font-size: 3.4rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.rv-score > div { display: grid; gap: 4px; }
.rv-score small { color: var(--muted); }

.rv-dist { list-style: none; display: grid; gap: 4px; }
.rv-dist a { display: grid; grid-template-columns: 30px 1fr 28px; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 8px; color: var(--text-soft); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; transition: background-color .2s var(--ease); }
.rv-dist a:hover, .rv-dist a[aria-current="true"] { background: var(--surface-2); }
.rv-dist i { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.rv-dist b { display: block; height: 100%; border-radius: inherit; background: var(--gold); }
.rv-dist span:last-child { text-align: right; color: var(--muted); }

.rv-cta { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); }
.rv-form-wrap > summary { list-style: none; width: fit-content; }
.rv-form-wrap > summary::-webkit-details-marker { display: none; }
.rv-form-wrap[open] > summary { margin-bottom: 14px; }
.rv-form { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); }

/* Estrellas de entrada: radios en orden inverso para iluminar las anteriores con ~. */
.rv-rate { margin: 0; padding: 0; border: 0; }
.rv-rate legend { margin-bottom: 6px; color: var(--text-soft); font-size: .82rem; font-weight: 700; }
.rv-rate-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.rv-rate-stars input { position: absolute; opacity: 0; pointer-events: none; }
.rv-rate-stars label { margin: 0; cursor: pointer; }
.rv-rate-stars svg { width: 30px; height: 30px; fill: var(--surface-3); transition: fill .15s var(--ease), transform .15s var(--ease); }
.rv-rate-stars label:hover svg, .rv-rate-stars label:hover ~ label svg,
.rv-rate-stars input:checked ~ label svg { fill: var(--gold); }
.rv-rate-stars label:active svg { transform: scale(.9); }
.rv-rate-stars input:focus-visible + label { outline: 2px solid var(--violet-2); outline-offset: 2px; border-radius: 6px; }

.rv-main { display: grid; gap: 18px; min-width: 0; }
.rv-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.rv-filters select { width: auto; min-height: 40px; }
.rv-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--text-soft); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }

.rv-list { list-style: none; display: grid; gap: 12px; }
.rv-item { display: grid; gap: 10px; padding: 20px; border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); }
.rv-item header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rv-item h3 { font-size: var(--fs-base); font-weight: 700; }
.rv-item p { color: var(--text-soft); }
.rv-item footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--muted); font-size: var(--fs-xs); }
.rv-item footer > span { color: var(--text-soft); font-weight: 700; }
.rv-verified { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; background: var(--green-bg); color: var(--green); font-size: var(--fs-xs); font-weight: 700; }
.rv-verified .ico { width: 12px; height: 12px; }
.rv-report { margin-left: auto; }
.rv-report summary { cursor: pointer; color: var(--muted); }
.rv-report summary:hover { color: var(--text); }
.rv-report form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rv-report select { width: auto; min-height: 36px; font-size: var(--fs-sm); }
.rv-reply { padding: 14px 16px; border-left: 2px solid var(--gold); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--surface-2); }
.rv-reply strong { font-size: var(--fs-sm); color: var(--gold); }

@media (max-width: 860px) {
  .rv-grid { grid-template-columns: 1fr; }
  .rv-summary { position: static; }
}

/* ---- 10-storefront.css ---- */
/* =====================================================================
   NOCTRA · Capa 10: tienda pública.
   Ilustración sin foto (.pa), tarjeta de producto (.pc), portada (.hm),
   catálogo (.sh), búsqueda predictiva (.srch) y comparador (.cmp).
   ===================================================================== */

/* ---------- Ilustración editorial para productos sin fotografía ---------- */
.pa {
  --pa-a: color-mix(in srgb, var(--violet) 26%, var(--surface));
  --pa-b: var(--surface);
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 18%, var(--pa-a), var(--pa-b) 70%);
  isolation: isolate;
}
.pa[data-hue="1"] { --pa-a: color-mix(in srgb, var(--gold) 22%, var(--surface)); }
.pa[data-hue="2"] { --pa-a: color-mix(in srgb, var(--violet-2) 20%, var(--surface)); }
.pa[data-hue="3"] { --pa-a: color-mix(in srgb, var(--violet) 16%, var(--surface-2)); }
.pa[data-hue="4"] { --pa-a: color-mix(in srgb, var(--gold) 12%, var(--surface-2)); }
.pa-shape {
  position: relative;
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 63 / 88;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 6% / 4.3%;
  background: linear-gradient(160deg, color-mix(in srgb, var(--text) 6%, transparent), transparent 60%);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .6), inset 0 0 0 5px color-mix(in srgb, var(--bg) 40%, transparent);
  transition: transform .5s var(--ease-out);
}
.pa--pack .pa-shape { width: 40%; aspect-ratio: 5 / 8; border-radius: 4px; }
.pa--pack .pa-shape::before, .pa--pack .pa-shape::after { content: ""; position: absolute; left: 0; right: 0; height: 7%; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--gold) 45%, transparent) 0 2px, transparent 2px 6px); }
.pa--pack .pa-shape::before { top: 0; }
.pa--pack .pa-shape::after { bottom: 0; }
.pa--box .pa-shape { width: 58%; aspect-ratio: 1 / .78; border-radius: 6px; box-shadow: 10px -10px 0 -1px color-mix(in srgb, var(--gold) 14%, transparent), 0 20px 40px -24px rgba(0, 0, 0, .6); }
.pa--mat .pa-shape { width: 72%; aspect-ratio: 2 / 1.1; border-radius: 14px; }
.pa-emblem { width: 34%; height: auto; color: var(--gold); opacity: .85; }
.pa-emblem .em-outer { fill: none; stroke: currentColor; stroke-width: 3; stroke-opacity: .45; }
.pa-emblem .em-inner { fill: currentColor; }
.pa-emblem .em-ring { fill: var(--surface); }
.pa-emblem .em-cross { stroke: currentColor; stroke-width: 3; stroke-opacity: .35; }
.pc .pa-caption, .cmp-media .pa-caption { display: none; }
.pa-caption { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 2px; text-align: left; }
.pa-caption small { color: var(--gold); font-size: .62rem; font-weight: 700; letter-spacing: .14em; }
.pa-caption b { color: var(--text-soft); font-family: var(--font-display); font-size: .92rem; font-weight: 500; font-style: italic; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Rejilla de productos ---------- */
.nv-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: clamp(12px, 2vw, 20px); }

/* ---------- Tarjeta de producto ---------- */
.pc {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color .3s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease-out);
}
.pc:hover { border-color: var(--line); box-shadow: var(--shadow); transform: translateY(-2px); }
.pc-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  overflow: hidden;
  background: var(--bg-2);
  transform: perspective(900px) rotateX(var(--pc-rx, 0deg)) rotateY(var(--pc-ry, 0deg));
  transition: transform .4s var(--ease-out);
}
.pc-media::after {
  /* Brillo que sigue al puntero (variables desde storefront.js). */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(240px circle at var(--pc-mx, 50%) var(--pc-my, 0%), rgba(255, 255, 255, .1), transparent 60%);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.pc:hover .pc-media::after { opacity: 1; }
.pc-image { display: block; width: 100%; height: 100%; }
.pc-image img { width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: transform .6s var(--ease-out); }
.pc:hover .pc-image img, .pc:hover .pa-shape { transform: scale(1.035); }
.pc.is-sold-out .pc-image { opacity: .55; filter: saturate(.6); }

.pc-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.pc-badge { padding: 4px 9px; border-radius: 99px; background: var(--glass-strong); border: 1px solid var(--line-soft); color: var(--text); font-size: .68rem; font-weight: 700; letter-spacing: .03em; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pc-badge.is-gold { color: var(--gold); border-color: var(--line); }
.pc-badge.is-sale { background: var(--violet); border-color: transparent; color: #fff; }
.pc-badge.is-new { color: var(--violet-2); }
.pc-badge.is-out { color: var(--muted); }

.pc-tools { position: absolute; top: 10px; right: 10px; display: grid; gap: 6px; }
.pc-tools form { margin: 0; }
.pc-tool {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: var(--glass-strong);
  color: var(--text-soft);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: color .2s var(--ease), background-color .2s var(--ease), opacity .25s var(--ease), transform .25s var(--ease-out);
}
.pc-tool .ico { width: 17px; height: 17px; }
.pc-tool:hover { color: var(--text); }
.pc-tool:active { transform: scale(.92); }
.pc-tool.is-active, .pc-tool[aria-pressed="true"] { color: var(--gold); border-color: var(--line-strong); }
.nv-fav.is-active .ico { fill: currentColor; }
@media (hover: hover) {
  .pc-tools .pc-tool[data-compare-toggle]:not([aria-pressed="true"]) { opacity: 0; transform: translateY(-4px); }
  .pc:hover .pc-tools .pc-tool[data-compare-toggle], .pc-tool[data-compare-toggle]:focus-visible { opacity: 1; transform: none; }
}

.pc-quick {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--glass-strong);
  color: var(--text);
  font-size: .8rem;
  font-weight: 650;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .35s var(--ease-out);
}
.pc-quick .ico { width: 16px; height: 16px; }
.pc:hover .pc-quick, .pc-quick:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .pc-quick { display: none; } }

.pc-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.pc-kicker { margin: 0; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-name { font-family: var(--font-sans); font-size: .98rem; font-weight: 650; line-height: 1.3; letter-spacing: -.005em; }
.pc-name a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-name a::after { content: ""; position: absolute; inset: 0; z-index: 0; } /* toda la tarjeta enlaza a la ficha */
.pc-media > *:not(.pc-image), .pc-foot, .pc-branches { position: relative; z-index: 1; }
.pc-rarity { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--text-soft); font-size: .72rem; font-weight: 650; }
.pc-rarity i { width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--faint); }
.pc-rarity.r-uncommon i { background: var(--green); }
.pc-rarity.r-rare i { background: var(--blue); }
.pc-rarity.r-epic i { background: var(--violet-2); }
.pc-rarity.r-legend i { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.pc-attrs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 0; font-size: .74rem; }
.pc-attrs div { display: flex; gap: 4px; }
.pc-attrs dt { color: var(--faint); }
.pc-attrs dd { margin: 0; color: var(--text-soft); font-weight: 600; }
.pc-desc { margin: 2px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.pc-foot { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "price add" "stock add"; align-items: center; gap: 2px 10px; margin-top: auto; padding-top: 10px; }
.pc-price { grid-area: price; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.pc-price strong small { margin-left: 3px; color: var(--muted); font-size: .62em; font-weight: 600; letter-spacing: .04em; }
.pc-price strong { white-space: nowrap; font-size: 1.08rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pc-price del { color: var(--faint); font-size: .8rem; }
.pc-stock { grid-area: stock; width: fit-content; padding: 0; background: none !important; font-size: .74rem; }
.pc-add, .pc-notify { grid-area: add; margin: 0; }
.pc-add-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  transition: transform .2s var(--ease-out), background-color .2s var(--ease);
}
.pc-add-btn:hover { background: var(--gold); color: var(--gold-ink); }
.pc-add-btn:active { transform: scale(.92); }
.pc-add-btn .ico { width: 18px; height: 18px; }
.pc-add-btn.added { background: var(--green); color: #fff; }
.pc-notify { color: var(--muted); font-size: .78rem; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.pc-branches { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line-soft); margin-top: 6px; }
.pc-branches li { padding: 3px 7px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .04em; }
.pc-branches li.has { color: var(--text-soft); }
.pc-branches li.has b { color: var(--green); }

/* Variante destacada (portada) */
.pc--feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.pc--feature .pc-media { aspect-ratio: auto; min-height: 100%; border-radius: calc(var(--r-xl) - 1px) 0 0 calc(var(--r-xl) - 1px); }
.pc--feature { border-radius: var(--r-xl); }
.pc--feature .pc-body { gap: 10px; padding: clamp(20px, 3vw, 36px); justify-content: center; }
.pc--feature .pc-name { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.pc--feature .pc-desc { font-size: .95rem; }
.pc--feature .pc-price strong { font-size: 1.5rem; }
.pc--feature .pc-foot { margin-top: 12px; }

/* Vista lista del catálogo */
.nv-grid-list { grid-template-columns: 1fr; }
.nv-grid-list .pc { display: grid; grid-template-columns: 160px minmax(0, 1fr); }
.nv-grid-list .pc-media { aspect-ratio: 1; border-radius: calc(var(--r-lg) - 1px) 0 0 calc(var(--r-lg) - 1px); }
.nv-grid-list .pc-quick, .nv-grid-list .pc-badges .pc-badge + .pc-badge { display: none; }
.nv-grid-list .pc-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: dense; column-gap: 24px; align-content: center; }
.nv-grid-list .pc-body > *:not(.pc-foot) { grid-column: 1; }
.nv-grid-list .pc-foot { grid-column: 2; grid-row: 1 / span 5; align-self: center; margin: 0; padding: 0; }
@media (max-width: 640px) {
  .nv-grid-list .pc { grid-template-columns: 112px minmax(0, 1fr); }
  .nv-grid-list .pc-body { grid-template-columns: 1fr; }
  .nv-grid-list .pc-foot { grid-column: 1; grid-row: auto; margin-top: 6px; }
  .nv-grid-list .pc-desc { display: none; }
  .pc--feature { grid-template-columns: 1fr; }
  .pc--feature .pc-media { aspect-ratio: 1; border-radius: calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0; }
}

/* ---------- Portada ---------- */
.hm-eyebrow { display: inline-block; color: var(--gold); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hm-display {
  margin: 14px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  font-weight: 450;
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hm-display em, .hm-title em { color: var(--gold); font-style: italic; font-weight: 400; }
.hm-title { margin-top: 8px; font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 450; line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.hm-lead { max-width: 52ch; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6; }
.hm-copy { max-width: 46ch; margin-top: 14px; color: var(--muted); }
.hm-section { padding: clamp(56px, 8vw, 104px) 0 0; }
.hm-section:last-of-type { padding-bottom: clamp(56px, 8vw, 104px); }
.hm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: clamp(24px, 3vw, 36px); }

.hm-hero { position: relative; padding: clamp(40px, 7vw, 96px) 0 clamp(24px, 4vw, 48px); overflow: hidden; }
.hm-hero-glow { position: absolute; inset: -20% -10% auto auto; width: 70%; height: 120%; background: radial-gradient(closest-side, color-mix(in srgb, var(--violet) 24%, transparent), transparent); pointer-events: none; z-index: -1; }
.hm-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(28px, 5vw, 72px); }
.hm-hero-copy > * { animation: hm-rise .9s var(--ease-out) both; }
.hm-hero-copy > :nth-child(2) { animation-delay: .06s; }
.hm-hero-copy > :nth-child(3) { animation-delay: .12s; }
.hm-hero-copy > :nth-child(4) { animation-delay: .18s; }
.hm-hero-copy > :nth-child(5) { animation-delay: .24s; }
@keyframes hm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hm-facts { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.hm-facts div { display: flex; flex-direction: column-reverse; gap: 2px; }
.hm-facts dt { color: var(--muted); font-size: .76rem; }
.hm-facts dd { margin: 0; font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hm-hero-visual { position: relative; display: grid; place-items: center; min-height: 460px; transform: translate3d(0, var(--hm-shift, 0px), 0); animation: hm-fade 1.2s .15s var(--ease-out) both; }
@keyframes hm-fade { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.97); } to { opacity: 1; } }
.hm-hero-photo img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--shadow); }
.hm-orbit { position: absolute; inset: 50% auto auto 50%; width: min(520px, 100%); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.hm-orbit span { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 50%; animation: hm-spin 60s linear infinite; }
.hm-orbit span + span { inset: 14%; border-style: dashed; border-color: color-mix(in srgb, var(--violet-2) 22%, transparent); animation-duration: 90s; animation-direction: reverse; }
.hm-orbit span::before { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
@keyframes hm-spin { to { transform: rotate(360deg); } }
.hm-hero-visual .nova-artifact { animation: hm-float 7s ease-in-out infinite; }
@keyframes hm-float { 50% { translate: 0 -10px; } }

.hm-cats { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.hm-cat {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 10px;
  min-height: 220px;
  padding: 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .4s var(--ease-out), box-shadow .3s var(--ease);
}
.hm-cat.is-lead { grid-row: span 2; min-height: 100%; }
.hm-cat:nth-child(4) { grid-column: 2 / span 2; }
.hm-cat:hover { border-color: var(--line); transform: translateY(-3px); box-shadow: var(--shadow); }
.hm-cat-art { position: relative; display: grid; place-items: center; min-height: 110px; }
.hm-cat-art .pa-shape { width: 72px; }
.hm-cat.is-lead .hm-cat-art .pa-shape { width: 128px; }
.hm-cat-art.pa--pack .pa-shape { width: 60px; }
.hm-cat-art.pa--box .pa-shape { width: 96px; }
.hm-cat-art.pa--mat .pa-shape { width: 140px; }
.hm-cat:hover .pa-shape { transform: translateY(-4px) rotate(-3deg); }
.hm-cat-copy { display: grid; gap: 4px; }
.hm-cat-copy strong { font-size: 1.1rem; font-weight: 650; }
.hm-cat.is-lead .hm-cat-copy strong { font-family: var(--font-display); font-size: 1.8rem; font-weight: 450; letter-spacing: -.02em; }
.hm-cat-copy small { color: var(--muted); font-size: .86rem; }
.hm-cat-count { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: .8rem; font-weight: 650; }
.hm-cat-count .ico { transition: transform .3s var(--ease-out); }
.hm-cat:hover .hm-cat-count .ico { transform: translateX(4px); }

.hm-curated-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.hm-curated-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-curated-rest .pc-media { aspect-ratio: 4 / 3; }

.hm-rail-nav { display: flex; gap: 8px; }
.hm-rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; }
.hm-rail-track::-webkit-scrollbar { display: none; }
.hm-rail-track > * { scroll-snap-align: start; }
@media (min-width: 1100px) { .hm-rail-track { grid-auto-columns: calc((100% - 3 * 20px) / 4); } }

.hm-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.hm-index { list-style: none; display: grid; border-top: 1px solid var(--line-soft); }
.hm-index a { display: grid; grid-template-columns: 44px 1fr auto 20px; align-items: center; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--line-soft); transition: padding .35s var(--ease-out), color .2s var(--ease); }
.hm-index a:hover { padding-left: 14px; color: var(--gold); }
.hm-index-num { color: var(--faint); font-size: .8rem; font-variant-numeric: tabular-nums; }
.hm-index strong { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 450; }
.hm-index-meta { color: var(--muted); font-size: .84rem; }
.hm-index .ico { color: var(--gold); }

.hm-branches { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 4vw, 48px); border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: radial-gradient(70% 90% at 80% 50%, var(--glow-a), transparent 70%), var(--surface); }
.hm-branch-list { list-style: none; display: grid; gap: 4px; margin: 18px 0 22px; }
.hm-branch-list a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); transition: background-color .2s var(--ease); }
.hm-branch-list a:hover { background: var(--surface-2); }
.hm-branch-list .bx-item-dot { grid-row: span 2; }
.hm-branch-list small { color: var(--muted); font-size: .8rem; }
.hm-minimap { display: block; }
.hm-minimap svg { width: 100%; height: auto; }
.hm-minimap .mx-state { cursor: inherit; }
.hm-minimap:hover .mx-state.has-branch { fill: color-mix(in srgb, var(--violet) 60%, var(--surface-2)); }

.hm-community { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.hm-events { display: grid; gap: 10px; }
.hm-event { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 18px; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: var(--r-lg); background: var(--surface); transition: border-color .25s var(--ease); }
a.hm-event:hover { border-color: var(--line); }
.hm-event time { display: grid; justify-items: center; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; }
.hm-event time b { color: var(--text); font-family: var(--font-display); font-size: 1.7rem; font-weight: 450; letter-spacing: 0; line-height: 1; }
.hm-event span { display: grid; gap: 2px; }
.hm-event small { color: var(--muted); font-size: .82rem; }
.hm-event-seats { color: var(--gold); font-size: .8rem; font-weight: 650; }
.hm-event.is-empty { grid-template-columns: auto 1fr; }
.hm-event.is-empty > .ico { width: 28px; height: 28px; color: var(--gold); }
.hm-quote { margin: 0; padding: 18px; border-left: 2px solid var(--gold); background: var(--surface); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.hm-quote blockquote { margin: 0 0 8px; color: var(--text-soft); font-family: var(--font-display); font-style: italic; }
.hm-quote figcaption { color: var(--muted); font-size: .8rem; }

.hm-benefits { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid var(--line-soft); border-radius: var(--r-xl); overflow: hidden; background: var(--line-soft); }
.hm-benefits li { display: grid; gap: 6px; padding: 26px 22px; background: var(--surface); }
.hm-benefits .ico { width: 22px; height: 22px; color: var(--gold); margin-bottom: 4px; }
.hm-benefits strong { font-weight: 650; }
.hm-benefits small { color: var(--muted); font-size: .84rem; }

.hm-faq { display: grid; border-top: 1px solid var(--line-soft); }
.hm-faq details { border-bottom: 1px solid var(--line-soft); }
.hm-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 2px; font-weight: 650; cursor: pointer; list-style: none; }
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary .ico { flex: 0 0 auto; color: var(--gold); transition: transform .3s var(--ease-out); }
.hm-faq details[open] summary .ico { transform: rotate(45deg); }
.hm-faq p { margin: 0; padding: 0 2px 20px; color: var(--muted); max-width: 64ch; }

@media (max-width: 980px) {
  .hm-hero-grid, .hm-split, .hm-community, .hm-branches, .hm-curated-grid { grid-template-columns: 1fr; }
  .hm-hero-visual { min-height: 380px; order: -1; }
  .hm-cats { grid-template-columns: 1fr 1fr; }
  .hm-cat.is-lead { grid-row: auto; grid-column: span 2; }
  .hm-cat:nth-child(4) { grid-column: auto; }
  .hm-benefits { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .hm-cats { grid-template-columns: 1fr; }
  .hm-cat.is-lead { grid-column: auto; }
  .hm-cat { min-height: 0; grid-template-columns: 76px 1fr; grid-template-rows: auto auto; }
  .hm-cat-art { grid-row: span 2; min-height: 0; }
  .hm-cat.is-lead .hm-cat-art .pa-shape { width: 64px; }
  .hm-benefits { grid-template-columns: 1fr; }
  .hm-hero-visual { min-height: 320px; }
  .hm-event { grid-template-columns: 52px 1fr; }
  .hm-event-seats { grid-column: 2; }
  .hm-curated-rest { grid-template-columns: 1fr 1fr; }
}

/* ---------- Catálogo ---------- */
.sh-hero { padding: clamp(32px, 5vw, 64px) 0 clamp(20px, 3vw, 32px); }
.sh-hero .hm-display { font-size: clamp(2.2rem, 5vw, 3.8rem); margin-bottom: 10px; }
.sh-quicklinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.sh-quicklinks a { padding: 8px 14px; border: 1px solid var(--line-soft); border-radius: 99px; color: var(--text-soft); font-size: .84rem; font-weight: 600; transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease); }
.sh-quicklinks a:hover { border-color: var(--line-strong); color: var(--text); }
.sh-quicklinks a[aria-current="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }

.sh-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; padding-bottom: clamp(48px, 7vw, 96px); }
.sh-filters { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sh-filter-form { display: grid; gap: 4px; }
.sh-filter-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; }
.sh-filter-head strong { font-size: 1rem; font-weight: 700; }
.sh-group { border-top: 1px solid var(--line-soft); }
.sh-group > summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; font-size: .86rem; font-weight: 700; cursor: pointer; list-style: none; }
.sh-group > summary::-webkit-details-marker { display: none; }
.sh-group > summary .ico { width: 14px; height: 14px; color: var(--muted); transition: transform .25s var(--ease-out); }
.sh-group[open] > summary .ico { transform: rotate(45deg); }
.sh-group-body { display: grid; gap: 2px; padding-bottom: 14px; }
.sh-check { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 4px; border-radius: 8px; color: var(--text-soft); font-size: .86rem; font-weight: 500; cursor: pointer; }
.sh-check:hover { background: var(--surface-2); }
.sh-check span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-check small { color: var(--faint); font-variant-numeric: tabular-nums; }
.sh-price { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.sh-price input { min-height: 40px; padding: 8px 10px; font-size: .86rem; }
.sh-price span { color: var(--faint); }
.sh-filter-actions { position: sticky; bottom: 0; display: grid; gap: 8px; padding: 14px 0 4px; background: linear-gradient(transparent, var(--bg) 30%); }

.sh-main { min-width: 0; }
.sh-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.sh-count { color: var(--muted); font-size: .9rem; }
.sh-count strong { color: var(--text); }
.sh-tools { display: flex; align-items: center; gap: 10px; }
.sh-tools select { width: auto; min-height: 40px; font-size: .86rem; }
.sh-view { display: inline-flex; padding: 3px; border: 1px solid var(--line-soft); border-radius: 12px; }
.sh-view button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--muted); transition: background-color .2s var(--ease), color .2s var(--ease); }
.sh-view button[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }
.sh-view .ico { width: 17px; height: 17px; }
.sh-filter-open, .sh-filter-close { display: none; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 18px; }
.sh-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: var(--surface-2); color: var(--text-soft); font-size: .78rem; font-weight: 600; }
.sh-chips a:hover { background: var(--surface-3); color: var(--text); }
.sh-chips a .ico { width: 12px; height: 12px; }
.sh-note { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; color: var(--muted); font-size: .84rem; }
.sh-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; padding: clamp(40px, 6vw, 72px) 20px; border: 1px dashed var(--line); border-radius: var(--r-xl); text-align: center; }
.sh-empty .ico { width: 30px; height: 30px; color: var(--gold); }
.sh-empty p { color: var(--muted); max-width: 44ch; }
.sh-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 36px; }
.sh-pagination a, .sh-pagination span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 12px; color: var(--text-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.sh-pagination a:hover { background: var(--surface-2); }
.sh-pagination [aria-current="page"] { background: var(--text); color: var(--bg); }
.sh-pagination .is-gap { min-width: 20px; padding: 0; color: var(--faint); }

@media (max-width: 960px) {
  .sh-layout { grid-template-columns: 1fr; }
  .sh-filter-open, .sh-filter-close { display: inline-flex; }
  .sh-filters {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    max-height: 86vh;
    padding: 8px 20px 0;
    border-radius: 22px 22px 0 0;
    border-top: 1px solid var(--line-soft);
    background: var(--bg);
    box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, .6);
    transform: translateY(105%);
    transition: transform .45s var(--ease-out);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sh-filters::before { content: ""; display: block; width: 40px; height: 5px; margin: 4px auto 10px; border-radius: 99px; background: var(--surface-3); }
  .sh-filters.is-open { transform: none; }
  body.is-filter-sheet-open { overflow: hidden; }
  body.is-filter-sheet-open::after { content: ""; position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .45); }
}

/* ---------- Búsqueda predictiva ---------- */
.srch { position: fixed; inset: 0; z-index: 200; display: grid; align-items: start; justify-items: center; padding: clamp(12px, 10vh, 120px) 16px 16px; background: rgba(6, 4, 10, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.srch[hidden] { display: none; }
.srch-panel { width: min(640px, 100%); max-height: min(70vh, 640px); display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: 20px; background: var(--glass-strong); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); box-shadow: var(--shadow); overflow: hidden; animation: srch-in .28s var(--ease-out); }
@keyframes srch-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.srch-field { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--line-soft); }
.srch-field .ico { width: 20px; height: 20px; color: var(--muted); }
.srch-field input[type="search"] { flex: 1; min-height: 60px; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 1.1rem; }
.srch-field input[type="search"]:focus { border: 0; box-shadow: none; outline: none; }
.srch-field:focus-within { border-bottom-color: var(--line-violet); }
.srch-field kbd { padding: 3px 7px; border: 1px solid var(--line-soft); border-radius: 6px; color: var(--muted); font: 600 .7rem var(--font-sans); }
.srch-results { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.srch-results a { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 12px; }
.srch-results a[aria-selected="true"], .srch-results a:hover { background: var(--surface-3); }
.srch-thumb { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.srch-thumb img { width: 100%; height: 100%; object-fit: contain; }
.srch-thumb .pa-caption { display: none; }
.srch-results strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-results mark { background: none; color: var(--gold); }
.srch-results small { color: var(--muted); font-size: .78rem; }
.srch-price { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.srch-price small { display: block; font-weight: 600; }
.srch-foot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: .78rem; }
.srch-empty { padding: 28px 18px; color: var(--muted); text-align: center; }

/* ---------- Comparador ---------- */
.cmp-tray { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 120; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--glass-strong); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--shadow); translate: -50% 0; animation: cmp-in .35s var(--ease-out); max-width: calc(100vw - 32px); }
.cmp-tray[hidden] { display: none; }
@keyframes cmp-in { from { opacity: 0; translate: -50% 16px; } }
.cmp-tray ul { list-style: none; display: flex; gap: 6px; min-width: 0; overflow: hidden; }
.cmp-tray li { display: flex; align-items: center; gap: 4px; max-width: 160px; padding: 4px 4px 4px 10px; border-radius: 10px; background: var(--surface-2); font-size: .78rem; font-weight: 600; }
.cmp-tray li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-tray li button { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--muted); }
.cmp-tray li button:hover { color: var(--text); background: var(--surface-3); }
.cmp-table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r-xl); background: var(--surface); }
.cmp-table { min-width: 640px; }
.cmp-table th, .cmp-table td { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; font-size: .9rem; }
.cmp-table thead th { vertical-align: bottom; }
.cmp-table tbody th { width: 160px; color: var(--muted); font-weight: 600; font-size: .82rem; }
.cmp-table tr:last-child > * { border-bottom: 0; }
.cmp-head { display: grid; gap: 10px; }
.cmp-head .cmp-media { width: 100%; max-width: 180px; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--bg-2); }
.cmp-head .cmp-media img { width: 100%; height: 100%; object-fit: contain; }
.cmp-head a { font-weight: 650; }
.cmp-diff { background: color-mix(in srgb, var(--gold) 6%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .hm-orbit span, .hm-hero-visual .nova-artifact { animation: none; }
  .pc-media { transform: none !important; }
}

/* Controles de la carta 3D del hero: discretos, aparecen al acercarse. */
.hm-hero-visual .nova-artifact-reset { display: none; }
.hm-hero-visual .nova-artifact-flip {
  top: auto; bottom: 0; left: 50%; translate: -50% 0;
  min-height: 34px; padding: 0 14px; border-radius: 99px;
  border: 1px solid var(--line-soft); background: var(--glass-strong); color: var(--text-soft);
  font-size: .76rem; font-weight: 600; opacity: 0; transition: opacity .25s var(--ease);
}
.hm-hero-visual:hover .nova-artifact-flip, .hm-hero-visual .nova-artifact-flip:focus-visible { opacity: 1; }
.hm-hero-visual .nova-artifact-hint { bottom: 44px; color: var(--muted); font-size: .7rem; font-weight: 600; letter-spacing: .06em; opacity: .7; }
@media (max-width: 560px) {
  .hm-hero { padding-top: 16px; }
  .hm-hero-visual { min-height: 0; }
  .hm-hero-visual .nova-artifact { --card-w: clamp(132px, 36vw, 160px); min-height: 0; }
  .hm-orbit { width: 300px; }
  .hm-display { margin-top: 8px; }
}
@media (max-width: 560px) {
  .sh-toolbar { gap: 10px; }
  .sh-tools { width: 100%; }
  .sh-tools form { flex: 1; min-width: 0; }
  .sh-tools select { width: 100%; }
  .sh-grid:not(.nv-grid-list), .hm-curated-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sh-grid:not(.nv-grid-list) .pc-desc, .sh-grid:not(.nv-grid-list) .pc-attrs, .sh-grid:not(.nv-grid-list) .pc-branches { display: none; }
  .nv-product-grid:not(.nv-grid-list) .pc-body { padding: 10px 12px 12px; gap: 4px; }
  .nv-product-grid:not(.nv-grid-list) .pc-name { font-size: .86rem; }
  .nv-product-grid:not(.nv-grid-list) .pc-price strong { font-size: .92rem; }
  .nv-product-grid:not(.nv-grid-list) .pc-add-btn { width: 36px; height: 36px; }
  .pc-tool { width: 32px; height: 32px; }
}

/* ---- 11-product.css ---- */
/* Ficha editorial. Consume los tokens comunes; no altera catálogo ni administrador. */
.page-producto .nv-detail { padding-top: 22px; }
.page-producto .nv-detail-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); }
.page-producto .nv-gallery { position: static; min-width: 0; }
.page-producto .nv-detail-info { gap: 20px; min-width: 0; padding-top: 8px; }
.page-producto .nv-detail-info h1 { font-size: clamp(2.1rem, 3.6vw, 3.6rem); letter-spacing: -.035em; line-height: 1.08; overflow-wrap: anywhere; }
.page-producto .nv-detail-tags { gap: 6px; }
.page-producto .nv-detail-price { padding-block: 12px; border-block: 1px solid var(--line); }
.page-producto .nv-detail-price strong { color: var(--text); background: none; font-family: var(--font-sans); font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.045em; font-weight: 700; }
.page-producto .nv-detail-price .nv-stock { flex-basis: 100%; }
.page-producto .nv-gallery-stage { aspect-ratio: 4 / 5; background: radial-gradient(ellipse at 50% 35%, var(--surface-3), var(--bg-2) 75%); border-radius: var(--r-lg); }
.page-producto .nv-gallery-stage > img { padding: clamp(28px, 5vw, 56px); background: none; }
.page-producto .nv-gallery-thumbs { padding: 12px 2px 4px; }
.page-producto .nv-gallery-thumbs button { background: var(--surface); min-height: 64px; }
.page-producto .nv-gallery-thumbs img { object-fit: contain; padding: 5px; }
.page-producto .nv-buy-box { padding: 0; border: 0; background: none; gap: 18px; }
.page-producto .nv-buy-form { grid-template-columns: 140px minmax(0, 1fr); }
.page-producto .nv-buy-form > .nv-btn { min-height: 50px; padding-inline: 12px; white-space: normal; }
.page-producto .nv-trust-row { border-top: 1px solid var(--line); padding-top: 16px; }
.page-producto .nv-trust-row span { border: 0; background: none; padding: 0; }
.pdp-disclosure { border-top: 1px solid var(--line); padding-top: 18px; min-width: 0; }
.pdp-disclosure summary { cursor: pointer; font-size: .9rem; font-weight: 700; padding-bottom: 12px; min-height: 44px; }
.pdp-disclosure p { color: var(--muted); font-size: .87rem; line-height: 1.7; margin: 0 0 12px; overflow-wrap: anywhere; }
.page-producto .nv-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.page-producto .nv-spec-grid div { background: none; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
.page-producto .nv-spec-grid strong { overflow-wrap: anywhere; }
.pdp-rating { color: var(--muted); font-size: .85rem; width: fit-content; }
.pdp-rating:hover { color: var(--gold); }
.pdp-certification { border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; background: var(--surface); }
.pdp-certification h2 { font: 700 .9rem var(--font-sans); margin: 0 0 8px; }
.pdp-certification p { font-size: .8rem; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.pdp-photo-status { padding: 10px 16px; color: var(--muted); font-size: .8rem; }
dialog.nv-lightbox { border: 0; margin: auto; width: min(1100px, 96vw); height: min(880px, 94dvh); max-width: 96vw; max-height: 94dvh; padding: 42px 16px 16px; background: var(--surface); color: var(--text); border-radius: var(--r-lg); }
dialog.nv-lightbox:not([open]) { display: none; }
dialog.nv-lightbox::backdrop { background: var(--glass-strong); backdrop-filter: blur(8px); }
dialog.nv-lightbox img { max-height: calc(94dvh - 70px); max-width: 100%; }
.page-producto :is(button, summary, a):focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (max-width: 900px) {
  .page-producto .nv-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .page-producto .nv-gallery-stage { aspect-ratio: 1; }
}
@media (max-width: 520px) {
  .page-producto .nv-detail { padding-top: 10px; }
  .page-producto .nv-detail-info { gap: 16px; }
  .page-producto .nv-buy-form { grid-template-columns: minmax(0, 1fr); }
  .page-producto .nv-trust-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-producto .nv-trust-row span { font-size: .68rem; }
  .page-producto .nv-gallery-stage > img { padding: 32px; }
}

/* ---- 12-premium-commerce.css ---- */
/* Noctra · capa de experiencia premium de producto / cuenta / checkout.
   Usa únicamente tokens de los temas publicados en 01-base. */
.page-producto .nova-detail-breadcrumb{padding-top:20px}
.page-producto .nv-detail-grid{gap:clamp(28px,5vw,76px);align-items:start}
.page-producto .nv-gallery{border:1px solid var(--line);border-radius:28px;padding:clamp(12px,1.5vw,24px);background:var(--surface);box-shadow:var(--shadow-sm)}
.page-producto .nv-gallery-stage{border-radius:20px;border-color:var(--line-strong);background:radial-gradient(ellipse at 52% 42%,var(--surface-3),var(--bg-2) 80%)}
.page-producto .nv-media-switch button{font-weight:750;letter-spacing:.015em;transition:background .2s,color .2s}
.page-producto .nv-gallery-headline{padding:0 4px;min-height:28px}
.page-producto .nv-gallery-caption{font-size:.74rem;font-weight:850;letter-spacing:.12em}
.page-producto .nv-gallery-caption small{display:block;margin-top:5px;letter-spacing:0;font-size:.74rem;font-weight:500}
.page-producto .nv-detail-info{padding-top:clamp(8px,1.8vw,25px);gap:17px}
.page-producto .pdp-collection-strap{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:16px;color:var(--faint);letter-spacing:.18em;font-size:.66rem;font-weight:850}
.page-producto .nv-detail-info h1{font-weight:530;font-family:var(--font-display);line-height:1.12;font-size:clamp(2.15rem,4vw,3.8rem)}
.page-producto .nv-detail-price{border-block:1px solid var(--line-strong);padding:22px 0;align-items:center}
.page-producto .nv-detail-price strong{font-size:clamp(1.9rem,3vw,2.7rem)}
.page-producto .nv-detail-price del{font-size:.94rem}
.page-producto .nv-stock{font-size:.8rem}
.page-producto .nv-buy-box{border:1px solid var(--line-strong);border-radius:22px;padding:22px;background:linear-gradient(150deg,var(--surface-2),var(--surface));box-shadow:var(--shadow-sm)}
.page-producto .pdp-buy-caption{color:var(--muted);letter-spacing:.07em;font-size:.73rem;text-transform:uppercase;font-weight:750;margin:0}
.page-producto .nv-buy-form{grid-template-columns:130px minmax(0,1fr);gap:12px}
.page-producto .nv-buy-form>.nv-btn{box-shadow:var(--shadow-gold);border-radius:12px}
.page-producto .nv-buy-extra{border-top:1px solid var(--line-soft);padding-top:14px}
.page-producto .pdp-disclosure{border-color:var(--line-strong)}
.page-producto .pdp-disclosure summary{font-size:.9rem;letter-spacing:.01em}
.page-producto .pdp-certification{border-left:3px solid var(--gold);background:var(--surface-2)}
.page-producto .nv-gallery-thumbs button{border-radius:12px;border-color:var(--line);background:var(--surface-2)}
.page-producto .nv-gallery-thumbs button.active{box-shadow:var(--ring);border-color:var(--gold)}
/* Cuenta privada: jerarquía, paneles editables, acciones legibles. */
.page-mi-cuenta .account-premium-hero,.page-mis-resenas .account-premium-hero{padding-block:clamp(42px,6vw,80px);background:radial-gradient(ellipse at 75% 35%,var(--surface-3),transparent 65%),var(--bg-2);border-bottom:1px solid var(--line-strong)}
.page-mi-cuenta .account-premium-hero h1,.page-mis-resenas .account-premium-hero h1{font:500 clamp(2.4rem,5vw,4.5rem)/1.08 var(--font-display);letter-spacing:-.035em}
.page-mi-cuenta .account-premium-hero h1 em,.page-mis-resenas .account-premium-hero h1 em{font-style:normal;color:var(--gold)}
.page-mi-cuenta .client-v77-account-badge{border-color:var(--line-strong);background:var(--glass-strong);border-radius:20px;min-width:min(100%,290px)}
.page-mi-cuenta .client-v77-kpis{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.page-mi-cuenta .client-v77-kpis article{min-width:0;border-radius:18px;padding:20px;border-color:var(--line);background:linear-gradient(140deg,var(--surface-2),var(--surface));transition:transform .2s,border-color .2s}
.page-mi-cuenta .client-v77-kpis article:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.page-mi-cuenta .client-v77-kpis strong{font-family:var(--font-sans);font-size:clamp(1.25rem,2vw,1.85rem);font-weight:750;letter-spacing:-.045em;overflow-wrap:anywhere}
.page-mi-cuenta .client-v77-kpis small{line-height:1.5}
.page-mi-cuenta .client-v77-dashboard-grid{align-items:start}
.page-mi-cuenta .client-v77-panel,.page-mi-cuenta .client-v77-latest-order,.page-mi-cuenta .client-v77-recent{border-color:var(--line);border-radius:22px;box-shadow:var(--shadow-sm);background:var(--surface);padding:clamp(20px,2.5vw,32px)}
.page-mi-cuenta .client-v77-section-head{border-bottom:1px solid var(--line-soft);padding-bottom:18px;margin-bottom:20px}
.page-mi-cuenta .client-v77-section-head h2{font-size:clamp(1.3rem,2vw,1.7rem)}
.page-mi-cuenta .client-v77-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.page-mi-cuenta .client-v77-menu-grid a{border-radius:15px;border-color:var(--line);padding:19px;background:var(--bg-2);transition:transform .2s,border-color .2s,background .2s}
.page-mi-cuenta .client-v77-menu-grid a:hover{transform:translateY(-3px);border-color:var(--gold);background:var(--surface-2)}
.page-mi-cuenta .client-v77-menu-grid span{background:var(--surface-3);color:var(--gold);width:42px;height:42px}
.page-mi-cuenta .client-v77-menu-grid a b{font-size:.89rem}
.page-mi-cuenta .client-v77-form input:not([type=checkbox]),.page-mi-cuenta .client-v77-form textarea{min-height:48px;border-radius:12px}
.page-mi-cuenta .client-v77-form input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.page-mi-cuenta .account-security-panel{border-color:var(--line-strong);background:linear-gradient(125deg,var(--surface-2),var(--surface))}
.page-mi-cuenta .client-v772-session-box{border-top-color:var(--line-strong)}
/* Opiniones reales consultadas por usuario logueado. */
.page-mis-resenas .account-reviews-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.page-mis-resenas .account-review-card{padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm);min-width:0}
.page-mis-resenas .account-review-top{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-bottom:18px}
.page-mis-resenas .account-review-status{border:1px solid var(--line-strong);border-radius:30px;padding:5px 10px;font-size:.71rem;color:var(--gold);font-weight:800}
.page-mis-resenas .account-review-card h2{font:550 1.5rem var(--font-display);margin-bottom:12px}
.page-mis-resenas .account-review-card p{line-height:1.8;color:var(--text-soft);margin-bottom:14px}
.page-mis-resenas .account-review-card blockquote{margin:16px 0;padding:14px 18px;border-left:3px solid var(--gold);background:var(--bg-2)}
.page-mis-resenas .account-review-card small,.page-mis-resenas .account-review-reason{color:var(--muted)}
/* Checkout premium y transparencia de montos. */
.page-checkout .nv-page-hero{border-bottom:1px solid var(--line-strong)}
.page-checkout .nv-checkout{padding-block:clamp(24px,4vw,64px)}
.page-checkout .checkout-grid{gap:clamp(18px,3vw,40px);align-items:start}
.page-checkout .checkout-form,.page-checkout .summary-card{border-radius:24px;border-color:var(--line-strong);box-shadow:var(--shadow-sm);background:linear-gradient(175deg,var(--surface-2),var(--surface) 25%)}
.page-checkout .checkout-form{padding:clamp(18px,3.5vw,44px)}
.page-checkout .summary-card{padding:clamp(20px,2.5vw,32px)}
.page-checkout .checkout-section-title{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px}
.page-checkout .checkout-section-title h2{font-family:var(--font-display);font-weight:550}
.page-checkout .checkout-form :is(input,select,textarea):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.page-checkout .checkout-form :is(input,select,textarea){min-width:0}
.page-checkout .checkout-payment-transparency,.page-checkout .checkout-total-caveat{font-size:.77rem;color:var(--muted);line-height:1.7;margin:14px 0}
.page-checkout .checkout-payment-transparency strong{color:var(--text)}
.page-checkout .checkout-summary-prelude{display:grid;gap:5px;letter-spacing:.14em;font-size:.68rem;font-weight:800;color:var(--gold);margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.page-checkout .checkout-summary-prelude small{font-size:.7rem;letter-spacing:normal;font-weight:500;color:var(--muted)}
.page-checkout .summary-total{padding:22px 0;border-top:1px solid var(--line-strong);margin-top:14px}
.page-checkout .summary-total strong{font-size:clamp(1.45rem,2.3vw,2rem);letter-spacing:-.04em}
.page-checkout .checkout-v77-confirm{min-height:54px;border-radius:13px;font-weight:800;letter-spacing:.02em;box-shadow:var(--shadow-gold)}
.page-checkout .payment-method-card-v835.selected{border-color:var(--gold);background:var(--surface-3)}
.page-checkout .payment-method-card-v835.unavailable{opacity:.45;cursor:not-allowed}
@media(max-width:1050px){.page-mi-cuenta .client-v77-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
 .page-producto .nv-gallery{padding:12px;border-radius:20px}
 .page-producto .nv-detail-info{padding-top:0}
 .page-producto .pdp-collection-strap{font-size:.56rem;letter-spacing:.1em}
 .page-mi-cuenta .client-v77-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
 .page-mi-cuenta .client-v77-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .page-mis-resenas .account-reviews-grid{grid-template-columns:minmax(0,1fr)}
 .page-checkout .checkout-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:480px){
 .page-producto .nv-buy-box{padding:16px}
 .page-producto .nv-buy-form{grid-template-columns:minmax(0,1fr)}
 .page-producto .nv-detail-info h1{font-size:2.2rem}
 .page-mi-cuenta .client-v77-kpis article{padding:14px}
 .page-mi-cuenta .client-v77-menu-grid{grid-template-columns:minmax(0,1fr)}
 .page-mi-cuenta .client-v77-form-grid{grid-template-columns:minmax(0,1fr)}
 .page-checkout .checkout-form{padding:18px}
}
@media(prefers-reduced-motion:reduce){.page-mi-cuenta .client-v77-kpis article,.page-mi-cuenta .client-v77-menu-grid a{transition:none}}
.page-checkout .checkout-payments-notice{margin-bottom:22px;padding:15px 18px;border:1px solid var(--line-strong);border-left:3px solid var(--gold);border-radius:12px;background:var(--bg-2);color:var(--text-soft);font-size:.82rem;line-height:1.7}
.page-checkout .checkout-payments-notice strong{display:block;color:var(--gold)}

/* Catálogo y recomendaciones: cada pieza recibe una vitrina coherente. */
.nv-product-grid{gap:clamp(14px,2.2vw,24px)}
.pc{border-radius:21px;border-color:var(--line);overflow:hidden;box-shadow:var(--shadow-sm);isolation:isolate}
.pc:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.pc-media{border-radius:20px 20px 0 0;background:radial-gradient(ellipse at 50% 32%,var(--surface-3) 0,var(--bg-2) 74%)}
.pc-image img{padding:9%;filter:drop-shadow(0 12px 12px color-mix(in srgb,var(--bg) 55%,transparent))}
.pc-body{padding:17px 18px 18px;gap:9px}
.pc-kicker{letter-spacing:.14em;font-size:.66rem}
.pc-name{font-size:1.01rem;line-height:1.36;letter-spacing:-.015em}
.pc-foot{margin-top:auto;padding-top:15px;border-top:1px solid var(--line-soft)}
.pc-price strong{font-size:1.18rem;letter-spacing:-.025em}
.pc-badge{box-shadow:var(--shadow-sm)}
.pc-tool{border-color:var(--line-strong)}
.pc:focus-within{outline:2px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.pc,.pc-media,.pc-image img{transition:none}}