/* ════════════════════════════════════════════════════════════════════════
   TERCER PLANO ESTUDIO 3D — Hoja de estilos (rediseño "Taller de Precisión")
   Identidad: dibujo técnico (planos de proyección) + manufactura aditiva (capas).
   Firma: líneas de capa, rejilla blueprint, cubo isométrico de alambre,
          datos técnicos en monoespaciada.
   Compatibilidad: conserva TODAS las clases/IDs/estados que usa script.js.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Tokens de diseño ──────────────────────────────────────────────────── */
:root {
  /* Tinta / superficies (tema claro) */
  --ink:        #221E1A;
  --ink-2:      #544B43;
  --ink-3:      #8A7E72;
  --paper:      #F4EEE6;
  --paper-2:    #EBE3D6;
  --groove:     #E4DAC9;
  --surface:    #FFFFFF;
  --surface-2:  #FBF8F2;
  --line:       #DDD2C0;
  --line-strong:#C9BCA6;

  /* Acentos de marca */
  --amber:      #E07B14;   /* filamento fundido — CTA / energía */
  --amber-2:    #C2640A;   /* hover / pressed */
  --amber-soft: #FBEBD4;
  --amber-glow: #FFB14E;
  --pine:       #15634F;   /* PLA eco — enlaces / confianza */
  --pine-2:     #0F4B3B;
  --pine-soft:  #E2EFE9;
  --brick:      #A8412A;   /* rebajas / peligro */
  --brick-soft: #F6E2DC;
  --blue:       #2C6A8C;   /* informativo */

  /* Semánticos (compatibilidad de nombres heredados) */
  --primary-color:   var(--amber);
  --secondary-color: var(--pine);
  --accent-color:    var(--amber-glow);
  --success-color:   var(--pine);
  --warning-color:   var(--amber);
  --danger-color:    var(--brick);
  --light-color:     var(--surface-2);
  --dark-color:      var(--ink);
  --gray-color:      var(--ink-3);
  --gray-light:      var(--line);
  --gray-dark:       var(--ink-2);

  /* Forma / sombra / movimiento */
  --radius:     14px;
  --radius-sm:  10px;
  --radius-xs:  7px;
  --radius-pill:999px;
  --border-radius: var(--radius-sm);
  --shadow-sm:  0 1px 2px rgba(34,30,26,.05), 0 2px 6px rgba(34,30,26,.05);
  --shadow:     0 8px 22px -10px rgba(34,30,26,.22), 0 2px 6px rgba(34,30,26,.07);
  --shadow-lg:  0 28px 56px -18px rgba(34,30,26,.30);
  --box-shadow: var(--shadow);
  --ring:       0 0 0 3px rgba(224,123,20,.32);
  --transition: 180ms cubic-bezier(.2,.7,.3,1);

  /* Tipografía */
  --font-display: 'Archivo', 'Segoe UI', sans-serif;
  --font-body:    'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Space Mono', 'SFMono-Regular', ui-monospace, monospace;
  --font-primary:   var(--font-body);
  --font-secondary: var(--font-display);

  /* Layout */
  --maxw: 1240px;

  /* Textura de capas (firma de marca) */
  --layer-lines: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 5px,
      rgba(34,30,26,.045) 5px,
      rgba(34,30,26,.045) 6px);
  --blueprint: linear-gradient(rgba(21,99,79,.05) 1px, transparent 1px),
               linear-gradient(90deg, rgba(21,99,79,.05) 1px, transparent 1px);
}

[data-theme="dark"] {
  --ink:        #F1E9DD;
  --ink-2:      #C3B7A8;
  --ink-3:      #8D8273;
  --paper:      #14110D;
  --paper-2:    #1B1711;
  --groove:     #221C15;
  --surface:    #201A13;
  --surface-2:  #271F16;
  --line:       #362C22;
  --line-strong:#483C2D;

  --amber:      #F59A38;
  --amber-2:    #E0821E;
  --amber-soft: #2E2212;
  --amber-glow: #FFC074;
  --pine:       #41B994;
  --pine-2:     #2F9C7A;
  --pine-soft:  #14302A;
  --brick:      #D8654E;
  --brick-soft: #2E1B16;
  --blue:       #5AA0C4;

  --light-color: var(--surface-2);

  --shadow-sm:  0 1px 2px rgba(0,0,0,.5);
  --shadow:     0 10px 26px -12px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.5);
  --shadow-lg:  0 30px 60px -18px rgba(0,0,0,.8);
  --ring:       0 0 0 3px rgba(245,154,56,.40);

  --layer-lines: repeating-linear-gradient(
      to bottom, transparent 0, transparent 5px,
      rgba(255,255,255,.05) 5px, rgba(255,255,255,.05) 6px);
  --blueprint: linear-gradient(rgba(65,185,148,.07) 1px, transparent 1px),
               linear-gradient(90deg, rgba(65,185,148,.07) 1px, transparent 1px);
}

/* ── Reset / base ──────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(140% 120% at 100% -10%, rgba(224,123,20,.06), transparent 55%),
    radial-gradient(120% 120% at -10% 0%, rgba(21,99,79,.05), transparent 50%);
  background-attachment: fixed;
  line-height: 1.6;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--transition), color var(--transition);
}

img { max-width: 100%; display: block; }
a { color: var(--pine); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--amber-2); }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }
input, select, textarea, button { font: inherit; color: inherit; }

::selection { background: var(--amber); color: #fff; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scrollbar discreta */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 2px solid var(--paper); }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Tipografía ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.018em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }
p  { color: var(--ink-2); }
strong, b { color: var(--ink); font-weight: 700; }
small { font-size: .82rem; }

/* ── Utilidades ────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.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;
}
.hidden { display: none !important; }
.visible { display: block; }
.mt-3 { margin-top: 1rem; }
.full-width { width: 100%; }
.text-muted { color: var(--ink-3); }

/* Eyebrow técnico reutilizable (firma mono) */
.section-header,
.products-header,
.page-content > h1 { position: relative; }

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .72rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 700; font-size: .92rem; letter-spacing: .01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--radius-sm);
  cursor: pointer; user-select: none;
  transition: transform var(--transition), box-shadow var(--transition),
              background-color var(--transition), border-color var(--transition),
              color var(--transition);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary {
  --btn-bg: var(--amber); --btn-fg: #fff; --btn-bd: var(--amber);
  position: relative; box-shadow: 0 6px 16px -6px rgba(224,123,20,.6);
}
.btn-primary::after {  /* línea de "primera capa" */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 4px; height: 2px;
  background: rgba(255,255,255,.55); border-radius: 2px; opacity: .8;
}
.btn-primary:hover { --btn-bg: var(--amber-2); --btn-bd: var(--amber-2); box-shadow: 0 12px 24px -8px rgba(224,123,20,.7); }
[data-theme="dark"] .btn-primary { --btn-fg: #1a1206; }

.btn-outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn-outline:hover { --btn-bd: var(--amber); --btn-fg: var(--amber-2); }

.btn-success { --btn-bg: var(--pine); --btn-fg: #fff; --btn-bd: var(--pine); }
.btn-success:hover { --btn-bg: var(--pine-2); --btn-bd: var(--pine-2); }

.btn-block { display: flex; width: 100%; }
.btn-sm { padding: .48rem .85rem; font-size: .82rem; border-radius: var(--radius-xs); }

/* Estado de carga en botones (.btn-text / .btn-loader) */
.btn .btn-loader { display: none; }
.btn.loading .btn-text { visibility: hidden; }
.btn.loading .btn-loader {
  display: inline-flex; position: absolute;
  width: 1.05em; height: 1.05em; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: tp-spin .7s linear infinite;
}
.btn.loading { position: relative; }

/* ── Insignias / badges ────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700; line-height: 1;
  color: #fff; background: var(--amber);
  border-radius: 999px;
}
.status-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .6rem; border-radius: 999px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line);
}
.discount-badge, .offer-badge {
  background: var(--brick); color: #fff; border-color: var(--brick);
}

/* ════════════════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════════════════ */
.main-header {
  position: sticky; top: 0; z-index: 900;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--line);
}
.main-header::after {  /* hilo ámbar tipo "primera capa" bajo el header */
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber) 18%, var(--pine) 82%, transparent);
  opacity: .65;
}
.header-content {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 24px; padding: 14px 0;
}

/* Logo */
.logo a { display: inline-flex; align-items: center; gap: 12px; }
.logo-icon {
  display: grid; place-items: center; width: 46px; height: 46px;
  color: #fff; font-size: 1.25rem;
  background: linear-gradient(145deg, var(--ink) 0%, #3a322b 100%);
  border-radius: 12px; position: relative;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.08), var(--shadow-sm);
}
.logo-icon::after {  /* esquina técnica / marca de registro */
  content: ""; position: absolute; right: 5px; bottom: 5px;
  width: 8px; height: 8px; border-right: 2px solid var(--amber); border-bottom: 2px solid var(--amber);
}
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-title {
  font-family: var(--font-display); font-weight: 900; font-size: 1.18rem;
  letter-spacing: -.01em; color: var(--ink); display: inline-flex; align-items: baseline; gap: 6px;
}
.logo-3d-tag {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  color: var(--amber-2); background: var(--amber-soft);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  padding: 1px 5px; border-radius: 5px; letter-spacing: .02em; transform: translateY(-1px);
}
.logo-caption {
  font-family: var(--font-mono); font-size: .66rem; color: var(--ink-3);
  letter-spacing: .02em; margin-top: 4px; text-transform: uppercase;
}
/* Logo SVG de impresora (versión en producción) */
.logo-printer-rock { display: grid; place-items: center; width: 100%; height: 100%; }
.logo-printer-svg { width: 30px; height: 30px; display: block; }
.logo-nozzle-glow { transform-origin: center; animation: tp-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .logo-nozzle-glow { animation: none; } }

/* Barra de búsqueda */
.search-bar { position: relative; display: flex; align-items: center; max-width: 560px; width: 100%; }
.search-bar input {
  width: 100%; padding: .72rem 3rem .72rem 1rem;
  background: var(--surface-2); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius-pill);
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}
.search-bar input::placeholder { color: var(--ink-3); }
.search-bar input:focus { outline: none; border-color: var(--amber); box-shadow: var(--ring); background: var(--surface); }
.search-bar button {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center;
  color: #fff; background: var(--ink); border: none; border-radius: 50%;
  transition: background-color var(--transition);
}
.search-bar button:hover { background: var(--amber); }

.search-suggestions {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  max-height: 360px; overflow-y: auto; display: none; padding: 6px;
}
.search-suggestions:not(:empty) { display: block; }
.search-suggestion-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  border-radius: var(--radius-xs); cursor: pointer; transition: background-color var(--transition);
}
.search-suggestion-item:hover { background: var(--paper-2); }
.search-suggestion-item img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

/* Acciones de cabecera */
.header-actions { display: flex; align-items: center; gap: 6px; }
.header-icon {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: .5rem .7rem; border-radius: var(--radius-sm); color: var(--ink-2);
  font-family: var(--font-display); font-weight: 600; font-size: .86rem;
  transition: background-color var(--transition), color var(--transition);
}
.header-icon i { font-size: 1.05rem; }
.header-icon:hover { background: var(--paper-2); color: var(--ink); }
.header-icon .badge {
  position: absolute; top: 0; right: 0;
  min-width: 18px; height: 18px; padding: 0 5px;
  line-height: 18px; text-align: center;
  border: 2px solid var(--surface); box-shadow: var(--shadow-sm);
}
.user-menu { position: relative; }

/* Dropdown de usuario */
.dropdown-menu { position: relative; }
.dropdown-menu .dropdown-content {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 80;
}
.user-menu:hover .dropdown-content,
.dropdown-menu.open .dropdown-content,
.user-menu.open .dropdown-content { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-content a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  color: var(--ink-2); border-radius: var(--radius-xs); font-size: .9rem; font-weight: 600;
  transition: background-color var(--transition), color var(--transition);
}
.dropdown-content a:hover { background: var(--paper-2); color: var(--amber-2); }
.dropdown-content a i { width: 18px; color: var(--ink-3); }

/* Toggle de tema + botón menú móvil */
.theme-toggle, .mobile-menu-btn {
  display: grid; place-items: center; width: 42px; height: 42px;
  background: var(--surface-2); color: var(--ink-2);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-size: 1.05rem; transition: var(--transition);
  overflow: hidden;
}
.theme-toggle:hover, .mobile-menu-btn:hover { border-color: var(--amber); color: var(--amber-2); transform: translateY(-2px); box-shadow: 0 0 0 3px var(--amber-soft); }
.theme-toggle i { transition: transform 420ms cubic-bezier(.34,1.56,.64,1); }
.theme-toggle:active i { transform: rotate(360deg); }
@keyframes theme-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.theme-toggle.spinning i { animation: theme-spin 420ms cubic-bezier(.34,1.56,.64,1); }
.mobile-menu-btn { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   NAVEGACIÓN PRINCIPAL
   ════════════════════════════════════════════════════════════════════════ */
.main-nav {
  background: var(--ink);
  position: relative; z-index: 850;
}
[data-theme="dark"] .main-nav { background: #0e0b07; }
.nav-list { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav-list > li > a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 16px; color: #e9e0d3;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem; letter-spacing: .01em;
  border-bottom: 2.5px solid transparent; transition: color var(--transition), border-color var(--transition);
}
.nav-list > li > a:hover { color: #fff; border-bottom-color: var(--amber); }
.nav-list > li > a i.fa-chevron-down { font-size: .7rem; opacity: .7; }

/* Dropdown / mega-menú del catálogo */
.dropdown { position: relative; }
.dropdown > a { cursor: pointer; }
.mega-menu, .dropdown .dropdown-content {
  position: absolute; left: 0; top: 100%; min-width: 280px;
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--amber);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: 18px; opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 80;
}
.dropdown:hover .mega-menu,
.dropdown.open .mega-menu,
.dropdown.open .dropdown-content { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-menu-columns { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 20px; }
.mega-menu-col h4 {
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-3); margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.mega-menu-col a, #catalog-categories-list a {
  display: block; padding: 7px 10px; color: var(--ink-2); border-radius: var(--radius-xs);
  font-weight: 600; font-size: .9rem; transition: var(--transition);
}
.mega-menu-col a:hover, #catalog-categories-list a:hover { background: var(--paper-2); color: var(--amber-2); padding-left: 14px; }

/* ════════════════════════════════════════════════════════════════════════
   MENÚ MÓVIL
   ════════════════════════════════════════════════════════════════════════ */
.mobile-nav-overlay {
  position: fixed; inset: 0; background: rgba(20,17,13,.55);
  backdrop-filter: blur(2px); z-index: 1190; opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.mobile-nav-overlay.open, .mobile-nav-overlay.show { opacity: 1; visibility: visible; }
.mobile-nav {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 360px); z-index: 1200;
  background: var(--surface); border-right: 1px solid var(--line);
  box-shadow: var(--shadow-lg); transform: translateX(-105%);
  transition: transform .32s cubic-bezier(.2,.7,.3,1);
  display: flex; flex-direction: column; overflow-y: auto;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.mobile-nav-header h3 { font-family: var(--font-mono); font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.close-mobile-nav { background: none; border: none; font-size: 1.8rem; line-height: 1; color: var(--ink-2); }
.mobile-nav-content { padding: 10px 0; }
.mobile-nav-list { display: flex; flex-direction: column; }
.mobile-nav-item > a, .mobile-nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 20px; color: var(--ink); font-family: var(--font-display); font-weight: 600;
  border-bottom: 1px solid var(--paper-2);
}
.mobile-nav-item a:hover { background: var(--paper-2); color: var(--amber-2); }
.mobile-nav-item.has-submenu > a i { transition: transform var(--transition); }
.mobile-submenu { max-height: 0; overflow: hidden; background: var(--paper); transition: max-height .3s ease; }
.mobile-submenu.open { max-height: 600px; }
.mobile-submenu-item { display: block; padding: 11px 20px 11px 38px; color: var(--ink-2); font-size: .9rem; border-bottom: 1px solid var(--paper-2); }
.mobile-submenu-item:hover { color: var(--amber-2); }

/* ════════════════════════════════════════════════════════════════════════
   HERO  (firma: blueprint + capas + cubo isométrico de alambre)
   ════════════════════════════════════════════════════════════════════════ */
.hero-banner {
  position: relative; overflow: hidden;
  padding: 64px 0 0;
  background:
    var(--blueprint),
    radial-gradient(120% 90% at 85% 0%, rgba(224,123,20,.10), transparent 60%),
    radial-gradient(90% 90% at 0% 100%, rgba(21,99,79,.08), transparent 55%);
  background-size: 32px 32px, 32px 32px, cover, cover;
  border-bottom: 1px solid var(--line);
}
.hero-banner::before {  /* veladura de capas */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--layer-lines); opacity: .5; mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}

.hero-banner .container {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.9fr);
  grid-template-areas: "content visual" "content featured";
  gap: 28px 44px; align-items: start; padding-bottom: 56px;
}

/* Formas isométricas flotantes (decorativas, sutiles) */
.hero-shapes { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.shape {
  position: absolute; border: 1.5px solid color-mix(in srgb, var(--pine) 35%, transparent);
  border-radius: 8px; opacity: .5; transform: rotate(45deg);
  animation: tp-float 14s ease-in-out infinite;
}
.shape::after { content: ""; position: absolute; inset: -1.5px; border: 1.5px solid color-mix(in srgb, var(--amber) 30%, transparent); border-radius: 8px; transform: translate(7px,7px); }
.shape-1 { width: 70px; height: 70px; top: 12%; left: 8%; animation-delay: 0s; }
.shape-2 { width: 46px; height: 46px; top: 64%; left: 14%; animation-delay: -2s; border-radius: 50%; }
.shape-2::after { border-radius: 50%; }
.shape-3 { width: 90px; height: 90px; top: 22%; right: 6%; animation-delay: -4s; }
.shape-4 { width: 38px; height: 38px; top: 78%; right: 18%; animation-delay: -6s; }
.shape-5 { width: 54px; height: 54px; top: 8%; left: 52%; animation-delay: -1s; }
.shape-6 { width: 30px; height: 30px; top: 48%; right: 40%; animation-delay: -3s; border-radius: 50%; }
.shape-6::after { border-radius: 50%; }
.shape-7 { width: 64px; height: 64px; bottom: 8%; left: 38%; animation-delay: -5s; }
.shape-8 { width: 40px; height: 40px; top: 40%; left: 26%; animation-delay: -7s; }

.particles { position: absolute; inset: 0; }
.particles span {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--amber); opacity: .35; animation: tp-rise 12s linear infinite;
}
.particles span:nth-child(1){ left: 10%; animation-delay: 0s; }
.particles span:nth-child(2){ left: 22%; animation-delay: -2s; background: var(--pine); }
.particles span:nth-child(3){ left: 34%; animation-delay: -5s; }
.particles span:nth-child(4){ left: 46%; animation-delay: -1s; background: var(--pine); }
.particles span:nth-child(5){ left: 58%; animation-delay: -7s; }
.particles span:nth-child(6){ left: 67%; animation-delay: -3s; }
.particles span:nth-child(7){ left: 76%; animation-delay: -6s; background: var(--pine); }
.particles span:nth-child(8){ left: 84%; animation-delay: -4s; }
.particles span:nth-child(9){ left: 92%; animation-delay: -8s; }
.particles span:nth-child(10){ left: 50%; animation-delay: -9s; background: var(--pine); }

/* Contenido del hero */
.hero-content { grid-area: content; align-self: center; max-width: 600px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; margin-bottom: 22px;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 700; letter-spacing: .02em;
  color: var(--pine-2); background: var(--pine-soft);
  border: 1px solid color-mix(in srgb, var(--pine) 30%, transparent); border-radius: 999px;
}
.hero-badge i { color: var(--amber); }

.hero-title { margin-bottom: 20px; display: flex; flex-direction: column; }
.hero-title-line {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: .92;
  letter-spacing: -.03em; color: var(--ink);
}
.hero-title-accent {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: .92; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 2px var(--amber);
  position: relative; width: fit-content;
}
.hero-title-accent::after {  /* subrayado de "extrusión" */
  content: ""; position: absolute; left: 2px; bottom: -8px; width: 100%; height: 6px;
  background: var(--layer-lines), var(--amber); background-blend-mode: multiply;
  border-radius: 3px;
}
[data-theme="dark"] .hero-title-accent { -webkit-text-stroke-color: var(--amber); }

.hero-subtitle { font-size: 1.1rem; color: var(--ink-2); max-width: 46ch; margin-bottom: 30px; }

.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-hero-primary, .btn-hero-secondary {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.7rem; font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  border-radius: var(--radius-sm); transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), color var(--transition), border-color var(--transition);
  border: 1.5px solid transparent;
}
.btn-hero-primary { background: var(--amber); color: #fff; box-shadow: 0 10px 24px -8px rgba(224,123,20,.65); position: relative; }
.btn-hero-primary::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 5px; height: 2px; background: rgba(255,255,255,.55); border-radius: 2px; }
.btn-hero-primary:hover { background: var(--amber-2); transform: translateY(-3px); box-shadow: 0 16px 30px -10px rgba(224,123,20,.7); }
[data-theme="dark"] .btn-hero-primary { color: #1a1206; }
.btn-hero-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-hero-secondary:hover { border-color: var(--amber); color: var(--amber-2); transform: translateY(-3px); box-shadow: var(--shadow); }

/* Cubo isométrico de alambre (proyección — "tercer plano") */
.hero-visual { grid-area: visual; display: grid; place-items: center; min-height: 240px; }
.hero-cube-container { perspective: 1000px; width: 180px; height: 180px; }
.cube {
  position: relative; width: 180px; height: 180px;
  transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(-32deg);
  animation: tp-cube 22s linear infinite;
}
.cube-face {
  position: absolute; width: 180px; height: 180px; display: grid; place-items: center;
  font-size: 2.6rem; color: var(--amber);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1.6px solid color-mix(in srgb, var(--pine) 55%, transparent);
  box-shadow: inset 0 0 30px color-mix(in srgb, var(--pine) 12%, transparent);
}
.cube-face i { opacity: .85; filter: drop-shadow(0 2px 6px rgba(224,123,20,.25)); }
.cube-face.front  { transform: translateZ(90px); }
.cube-face.back   { transform: rotateY(180deg) translateZ(90px); }
.cube-face.right  { transform: rotateY(90deg) translateZ(90px); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(90px); }
.cube-face.top    { transform: rotateX(90deg) translateZ(90px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(90px); }

/* Productos destacados ("lo más visto") */
.hero-featured {
  grid-area: featured; align-self: start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; min-width: 0;
}
.hero-featured-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2);
  padding-bottom: 10px; border-bottom: 1px dashed var(--line);
}
.hero-featured-header i { color: var(--amber); }
#hero-featured-list { display: grid; gap: 8px; }
.hf-skeleton { height: 56px; border-radius: var(--radius-xs); background: linear-gradient(100deg, var(--paper-2) 30%, var(--surface-2) 50%, var(--paper-2) 70%); background-size: 200% 100%; animation: tp-shimmer 1.3s linear infinite; }
.hf-card {
  display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-xs);
  cursor: pointer; transition: background-color var(--transition), transform var(--transition);
}
.hf-card:hover { background: var(--paper-2); transform: translateX(3px); }
.hf-img, .hf-no-img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; }
.hf-no-img { display: grid; place-items: center; color: var(--ink-3); background: var(--paper-2); }
.hf-info { flex: 1; min-width: 0; }
.hf-name { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-price { font-family: var(--font-mono); font-size: .82rem; font-weight: 700; color: var(--pine-2); }
.hf-arrow { color: var(--ink-3); transition: transform var(--transition), color var(--transition); }
.hf-card:hover .hf-arrow { color: var(--amber); transform: translateX(3px); }

/* Barra de estadísticas (lectura técnica) */
.hero-stats-bar {
  position: relative; z-index: 2;
  background: var(--ink); color: #F2EADF;
  border-top: 2px solid var(--amber);
}
[data-theme="dark"] .hero-stats-bar { background: #0e0b07; }
.hero-stats-bar::before { content: ""; position: absolute; inset: 0; background: var(--layer-lines); opacity: .4; pointer-events: none; }
.hero-stats { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 26px 0; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 120px; text-align: center; }
.stat-number {
  font-family: var(--font-mono); font-weight: 700; font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--amber-glow); line-height: 1;
}
.stat-number.stat-text { color: var(--amber-glow); }
.stat-plus { font-family: var(--font-mono); font-weight: 700; font-size: 1.4rem; color: var(--amber); }
.stat p { margin-top: 8px; font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: #C8BBAC; }
[data-theme="dark"] .stat p { color: var(--ink-2); }
.stat-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,.12); }

/* ════════════════════════════════════════════════════════════════════════
   SECCIÓN DE PRODUCTOS
   ════════════════════════════════════════════════════════════════════════ */
.products-section { padding: 56px 0; }

.user-discount-banner {
  display: flex; align-items: center; gap: 16px; margin-bottom: 28px;
  padding: 16px 20px; border-radius: var(--radius);
  background: linear-gradient(100deg, var(--pine-soft), color-mix(in srgb, var(--amber-soft) 70%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--pine) 25%, transparent);
}
.user-discount-banner i { font-size: 1.6rem; color: var(--amber); }
.user-discount-banner strong { display: block; color: var(--ink); font-family: var(--font-display); }
.user-discount-banner small { color: var(--ink-2); }

.products-layout { display: grid; grid-template-columns: 268px minmax(0,1fr); gap: 28px; align-items: start; }

/* Filtros */
.filters-sidebar { position: sticky; top: 92px; }
.filters-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px; }
.filters-card > h3 {
  display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 2px solid var(--ink);
}
.filters-card > h3 i { color: var(--amber); }
.filter-section { padding: 16px 0; border-bottom: 1px dashed var(--line); }
.filter-section:last-of-type { border-bottom: none; }
.filter-section h4 {
  font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); margin-bottom: 12px;
}
.filter-options { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.filter-option, .filter-group label {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-xs);
  cursor: pointer; color: var(--ink-2); font-size: .92rem; transition: background-color var(--transition), color var(--transition);
}
.filter-option:hover { background: var(--paper-2); color: var(--ink); }
.filter-option input[type="checkbox"], .filter-option input[type="radio"], .checkbox-label input { accent-color: var(--amber); width: 16px; height: 16px; }

/* Slider de precio */
.price-range-slider { padding-top: 6px; }
.slider, input[type="range"].slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, var(--amber), var(--pine)); outline: none; cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--amber); box-shadow: var(--shadow-sm); cursor: pointer;
}
.slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 3px solid var(--amber); cursor: pointer; }
.price-range-values { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--font-mono); font-size: .82rem; color: var(--ink-2); }

.filter-select, select.filter-select {
  width: 100%; padding: .6rem .8rem; background: var(--surface-2); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius-xs); cursor: pointer; transition: border-color var(--transition);
}
.filter-select:focus { outline: none; border-color: var(--amber); box-shadow: var(--ring); }
.filter-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* Encabezado de productos */
.products-main { min-width: 0; }
.products-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.products-header h2 { position: relative; padding-bottom: 12px; }
.products-header h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 5px;
  background: var(--layer-lines), var(--amber); background-blend-mode: multiply; border-radius: 3px;
}
#products-info, .products-info, .table-info { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-3); }

/* Grilla */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }

/* Skeletons */
.products-skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.skeleton-card { height: 340px; border-radius: var(--radius); background: linear-gradient(100deg, var(--paper-2) 30%, var(--surface-2) 50%, var(--paper-2) 70%); background-size: 200% 100%; animation: tp-shimmer 1.3s linear infinite; }

/* ── Tarjeta de producto (ficha técnica) ──────────────────────────────── */
.product-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.product-card::before {  /* línea de capa superior que aparece al hover */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--amber), var(--pine)); transform: scaleX(0);
  transform-origin: left; transition: transform var(--transition); z-index: 3;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.product-card:hover::before { transform: scaleX(1); }

.product-image { position: relative; aspect-ratio: 1/1; background: var(--paper-2); overflow: hidden; }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.product-card:hover .product-image img { transform: scale(1.06); }

.product-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: .3rem .6rem; font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; border-radius: 6px; color: #fff;
}
.product-badge.featured { background: var(--ink); }
.product-badge.discount { background: var(--brick); top: 12px; left: auto; right: 12px; }
.product-badge.out-of-stock { background: var(--ink-3); top: auto; bottom: 12px; }

.product-actions {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transform: translateX(12px); transition: opacity var(--transition), transform var(--transition);
}
.product-card:hover .product-actions, .product-card:focus-within .product-actions { opacity: 1; transform: translateX(0); }
.product-action-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--line);
  border-radius: 50%; box-shadow: var(--shadow); transition: var(--transition);
}
.product-action-btn:hover { background: var(--amber); color: #fff; border-color: var(--amber); transform: scale(1.08); }
.product-action-btn.cart-btn:hover { background: var(--pine); border-color: var(--pine); }
.product-action-btn.wishlist-btn.active { background: var(--brick); color: #fff; border-color: var(--brick); }
.product-action-btn:disabled { opacity: .45; cursor: not-allowed; }

.product-content { padding: 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.product-category { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--pine-2); }
.product-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.25; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-rating { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-3); }
.product-rating-stars { color: var(--amber); letter-spacing: 1px; font-size: .82rem; }
.product-price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 6px; }
.current-price, .product-price .current-price { font-family: var(--font-mono); font-weight: 700; font-size: 1.18rem; color: var(--ink); }
.original-price, .product-price .original-price { font-family: var(--font-mono); font-size: .85rem; color: var(--ink-3); text-decoration: line-through; }
.product-content small { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-3); }

/* Estados (cargando / vacío / error) */
.products-state {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 56px 20px; color: var(--ink-3); grid-column: 1 / -1;
}
.products-state.hidden { display: none; }
.products-state i { font-size: 2.4rem; color: var(--line-strong); }
.products-state p { color: var(--ink-2); }
.loading-spinner i, .loading-spinner { font-size: 2rem; color: var(--amber); }
.loading-state { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--ink-2); }

/* Paginación */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 40px; flex-wrap: wrap; }
.pagination-btn {
  min-width: 42px; height: 42px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--ink-2); border: 1.5px solid var(--line);
  border-radius: var(--radius-xs); font-family: var(--font-mono); font-weight: 700; font-size: .88rem;
  cursor: pointer; transition: var(--transition);
}
.pagination-btn:hover:not(.disabled) { border-color: var(--amber); color: var(--amber-2); transform: translateY(-2px); }
.pagination-btn.active { background: var(--amber); color: #fff; border-color: var(--amber); }
.pagination-btn.disabled { opacity: .4; cursor: not-allowed; }
.pagination-dots { padding: 0 6px; color: var(--ink-3); }

/* ════════════════════════════════════════════════════════════════════════
   ¿POR QUÉ ELEGIRNOS?  (características)
   ════════════════════════════════════════════════════════════════════════ */
.features-section { padding: 64px 0; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; }
.features-section::before { content: ""; position: absolute; inset: 0; background: var(--layer-lines); opacity: .35; pointer-events: none; }
.section-header { text-align: center; max-width: 640px; margin: 0 auto 44px; position: relative; }
.section-header h2 { display: inline-block; position: relative; padding-bottom: 14px; }
.section-header h2::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 70px; height: 5px; background: linear-gradient(90deg, var(--amber), var(--pine)); border-radius: 3px; }
.section-subtitle { color: var(--ink-2); font-size: 1.05rem; margin-top: 14px; }

.features-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.feature {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; text-align: center; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.feature:hover, .feature:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.feature-icon { width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center; font-size: 1.6rem; color: #fff; border-radius: 18px; box-shadow: var(--shadow); }
.feature-icon--green  { background: linear-gradient(145deg, var(--pine), var(--pine-2)); }
.feature-icon--purple { background: linear-gradient(145deg, #6b4b8a, #4a3163); }
.feature-icon--blue   { background: linear-gradient(145deg, var(--blue), #1e4f6b); }
.feature-icon--orange { background: linear-gradient(145deg, var(--amber), var(--amber-2)); }
.feature h3 { margin-bottom: 10px; }
.feature p { color: var(--ink-2); font-size: .95rem; }

/* ════════════════════════════════════════════════════════════════════════
   SECCIONES DE PÁGINA (Mayoristas · Ofertas · Blog · Soporte)
   ════════════════════════════════════════════════════════════════════════ */
.page-section { padding: 56px 0; }
.page-content { max-width: 980px; margin: 0 auto; }
.page-content > h1 { position: relative; padding-bottom: 16px; margin-bottom: 10px; }
.page-content > h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 80px; height: 6px; background: var(--layer-lines), var(--amber); background-blend-mode: multiply; border-radius: 3px; }
.page-content > p { color: var(--ink-2); font-size: 1.08rem; margin-bottom: 8px; }
.page-content h3 { margin-top: 8px; margin-bottom: 6px; }

/* Mayoristas */
.wholesale-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 20px; margin-top: 28px; }
.benefit-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; text-align: center; transition: transform var(--transition), box-shadow var(--transition); }
.benefit-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.benefit-item i { font-size: 1.9rem; color: var(--amber); margin-bottom: 12px; }
.benefit-item h3 { margin-bottom: 8px; }
.benefit-item p { color: var(--ink-2); font-size: .92rem; }

/* Ofertas */
.offers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 20px; margin-top: 28px; }
.offer-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); }
.offer-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--amber), var(--pine)); }
.offer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.offer-card h3 { margin: 6px 0 10px; }
.offer-card p { color: var(--ink-2); font-size: .95rem; }
.offer-badge { display: inline-flex; align-items: center; padding: .35rem .7rem; font-family: var(--font-mono); font-weight: 700; font-size: .8rem; color: #fff; background: var(--brick); border-radius: 999px; }

/* Blog */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 24px; margin-top: 24px; }
.blog-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.blog-card img { width: 100%; height: 180px; object-fit: cover; background: var(--paper-2); }
.blog-card > *:not(img) { padding-left: 20px; padding-right: 20px; }
.blog-card h3 { margin-top: 16px; }
.blog-card .blog-date, .blog-date { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-3); margin-top: 10px; }
.blog-card .blog-content, .blog-card p { color: var(--ink-2); font-size: .92rem; margin-top: 8px; }
.blog-read-more { display: inline-flex; align-items: center; gap: 6px; margin: 14px 0 18px; font-family: var(--font-display); font-weight: 700; color: var(--amber-2); }
.blog-read-more:hover { gap: 10px; }
.blog-actions, .blog-action-box { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: border-color var(--transition); }
.faq-item[open] { border-color: var(--amber); }
.faq-item summary { padding: 16px 20px; font-family: var(--font-display); font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.4rem; color: var(--amber); transition: transform var(--transition); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 20px 18px; color: var(--ink-2); }

/* Editor / detalle de blog */
#blog-editor .page-content, #blog-post-detail .page-content { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
#detail-image { border: 1px solid var(--line); }

/* ════════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════════ */
.main-footer { background: var(--ink); color: #CABBAC; padding: 56px 0 24px; position: relative; }
[data-theme="dark"] .main-footer { background: #0e0b07; }
.main-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--amber) 30%, var(--pine) 70%, transparent); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.footer-col h3 { color: #fff; font-size: 1.05rem; margin-bottom: 16px; letter-spacing: -.01em; }
.footer-col h4 { color: #fff; font-family: var(--font-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; opacity: .85; }
.footer-col p { color: #b3a695; font-size: .92rem; line-height: 1.7; }
.footer-col ul li { padding: 6px 0; color: #b3a695; font-size: .92rem; }
.footer-col ul li a { color: #b3a695; }
.footer-col ul li a:hover { color: var(--amber-glow); }
.social-links { display: flex; gap: 10px; margin-top: 18px; }
.social-links a { width: 42px; height: 42px; display: grid; place-items: center; color: #e9e0d3; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; font-size: 1.1rem; transition: var(--transition); }
.social-links a:hover { background: var(--amber); color: #fff; border-color: var(--amber); transform: translateY(-3px); }
.contact-info li { display: flex; align-items: flex-start; gap: 10px; }
.contact-info li i { color: var(--amber); margin-top: 5px; }
address { font-style: normal; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); flex-wrap: wrap; }
.footer-bottom p { font-family: var(--font-mono); font-size: .78rem; color: #8d8273; }
.footer-links { display: flex; gap: 16px; }
.footer-links a { color: #8d8273; font-size: .82rem; }
.footer-links a:hover { color: var(--amber-glow); }

/* ════════════════════════════════════════════════════════════════════════
   CARRITO LATERAL
   ════════════════════════════════════════════════════════════════════════ */
.cart-sidebar {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(92vw, 420px); z-index: 1300;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
  transform: translateX(105%); transition: transform .34s cubic-bezier(.2,.7,.3,1);
  display: flex; flex-direction: column;
}
.cart-sidebar.open, .cart-sidebar.active { transform: translateX(0); }
.cart-sidebar-overlay { position: fixed; inset: 0; background: rgba(20,17,13,.5); backdrop-filter: blur(2px); z-index: 1290; opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); }
.cart-sidebar-overlay.show, .cart-sidebar-overlay.open { opacity: 1; visibility: visible; }
.cart-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.cart-sidebar-header h2 { font-size: 1.25rem; display: flex; align-items: center; gap: 10px; }
.cart-sidebar-header h2::before { content: ""; width: 4px; height: 22px; background: var(--amber); border-radius: 2px; }
.close-cart-sidebar { background: none; border: none; font-size: 1.9rem; line-height: 1; color: var(--ink-2); }
.cart-sidebar-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.cart-items { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }

.cart-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.cart-item-image { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-xs); border: 1px solid var(--line); background: var(--paper-2); }
.cart-item-details { min-width: 0; }
.cart-item-title { font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--ink); line-height: 1.3; }
.cart-item-price { font-family: var(--font-mono); font-weight: 700; font-size: .9rem; color: var(--pine-2); margin-top: 4px; }
.cart-item-quantity, .quantity-selector { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.quantity-btn { width: 28px; height: 28px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); border: 1.5px solid var(--line); border-radius: 6px; font-weight: 700; transition: var(--transition); }
.quantity-btn:hover { border-color: var(--amber); color: var(--amber-2); }
.quantity-input, .cart-qty-value { width: 42px; text-align: center; font-family: var(--font-mono); font-weight: 700; background: var(--surface); border: 1.5px solid var(--line); border-radius: 6px; padding: 4px; color: var(--ink); }
.cart-item-remove { background: none; border: none; color: var(--ink-3); font-size: 1.05rem; padding: 6px; transition: color var(--transition); }
.cart-item-remove:hover { color: var(--brick); }

.cart-summary { border-top: 1px solid var(--line); padding: 18px 20px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.cart-subtotal, .cart-discount, .cart-shipping, .cart-total { display: flex; align-items: center; justify-content: space-between; font-size: .92rem; color: var(--ink-2); }
.cart-subtotal span:last-child, .cart-discount span:last-child, .cart-shipping span:last-child { font-family: var(--font-mono); color: var(--ink); }
.cart-discount span:last-child { color: var(--brick); }
.cart-total { margin-top: 6px; padding-top: 12px; border-top: 2px solid var(--ink); font-size: 1.15rem; }
.cart-total span { font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.cart-total span:last-child { font-family: var(--font-mono); }
.cart-actions { margin-top: 14px; }

.empty-cart, .empty-wishlist, .no-orders, .no-categories, .no-categories-message { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px; text-align: center; color: var(--ink-3); }
.empty-cart i, .empty-wishlist i, .no-orders i { font-size: 2.6rem; color: var(--line-strong); }

/* ════════════════════════════════════════════════════════════════════════
   MODALES  (.modal = caja centrada · #modal-overlay = fondo)
   ════════════════════════════════════════════════════════════════════════ */
.modal-overlay, #modal-overlay { position: fixed; inset: 0; background: rgba(20,17,13,.62); backdrop-filter: blur(3px); z-index: 1400; display: none; }
.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.94);
  width: min(92vw, 500px); max-height: 92vh; z-index: 1401; display: none; opacity: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.3,1);
  overflow: hidden;
}
.modal.active, .modal.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.modal-content { display: flex; flex-direction: column; max-height: 92vh; overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal-header h2 { font-size: 1.25rem; display: flex; align-items: center; gap: 10px; }
.modal-header h2::before { content: ""; width: 4px; height: 20px; background: var(--amber); border-radius: 2px; }
.close-modal { background: transparent; border: none; font-size: 1.9rem; line-height: 1; color: var(--ink-3); transition: color var(--transition); }
.close-modal:hover { color: var(--brick); }
.modal-body { padding: 22px; overflow-y: auto; }
.modal-footer { padding: 16px 22px; border-top: 1px solid var(--line); }
.modal-actions, .checkout-actions, .form-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.form-actions { justify-content: flex-end; margin-top: 8px; }

/* Anchos por modal */
#quickview-modal, #checkout-modal, #orders-modal, #order-detail-modal, #order-status-modal,
#wishlist-modal, #profile-modal, #upload-product-modal, #order-confirmation-modal,
#client-edit-modal, #error-validation-modal { width: min(94vw, 720px); }
#quickview-modal, #orders-modal, #order-detail-modal { width: min(94vw, 860px); }
.modal textarea { resize: vertical; min-height: 96px; }

/* ════════════════════════════════════════════════════════════════════════
   FORMULARIOS
   ════════════════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group label, .checkout-modal-content label { display: block; margin-bottom: 7px; font-family: var(--font-display); font-weight: 600; font-size: .85rem; color: var(--ink); }
.form-group input, .form-group select, .form-group textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="search"], select, textarea, .form-control {
  width: 100%; padding: .72rem .9rem; background: var(--surface-2); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius-xs);
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
input:focus, select:focus, textarea:focus, .form-control:focus { outline: none; border-color: var(--amber); box-shadow: var(--ring); background: var(--surface); }
.form-group input::placeholder, textarea::placeholder { color: var(--ink-3); }

.password-group { position: relative; }
.password-wrapper { position: relative; }
.password-wrapper input { padding-right: 3rem; }
.toggle-password { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--ink-3); font-size: 1rem; padding: 4px; }
.toggle-password:hover { color: var(--amber-2); }

.checkbox-group { margin: 14px 0; }
.checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .9rem; color: var(--ink-2); }
.checkbox-label input { width: 17px; height: 17px; accent-color: var(--amber); }
.terms-link { color: var(--pine); font-weight: 600; }

.form-footer { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); text-align: center; }
.form-footer p { font-size: .9rem; color: var(--ink-2); margin: 6px 0; }
.form-footer a, .form-footer #show-register { color: var(--amber-2); font-weight: 700; }
.form-help, .form-text { font-size: .8rem; color: var(--ink-3); margin-top: 5px; }
.error-message { color: var(--brick); font-size: .82rem; margin-top: 5px; display: block; }
.inline-field { }

/* ════════════════════════════════════════════════════════════════════════
   7 · INTERIOR DE MODALES (quickview, checkout, wishlist, perfil, órdenes…)
   ──────────────────────────────────────────────────────────────────────── */

/* ── Vista rápida de producto ───────────────────────────────────────────── */
.quickview-modal,
.quickview-content { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; }
.quickview-image {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); aspect-ratio: 1/1; overflow: hidden;
}
.quickview-image::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: var(--layer-lines); background-size: 100% 7px;
}
.quickview-image img { width: 100%; height: 100%; object-fit: contain; padding: 12px; position: relative; z-index: 1; }
.quickview-details { display: flex; flex-direction: column; }
.quickview-category {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pine); margin-bottom: 6px;
}
.quickview-title, .quickview-details h2 {
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.15;
  color: var(--ink); margin-bottom: 10px;
}
.quickview-rating, .quickview-rating-wrapper { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.quickview-rating-stars { color: var(--amber); letter-spacing: 1px; }
.quickview-rating span, .quickview-rating-wrapper span { font-size: .84rem; color: var(--ink-3); }
.quickview-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.quickview-price .current-price,
.quickview-current-price { font-family: var(--font-mono); font-weight: 700; font-size: 1.7rem; color: var(--ink); }
.quickview-price .original-price,
.quickview-original-price { font-family: var(--font-mono); font-size: 1rem; color: var(--ink-3); text-decoration: line-through; }
.quickview-description {
  font-size: .94rem; line-height: 1.65; color: var(--ink-2);
  padding: 14px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); margin-bottom: 16px;
}
.quickview-meta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.quickview-meta-item, .quickview-meta div { display: flex; justify-content: space-between; font-size: .86rem; }
.quickview-meta-label { color: var(--ink-3); font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.quickview-meta-value { color: var(--ink); font-weight: 600; }
.quickview-stock-ok { color: var(--pine); font-weight: 700; }
.quickview-stock-low { color: var(--brick); font-weight: 700; }
.quantity-selector { display: flex; align-items: center; gap: 0; width: fit-content; border: 1.5px solid var(--line); border-radius: var(--radius-xs); overflow: hidden; margin-bottom: 16px; }
.quantity-selector button, .quantity-selector .quantity-btn {
  width: 40px; height: 40px; border: none; background: var(--surface-2); color: var(--ink);
  font-size: 1.1rem; cursor: pointer; transition: background var(--transition);
}
.quantity-selector button:hover { background: var(--amber-soft); color: var(--amber-2); }
.quantity-selector input, .quantity-selector .quantity-input {
  width: 54px; height: 40px; text-align: center; border: none; border-left: 1px solid var(--line);
  border-right: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-family: var(--font-mono); font-weight: 700;
}
.quickview-actions { display: flex; gap: 12px; margin-top: auto; }
.quickview-actions .btn { flex: 1; }
.quickview-share { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.quickview-share span { font-size: .8rem; color: var(--ink-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.share-btn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  transition: all var(--transition); cursor: pointer;
}
.share-btn:hover { background: var(--pine); border-color: var(--pine); color: #fff; transform: translateY(-2px); }

/* ── Checkout / métodos de pago ─────────────────────────────────────────── */
.checkout-modal-content { display: flex; flex-direction: column; gap: 18px; }
.checkout-summary { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; }
.checkout-summary h3, .checkout-section-title {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); margin-bottom: 12px;
}
.checkout-line, .checkout-summary-row { display: flex; justify-content: space-between; font-size: .9rem; padding: 6px 0; color: var(--ink-2); }
.checkout-line span:last-child, .checkout-summary-row span:last-child { font-family: var(--font-mono); color: var(--ink); }
.checkout-total { display: flex; justify-content: space-between; padding-top: 12px; margin-top: 6px; border-top: 1.5px solid var(--line); font-weight: 800; }
.checkout-total span:last-child { font-family: var(--font-mono); font-size: 1.25rem; color: var(--amber-2); }
.payment-methods, .payment-options { display: flex; flex-direction: column; gap: 10px; }
.payment-method, .payment-option {
  display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  transition: border-color var(--transition), background var(--transition);
}
.payment-method:hover, .payment-option:hover { border-color: var(--line-strong); background: var(--surface-2); }
.payment-method.selected, .payment-option.selected,
.payment-method input:checked ~ *, .payment-option.active {
  border-color: var(--amber); background: var(--amber-soft);
}
.payment-method img, .payment-option img { height: 28px; width: auto; }
.payment-method-info, .payment-option-info { flex: 1; }
.payment-method-name, .payment-option-name { font-weight: 700; color: var(--ink); font-size: .95rem; }
.payment-method-desc, .payment-option-desc { font-size: .8rem; color: var(--ink-3); }

/* ── Wishlist / lista de deseos ─────────────────────────────────────────── */
.wishlist-modal-content { display: flex; flex-direction: column; gap: 14px; }
.wishlist-items { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; }
.wishlist-item {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  transition: box-shadow var(--transition);
}
.wishlist-item:hover { box-shadow: var(--shadow-sm); }
.wishlist-item-image, .wishlist-item img {
  width: 72px; height: 72px; object-fit: contain; padding: 6px;
  border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-2);
}
.wishlist-item-details { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wishlist-item-title { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--ink); }
.wishlist-item-price { font-family: var(--font-mono); font-weight: 700; color: var(--amber-2); }
.wishlist-item-category { font-size: .76rem; color: var(--ink-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
.wishlist-item-actions { display: flex; flex-direction: column; gap: 6px; }
.add-to-cart-from-wishlist { white-space: nowrap; }
.remove-from-wishlist {
  background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: .85rem;
  transition: color var(--transition);
}
.remove-from-wishlist:hover { color: var(--brick); }
.add-to-wishlist-btn.active i, .wishlist-btn.active i { color: var(--brick); font-weight: 900; }

/* ── Perfil de usuario ──────────────────────────────────────────────────── */
.profile-modal-content { display: flex; flex-direction: column; gap: 16px; }
.profile-header { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px dashed var(--line); }
.profile-avatar {
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--amber), var(--amber-2)); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
}
.profile-info { display: flex; flex-direction: column; gap: 10px; }
.profile-field { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.profile-field-label { font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.profile-field-value { font-weight: 600; color: var(--ink); text-align: right; }
.profile-actions { display: flex; gap: 12px; margin-top: 8px; }
.edit-profile-content { display: flex; flex-direction: column; gap: 14px; }

/* ── Órdenes / pedidos ──────────────────────────────────────────────────── */
.orders-modal-content { display: flex; flex-direction: column; gap: 14px; }
.orders-list { display: flex; flex-direction: column; gap: 14px; max-height: 64vh; overflow-y: auto; padding-right: 4px; }
.order-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  overflow: hidden; transition: box-shadow var(--transition);
}
.order-card:hover { box-shadow: var(--shadow-sm); }
.order-header {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.order-id { font-family: var(--font-mono); font-weight: 700; color: var(--ink); font-size: .9rem; }
.order-id::before { content: "#"; color: var(--amber-2); }
.order-date { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-3); }
.order-body { padding: 14px 16px; }
.order-items, .order-items-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.order-item { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; }
.order-item-image, .order-item img {
  width: 48px; height: 48px; object-fit: contain; padding: 4px;
  border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-2);
}
.order-item-name { font-size: .9rem; font-weight: 600; color: var(--ink); }
.order-item-qty { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-3); }
.order-item-price { font-family: var(--font-mono); font-weight: 700; color: var(--ink); }
.order-summary, .order-totals { padding-top: 12px; border-top: 1px dashed var(--line); }
.order-total-row, .order-summary-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: .9rem; color: var(--ink-2); }
.order-total-row span:last-child { font-family: var(--font-mono); color: var(--ink); }
.order-total, .order-grand-total { display: flex; justify-content: space-between; padding-top: 10px; margin-top: 6px; border-top: 1.5px solid var(--line); font-weight: 800; }
.order-total span:last-child, .order-grand-total span:last-child { font-family: var(--font-mono); font-size: 1.15rem; color: var(--amber-2); }
.order-extra, .order-info { font-size: .84rem; color: var(--ink-3); margin-top: 10px; line-height: 1.55; }
.order-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.order-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.order-pending,   .order-status.pending,   .status-pending   { background: var(--amber-soft); color: var(--amber-2); }
.order-paid,      .order-status.paid,      .status-paid,
.order-confirmed, .order-status.confirmed                   { background: var(--pine-soft); color: var(--pine-2); }
.order-shipped,   .order-status.shipped,   .status-shipped   { background: #DBEAF1; color: var(--blue); }
.order-delivered, .order-status.delivered, .status-delivered { background: var(--pine-soft); color: var(--pine-2); }
.order-cancelled, .order-status.cancelled, .status-cancelled { background: var(--brick-soft); color: var(--brick); }

/* ── Confirmación de pedido ─────────────────────────────────────────────── */
.order-confirmation-content { text-align: center; padding: 8px 0; }
.order-confirmation-icon {
  width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff;
  background: linear-gradient(135deg, var(--pine), var(--pine-2));
}
.order-confirmation-title { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--ink); margin-bottom: 8px; }
.order-confirmation-text { color: var(--ink-2); font-size: .95rem; line-height: 1.6; margin-bottom: 8px; }
.order-confirmation-number { font-family: var(--font-mono); font-weight: 700; color: var(--amber-2); font-size: 1.1rem; }

/* ── Subir producto (panel) ─────────────────────────────────────────────── */
.upload-product-form { display: flex; flex-direction: column; gap: 14px; }
.file-upload-container {
  position: relative; border: 2px dashed var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 28px; text-align: center; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.file-upload-container:hover { border-color: var(--amber); background: var(--amber-soft); }
.file-upload-container i { font-size: 2rem; color: var(--ink-3); margin-bottom: 10px; }
.file-upload-text { font-size: .9rem; color: var(--ink-2); }
.file-upload-hint { font-size: .78rem; color: var(--ink-3); font-family: var(--font-mono); margin-top: 4px; }
.file-upload-container input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.image-preview-container { position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
#image-preview, .file-upload-preview img { width: 100%; max-height: 280px; object-fit: contain; display: block; padding: 10px; }
.watermark-overlay {
  position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: rgba(224,123,20,.32);
  letter-spacing: .1em; text-transform: uppercase; transform: rotate(-18deg);
}
.file-upload-preview { position: relative; }

/* ── Términos / contenido legal ─────────────────────────────────────────── */
.terms-content, .terms-modal-content { max-height: 62vh; overflow-y: auto; padding-right: 8px; }
.terms-content h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); margin: 16px 0 8px; }
.terms-content h3:first-child { margin-top: 0; }
.terms-content p, .terms-content li { font-size: .9rem; line-height: 1.65; color: var(--ink-2); margin-bottom: 8px; }
.terms-content ul { padding-left: 20px; margin-bottom: 10px; }

/* ════════════════════════════════════════════════════════════════════════
   8 · NOTIFICACIONES · BACK-TO-TOP · REVELADO · ANIMACIONES
   ──────────────────────────────────────────────────────────────────────── */

/* ── Toasts / notificaciones ────────────────────────────────────────────── */
.notification, .toast {
  position: fixed; bottom: 26px; right: 26px; z-index: 4000;
  display: flex; align-items: center; gap: 12px; min-width: 280px; max-width: 380px;
  padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--ink-3);
  box-shadow: var(--shadow-lg); transform: translateX(120%); opacity: 0;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), opacity 320ms;
}
.notification.show, .notification.active, .toast.show { transform: translateX(0); opacity: 1; }
.notification-content { display: flex; align-items: center; gap: 12px; flex: 1; font-size: .9rem; color: var(--ink); line-height: 1.45; }
.notification-content i, .notification i:first-child { font-size: 1.2rem; }
.notification-success { border-left-color: var(--pine); }
.notification-success i { color: var(--pine); }
.notification-error   { border-left-color: var(--brick); }
.notification-error i  { color: var(--brick); }
.notification-warning { border-left-color: var(--amber); }
.notification-warning i { color: var(--amber); }
.notification-info    { border-left-color: var(--blue); }
.notification-info i   { color: var(--blue); }
.notification-close {
  background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: 1rem;
  padding: 2px 4px; line-height: 1; transition: color var(--transition);
}
.notification-close:hover { color: var(--ink); }

/* ── Volver arriba ──────────────────────────────────────────────────────── */
#back-to-top, .back-to-top {
  position: fixed; bottom: 26px; left: 26px; z-index: 900;
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; cursor: pointer; color: #fff;
  background: var(--ink); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity var(--transition), transform var(--transition), background var(--transition), visibility var(--transition);
}
#back-to-top.show, #back-to-top.visible, #back-to-top.active, .back-to-top.show {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
#back-to-top:hover, .back-to-top:hover { background: var(--amber); transform: translateY(-3px) scale(1.04); }

/* ── Revelado en scroll ─────────────────────────────────────────────────── */
.reveal-on-scroll, .reveal-stat, .scroll-reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.reveal-on-scroll.visible, .reveal-on-scroll.revealed, .reveal-on-scroll.active,
.reveal-stat.visible, .reveal-stat.revealed, .reveal-stat.active,
.scroll-reveal.visible, .scroll-reveal.revealed { opacity: 1; transform: none; }

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes tp-spin { to { transform: rotate(360deg); } }
@keyframes tp-float {
  0%,100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%     { transform: translateY(-16px) rotate(var(--rot, 0deg)); }
}
@keyframes tp-rise {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .9; }
  100% { transform: translateY(-120px); opacity: 0; }
}
@keyframes tp-cube {
  0%   { transform: rotateX(-24deg) rotateY(0deg); }
  100% { transform: rotateX(-24deg) rotateY(360deg); }
}
@keyframes tp-shimmer {
  0%   { background-position: -180% 0; }
  100% { background-position: 180% 0; }
}
@keyframes tp-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .55; }
}
@keyframes tp-fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tp-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* alias de compatibilidad por si script.js referencia nombres genéricos */
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -180% 0; } 100% { background-position: 180% 0; } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp{ from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes pulse   { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ── Movimiento reducido ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .cube, .hero-shapes, .particles { animation: none !important; }
  .reveal-on-scroll, .reveal-stat, .scroll-reveal { opacity: 1 !important; transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   9 · PANEL DE ADMINISTRACIÓN (panel.html — comparte esta hoja)
   Estética coherente con la tienda, priorizando legibilidad operativa.
   ──────────────────────────────────────────────────────────────────────── */
.admin-container { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; background: var(--paper); }

/* ── Barra lateral ──────────────────────────────────────────────────────── */
.admin-sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
  background: var(--ink); color: #E9E0D3; display: flex; flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.06);
}
.admin-logo {
  display: flex; align-items: center; gap: 10px; padding: 20px 22px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.admin-logo i, .admin-logo .logo-icon { color: var(--amber-glow); }
.admin-menu { list-style: none; padding: 12px 10px; margin: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.admin-menu-title {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(233,224,211,.4); padding: 16px 14px 6px;
}
.admin-menu-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-xs);
  color: #D9CFC1; cursor: pointer; font-size: .92rem; font-weight: 500;
  transition: background var(--transition), color var(--transition); border: none; background: none; width: 100%; text-align: left;
}
.admin-menu-item i { width: 18px; text-align: center; color: rgba(233,224,211,.55); transition: color var(--transition); }
.admin-menu-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-menu-item.active { background: var(--amber); color: #fff; }
.admin-menu-item.active i { color: #fff; }
.admin-user {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.admin-user-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--amber), var(--amber-2)); color: #fff;
  font-family: var(--font-display); font-weight: 800;
}
.admin-user-info { display: flex; flex-direction: column; min-width: 0; }
#admin-user-name { font-weight: 700; color: #fff; font-size: .9rem; }
#admin-user-role { font-family: var(--font-mono); font-size: .72rem; color: rgba(233,224,211,.5); }

/* ── Contenido ──────────────────────────────────────────────────────────── */
.admin-content { padding: 0; overflow-x: hidden; }
.admin-header {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 28px; background: var(--surface);
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.admin-header h1, .admin-header h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--ink); }
.admin-header-actions { display: flex; align-items: center; gap: 12px; }
.admin-section { padding: 26px 28px; display: none; }
.admin-section.active { display: block; animation: tp-fade-in-up .4s ease both; }
.admin-section > h2, .analytics-title, .admin-section-title {
  font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--ink); margin-bottom: 18px;
  position: relative; padding-bottom: 8px;
}
.admin-section > h2::after, .admin-section-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px;
  background: var(--amber); border-radius: 2px;
}

/* ── Tarjetas de métricas ───────────────────────────────────────────────── */
.admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 18px; margin-bottom: 28px; }
.admin-card {
  display: flex; align-items: center; gap: 16px; padding: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden; transition: transform var(--transition), box-shadow var(--transition);
}
.admin-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--amber);
}
.admin-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.admin-card-icon {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff;
}
.card-orders   .admin-card-icon { background: linear-gradient(135deg, var(--amber), var(--amber-2)); }
.card-orders::before   { background: var(--amber); }
.card-products .admin-card-icon { background: linear-gradient(135deg, var(--pine), var(--pine-2)); }
.card-products::before { background: var(--pine); }
.card-sales    .admin-card-icon { background: linear-gradient(135deg, #3C8DB6, var(--blue)); }
.card-sales::before    { background: var(--blue); }
.card-users    .admin-card-icon { background: linear-gradient(135deg, #B7553C, var(--brick)); }
.card-users::before    { background: var(--brick); }
.admin-card-info { display: flex; flex-direction: column; }
.admin-card-info h3, .admin-card-value { font-family: var(--font-mono); font-weight: 700; font-size: 1.7rem; color: var(--ink); line-height: 1.1; }
.admin-card-info p, .admin-card-label { font-size: .82rem; color: var(--ink-3); margin-top: 2px; }

/* ── Filtros ────────────────────────────────────────────────────────────── */
.admin-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px;
  padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.admin-filters .filter-group { display: flex; flex-direction: column; gap: 4px; }
.admin-filters label { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.admin-filters select, .admin-filters input { min-width: 160px; }

/* ── Tablas ─────────────────────────────────────────────────────────────── */
.admin-table-container {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table thead th {
  background: var(--surface-2); text-align: left; padding: 13px 16px; color: var(--ink-2);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  border-bottom: 1.5px solid var(--line); white-space: nowrap;
}
.admin-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.admin-table tbody tr { transition: background var(--transition); }
.admin-table tbody tr:hover { background: var(--surface-2); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.product-cell { display: flex; align-items: center; gap: 12px; }
.product-thumb {
  width: 42px; height: 42px; object-fit: contain; padding: 4px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-2);
}
.actions-cell { display: flex; gap: 6px; white-space: nowrap; }
.action-btn {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface);
  color: var(--ink-2); cursor: pointer; font-size: .85rem; transition: all var(--transition);
}
.action-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.action-btn.view  { color: var(--blue); }
.action-btn.view:hover  { background: var(--blue);  border-color: var(--blue);  color: #fff; }
.action-btn.edit  { color: var(--amber-2); }
.action-btn.edit:hover  { background: var(--amber); border-color: var(--amber); color: #fff; }
.action-btn.delete{ color: var(--brick); }
.action-btn.delete:hover{ background: var(--brick); border-color: var(--brick); color: #fff; }

.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; flex-wrap: wrap; }
.table-info { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-3); }

/* ── Estado / badges de tabla ───────────────────────────────────────────── */
.status-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.status-badge.active, .status-badge.status-active, .status-active { background: var(--pine-soft); color: var(--pine-2); }
.status-badge.inactive, .status-inactive { background: var(--brick-soft); color: var(--brick); }
.status-badge.pending, .status-pending { background: var(--amber-soft); color: var(--amber-2); }

/* ── Formularios del panel ──────────────────────────────────────────────── */
.admin-form-container {
  max-width: 760px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm);
}
.form-actions { display: flex; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); }
.full-width { grid-column: 1 / -1; }

/* ── Botón hamburguesa / overlay móvil del panel ────────────────────────── */
.admin-mobile-menu-btn {
  display: none; width: 42px; height: 42px; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface); color: var(--ink); cursor: pointer;
}
.mobile-sidebar-overlay {
  position: fixed; inset: 0; background: rgba(20,17,13,.5); backdrop-filter: blur(2px);
  z-index: 45; opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition);
}
.mobile-sidebar-overlay.show, .mobile-sidebar-overlay.active { opacity: 1; visibility: visible; }
.loading-state { padding: 40px; text-align: center; color: var(--ink-3); font-family: var(--font-mono); font-size: .85rem; }

/* ════════════════════════════════════════════════════════════════════════
   10 · RESPONSIVE
   ──────────────────────────────────────────────────────────────────────── */

/* ── Escritorio compacto / portátil (≤1100px) ──────────────────────────── */
@media (max-width: 1100px) {
  .hero-banner .container { grid-template-columns: 1fr 1fr; grid-template-areas: "content visual" "featured featured"; gap: 28px; }
  .hero-featured { grid-template-columns: repeat(2, 1fr); }
  .products-layout { grid-template-columns: 232px 1fr; }
}

/* ── Tablet (≤960px) ────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  :root { --maxw: 100%; }
  .main-nav .nav-list { display: none; }
  .mobile-menu-btn { display: inline-flex; }
  .search-bar { max-width: 320px; }

  .hero-banner .container {
    grid-template-columns: 1fr; grid-template-areas: "content" "visual" "featured";
    text-align: center; padding-top: 36px; padding-bottom: 36px;
  }
  .hero-content { align-items: center; }
  .hero-buttons { justify-content: center; }
  .hero-visual { margin: 0 auto; }
  .hero-featured { grid-template-columns: repeat(2, 1fr); max-width: 520px; margin: 0 auto; }
  .hero-stats { gap: 18px; }

  .products-layout { grid-template-columns: 1fr; }
  .filters-sidebar {
    position: static; max-height: none;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px;
  }
  .filters-card { position: static; }

  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }

  .admin-container { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: fixed; top: 0; left: 0; width: 256px; z-index: 50; height: 100vh;
    transform: translateX(-100%); transition: transform var(--transition);
  }
  .admin-sidebar.open, .admin-sidebar.active { transform: translateX(0); }
  .admin-mobile-menu-btn { display: inline-flex; }
}

/* ── Móvil (≤640px) ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .mobile-hidden { display: none !important; }

  .header .container { gap: 10px; }
  .logo-caption { display: none; }
  .header-content {
    grid-template-columns: auto 1fr;
    grid-template-areas: "logo actions" "search search";
    gap: 12px 14px;
  }
  .logo { grid-area: logo; }
  .header-actions { grid-area: actions; justify-self: end; }
  .search-bar { grid-area: search; max-width: 100%; }

  .hero-title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .hero-featured { grid-template-columns: 1fr; max-width: 360px; }
  .hero-stats { flex-direction: column; gap: 8px; }
  .stat-divider { width: 60%; height: 1px; }
  .hero-visual, .hero-cube-container { transform: scale(.82); }

  .section-header h2, .products-header h2 { font-size: 1.5rem; }
  .products-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .filters-sidebar { grid-template-columns: 1fr; }

  .features-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }

  /* Modales y carrito a pantalla completa */
  .modal { width: 96vw !important; max-width: 96vw !important; max-height: 92vh; }
  .modal-body { max-height: 70vh; overflow-y: auto; }
  .quickview-modal, .quickview-content { grid-template-columns: 1fr; gap: 18px; }
  .quickview-image { max-width: 280px; margin: 0 auto; }
  .cart-sidebar { width: 100%; max-width: 100%; }
  .form-row { grid-template-columns: 1fr; }

  .notification, .toast { left: 14px; right: 14px; bottom: 14px; min-width: 0; max-width: none; }
  #back-to-top { bottom: 16px; left: 16px; width: 42px; height: 42px; }

  .admin-cards { grid-template-columns: 1fr; }
  .admin-section, .admin-header { padding-left: 16px; padding-right: 16px; }
  .admin-table-container { overflow-x: auto; }
  .admin-table { min-width: 560px; }
}

/* ── Móvil estrecho (≤380px) ────────────────────────────────────────────── */
@media (max-width: 380px) {
  .products-grid { grid-template-columns: 1fr; }
  .hero-buttons { flex-direction: column; width: 100%; }
  .hero-buttons .btn { width: 100%; }
}

/* ── Ajustes finos modo oscuro ──────────────────────────────────────────── */
[data-theme="dark"] .header { background: rgba(20,17,13,.82); }
[data-theme="dark"] .product-image,
[data-theme="dark"] .quickview-image,
[data-theme="dark"] .wishlist-item-image { background: var(--surface); }
[data-theme="dark"] .notification-success { background: var(--surface); }
[data-theme="dark"] img.product-img[src=""] { opacity: 0; }
[data-theme="dark"] .skeleton-card,
[data-theme="dark"] .hf-skeleton { background: var(--surface-2); }

/* ── Impresión ──────────────────────────────────────────────────────────── */
@media print {
  .header, .main-nav, .mobile-nav, .cart-sidebar, .hero-banner,
  #back-to-top, .notification, .footer, .filters-sidebar { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ── Fin de la hoja de estilos ──────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════════
   HERO EYEBROW — IMPRESIÓN DE ALTA CALIDAD visible sobre el título
   ════════════════════════════════════════════════════════════════════════ */

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--amber);
}
.eyebrow-line {
  flex: 0 0 36px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber));
  border-radius: 2px;
}
.eyebrow-line--right {
  background: linear-gradient(90deg, var(--amber), transparent);
}

/* hero-badge retrocompat: sin fondo, mismo estilo eyebrow */
.hero-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--amber);
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   HERO GRID — sin cubo, tombola ocupa columna derecha completa
   ════════════════════════════════════════════════════════════════════════ */

.hero-banner .container {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .88fr);
  grid-template-areas: "content tombola";
  align-items: center;
}

/* ════════════════════════════════════════════════════════════════════════
   TOMBOLA CAROUSEL — PRODUCTOS DESTACADOS EN HERO
   ════════════════════════════════════════════════════════════════════════ */

.hero-tombola {
  grid-area: tombola;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 380px;
  align-self: stretch;
  position: relative;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
}

.tombola-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.tombola-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-2);
}
.tombola-label i { color: var(--amber); }

.tombola-nav { display: flex; gap: 6px; }
.tombola-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xs);
  color: var(--ink-2);
  cursor: pointer;
  transition: var(--transition);
  font-size: .8rem;
}
.tombola-btn:hover { border-color: var(--amber); color: var(--amber); }

.tombola-viewport { flex: 1; overflow: hidden; position: relative; }

/* Tombola track: deslizamiento horizontal */
#hero-featured-list {
  display: flex;
  gap: 0;
  transition: transform .48s cubic-bezier(.22,.68,.36,1);
  will-change: transform;
  height: 100%;
  min-height: 300px;
}

/* Cada hf-card ocupa 100% del ancho */
#hero-featured-list .hf-card {
  flex: 0 0 100%;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 22px;
  gap: 16px;
  text-align: center;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
#hero-featured-list .hf-card:hover { background: rgba(255,183,0,.04); }

#hero-featured-list .hf-img,
#hero-featured-list .hf-no-img {
  width: 118px;
  height: 118px;
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}
#hero-featured-list .hf-no-img {
  display: grid;
  place-items: center;
  background: var(--paper-2);
  color: var(--ink-3);
  font-size: 2.2rem;
}
#hero-featured-list .hf-info   { flex: unset; width: 100%; }
#hero-featured-list .hf-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  text-align: center;
  margin-bottom: 6px;
}
#hero-featured-list .hf-price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--pine-2);
  text-align: center;
}
#hero-featured-list .hf-arrow { display: none; }

/* Skeletons en tombola: ancho completo */
#hero-featured-list .hf-skeleton {
  flex: 0 0 100%;
  min-width: 0;
  border-radius: 0;
  min-height: 300px;
}

/* Barra de puntos */
.tombola-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.tombola-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  border: none;
  cursor: pointer;
  transition: width .24s ease, background-color .24s ease, border-radius .24s ease;
  padding: 0;
}
.tombola-dot.active { width: 20px; border-radius: 4px; background: var(--amber); }

/* ════════════════════════════════════════════════════════════════════════
   FIX: MENÚ HAMBURGUESA MÓVIL - 3 PUNTOS CENTRADOS
   ════════════════════════════════════════════════════════════════════════ */
.mobile-menu-btn {
  display: none; align-items: center; justify-content: center;
}
@media (max-width: 960px) {
  .mobile-menu-btn { display: inline-flex !important; }
}
/* Fix: producto destacado imagen full-width en el borde */
#hero-featured-list .hf-img img,
#hero-featured-list .hf-img {
  width: 100% !important;
  height: auto !important;
  max-height: 200px;
  object-fit: cover;
  border: none;
  border-radius: var(--radius-sm);
}

/* ════════════════════════════════════════════════════════════════════════
   EFECTOS 3D — MALLA DE PERSPECTIVA EN HERO Y ACENTOS EN SECCIONES
   ════════════════════════════════════════════════════════════════════════ */

/* Malla de perspectiva en hero */
.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,183,0,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,183,0,.022) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(520px) rotateX(18deg) scale(1.55);
  transform-origin: 50% 100%;
  pointer-events: none;
  z-index: 0;
}

.hero-content,
.hero-tombola { position: relative; z-index: 1; }
.hero-shapes  { z-index: 0; }

/* Glow radial en sección de características */
.features-section {
  position: relative;
  overflow: hidden;
}
.features-section::after {
  content: "";
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(46,125,70,.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Raya diagonal en stats bar */
.hero-stats-bar { position: relative; overflow: hidden; }
.hero-stats-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 14px,
    rgba(255,183,0,.026) 14px,
    rgba(255,183,0,.026) 16px
  );
  pointer-events: none;
  z-index: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   MODO OSCURO — REFUERZOS DE CONTRASTE Y BRILLO
   ════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .hero-eyebrow,
[data-theme="dark"] .hero-badge { color: var(--amber-glow); }
[data-theme="dark"] .eyebrow-line {
  background: linear-gradient(90deg, transparent, var(--amber-glow));
}
[data-theme="dark"] .eyebrow-line--right {
  background: linear-gradient(90deg, var(--amber-glow), transparent);
}
[data-theme="dark"] .hero-tombola {
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line), 0 0 52px rgba(255,183,0,.07);
}
[data-theme="dark"] .tombola-btn:hover { background: rgba(255,183,0,.12); }
[data-theme="dark"] .hero-banner::after { opacity: .42; }
[data-theme="dark"] .hero-title { text-shadow: 0 2px 28px rgba(0,0,0,.75); }
[data-theme="dark"] .features-section::after {
  background: radial-gradient(circle, rgba(46,125,70,.13) 0%, transparent 65%);
}
[data-theme="dark"] .feature:hover {
  box-shadow: var(--shadow-lg), 0 0 28px rgba(255,183,0,.09);
}
[data-theme="dark"] .hero-stats-bar::before {
  background: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 14px,
    rgba(255,183,0,.038) 14px,
    rgba(255,183,0,.038) 16px
  );
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVA EXTRA — TOMBOLA EN TABLET Y MÓVIL
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .hero-banner .container {
    grid-template-columns: 1fr;
    grid-template-areas: "content" "tombola";
  }
  .hero-tombola { min-height: 300px; }
}

@media (max-width: 600px) {
  .hero-tombola { min-height: 260px; }
  .hero-eyebrow { font-size: .66rem; letter-spacing: .16em; }
  .eyebrow-line { flex: 0 0 20px; }
  #hero-featured-list .hf-img,
  #hero-featured-list .hf-no-img { width: 86px; height: 86px; }
  #hero-featured-list .hf-name { font-size: .92rem; }
  #hero-featured-list .hf-price { font-size: .95rem; }
  #hero-featured-list .hf-card { padding: 20px 14px; }
}

/* ════════════════════════════════════════════════════════════════════════
   LOGO IMAGEN — Isologo PNG light/dark
   ════════════════════════════════════════════════════════════════════════ */
.logo-icon-img {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.logo-img-light,
.logo-img-dark {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}
.logo-img-dark { display: none; }
[data-theme="dark"] .logo-img-light { display: none; }
[data-theme="dark"] .logo-img-dark  { display: block; }

/* Logo full-width: imagen contiene todo el branding, sin texto al lado */
.logo-icon-fullwidth {
  width: auto !important;
  height: auto !important;
}
.logo-img-full {
  width: auto !important;
  height: 96px !important;
  max-width: 340px !important;
  object-fit: contain;
}
@media (max-width: 640px) {
  .logo-img-full { height: 52px !important; max-width: 180px !important; }
}
@media (max-width: 400px) {
  .logo-img-full { height: 42px !important; max-width: 140px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   BARRA VENDEDOR — visible solo para rol=vendedor
   ════════════════════════════════════════════════════════════════════════ */
.vendedor-bar {
  background: linear-gradient(90deg, var(--amber-soft), var(--surface-2));
  border-bottom: 2px solid var(--amber);
  padding: 9px 0;
}
.vendedor-bar-content {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .9rem;
}
.vendedor-bar-content > i { color: var(--amber); font-size: 1.05rem; flex-shrink: 0; }
.vendedor-bar-content > span { flex: 1; color: var(--ink-2); }
.vendedor-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  background: var(--amber);
  color: #fff;
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition);
}
.vendedor-bar-btn:hover { background: var(--amber-2); color: #fff; transform: translateY(-1px); }
[data-theme="dark"] .vendedor-bar { background: linear-gradient(90deg, #2E2212, var(--surface-2)); }

/* ════════════════════════════════════════════════════════════════════════
   DARK MODE — CORRECCIONES DE ICONOS Y CONTRASTES
   ════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .feature-icon--green  { background: linear-gradient(145deg, #2E9E6E, #1F7A52); }
[data-theme="dark"] .feature-icon--purple { background: linear-gradient(145deg, #7B5B9A, #5A3D73); }
[data-theme="dark"] .feature-icon--blue   { background: linear-gradient(145deg, #3A8AAE, #285F7E); }
[data-theme="dark"] .feature-icon--orange { background: linear-gradient(145deg, #D0842A, #A86018); }

[data-theme="dark"] .header-icon     { color: var(--ink-2); }
[data-theme="dark"] .header-icon:hover { color: var(--amber-glow); }
[data-theme="dark"] .theme-toggle    { border-color: var(--line-strong); color: var(--amber-glow); background: var(--surface-2); }
[data-theme="dark"] .theme-toggle:hover { border-color: var(--amber-glow); box-shadow: 0 0 0 3px var(--amber-soft); }
[data-theme="dark"] .badge           { background: var(--amber); color: var(--paper); }
[data-theme="dark"] .contact-info li i { color: var(--amber-glow); }
[data-theme="dark"] .social-links a  { color: var(--ink-2); }
[data-theme="dark"] .social-links a:hover { background: var(--amber-glow); color: var(--paper); border-color: var(--amber-glow); }
[data-theme="dark"] .main-header    { border-bottom-color: var(--line-strong); background: var(--surface); }
[data-theme="dark"] .main-nav       { background: var(--surface-2); border-bottom-color: var(--groove); }
[data-theme="dark"] .main-nav a     { color: var(--ink-2); }
[data-theme="dark"] .main-nav a:hover { color: var(--amber-glow); }
[data-theme="dark"] .search-bar input { background: var(--groove); border-color: var(--line-strong); color: var(--ink); }
[data-theme="dark"] .search-bar input::placeholder { color: var(--ink-3); }
[data-theme="dark"] .search-bar button { background: var(--amber-2); }
[data-theme="dark"] .dropdown-content { background: var(--surface); border-color: var(--line-strong); box-shadow: 0 12px 32px rgba(0,0,0,.6); }
[data-theme="dark"] .dropdown-content a { color: var(--ink-2); }
[data-theme="dark"] .dropdown-content a:hover { background: var(--groove); color: var(--amber-glow); }
[data-theme="dark"] .hero-section   { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); }
[data-theme="dark"] .btn-hero-primary { background: var(--amber); color: var(--paper); box-shadow: 0 4px 20px rgba(245,154,56,.4); }
[data-theme="dark"] .btn-hero-secondary { border-color: var(--line-strong); color: var(--ink-2); background: var(--groove); }
[data-theme="dark"] .product-card   { background: var(--surface); border-color: var(--groove); }
[data-theme="dark"] .product-card:hover { border-color: var(--amber); box-shadow: 0 8px 32px rgba(245,154,56,.2); }
[data-theme="dark"] .section-title  { color: var(--ink); }
[data-theme="dark"] .footer-col h3, [data-theme="dark"] .footer-col h4 { color: var(--ink); }

/* Admin dashboard card icons - override hardcoded inline styles */
[data-theme="dark"] .card-sales   .admin-card-icon { background: rgba(245,154,56,.15) !important; color: var(--amber-glow) !important; }
[data-theme="dark"] .card-products .admin-card-icon { background: rgba(65,185,148,.15) !important; color: var(--pine) !important; }
[data-theme="dark"] .card-orders  .admin-card-icon { background: rgba(90,160,196,.15) !important; color: var(--blue) !important; }
[data-theme="dark"] .card-users   .admin-card-icon { background: rgba(216,101,78,.15) !important; color: var(--brick) !important; }
[data-theme="dark"] .admin-card-icon { background: rgba(255,255,255,.06) !important; }
[data-theme="dark"] .admin-card-icon i { color: var(--amber-glow); }

/* ════════════════════════════════════════════════════════════════════════
   MAPA DE SUCURSALES
   ════════════════════════════════════════════════════════════════════════ */
.branches-section {
  padding: 56px 0;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  position: relative;
}
.branches-header { text-align: center; margin-bottom: 36px; }
.branches-header h2 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--ink);
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
  margin-bottom: 8px;
}
.branches-header h2::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 0; width: 60px; height: 4px;
  background: linear-gradient(90deg, var(--amber), var(--pine));
  border-radius: 2px;
}
.branches-header p { color: var(--ink-2); margin-top: 12px; }

.branches-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 860px) { .branches-layout { grid-template-columns: 1fr; } }

#branches-map {
  height: 400px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.branch-cards { display: flex; flex-direction: column; gap: 16px; }
.branch-card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.branch-card:hover, .branch-card.active {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(224,123,20,.1);
}
.branch-card-type {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--amber);
  margin-bottom: 7px;
}
.branch-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .98rem;
  color: var(--ink);
  margin-bottom: 5px;
}
.branch-card-addr { font-size: .88rem; color: var(--ink-2); line-height: 1.5; margin-bottom: 7px; }
.branch-card-hours {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: .72rem; color: var(--pine-2);
}

/* ════════════════════════════════════════════════════════════════════════
   ADMIN — PANEL PRODUCTOS DESTACADOS
   ════════════════════════════════════════════════════════════════════════ */
.featured-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.featured-product-card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
  position: relative;
}
.featured-product-card:hover    { border-color: var(--line-strong); }
.featured-product-card.is-featured {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(224,123,20,.15);
}
.featured-product-card img {
  width: 100%; height: 130px; object-fit: cover;
  background: var(--paper-2); display: block;
}
.featured-product-info { padding: 10px 12px; }
.featured-product-name {
  font-family: var(--font-display); font-weight: 700; font-size: .83rem; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 3px;
}
.featured-product-price { font-family: var(--font-mono); font-size: .76rem; color: var(--pine-2); }
.featured-star-btn {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 50%; font-size: .82rem; color: var(--ink-3);
  transition: var(--transition); box-shadow: var(--shadow-sm);
  pointer-events: none;
}
.featured-product-card.is-featured .featured-star-btn {
  background: var(--amber); border-color: var(--amber); color: #fff;
}

/* ═══════════════════════════════════════════════
   QUICKVIEW 2.0 — Layout de producto impecable
   ═══════════════════════════════════════════════ */
.quickview-modal { max-width: 960px !important; width: 95vw !important; }
.quickview-modal .modal-body { padding: 0 !important; }
.quickview-modal .modal-header { padding: 16px 24px; border-bottom: 1px solid var(--line); }
.quickview-modal .modal-header h2 { font-size: 1rem; font-family: var(--font-mono); color: var(--ink-2); font-weight: 600; margin: 0; }

.qv-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 500px;
}
@media (max-width: 700px) {
  .qv-layout { grid-template-columns: 1fr; min-height: unset; }
  .quickview-modal { max-width: 100% !important; width: 100vw !important; margin: 0 !important; border-radius: 0 !important; }
  .qv-viewer-col { min-height: 260px; border-right: none; border-bottom: 1px solid var(--line); }
  .qv-slide { min-height: 240px; }
  .qv-main-img { max-height: 220px; }
  #qv-3d-container { min-height: 220px; }
  .qv-details-col { max-height: none; padding: 16px; }
}

/* — Columna visor — */
.qv-viewer-col {
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

/* ── Carrusel quickview ── */
.qv-carousel {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.qv-track {
  display: flex; flex: 1;
  transition: transform 380ms cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.qv-slide {
  min-width: 100%; flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; padding: 20px;
  background: var(--surface);
}
.qv-slide-3d {
  padding: 0;
  background: #0f172a;
}

.qv-main-img {
  max-width: 100%; max-height: 360px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  transition: transform 300ms ease;
}
.qv-main-img:hover { transform: scale(1.04); }

.qv-badge-discount, .qv-badge-out {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 4px 10px; border-radius: 20px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  pointer-events: none;
}
.qv-badge-discount { background: var(--brick); color: #fff; }
.qv-badge-out { background: var(--ink-3); color: #fff; }

/* Flechas de navegación */
.qv-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; border: none;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 10; transition: background 200ms;
}
.qv-arrow:hover { background: var(--amber); }
.qv-arrow-prev { left: 8px; }
.qv-arrow-next { right: 8px; }

/* Indicadores (dots) */
.qv-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 10;
}
.qv-dot {
  background: rgba(255,255,255,.35); border: none; border-radius: 50%;
  width: 28px; height: 28px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; color: #fff; transition: background 200ms;
}
.qv-dot:hover { background: rgba(255,255,255,.6); }
.qv-dot-active { background: var(--amber) !important; color: #fff; }

/* Visor 3D */
#qv-3d-container {
  flex: 1; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #0f172a; position: relative; overflow: hidden;
  min-height: 320px;
}
#qv-3d-container canvas { display: block; width: 100% !important; height: 100% !important; }
.qv-3d-loading, .qv-3d-error {
  position: absolute; color: var(--ink-3);
  font-family: var(--font-mono); font-size: .85rem;
  display: flex; align-items: center; gap: 8px;
}
.qv-3d-error { color: var(--brick); }
.qv-3d-hint {
  font-family: var(--font-mono); font-size: .72rem;
  color: var(--ink-3); text-align: center; padding: 6px 12px;
  margin: 0; background: #0f172a; display: flex; align-items: center;
  justify-content: center; gap: 6px;
}

/* Admin notice */
.qv-admin-notice {
  background: rgba(245,158,11,.12); border: 1px solid var(--amber);
  color: var(--amber); border-radius: var(--radius-sm);
  padding: 10px 14px; font-family: var(--font-mono); font-size: .8rem;
  display: flex; align-items: center; gap: 8px;
}

/* — Columna detalles — */
.qv-details-col {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px; overflow-y: auto; max-height: 560px;
}

.qv-category-badge {
  display: inline-block;
  background: var(--amber-glow, rgba(232,160,32,0.12));
  color: var(--amber); border: 1px solid var(--amber);
  border-radius: 20px; padding: 3px 12px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.qv-title {
  font-family: var(--font-display); font-size: 1.35rem;
  font-weight: 800; color: var(--ink); margin: 0; line-height: 1.25;
}
.qv-price-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.qv-price-current {
  font-family: var(--font-mono); font-size: 1.7rem;
  font-weight: 800; color: var(--amber);
}
.qv-price-original {
  font-family: var(--font-mono); font-size: 1rem;
  color: var(--ink-3); text-decoration: line-through;
}
.qv-price-badge {
  background: var(--brick); color: #fff;
  border-radius: 6px; padding: 2px 8px;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 700;
}
.qv-stock-row {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .82rem; font-weight: 600;
  padding: 8px 12px; border-radius: var(--radius-xs);
}
.qv-stock-row.in-stock { background: rgba(34,197,94,.1); color: #16a34a; }
.qv-stock-row.out-stock { background: rgba(239,68,68,.08); color: #dc2626; }

.qv-desc {
  font-size: .9rem; color: var(--ink-2); line-height: 1.6;
  margin: 0; border-left: 3px solid var(--amber);
  padding-left: 12px;
}
.qv-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.qv-qty {
  display: flex; align-items: center;
  border: 1.5px solid var(--line); border-radius: var(--radius-xs);
  overflow: hidden; background: var(--paper);
}
.qv-qty-btn {
  width: 36px; height: 40px; background: var(--surface); border: none;
  font-size: 1.1rem; font-weight: 700; cursor: pointer; color: var(--ink);
  transition: var(--transition);
}
.qv-qty-btn:hover { background: var(--amber); color: #fff; }
.qv-qty-input {
  width: 44px; height: 40px; border: none; text-align: center;
  font-family: var(--font-mono); font-size: .9rem; font-weight: 700;
  background: var(--paper); color: var(--ink);
}
.qv-actions .btn { height: 40px; flex: 1; min-width: 140px; }

.qv-wish-btn {
  width: 100%; padding: 9px; border: 1.5px solid var(--line);
  border-radius: var(--radius-xs); background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: .82rem; font-weight: 600;
  color: var(--ink-2); transition: var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.qv-wish-btn:hover, .qv-wish-btn.active {
  background: rgba(239,68,68,.08); border-color: #ef4444; color: #ef4444;
}
.qv-wish-btn.active i { font-weight: 900; }

.qv-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.qv-meta-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-xs);
}
.qv-meta-item i { color: var(--amber); margin-top: 2px; font-size: .85rem; }
.qv-meta-item span { font-size: .78rem; line-height: 1.4; color: var(--ink-2); }
.qv-meta-item strong { color: var(--ink); display: block; font-size: .75rem; }

.qv-share {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .78rem; color: var(--ink-3);
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line);
}
.qv-share .share-btn {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: .9rem;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); transition: var(--transition);
}
.qv-share .share-btn:hover { background: var(--amber); color: #fff; border-color: var(--amber); }

[data-theme="dark"] .qv-viewer-col { background: #111827; }
[data-theme="dark"] .qv-img-wrap { background: #111827; }
[data-theme="dark"] .qv-meta-item { background: #1f2937; border-color: #374151; }

/* ══════════════════════════════════════════════════════════════════
   QUICKVIEW MODAL COMPACTO
   ══════════════════════════════════════════════════════════════════ */

/* Modal box del quickview */
.qv-modal-box {
  max-width: 880px !important;
  width: 95vw !important;
  max-height: 90vh;
  overflow: hidden;
  border-radius: var(--radius) !important;
  padding: 0 !important;
  position: relative;
}
.qv-close {
  position: absolute; top: 12px; right: 14px; z-index: 20;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-2); font-size: 1.25rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.qv-close:hover { background: var(--brick); color: #fff; border-color: var(--brick); }

#qv-body { flex: 1; min-height: 0; overflow: hidden; }

/* LAYOUT: izquierda carrusel | derecha info */
.qv-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  min-height: 520px;
  max-height: 88vh;
}
@media (max-width: 700px) {
  .qv-layout { grid-template-columns: 1fr; max-height: none; }
  .qv-modal-box { max-height: 96vh; overflow-y: auto; }
}

/* Columna visor */
.qv-viewer-col {
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow: hidden;
  min-height: 480px;
}
@media (max-width: 700px) {
  .qv-viewer-col { border-right: none; border-bottom: 1px solid var(--line); min-height: 260px; }
}

/* Carrusel */
.qv-carousel { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.qv-track {
  display: flex; flex: 1; min-height: 0;
  transition: transform 360ms cubic-bezier(.4,0,.2,1);
}
.qv-slide {
  min-width: 100%; flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; padding: 20px;
  background: var(--surface);
  min-height: 460px;
}
.qv-slide-3d { padding: 0; background: #0f172a; }

/* Imagen */
.qv-main-img {
  width: 100%; height: 100%;
  object-fit: contain; border-radius: var(--radius-sm);
  transition: transform 300ms;
}
.qv-main-img:hover { transform: scale(1.04); }
@media (max-width: 700px) { .qv-main-img { height: 100%; } }

/* Badges */
.qv-badge-discount, .qv-badge-out {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 3px 10px; border-radius: 20px;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
}
.qv-badge-discount { background: var(--brick); color: #fff; }
.qv-badge-out { background: var(--ink-3); color: #fff; }

/* Flechas */
.qv-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff; border: none;
  font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 200ms;
}
.qv-arrow:hover { background: var(--amber); }
.qv-arrow-prev { left: 8px; }
.qv-arrow-next { right: 8px; }

/* Dots */
.qv-dots {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 10;
}
.qv-dot {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.3); color: #fff; font-size: .72rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 200ms;
}
.qv-dot:hover { background: rgba(255,255,255,.55); }
.qv-dot-active { background: var(--amber) !important; }

/* Visor 3D */
#qv-3d-container {
  flex: 1; width: 100%; min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  background: #0f172a; position: relative; overflow: hidden;
}
@media (max-width: 700px) { #qv-3d-container { min-height: 200px; } }
#qv-3d-container canvas { display: block; width: 100% !important; height: 100% !important; }
.qv-3d-loading, .qv-3d-error {
  position: absolute; color: var(--ink-3);
  font-family: var(--font-mono); font-size: .82rem;
  display: flex; align-items: center; gap: 8px;
}
.qv-3d-error { color: var(--brick); }
.qv-3d-hint {
  background: #0f172a; color: rgba(255,255,255,.35);
  font-family: var(--font-mono); font-size: .68rem;
  padding: 5px 10px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  flex-shrink: 0;
}

/* Columna detalle */
.qv-details-col {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px 22px; overflow-y: auto; max-height: 88vh;
}

/* Botón comprar ahora */
.qv-buynow-btn {
  width: 100%; height: 46px !important;
  background: linear-gradient(135deg, var(--amber) 0%, #d97706 100%) !important;
  font-size: .9rem !important;
  box-shadow: 0 4px 12px rgba(217,119,6,.3);
}
.qv-buynow-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(217,119,6,.4); }

#product-page {
  position: fixed; inset: 0; z-index: 900;
  background: var(--paper);
  display: none;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 300ms ease, transform 300ms ease;
}
#product-page.pp-visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
#product-page.pp-entering { display: flex; }

/* Cabecera de navegación */
.pp-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 28px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.pp-back-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-2); font-family: var(--font-mono); font-size: .82rem;
  font-weight: 600; cursor: pointer; transition: var(--transition);
}
.pp-back-btn:hover { background: var(--amber); color: #fff; border-color: var(--amber); }
.pp-breadcrumb {
  font-family: var(--font-mono); font-size: .78rem; color: var(--ink-3);
}

/* Cuerpo: columna única con scroll natural */
.pp-body {
  display: flex; flex-direction: column;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ═══ CARRUSEL HORIZONTAL tipo ruleta ═══ */
.pp-carousel {
  position: relative;
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.pp-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  scroll-behavior: smooth;
}
.pp-carousel-track::-webkit-scrollbar { display: none; }

.pp-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
  position: relative;
}

/* Slide 1 — Imagen */
.pp-slide-img .pp-img-wrap {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  padding: 24px; min-height: 320px;
}
.pp-main-img {
  max-width: 100%; max-height: 380px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  transition: transform 400ms ease;
}
.pp-main-img:hover { transform: scale(1.04); }
.pp-badge-discount, .pp-badge-out {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  padding: 4px 12px; border-radius: 20px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
}
.pp-badge-discount { background: var(--brick); color: #fff; }
.pp-badge-out { background: var(--ink-3); color: #fff; }

/* Slide 2 — Visor 3D */
.pp-slide-3d {
  background: #0f172a;
  flex-direction: column;
}
.pp-3d-wrap {
  width: 100%; flex: 1;
  display: flex; flex-direction: column;
  background: #0f172a;
}
.pp-3d-label {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
  color: var(--amber);
  flex-shrink: 0;
}
.pp-3d-hint {
  margin-left: auto;
  font-size: .7rem; color: rgba(255,255,255,.35); font-weight: 400;
}
#pp-3d-container {
  flex: 1; width: 100%;
  min-height: 350px;
  position: relative;
  overflow: hidden;
}
#pp-3d-container canvas {
  display: block; width: 100% !important; height: 100% !important;
}
.pp-3d-loading, .pp-3d-error {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-mono); font-size: .85rem; color: var(--ink-3);
}
.pp-3d-error { color: var(--brick); }

/* ═══ Dots del carrusel ═══ */
.pp-carousel-dots {
  display: flex; justify-content: center; gap: 8px;
  padding: 10px 0 14px;
  background: inherit;
}
.pp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gray-light);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.pp-dot.active { background: var(--amber); transform: scale(1.4); }
.pp-dot:hover { background: var(--amber-soft); }

/* ═══ INFORMACIÓN + ACCIONES (debajo del carrusel, scroll natural) ═══ */
.pp-info-col {
  display: flex; flex-direction: column; gap: 18px;
  padding: 28px 28px 40px;
  flex-shrink: 0;
}

.pp-category {
  display: inline-block;
  background: var(--amber-soft); color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 20px; padding: 3px 14px;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  width: fit-content;
}
.pp-title {
  font-family: var(--font-display); font-size: 1.75rem;
  font-weight: 900; line-height: 1.18; color: var(--ink);
  letter-spacing: -.02em; margin: 0;
}
.pp-price-row {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.pp-price-current {
  font-family: var(--font-display); font-size: 2rem;
  font-weight: 900; color: var(--amber);
}
.pp-price-original {
  font-size: 1.1rem; color: var(--ink-3);
  text-decoration: line-through;
}
.pp-price-badge {
  background: var(--brick); color: #fff;
  border-radius: 6px; padding: 2px 9px;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 700;
}
.pp-stock-row {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: .82rem; font-weight: 600;
  width: fit-content;
}
.pp-stock-row.in-stock { background: rgba(34,197,94,.1); color: #16a34a; }
.pp-stock-row.out-stock { background: rgba(239,68,68,.08); color: #dc2626; }

.pp-desc {
  color: var(--ink-2); line-height: 1.7; font-size: .95rem;
  border-left: 3px solid var(--amber-soft); padding-left: 14px;
  margin: 0;
}

/* Acciones */
.pp-actions { display: flex; flex-direction: column; gap: 10px; }
.pp-qty-row {
  display: flex; align-items: center;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; width: fit-content;
}
.pp-qty-btn {
  width: 40px; height: 44px; background: var(--surface); border: none;
  font-size: 1.2rem; font-weight: 700; cursor: pointer; color: var(--ink);
  transition: var(--transition);
}
.pp-qty-btn:hover { background: var(--amber); color: #fff; }
.pp-qty-input {
  width: 52px; height: 44px; border: none;
  text-align: center; background: var(--paper);
  font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: var(--ink);
}
.pp-buy-btn {
  width: 100%; height: 50px; font-size: 1rem !important;
  background: linear-gradient(135deg, var(--amber) 0%, #d97706 100%) !important;
  box-shadow: 0 4px 14px rgba(217,119,6,.3);
  letter-spacing: .02em;
}
.pp-buy-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(217,119,6,.4); }
.pp-buy-btn:active { transform: translateY(0); }
.pp-cart-btn { width: 100%; height: 46px; }
.pp-wish-btn {
  width: 100%; padding: 10px; border: 1.5px solid var(--line);
  border-radius: var(--radius-xs); background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: .82rem; font-weight: 600;
  color: var(--ink-2); transition: var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.pp-wish-btn:hover, .pp-wish-btn.active {
  background: rgba(239,68,68,.08); border-color: #ef4444; color: #ef4444;
}
.pp-wish-btn.active i { font-weight: 900; }

/* Meta grid */
.pp-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.pp-meta-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
}
.pp-meta-item i { color: var(--amber); font-size: .9rem; margin-top: 2px; }
.pp-meta-item span { font-size: .78rem; line-height: 1.4; color: var(--ink-2); }
.pp-meta-item strong { color: var(--ink); display: block; font-size: .75rem; }

/* Share */
.pp-share {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: .78rem; color: var(--ink-3);
}
.pp-share .share-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--ink-2); font-size: .85rem;
  transition: var(--transition);
}
.pp-share .share-btn:hover { background: var(--amber); color: #fff; border-color: var(--amber); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .pp-slide { min-height: 260px; }
  .pp-slide-img .pp-img-wrap { min-height: 260px; padding: 16px; }
  .pp-main-img { max-height: 260px; }
  #pp-3d-container { min-height: 280px; }
  .pp-info-col { padding: 22px 18px 36px; gap: 14px; }
  .pp-title { font-size: 1.45rem; }
  .pp-price-current { font-size: 1.6rem; }
}
@media (max-width: 640px) {
  .pp-header { padding: 10px 14px; }
  .pp-back-btn { padding: 7px 12px; font-size: .78rem; }
  .pp-slide { min-height: 220px; }
  .pp-slide-img .pp-img-wrap { min-height: 220px; padding: 12px; }
  .pp-main-img { max-height: 210px; }
  #pp-3d-container { min-height: 240px; }
  .pp-meta-grid { grid-template-columns: 1fr; }
  .pp-info-col { padding: 18px 14px 32px; gap: 12px; }
}

[data-theme="dark"] #product-page { background: var(--paper); }
[data-theme="dark"] .pp-carousel { background: #111827; }
[data-theme="dark"] .pp-slide-img .pp-img-wrap { background: #111827; }
[data-theme="dark"] .pp-meta-item { background: #1f2937; border-color: #374151; }
[data-theme="dark"] .pp-carousel-dots { background: #111827; }

/* ── Slide oculta en carrusel quickview ───────────────────────────── */
.qv-slide.hidden { display: none; }

/* ── Paleta de colores del visor 3D ───────────────────────────────── */
.qv-color-swatch {
  transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.qv-color-swatch:hover {
  transform: scale(1.15);
  border-color: #fff !important;
}

/* ── Visor 3D incrustado en quickview ─────────────────────────────── */
#qv-3d-inline {
  transition: opacity 0.2s ease;
}
#qv-3d-back-btn:hover {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.7) !important;
}
#qv-3d-loadtime {
  font-family: var(--font-mono, monospace);
  pointer-events: none;
}

/* ── Dots mejorados en carrusel ───────────────────────────────────── */
.qv-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 4px;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}
.qv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: background .2s, transform .15s;
  display: inline-block;
}
.qv-dot:hover {
  background: rgba(255,255,255,.65);
  transform: scale(1.3);
}
.qv-dot.active {
  background: var(--amber, #E07B14) !important;
  transform: scale(1.2);
}