/* =====================================================================
   THE WATCHER · Sistema de diseño
   Azul medianoche (#040A20) con acento azul acero (#465E86), sobre gris
   frío. Marcellus para títulos y Manrope para la interfaz.
   Para cambiar la paleta basta con editar las variables de :root.
   ===================================================================== */

:root {
  /* Superficies y líneas (gris frío) */
  --bg: #ECEEF2;
  --surface: #FFFFFF;
  --surface-2: #F5F6F9;
  --line: #DADEE6;
  --line-strong: #C3C9D5;

  /* Texto */
  --ink: #121A2B;
  --ink-2: #444E63;
  --ink-3: #687287;

  /* Color principal: menú lateral, botones primarios, banner */
  --dial: #040A20;        /* azul más oscuro */
  --dial-mid: #1A2747;    /* intermedio para degradados */
  --dial-2: #465E86;      /* azul más claro: hover, enlaces, brillo */
  --dial-ink: #DCE3F0;    /* texto sobre el azul oscuro */
  --dial-ink-2: #8E9DBB;  /* texto secundario sobre el azul oscuro */

  /* Acento (antes dorado): botón "Nueva venta", marcas activas, promociones */
  --brass: #465E86;
  --brass-hover: #566F99;
  --brass-ink: #FFFFFF;   /* texto sobre el acento */
  --brass-2: #2F4366;     /* texto del acento sobre fondo claro */
  --brass-soft: #E6ECF5;  /* fondo suave del acento */
  --brass-line: #CDD7E8;  /* borde suave del acento */

  /* Estados (se mantienen: verde = bien, ámbar = pendiente, rojo = problema) */
  --ok: #1B7350;   --ok-soft: #E1F0E8;
  --warn: #8F6110; --warn-soft: #FAEFD7;
  --bad: #AE2A20;  --bad-soft: #FBE5E2;
  --info: #285A88; --info-soft: #E2ECF6;
  --muted: #5A6378; --muted-soft: #ECEEF3;

  /* Gráficos (validados para daltonismo y contraste) */
  --serie-1: #3561A8;   /* ventas */
  --serie-2: #C27A2C;   /* gastos */

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --sombra: 0 1px 2px rgba(4, 10, 32, .05), 0 6px 18px -10px rgba(4, 10, 32, .2);

  --f-display: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
  --f-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-logo: 'Poppins', 'Manrope', system-ui, sans-serif;  /* tipografía del logotipo */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14.5px/1.55 var(--f-ui);
  font-feature-settings: 'tnum' 1, 'cv11' 1;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--dial-2); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 .75em; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- layout */
.app { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--dial);
  background-image: radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.06), transparent 60%);
  color: var(--dial-ink);
  display: flex; flex-direction: column;
  padding: 20px 14px 16px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
.marca { display: flex; align-items: center; gap: 12px; padding: 4px 8px 20px; color: #fff; }
.marca:hover { text-decoration: none; }
.marca-nombre { font: 400 21px/1.1 var(--f-display); letter-spacing: .02em; }
.marca-sub { display: block; font-size: 11.5px; color: var(--dial-ink-2); letter-spacing: .01em; margin-top: 2px; }

.nav-grupo { margin-top: 12px; }
.nav-grupo > span { display: block; padding: 0 10px 6px; font-size: 11.5px; color: var(--dial-ink-2); letter-spacing: .02em; }
.nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 10px; margin: 1px 0;
  border-radius: var(--r-sm);
  color: var(--dial-ink); font-weight: 500;
  position: relative;
}
.nav a:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; }
.nav a.activo { background: rgba(255,255,255,.1); color: #fff; }
.nav a.activo::before {
  content: ''; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--brass);
}
.nav a .icon { opacity: .85; }
.nav a.destacado { background: var(--brass); color: var(--brass-ink); font-weight: 700; margin-bottom: 6px; }
.nav a.destacado:hover { background: var(--brass-hover); color: var(--brass-ink); }
.nav a.destacado.activo::before { display: none; }

.sidebar-pie { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.09); }
.sidebar-pie a, .nav-boton { font-size: 13px; }
.nav-boton { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--dial-ink); font: 500 13px var(--f-ui); cursor: pointer; text-align: left; }
.nav-boton:hover { background: rgba(255,255,255,.07); color: #fff; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: 60px; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(236,238,242,.88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-izq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fecha-hoy { color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.btn-menu { display: none; }
.usuario-chip { display: flex; align-items: center; gap: 10px; }
.usuario-chip .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--dial); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; }
.usuario-chip b { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.2; }
.usuario-chip small { color: var(--ink-3); font-size: 12px; }

.content { padding: 28px 32px 56px; width: 100%; max-width: 1380px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { font: 400 31px/1.15 var(--f-display); letter-spacing: 0; }
.page-head p { color: var(--ink-2); margin: 6px 0 0; max-width: 64ch; }
.page-head .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.volver { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13px; margin-bottom: 8px; }

/* ---------------------------------------------------------------- panels */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sombra); }
.panel + .panel { margin-top: 20px; }
.grid > .panel + .panel, .grid > * + .panel { margin-top: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font-size: 15.5px; font-weight: 700; }
.panel-head p { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; }
.panel-body { padding: 20px; }
.panel-foot { padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }

.grid { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; }
.g-side { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.stack > * + * { margin-top: 20px; }

/* Lo que llega del portal se distingue con el filo del acento */
.panel-portal { border-left: 4px solid var(--brass); }

/* KPI: un solo panel dividido, no tarjetas sueltas */
.kpis { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.kpi { padding: 18px 22px 20px; border-left: 1px solid var(--line); min-width: 0; }
.kpi:first-child { border-left: 0; }
.kpi-label { color: var(--ink-2); font-size: 13px; font-weight: 500; }
.kpi-valor { font: 400 29px/1.2 var(--f-display); margin: 6px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-nota { font-size: 12.5px; color: var(--ink-3); }
.delta { font-weight: 700; }
.delta.sube { color: var(--ok); }
.delta.baja { color: var(--bad); }
.kpi.principal { background: linear-gradient(180deg, var(--brass-soft), transparent 85%); border-radius: var(--r-lg) 0 0 var(--r-lg); }

/* ---------------------------------------------------------------- tables */
.tabla-wrap { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
  text-align: left; font-weight: 600; font-size: 12.5px; color: var(--ink-3);
  padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2);
}
.tabla td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr[data-href] { cursor: pointer; }
.tabla tbody tr:hover td { background: #F8F9FB; }
.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla .min { width: 1%; white-space: nowrap; }
.tabla tfoot td { font-weight: 700; background: var(--surface-2); border-top: 1px solid var(--line-strong); }
.tabla.compacta td { padding: 9px 16px; }
.celda-titulo { font-weight: 600; color: var(--ink); }
.celda-sub { display: block; font-size: 12.5px; color: var(--ink-3); }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: -.01em; }

.miniatura { width: 44px; height: 52px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; flex: none; }
.miniatura img { width: 100%; height: 100%; object-fit: contain; padding: 3px; mix-blend-mode: multiply; }
.miniatura svg { width: 34px; height: auto; }
.con-miniatura { display: flex; align-items: center; gap: 12px; }

/* ---------------------------------------------------------------- badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-muted { background: var(--muted-soft); color: var(--muted); }
.badge-brass { background: var(--brass-soft); color: var(--brass-2); }
.badge-brass::before { display: none; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font: 600 14px/1 var(--f-ui); cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn .icon { width: 17px; height: 17px; }
.btn-primario { background: var(--dial); color: #fff; }
.btn-primario:hover { background: var(--dial-2); }
.btn-laton { background: var(--brass); color: var(--brass-ink); }
.btn-laton:hover { background: var(--brass-hover); }
.btn-sec { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-sec:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn-fantasma { background: transparent; color: var(--ink-2); }
.btn-fantasma:hover { background: rgba(4,10,32,.06); color: var(--ink); }
.btn-peligro { background: var(--surface); color: var(--bad); border-color: #E7C1BC; }
.btn-peligro:hover { background: var(--bad-soft); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-icono { width: 38px; padding: 0; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-bloque { width: 100%; }
form.inline { display: inline; }

/* ---------------------------------------------------------------- forms */
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 18px; }
.c-12 { grid-column: span 12; } .c-8 { grid-column: span 8; } .c-6 { grid-column: span 6; }
.c-4 { grid-column: span 4; } .c-3 { grid-column: span 3; }
.campo label, .etiqueta { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--ink-2); }
.campo .ayuda { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.requerido::after { content: ' *'; color: var(--brass-2); }
.input, select.input, textarea.input {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font: 400 14.5px var(--f-ui);
  transition: border-color .15s, box-shadow .15s;
}
textarea.input { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
select.input { appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23444E63' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.input:hover { border-color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--dial-2); box-shadow: 0 0 0 3px rgba(70, 94, 134, .25); }
.input[readonly] { background: var(--surface-2); }
.input-grupo { display: flex; align-items: stretch; }
.input-grupo .prefijo { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line-strong); border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-weight: 600; font-size: 13px; }
.input-grupo .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.check { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--dial); }
.form-acciones { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.filtros .campo { min-width: 150px; }
.filtros .campo label { font-size: 12px; margin-bottom: 4px; }
.filtros .input { height: 36px; font-size: 14px; }
.filtros .busqueda { flex: 1 1 220px; }
.segmentos { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.segmentos a { padding: 5px 12px; border-radius: 7px; color: var(--ink-2); font-weight: 600; font-size: 13px; white-space: nowrap; }
.segmentos a:hover { text-decoration: none; color: var(--ink); }
.segmentos a.activo { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.segmentos a small { color: var(--ink-3); font-weight: 500; margin-left: 4px; }

/* ---------------------------------------------------------------- flash */
.flash { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; border-radius: var(--r-md); margin-bottom: 20px; font-weight: 500; border: 1px solid; }
.flash .icon { margin-top: 2px; }
.flash-ok { background: var(--ok-soft); color: #145C40; border-color: #BFDDCC; }
.flash-error { background: var(--bad-soft); color: #8C2219; border-color: #EEC3BD; }
.flash button { margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; opacity: .7; padding: 0; }

/* ---------------------------------------------------------------- misc */
.dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 16px; margin: 0; }
.dl dt { color: var(--ink-3); font-size: 13px; }
.dl dd { margin: 0; font-weight: 500; }
.vacio { text-align: center; padding: 44px 20px; color: var(--ink-2); }
.vacio svg { margin: 0 auto 12px; opacity: .5; }
.vacio h3 { font-size: 15.5px; margin-bottom: 4px; color: var(--ink); }
.vacio p { color: var(--ink-3); margin-bottom: 14px; }
.texto-suave { color: var(--ink-3); }
.texto-ok { color: var(--ok); } .texto-bad { color: var(--bad); } .texto-warn { color: var(--warn); }
.fuerte { font-weight: 700; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.mt-0 { margin-top: 0 !important; }
.separador { height: 1px; background: var(--line); margin: 18px 0; border: 0; }

.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--line); }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple .sub { display: block; color: var(--ink-3); font-size: 12.5px; }

.paginacion { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
.paginacion nav { display: flex; gap: 6px; }

.totales { margin-left: auto; width: min(100%, 340px); }
.totales div { display: flex; justify-content: space-between; padding: 6px 0; }
.totales .total { border-top: 1px solid var(--line-strong); margin-top: 6px; padding-top: 10px; font: 400 22px var(--f-display); }

.aviso { padding: 12px 16px; border-radius: var(--r-md); background: var(--brass-soft); color: var(--brass-2); font-size: 13.5px; }
.aviso.info { background: var(--info-soft); color: #1E4469; }

.barra { height: 6px; border-radius: 999px; background: var(--muted-soft); overflow: hidden; }
.barra > span { display: block; height: 100%; border-radius: 999px; background: var(--serie-1); }

.chart-box { position: relative; height: 280px; }
.leyenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.leyenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 18px 26px; }
.timeline li::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: -2px; width: 1px; background: var(--line-strong); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ''; position: absolute; left: 1px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2px solid var(--dial-2); }

/* Dial en vivo (marca) */
.dial-vivo .seg { transition: transform .25s cubic-bezier(.4, 2.2, .5, 1); }
@media (prefers-reduced-motion: reduce) { .dial-vivo .seg { transition: none; } }

/* ---------------------------------------------------------------- venta */
.buscador-resultados { max-height: 360px; overflow-y: auto; }
.modelo-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 20px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.modelo-item:hover, .modelo-item:focus-visible { background: var(--surface-2); }
.modelo-item .precio { margin-left: auto; font-weight: 700; white-space: nowrap; }
.carrito-linea td { vertical-align: top; }
.carrito-linea select.input { height: 34px; font-size: 13.5px; }
.resumen-venta { position: sticky; top: 80px; }

/* ---------------------------------------------------------------- login */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); background: var(--surface); }
.login-arte {
  position: relative; overflow: hidden;
  background: var(--dial);
  background-image: radial-gradient(90% 70% at 30% 35%, var(--dial-2) 0%, var(--dial-mid) 45%, var(--dial) 100%);
  color: var(--dial-ink);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px 48px;
}
.login-arte .marca { padding: 0; }
.login-dial { align-self: center; width: min(78%, 460px); filter: drop-shadow(0 30px 60px rgba(0,0,0,.35)); }
.login-arte blockquote { margin: 0; font: 400 22px/1.4 var(--f-display); color: #EEF2F8; max-width: 30ch; }
.login-arte blockquote small { display: block; margin-top: 8px; font: 500 13px var(--f-ui); color: var(--dial-ink-2); }
.login-form { display: flex; align-items: center; justify-content: center; padding: 40px 28px; }
.login-form .caja { width: 100%; max-width: 380px; }
.login-form h1 { font: 400 32px/1.15 var(--f-display); margin-bottom: 8px; }
.login-form .sub { color: var(--ink-2); margin-bottom: 28px; }
.login-form .campo + .campo { margin-top: 16px; }
.login-form .btn { height: 44px; margin-top: 24px; }
.login-form .pie { margin-top: 28px; font-size: 13px; color: var(--ink-3); }

/* ---------------------------------------------------------------- error */
.pantalla-error { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 40px 20px; }
.pantalla-error .codigo { font: 400 72px/1 var(--f-display); color: var(--brass); }
.pantalla-error h1 { font: 400 28px var(--f-display); margin: 12px 0 8px; }
.pantalla-error p { color: var(--ink-2); max-width: 46ch; margin: 0 auto 22px; }
.pantalla-error pre { max-width: 640px; margin: 0 auto 22px; white-space: pre-wrap; text-align: left; background: var(--surface); border: 1px solid var(--line); padding: 12px; border-radius: var(--r-sm); font-size: 12.5px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .g-main, .g-side { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3) { border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .kpi.principal { border-radius: var(--r-lg) 0 0 0; }
  .resumen-venta { position: static; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 272px; z-index: 50; transform: translateX(-100%); transition: transform .25s ease; }
  .app.menu-abierto .sidebar { transform: none; box-shadow: 0 0 0 100vmax rgba(4, 10, 32, .5); }
  .btn-menu { display: inline-flex; }
  .topbar { padding: 0 16px; }
  .content { padding: 20px 16px 48px; }
  .g-2, .g-3 { grid-template-columns: minmax(0, 1fr); }
  .c-8, .c-6, .c-4, .c-3 { grid-column: span 12; }
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-arte { padding: 28px 24px; min-height: 280px; }
  .login-dial { width: 180px; margin: 12px 0; }
  .login-arte blockquote { font-size: 18px; }
  .usuario-chip div, .fecha-hoy { display: none; }
  .dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .dl dd { margin-bottom: 10px; }
  .page-head h1 { font-size: 26px; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .kpi { border-left: 0 !important; border-top: 1px solid var(--line); }
  .kpi:first-child { border-top: 0; }
  .kpi.principal { border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* ---------------------------------------------------------------- impresión */
@media print {
  .sidebar, .topbar, .no-print, .page-head .acciones { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
  .panel { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .content { padding: 0; max-width: none; }
}

/* =====================================================================
   SITIO PÚBLICO Y PORTAL DE CLIENTES
   ===================================================================== */
.pub { background: var(--surface); min-height: 100vh; display: flex; flex-direction: column; }
.pub-header { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.pub-header .envoltura { display: flex; align-items: center; gap: 24px; height: 68px; }
.pub-header .marca { padding: 0; color: var(--ink); }
.pub-header .marca-sub { color: var(--ink-3); }
.pub-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.pub-nav a.enlace { padding: 8px 12px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 600; }
.pub-nav a.enlace:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.carrito-btn { position: relative; }
.carrito-btn .contador { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--brass); color: var(--brass-ink); box-shadow: 0 0 0 2px var(--surface); font-size: 11.5px; font-weight: 800; display: grid; place-items: center; }
.envoltura { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.pub main { flex: 1; }
.pub-footer { border-top: 1px solid var(--line); background: var(--surface-2); padding: 28px 0; color: var(--ink-3); font-size: 13px; margin-top: 64px; }
.pub-footer .envoltura { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.hero { background: var(--dial); background-image: radial-gradient(70% 90% at 78% 50%, var(--dial-2) 0%, var(--dial-mid) 45%, var(--dial) 100%); color: var(--dial-ink); overflow: hidden; }
.hero .envoltura { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 32px; padding-top: 56px; padding-bottom: 56px; }
.hero h1 { font: 400 clamp(32px, 4.6vw, 54px)/1.08 var(--f-display); color: #F2F5FA; max-width: 16ch; }
.hero p { font-size: 17px; max-width: 46ch; margin: 18px 0 26px; color: var(--dial-ink); }
.hero .acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .btn-sec { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.hero .btn-sec:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.hero-dial { justify-self: center; width: min(100%, 360px); filter: drop-shadow(0 30px 50px rgba(0,0,0,.35)); }
.hero-datos { display: flex; gap: 28px; margin-top: 34px; font-size: 13px; color: var(--dial-ink-2); flex-wrap: wrap; }
.hero-datos b { display: block; font: 400 22px var(--f-display); color: #F2F5FA; }

.franja-promo { background: var(--brass-soft); border-bottom: 1px solid var(--brass-line); color: var(--brass-2); font-size: 14px; }
.franja-promo .envoltura { display: flex; gap: 10px 24px; align-items: center; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }

.catalogo-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 36px 0 22px; }
.catalogo-barra h2 { font: 400 28px var(--f-display); }
.catalogo-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.catalogo-filtros .input { height: 38px; width: auto; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 28px 22px; }
.producto { display: flex; flex-direction: column; color: inherit; }
.producto:hover { text-decoration: none; }
.producto-foto { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); background: linear-gradient(160deg, #F4F6F9, #E4E8EF); display: grid; place-items: center; overflow: hidden; }
.producto-foto img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; transition: transform .35s ease; }
.producto:hover .producto-foto img { transform: scale(1.04); }
.producto-foto svg { width: 46%; height: auto; transition: transform .35s ease; }
.producto:hover .producto-foto svg, .producto:focus-visible .producto-foto svg { transform: rotate(-4deg) scale(1.04); }
.producto-foto .badge { position: absolute; top: 12px; left: 12px; }
.producto-info { padding: 14px 2px 0; }
.producto-marca { color: var(--ink-3); font-size: 13px; }
.producto-nombre { font-weight: 700; font-size: 15.5px; margin: 2px 0 8px; color: var(--ink); }
.precio { font: 400 20px var(--f-display); color: var(--ink); }
.precio-antes { color: var(--ink-3); text-decoration: line-through; font-size: 13.5px; margin-left: 8px; }
.agotado .producto-foto { filter: grayscale(.8); opacity: .75; }

.ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; margin-top: 32px; align-items: start; }
.ficha-foto { aspect-ratio: 1; border-radius: 24px; background: linear-gradient(160deg, #F4F6F9, #E1E6EE); display: grid; place-items: center; overflow: hidden; }
.ficha-foto svg { width: 46%; height: auto; }
.ficha-foto img { width: 100%; height: 100%; object-fit: contain; padding: 7%; mix-blend-mode: multiply; }
.ficha h1 { font: 400 40px/1.1 var(--f-display); margin: 4px 0 14px; }
.ficha .precio { font-size: 32px; }
.ficha .specs { margin: 26px 0; }
.ficha-compra { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.ficha-compra .btn { height: 46px; padding: 0 22px; font-size: 15px; }

.portal-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 28px 0 24px; }
.estado-pasos { display: flex; gap: 0; margin: 4px 0 0; list-style: none; padding: 0; }
.estado-pasos li { flex: 1; position: relative; padding-top: 22px; font-size: 13px; color: var(--ink-3); text-align: center; }
.estado-pasos li::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--line-strong); }
.estado-pasos li::after { content: ''; position: absolute; top: 0; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); }
.estado-pasos li.hecho { color: var(--ink); font-weight: 600; }
.estado-pasos li.hecho::before { background: var(--dial-2); }
.estado-pasos li.hecho::after { background: var(--dial-2); border-color: var(--dial-2); }
.estado-pasos li:first-child::before { left: 50%; }
.estado-pasos li:last-child::before { right: 50%; }

.auth-caja { max-width: 440px; margin: 56px auto 0; }
.auth-caja h1 { font: 400 32px var(--f-display); margin-bottom: 6px; }
.auth-caja .sub { color: var(--ink-2); margin-bottom: 24px; }
.auth-caja form .campo + .campo { margin-top: 14px; }

@media (max-width: 900px) {
  .hero .envoltura { grid-template-columns: minmax(0, 1fr); padding-top: 36px; padding-bottom: 40px; }
  .hero-dial { width: 200px; order: -1; justify-self: start; }
  .ficha { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ficha h1 { font-size: 30px; }
  .pub-header .marca-sub { display: none; }
  .pub-nav a.enlace.ocultable { display: none; }
  .envoltura { padding: 0 16px; }
}
@media (max-width: 560px) { .ocultable-texto { display: none; } }

/* =====================================================================
   LOGOTIPO EN TEXTO (misma tipografía que el logo: Poppins)
   "THE" en vertical + "WATCHER"; el color lo hereda de donde se coloca
   ===================================================================== */
.logo { display: inline-flex; flex-direction: column; font-family: var(--f-logo); text-transform: uppercase; line-height: 1; color: inherit; }
.logo-fila { display: inline-flex; align-items: center; }
.logo-pre {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: calc(var(--logo-tam, 22px) * .43); font-weight: 500; letter-spacing: .02em;
  line-height: 1; margin-right: .12em;
}
.logo-nombre { font-size: var(--logo-tam, 22px); font-weight: 400; letter-spacing: .01em; line-height: .78; padding-top: .06em; }
.logo-lema { font-size: max(9px, calc(var(--logo-tam, 22px) * .3)); font-weight: 400; letter-spacing: .3em; margin-top: .5em; white-space: nowrap; opacity: .85; }
.marca .logo + .marca-sub, .marca .logo-fila + .marca-sub { margin-top: 6px; }
.sidebar .marca-sub { margin-top: 7px; }
.pub-header .logo-lema { color: var(--ink-3); opacity: 1; }
@media (max-width: 900px) { .pub-header .logo-lema { display: none; } }

/* Alcance de promociones */
.opciones-alcance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.opcion-alcance { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer; transition: border-color .15s, background-color .15s; }
.opcion-alcance input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--dial); flex: none; }
.opcion-alcance:hover { border-color: var(--ink-3); }
.opcion-alcance:has(input:checked) { border-color: var(--dial-2); background: var(--brass-soft); }
@media (max-width: 700px) { .opciones-alcance { grid-template-columns: minmax(0, 1fr); } }

/* Burbuja de pendientes en el menú (pedidos y reclamos del catálogo en línea) */
.nav-contador {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: #E5484D; color: #FFFFFF; font-size: 11.5px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px var(--dial);
}
.btn-whatsapp { background: #1F8F4E; color: #FFFFFF; }
.btn-whatsapp:hover { background: #18773F; }

/* Reloj apartado por otro cliente (catálogo) */
.producto.apartado .producto-foto { opacity: .85; }
.aviso-apartado { margin-top: 20px; padding: 14px 16px; border-radius: var(--r-md); background: var(--info-soft); color: #1E4469; border: 1px solid #C9DAEE; font-size: 14px; line-height: 1.5; }
.aviso-apartado b { display: block; margin-bottom: 2px; }

/* Dirección por partes (registro, perfil, clientes, carrito y venta nueva) */
.seccion-direccion { border-top: 1px solid var(--line); }
.subtitulo-form { font-family: var(--f-ui); font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 12px; letter-spacing: .01em; }
.subtitulo-form .texto-suave { font-weight: 500; }
.campo.seccion-direccion { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
.direccion-campos { gap: 12px; }
.direccion-campos optgroup { font-style: normal; font-weight: 700; color: var(--ink-3); }
.aviso-dir-anterior { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-md); background: var(--brass-soft); color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.auth-caja form .form-grid > .campo + .campo { margin-top: 0; }   /* en rejilla el espacio lo da el gap */

/* Destacados: vendedores y relojes estrella */
.titulo-seccion { display: flex; align-items: center; gap: 10px; font: 400 24px/1.2 var(--f-display); margin: 8px 0 14px; color: var(--ink); }
.titulo-seccion .icon { width: 22px; height: 22px; color: var(--dial-2); }
.podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.podio-item { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sombra); padding: 22px 18px 18px; text-align: center; }
.podio-item.puesto-1 { order: 2; padding-top: 34px; background: linear-gradient(170deg, var(--dial) 0%, var(--dial-mid) 100%); border-color: transparent; color: #fff; }
.podio-item.puesto-2 { order: 1; }
.podio-item.puesto-3 { order: 3; }
.podio-puesto { position: absolute; top: 12px; left: 14px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--surface-2); color: var(--ink-2); }
.puesto-1 .podio-puesto { background: #E9C46A; color: #3B2A00; }
.puesto-2 .podio-puesto { background: #D9DEE6; color: #2B3446; }
.puesto-3 .podio-puesto { background: #E3B48C; color: #4A2810; }
.podio-avatar { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 18px; background: var(--brass-soft); color: var(--dial); }
.puesto-1 .podio-avatar { width: 68px; height: 68px; font-size: 22px; background: rgba(255,255,255,.12); color: #fff; box-shadow: 0 0 0 3px #E9C46A; }
.podio-nombre { font-weight: 700; font-size: 15px; line-height: 1.3; }
.podio-rol { font-size: 12px; color: var(--ink-3); margin-bottom: 10px; }
.puesto-1 .podio-rol, .puesto-1 .podio-nota { color: rgba(255,255,255,.72); }
.podio-valor { font: 400 24px/1.1 var(--f-display); }
.puesto-1 .podio-valor { font-size: 28px; }
.podio-nota { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.celda-barra { display: grid; gap: 5px; }
.celda-barra .fuerte { text-align: right; }
.metas li { display: block; }
.meta-cabeza, .meta-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.meta-barra { height: 8px; margin: 8px 0; }
.meta-pie { font-size: 13px; }
.meta-input { width: 150px; }
.meta-input .input { height: 34px; }
.btn-estrella { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink-3); }
.btn-estrella:hover { border-color: #E9C46A; color: #B98A12; }
.btn-estrella.activa { background: #FDF3D6; border-color: #E9C46A; color: #B98A12; }
.btn-estrella.activa .icon, .badge-estrella .icon { fill: currentColor; }
.estrellas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.estrellas-lista li { border-right: 1px solid var(--line); }
.badge-estrella { display: inline-flex; align-items: center; gap: 4px; background: #FDF3D6; color: #8A6400; }
.badge-estrella .icon { width: 12px; height: 12px; }
@media (max-width: 900px) {
  .podio { grid-template-columns: minmax(0, 1fr); }
  .podio-item.puesto-1, .podio-item.puesto-2, .podio-item.puesto-3 { order: 0; }
}
.producto-foto .badge.esquina { left: auto; right: 12px; }
.franja-estrellas { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border-bottom: 1px solid var(--line); padding-bottom: 36px; }
.franja-estrellas .catalogo-barra h2 { display: flex; align-items: center; gap: 10px; }
.franja-estrellas .catalogo-barra h2 .icon { width: 24px; height: 24px; color: #C9A227; fill: currentColor; }
.franja-estrellas .catalogo-barra span { color: var(--ink-3); font-size: 14px; }
.franja-estrellas .badge-estrella { display: none; }
.franja-estrellas .producto-foto { box-shadow: 0 0 0 1px #EBD9A0 inset; }
.icono-estrella { width: 14px; height: 14px; color: #C9A227; fill: currentColor; vertical-align: -2px; }

/* ---------------- Galería del reloj: ficha pública ---------------- */
.ficha-media { position: sticky; top: 92px; }
.galeria { outline: none; }
.galeria-escena { position: relative; aspect-ratio: 1; border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, #F4F6F9, #E1E6EE); }
.galeria-item { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; display: grid; place-items: center; }
.galeria-item.activo { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.galeria-zoom { width: 100%; height: 100%; overflow: hidden; cursor: zoom-in; }
.galeria-zoom img { width: 100%; height: 100%; object-fit: contain; padding: 7%; mix-blend-mode: multiply; transition: transform .25s ease; user-select: none; }
.galeria-zoom.ampliado img { transform: scale(2.1); }
.galeria-zoom.ampliado { cursor: zoom-out; }
.galeria-item video { width: 100%; height: 100%; object-fit: cover; background: #0B1226; }
.galeria-embed { width: 100%; height: 100%; background: #000; }
.galeria-embed iframe { width: 100%; height: 100%; border: 0; }
.galeria-flecha, .galeria-ampliar, .galeria-cerrar { position: absolute; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.88); color: var(--dial); box-shadow: 0 2px 10px rgba(4,10,32,.14); transition: opacity .2s, transform .2s; }
.galeria-flecha:hover, .galeria-ampliar:hover { transform: scale(1.06); }
.galeria-flecha.prev { left: 14px; top: 50%; margin-top: -21px; }
.galeria-flecha.next { right: 14px; top: 50%; margin-top: -21px; }
.galeria-ampliar { right: 14px; bottom: 14px; }
.galeria-cerrar { display: none; right: 18px; top: 18px; }
.galeria-contador { position: absolute; left: 16px; bottom: 16px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(4,10,32,.6); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .03em; }
@media (hover: hover) {
  .galeria-escena .galeria-flecha { opacity: 0; }
  .galeria-escena:hover .galeria-flecha, .galeria-flecha:focus-visible { opacity: 1; }
}
.galeria-miniaturas { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.galeria-mini { position: relative; flex: none; width: 76px; height: 76px; border-radius: 14px; overflow: hidden; padding: 0; cursor: pointer;
  border: 2px solid transparent; background: linear-gradient(160deg, #F4F6F9, #E1E6EE); opacity: .72; transition: opacity .2s, border-color .2s; }
.galeria-mini:hover { opacity: 1; }
.galeria-mini.activo { opacity: 1; border-color: var(--dial-2); }
.galeria-mini img { width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.galeria-mini video { width: 100%; height: 100%; object-fit: cover; }
.mini-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(4,10,32,.28); }
.mini-play.solo { background: var(--dial); }
.mini-play .icon { width: 26px; height: 26px; }

/* Pantalla completa */
.galeria.completa { position: fixed; inset: 0; z-index: 100; background: rgba(4,10,32,.96); display: flex; flex-direction: column; padding: 24px; }
.galeria.completa .galeria-escena { flex: 1; aspect-ratio: auto; background: transparent; border-radius: 0; }
.galeria.completa .galeria-zoom img { mix-blend-mode: normal; padding: 2%; }
.galeria.completa .galeria-item video { object-fit: contain; background: transparent; }
.galeria.completa .galeria-flecha { opacity: 1; background: rgba(255,255,255,.14); color: #fff; }
.galeria.completa .galeria-ampliar { display: none; }
.galeria.completa .galeria-cerrar { display: grid; background: rgba(255,255,255,.14); color: #fff; }
.galeria.completa .galeria-miniaturas { justify-content: center; }
.galeria.completa .galeria-mini { background: rgba(255,255,255,.08); }
.galeria.completa .galeria-mini img { mix-blend-mode: normal; }
body.sin-scroll { overflow: hidden; }

/* ---------------- Tarjetas del catálogo ---------------- */
.producto-foto .foto-principal, .producto-foto .foto-alt { transition: opacity .45s ease, transform .6s ease; }
.producto-foto .foto-alt { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.producto-foto img.foto-alt { object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.producto-foto video.foto-alt { object-fit: cover; }
@media (hover: hover) {
  .producto:hover .producto-foto .foto-alt { opacity: 1; }
  .producto:hover .producto-foto:has(.foto-alt) .foto-principal { opacity: 0; }
  .producto:hover .producto-foto .foto-principal:only-of-type { transform: scale(1.05); }
}
.producto-foto { transition: box-shadow .3s ease; }
.producto:hover .producto-foto { box-shadow: 0 14px 30px -18px rgba(4,10,32,.45); }
.tarjeta-video { position: absolute; right: 12px; bottom: 12px; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(4,10,32,.7); color: #fff; transition: opacity .3s; }
.tarjeta-video .icon { width: 18px; height: 18px; }
.producto:hover .tarjeta-video { opacity: 0; }
.producto-foto .badge { z-index: 1; }

/* Aparición al hacer scroll (solo si el JavaScript está activo) */
.js-revelar .revelar { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.js-revelar .revelar.visible { opacity: 1; transform: none; }

/* ---------------- Galería: administración en el panel ---------------- */
.media-rejilla { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.media-item { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.media-item.es-portada { border-color: #E9C46A; box-shadow: 0 0 0 2px #FDF3D6; }
.media-vista { position: relative; aspect-ratio: 1; background: linear-gradient(160deg, #F4F6F9, #E1E6EE); display: grid; place-items: center; }
.media-vista img { width: 100%; height: 100%; object-fit: contain; padding: 8px; mix-blend-mode: multiply; }
.media-vista video { width: 100%; height: 100%; object-fit: cover; }
.media-enlace { display: grid; justify-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--dial); }
.media-enlace .icon { width: 34px; height: 34px; }
.media-badge { position: absolute; top: 8px; left: 8px; }
.media-tipo { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(4,10,32,.72); color: #fff; font-size: 11px; font-weight: 700; }
.media-acciones { display: flex; justify-content: center; gap: 4px; padding: 6px; border-top: 1px solid var(--line); }
.media-acciones .btn-icono { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.media-acciones .btn-icono:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.media-acciones .btn-icono.peligro:hover { color: var(--bad); }
.media-acciones .btn-icono:disabled { opacity: .3; cursor: default; }
.media-acciones .icon { width: 16px; height: 16px; }
.icon.girar { transform: rotate(180deg); }
.media-subir { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.media-zona { display: grid; gap: 10px; }
.media-zona input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.media-zona label { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 22px 16px; border: 2px dashed var(--line-strong); border-radius: 14px; cursor: pointer; color: var(--ink-2); transition: border-color .2s, background .2s; }
.media-zona label .icon { width: 26px; height: 26px; color: var(--dial-2); }
.media-zona label small { color: var(--ink-3); font-size: 12px; max-width: 46ch; }
.media-zona label [data-zona-texto] { color: var(--ok); font-weight: 600; font-size: 13px; }
.media-zona.arrastrando label, .media-zona label:hover { border-color: var(--dial-2); background: var(--brass-soft); }
.media-zona.con-archivos label { border-style: solid; border-color: var(--ok); }
.media-enlace-fila { display: flex; gap: 8px; }
@media (max-width: 900px) {
  .media-subir { grid-template-columns: minmax(0, 1fr); }
  .ficha-media { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .galeria-item, .galeria-zoom img, .producto-foto .foto-principal, .producto-foto .foto-alt { transition: none; }
}
body.sin-scroll .ficha-media { position: static; }   /* sticky crea su propio contexto y dejaría la pantalla completa debajo */
.galeria.completa .galeria-zoom img { width: auto; height: auto; max-width: 100%; max-height: 100%; background: #fff; border-radius: 14px; padding: 2.5%; object-fit: contain; }
.galeria.completa .galeria-zoom { cursor: zoom-in; }
.galeria.completa .galeria-zoom { display: flex; align-items: center; justify-content: center; }
.media-enlace-form .ayuda { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }

/* ---------------- Pie de página ---------------- */
.pie { margin-top: 80px; background: var(--dial); background-image: radial-gradient(60% 120% at 85% 0%, rgba(70,94,134,.35) 0%, transparent 60%); color: var(--dial-ink); }
.pie a { color: inherit; }
.pie-sello { border-bottom: 1px solid rgba(255,255,255,.08); }
.pie-sello .envoltura { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 22px; padding-bottom: 22px; }
.pie-sello span { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .02em; color: var(--dial-ink); }
.pie-sello .icon { width: 20px; height: 20px; color: #C9D5EA; stroke-width: 1.4; }
.pie-cuerpo { display: grid; grid-template-columns: 1.35fr 1.25fr 1fr .95fr; gap: 48px; padding-top: 56px; padding-bottom: 48px; }
.pie-marca .marca { display: inline-flex; align-items: center; gap: 14px; color: #fff; padding: 0; }
.pie-marca .logo-lema { color: var(--dial-ink-2); }
.pie-marca p { margin: 20px 0 24px; color: var(--dial-ink-2); font-size: 14px; line-height: 1.7; max-width: 34ch; }
.pie h3 { font: 400 13px/1 var(--f-ui); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.pie-nosotros h3 + p { margin-bottom: 22px; }
.pie-nosotros p { margin: 0; font: 400 16px/1.6 var(--f-display); color: var(--dial-ink); }
.pie-mas { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: #C9D5EA !important; border-bottom: 1px solid rgba(201,213,234,.35); padding-bottom: 3px; }
.pie-mas:hover { text-decoration: none; color: #fff !important; border-color: #fff; }
.pie-mas .icon { width: 14px; height: 14px; transition: transform .2s; }
.pie-mas:hover .icon { transform: translateX(3px); }
.pie-redes { display: flex; gap: 10px; }
.pie-redes a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); color: #E6ECF6; transition: background .25s, border-color .25s, transform .25s; }
.pie-redes a:hover { background: #fff; border-color: #fff; color: var(--dial); transform: translateY(-2px); text-decoration: none; }
.pie-redes .icon { width: 19px; height: 19px; stroke-width: 1.6; }
.pie-lista, .pie-enlaces { list-style: none; margin: 0; padding: 0; }
.pie-lista li + li { margin-top: 16px; }
.pie-lista a, .pie-dato { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--dial-ink); }
.pie-lista a:hover { text-decoration: none; color: #fff; }
.pie-lista .icon { width: 18px; height: 18px; margin-top: 2px; color: #C9D5EA; }
.pie-lista small { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dial-ink-2); margin-bottom: 2px; }
.pie-enlaces li + li { margin-top: 10px; }
.pie-enlaces a { font-size: 14px; color: var(--dial-ink-2); transition: color .2s, padding .2s; }
.pie-enlaces a:hover { color: #fff; text-decoration: none; padding-left: 4px; }
.pie-base { border-top: 1px solid rgba(255,255,255,.08); }
.pie-base .envoltura { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 22px; font-size: 12.5px; color: var(--dial-ink-2); }

/* Botón flotante de WhatsApp */
.wa-flotante { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 15px; border-radius: 999px;
  background: #1F9D55; color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 10px 28px -8px rgba(4,10,32,.45); transition: transform .25s, box-shadow .25s; }
.wa-flotante:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgba(4,10,32,.55); }
.wa-flotante .icon { width: 24px; height: 24px; stroke-width: 1.8; }
body.sin-scroll .wa-flotante { display: none; }

/* ---------------- Nuestra casa y servicio al cliente ---------------- */
.sobretitulo { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--dial-ink-2); margin-bottom: 14px; }
.hero-casa h1 { max-width: 14ch; }
.casa { padding-top: 64px; }
.casa h2 { font: 400 30px/1.15 var(--f-display); margin: 0 0 16px; color: var(--ink); }
.casa-pilares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.casa-pilares article { position: relative; padding: 38px 36px 36px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sombra); overflow: hidden; }
.casa-pilares article::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--dial), var(--dial-2)); }
.casa-num { display: block; font: 400 15px var(--f-display); letter-spacing: .2em; color: var(--dial-2); margin-bottom: 10px; }
.casa-pilares p { margin: 0; font-size: 16.5px; line-height: 1.75; color: var(--ink-2); }
.casa-valores { margin-top: 72px; text-align: center; }
.valores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 30px; text-align: left; }
.valores > div { padding: 26px 22px; border-radius: var(--r-lg); background: var(--surface-2); }
.valores .icon { width: 26px; height: 26px; color: var(--dial-2); stroke-width: 1.4; }
.valores h3 { font: 400 20px var(--f-display); margin: 14px 0 8px; color: var(--ink); }
.valores p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.casa-promesa { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 32px; align-items: center; padding: 40px 44px; border-radius: 24px;
  background: var(--dial); background-image: radial-gradient(70% 140% at 100% 0%, var(--dial-2) 0%, var(--dial-mid) 45%, var(--dial) 100%); color: var(--dial-ink); }
.casa-promesa h2 { color: #fff; }
.casa-promesa p { margin: 0; line-height: 1.7; max-width: 60ch; }
.casa-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.servicio { padding-top: 48px; }
.servicio-cabeza { max-width: 640px; }
.servicio-cabeza .sobretitulo { color: var(--dial-2); }
.servicio-cabeza h1 { font: 400 clamp(32px, 4vw, 44px)/1.1 var(--f-display); margin: 0 0 12px; }
.servicio-cabeza p { color: var(--ink-2); font-size: 16px; margin: 0; }
.servicio-cuerpo { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; margin-top: 40px; align-items: start; }
.servicio-indice { position: sticky; top: 92px; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.servicio-indice a { padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-3); font-size: 14px; }
.servicio-indice a:hover { color: var(--ink); border-color: var(--dial-2); text-decoration: none; }
.servicio-secciones section { padding: 6px 0 30px; margin-bottom: 30px; border-bottom: 1px solid var(--line); scroll-margin-top: 92px; }
.servicio-secciones h2 { font: 400 24px var(--f-display); margin: 0 0 12px; color: var(--ink); }
.servicio-secciones p { color: var(--ink-2); line-height: 1.75; font-size: 15.5px; max-width: 70ch; }
.servicio-contacto { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 28px 30px; border-radius: var(--r-lg); background: var(--surface-2); }
.servicio-contacto h3 { font: 400 22px var(--f-display); margin: 0 0 4px; }
.servicio-contacto p { margin: 0; color: var(--ink-3); font-size: 14px; }

@media (max-width: 1000px) {
  .pie-cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .pie-sello .envoltura { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .pie-cuerpo { grid-template-columns: minmax(0, 1fr); padding-top: 40px; }
  .casa-pilares, .valores, .casa-promesa { grid-template-columns: minmax(0, 1fr); }
  .casa-pilares article, .casa-promesa { padding: 28px 24px; }
  .servicio-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .servicio-indice { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; }
  .servicio-indice a { border-left: 0; padding-left: 0; }
  .wa-flotante span { display: none; }
  .wa-flotante { width: 54px; height: 54px; padding: 0; justify-content: center; right: 16px; bottom: 16px; }
}

/* ---------------- Mapa de ventas por departamento ---------------- */
:root { --mapa-vacio: #EEF1F6; }
.mapa-cuerpo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: 28px; padding: 20px; align-items: start; }
.mapa { position: relative; }
.mapa svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.mapa-depto { cursor: default; outline: none; }
.mapa-depto path { stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; transition: fill .2s ease, stroke .2s ease; }
.mapa-depto.vacio path { stroke: #fff; }
.mapa-depto:hover path, .mapa-depto:focus-visible path, .mapa-depto.activo path { stroke: var(--dial); stroke-width: 4; filter: brightness(1.06); }
.mapa-nombre, .mapa-valor { text-anchor: middle; pointer-events: none; fill: var(--ink); paint-order: stroke; stroke-width: 6px; stroke-linejoin: round; }
.mapa-nombre { font: 600 19px var(--f-ui); letter-spacing: .01em; }
.mapa-nombre.medio { font-size: 16px; }
.mapa-nombre.chico { font-size: 13px; }
.mapa-nombre.mini { font-size: 10px; }
.mapa-valor { font: 700 22px var(--f-ui); }
.mapa-nombre.claro, .mapa-valor.claro { fill: #fff; }
.mapa-mar { font: italic 400 22px var(--f-display); fill: #9AA6BB; letter-spacing: .12em; }
.mapa-mar.fin { text-anchor: middle; }
.mapa-rosa text { font: 600 16px var(--f-display); fill: #465E86; }
.mapa-fuente { margin: 6px 0 0; text-align: center; font-size: 11px; color: var(--ink-3); }
.mapa-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 180px; padding: 10px 12px; border-radius: 10px; background: var(--dial); color: #fff; font-size: 12.5px; box-shadow: 0 10px 24px -10px rgba(4,10,32,.5); transform: translate(-50%, calc(-100% - 12px)); }
.mapa-tip b { display: block; font-size: 13px; margin-bottom: 2px; }
.mapa-tip .v { font: 400 18px var(--f-display); }
.mapa-tip small { display: block; color: var(--dial-ink); margin-top: 2px; }
.mapa-leyenda { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--ink-3); }
.mapa-leyenda-caja { width: 14px; height: 14px; border-radius: 4px; border: 1px solid #DCE2EB; }
.mapa-escala { display: inline-flex; margin-left: 10px; border-radius: 4px; overflow: hidden; }
.mapa-escala i { width: 22px; height: 12px; }
.mapa-ranking ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.mapa-rank-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.mapa-rank-fila b { font-weight: 700; white-space: nowrap; }
.mapa-ranking .barra { margin: 5px 0 3px; }
.mapa-ranking small { color: var(--ink-3); font-size: 12px; }
.mapa-sin { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 900px) { .mapa-cuerpo { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- Certificado: verificación pública ---------------- */
.enlace-cert { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; border-radius: 6px; color: var(--dial-2); vertical-align: middle; }
.enlace-cert:hover { background: var(--brass-soft); }
.enlace-cert .icon { width: 15px; height: 15px; }
.verificar { padding-top: 48px; max-width: 920px; }
.verificar-cabeza { text-align: center; max-width: 620px; margin: 0 auto; }
.verificar-cabeza .sobretitulo { color: var(--dial-2); }
.verificar-cabeza h1 { font: 400 clamp(32px, 4vw, 44px)/1.1 var(--f-display); margin: 0 0 12px; }
.verificar-cabeza p { color: var(--ink-2); font-size: 16px; margin: 0 0 22px; }
.verificar-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.verificar-form .input { height: 48px; font-size: 16px; text-align: center; letter-spacing: .12em; text-transform: uppercase; }
.verificar-form .btn { height: 48px; padding: 0 22px; }
.verificar-resultado { margin-top: 36px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sombra); padding: 32px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 24px; align-items: center; }
.verificar-resultado.ok { border-color: #BFDDCC; background: linear-gradient(180deg, #F2F9F5, var(--surface) 55%); }
.verificar-resultado.bad { border-color: #F0C4BF; background: linear-gradient(180deg, #FDF3F2, var(--surface) 55%); }
.verificar-sello, .verificar-icono { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; }
.ok .verificar-sello { background: var(--ok); color: #fff; box-shadow: 0 0 0 8px var(--ok-soft); }
.bad .verificar-sello { background: var(--bad); color: #fff; box-shadow: 0 0 0 8px var(--bad-soft); }
.verificar-icono { background: var(--warn-soft); color: var(--warn); }
.verificar-sello .icon, .verificar-icono .icon { width: 34px; height: 34px; stroke-width: 1.8; }
.verificar-texto .sobretitulo { margin-bottom: 4px; color: var(--ink-3); }
.verificar-resultado h2 { font: 400 30px/1.15 var(--f-display); margin: 0 0 6px; }
.verificar-resultado p { margin: 0; color: var(--ink-2); }
.no-encontrado p { margin-bottom: 14px; }
.verificar-ficha { grid-column: 1 / -1; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: center; padding-top: 22px; border-top: 1px solid var(--line); }
.verificar-foto { aspect-ratio: 1; border-radius: 18px; background: linear-gradient(160deg, #F4F6F9, #E1E6EE); display: grid; place-items: center; overflow: hidden; }
.verificar-foto img { width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; }
.verificar-ficha dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.verificar-ficha dt { color: var(--ink-3); font-size: 13px; }
.verificar-ficha dd { margin: 0; font-weight: 600; }
.verificar-notas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.verificar-notas > div { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border-radius: var(--r-lg); background: var(--surface-2); }
.verificar-notas .icon { width: 22px; height: 22px; color: var(--dial-2); flex: none; margin-top: 2px; }
.verificar-notas p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.verificar-notas b { color: var(--ink); }
@media (max-width: 700px) {
  .verificar-resultado { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 24px; }
  .verificar-ficha { grid-template-columns: minmax(0, 1fr); }
  .verificar-foto { max-width: 200px; }
  .verificar-ficha dl { grid-template-columns: 120px minmax(0, 1fr); }
  .verificar-notas { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- Entrada animada del catálogo ---------------- */
body.con-entrada .pub-header, body:has([data-entrada]) .pub-header { position: fixed; left: 0; right: 0; transition: background .35s ease, border-color .35s ease, color .35s ease; }
.pub-header.sobre-oscuro { background: linear-gradient(180deg, rgba(4,10,32,.6), rgba(4,10,32,0)); border-color: transparent; backdrop-filter: none; }
.pub-header.sobre-oscuro .marca, .pub-header.sobre-oscuro .pub-nav a.enlace { color: #fff; }
.pub-header.sobre-oscuro .marca .logo-lema { color: rgba(255,255,255,.65); }
.pub-header.sobre-oscuro .pub-nav a.enlace:hover { background: rgba(255,255,255,.1); }
.pub-header.sobre-oscuro .carrito-btn { background: transparent; border: 1px solid rgba(255,255,255,.45); color: #fff; }

.entrada { --oro: #C9A961; position: relative; background: var(--dial); color: var(--dial-ink); }
.entrada-saltar { position: fixed; right: 26px; bottom: 92px; z-index: 35; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(4,10,32,.55); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); }
.entrada-saltar:hover { text-decoration: none; background: rgba(4,10,32,.8); }
.entrada-saltar .icon { width: 14px; height: 14px; transform: rotate(90deg); }
body:not(.con-entrada) .entrada-saltar { display: none; }
.entrada-saltar { transition: opacity .35s, transform .35s; }
.entrada.terminada .entrada-saltar { opacity: 0; transform: translateY(10px); pointer-events: none; }
.ent-escena { position: relative; }
.ent-fija { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ent-sobre { display: block; font-size: 12px; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; color: var(--oro); }

/* 1 · Apertura */
.ent-apertura { height: 250vh; }
.ent-apertura .ent-fija { display: grid; place-items: center; background: radial-gradient(60% 70% at 50% 45%, #22335c 0%, var(--dial-mid) 35%, var(--dial) 80%); }
.ent-esfera { position: absolute; left: 50%; top: 50%; width: min(520px, 72vw); aspect-ratio: 1; transform: translate(-50%, -50%) scale(var(--escala, .55)); will-change: transform; }
.ent-anillo { position: absolute; inset: -4%; border-radius: 50%; border: 1px solid rgba(201,169,97,.45); }
.ent-anillo.a2 { inset: -10%; border-color: rgba(201,169,97,.16); }
.ent-cara { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), inset 0 0 0 10px #0b1430, inset 0 0 0 12px rgba(201,169,97,.5); }
.ent-cara img { width: 100%; height: 100%; object-fit: cover; }
.ent-cara::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(4,10,32,.8), rgba(4,10,32,.95)); opacity: var(--oscuro, 0); }
.ent-esfera svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ent-titulo { position: relative; z-index: 2; text-align: center; padding: 0 20px; opacity: var(--ver, 0); transform: translateY(calc((1 - var(--ver, 0)) * 28px)); }
.ent-titulo h1 { font: 400 clamp(40px, 6.4vw, 84px)/1.04 var(--f-display); color: #fff; margin: 18px 0 0; text-shadow: 0 10px 40px rgba(0,0,0,.6); }
.ent-bajar { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--dial-ink-2); text-align: center; }
.ent-bajar::after { content: ''; display: block; width: 1px; height: 48px; margin: 12px auto 0; background: linear-gradient(var(--oro), transparent); animation: ent-gota 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes ent-gota { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* 2 · Reloj de la portada */
.ent-pieza { height: 340vh; }
.ent-pieza .ent-fija { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 4vw; padding: 70px 8vw 30px;
  background: radial-gradient(70% 90% at 28% 52%, #1b2b54 0%, var(--dial) 70%); }
.ent-escenario { position: relative; height: min(78vh, 760px); display: grid; place-items: center; perspective: 1400px; }
.ent-halo { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(70,94,134,.5), transparent 65%); }
.ent-reflejo { position: absolute; bottom: 2%; width: 46%; height: 26px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%); filter: blur(4px); }
[data-giro] { position: relative; height: 100%; display: grid; place-items: center;
  transform: rotateY(calc(var(--giro, 0) * 1deg)) rotateZ(calc(var(--incl, 0) * 1deg)) scale(var(--acerca, 1)); transform-style: preserve-3d; will-change: transform; }
.ent-ilustracion svg { height: 100%; width: auto; filter: drop-shadow(0 50px 50px rgba(0,0,0,.55)) drop-shadow(0 12px 14px rgba(0,0,0,.35)); }
.ent-fotos { width: 100%; }
.ent-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .45s ease; filter: drop-shadow(0 40px 50px rgba(0,0,0,.5)); }
.ent-fotos img.activa { opacity: 1; }
.ent-destello { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent calc(var(--luz, -60%) - 12%), rgba(255,255,255,.18) var(--luz, -60%), transparent calc(var(--luz, -60%) + 12%)); }
.ent-escenario video { max-height: 100%; max-width: 100%; border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.ent-ficha h2 { font: 400 clamp(36px, 4.2vw, 62px)/1.05 var(--f-display); color: #fff; margin: 14px 0 10px; }
.ent-marca { color: var(--dial-ink-2); font-size: 14px; letter-spacing: .14em; }
.ent-specs { list-style: none; margin: 34px 0 0; padding: 0; }
.ent-specs li { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.1);
  opacity: .16; transform: translateX(22px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.ent-specs li.visible { opacity: 1; transform: none; }
.ent-specs b { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; color: var(--oro); }
.ent-specs div { font: 400 clamp(19px, 1.7vw, 25px)/1.25 var(--f-display); color: #fff; }
.ent-specs span { display: block; font: 400 13.5px/1.5 var(--f-ui); color: var(--dial-ink-2); margin-top: 4px; max-width: 44ch; }
.ent-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin-top: 30px; opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.ent-cta.visible { opacity: 1; transform: none; }
.ent-precio { font: 400 30px var(--f-display); color: #fff; }
.ent-precio small { margin-left: 10px; font: 400 15px var(--f-ui); color: var(--dial-ink-2); text-decoration: line-through; }
.ent-boton { padding: 15px 28px; border-radius: 999px; background: #fff; color: var(--dial); font-weight: 700; font-size: 14px; letter-spacing: .04em; transition: background .25s, transform .25s; }
.ent-boton:hover { text-decoration: none; background: #F3E6C4; transform: translateY(-1px); }
.ent-progreso { position: absolute; right: 34px; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.ent-progreso i { display: block; width: 2px; height: 34px; background: rgba(255,255,255,.15); transition: background .4s; }
.ent-progreso i.activa { background: var(--oro); }

/* 3 · La colección */
.ent-coleccion { height: 280vh; }
.ent-coleccion .ent-fija { background: #F5F2EA; color: var(--dial); display: flex; flex-direction: column; justify-content: center; gap: 36px; }
.ent-col-cabeza { padding: 0 8vw; }
.ent-col-cabeza .ent-sobre { color: #9A7B37; }
.ent-col-cabeza h2 { font: 400 clamp(32px, 3.6vw, 50px)/1.1 var(--f-display); margin: 12px 0 6px; color: var(--dial); }
.ent-col-cabeza p { margin: 0; color: #5b6478; letter-spacing: .02em; }
.ent-pista { display: flex; gap: 30px; padding: 0 8vw; will-change: transform; }
.ent-tarjeta { flex: none; width: clamp(240px, 24vw, 330px); color: var(--dial); }
.ent-tarjeta:hover { text-decoration: none; }
.ent-tarjeta-foto { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; background: linear-gradient(160deg, #fff, #E6E9EF); display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 30px 60px -36px rgba(4,10,32,.5); transition: transform .45s ease, box-shadow .45s ease; }
.ent-tarjeta:hover .ent-tarjeta-foto { transform: translateY(-6px); box-shadow: 0 40px 70px -36px rgba(4,10,32,.6); }
.ent-tarjeta-foto img { width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; }
.ent-tarjeta-foto svg { width: 46%; height: auto; }
.ent-tarjeta-estrella { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #FDF3D6; color: #A8821F; }
.ent-tarjeta-estrella .icon { width: 15px; height: 15px; fill: currentColor; }
.ent-tarjeta-marca { display: block; margin-top: 16px; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: #6b7286; }
.ent-tarjeta-nombre { display: block; font: 400 22px/1.25 var(--f-display); margin-top: 4px; }
.ent-tarjeta-precio { display: block; margin-top: 6px; color: var(--dial-2); font-weight: 600; }
.ent-tarjeta-fin { display: grid; place-items: center; align-content: center; gap: 14px; aspect-ratio: 4 / 5; border-radius: 22px; border: 1px solid rgba(4,10,32,.18); align-self: flex-start;
  font: 400 26px/1.2 var(--f-display); text-align: center; transition: background .3s, color .3s; }
.ent-tarjeta-fin .icon { width: 26px; height: 26px; transform: rotate(90deg); }
.ent-tarjeta-fin:hover { background: var(--dial); color: #fff; }
.ent-coleccion.nativa { height: auto; }
.ent-coleccion.nativa .ent-fija { position: relative; height: auto; padding: 80px 0; }
.ent-coleccion.nativa .ent-pista { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; transform: none !important; }
.ent-coleccion.nativa .ent-tarjeta { scroll-snap-align: start; }
.ent-coleccion.nativa .ent-pista { padding-left: 20px; padding-right: 20px; scroll-padding-left: 20px; }
@media (max-width: 760px) {
  .entrada-saltar { bottom: auto; top: 76px; right: 14px; padding: 7px 12px; font-size: 11px; }
  .ent-bajar { bottom: 104px; }
}

/* Pantallas angostas: la ficha va debajo del reloj */
@media (max-width: 860px) {
  .ent-apertura { height: 200vh; }
  .ent-pieza { height: 260vh; }
  .ent-pieza .ent-fija { grid-template-columns: minmax(0, 1fr); grid-template-rows: 46% auto; gap: 8px; padding: 74px 22px 18px; align-content: start; }
  .ent-escenario { height: 100%; }
  .ent-ficha h2 { margin: 8px 0 4px; }
  .ent-specs { margin-top: 12px; }
  .ent-specs li { padding: 9px 0; grid-template-columns: 40px 1fr; }
  .ent-specs span { display: none; }
  .ent-cta { margin-top: 14px; gap: 16px; }
  .ent-progreso { display: none; }
}
/* Sin animaciones: todo visible y en su lugar */
.entrada.estatica .ent-escena { height: auto; }
.entrada.estatica .ent-fija { position: relative; height: auto; min-height: 100vh; padding-top: 90px; padding-bottom: 60px; }
.entrada.estatica .ent-esfera { position: relative; left: auto; top: auto; transform: none; margin: 0 auto 30px; }
.entrada.estatica .ent-titulo { --ver: 1; }
.entrada.estatica .ent-bajar { display: none; }
.entrada.estatica .ent-specs li, .entrada.estatica .ent-cta { opacity: 1; transform: none; }
.entrada.estatica .ent-pista { overflow-x: auto; }

/* Panel «Reloj de la portada» (Destacados) */
.portada-panel { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: center; padding: 22px 28px; margin-bottom: 28px;
  background: radial-gradient(120% 140% at 0% 50%, #13204a 0%, #040A20 62%); color: #fff; border: 0; overflow: hidden; }
.portada-vista { height: 190px; display: grid; place-items: center; }
.portada-vista img, .portada-vista svg { max-height: 190px; width: auto; object-fit: contain; filter: drop-shadow(0 14px 24px rgba(0,0,0,.45)); }
.portada-texto .sobretitulo { display: block; font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #C9A961; margin-bottom: 6px; }
.portada-texto h2 { margin: 0 0 6px; font-family: var(--serif, Georgia, serif); font-weight: 400; font-size: 26px; color: #fff; }
.portada-texto p { margin: 0 0 16px; color: rgba(255,255,255,.72); max-width: 640px; }
.portada-texto p b { color: #fff; }
.portada-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.portada-form .input { flex: 1 1 260px; max-width: 380px; width: auto; }
.portada-form .btn-primario { background: #C9A961; border-color: #C9A961; color: #040A20; }
.portada-form .btn-fantasma { color: #fff; }
@media (max-width: 640px) { .portada-panel { grid-template-columns: 1fr; text-align: center; } .portada-form { justify-content: center; } .portada-vista { height: 150px; } }


/* Compra con el reloj ya elegido (desde Relojes o Unidades) */
.aviso-pre { display: inline-block; margin: 10px 0 0; padding: 6px 12px; border-radius: 8px; background: var(--ok-soft); color: var(--ok); font-size: 13.5px; }
.aviso-pre .icon { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }

/* Promociones: aplicar a toda una marca con un clic */
.marcas-rapidas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, var(--brass-soft), transparent 70%); }
.marcas-rapidas-titulo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-2); }
.marcas-rapidas-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-marca { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.chip-marca:hover { border-color: var(--dial-2); }
.chip-marca small { font-size: 11.5px; font-weight: 700; color: var(--ink-3); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; }
.chip-check { width: 16px; height: 16px; border: 1.5px solid var(--line-strong); border-radius: 4px; display: grid; place-items: center; background: var(--surface); }
.chip-marca.completa { background: var(--dial); border-color: var(--dial); color: #fff; }
.chip-marca.completa small { background: rgba(255,255,255,.18); color: #fff; }
.chip-marca.completa .chip-check { background: #fff; border-color: #fff; }
.chip-marca.completa .chip-check::after { content: ''; width: 8px; height: 4.5px; border: 2px solid var(--dial); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.chip-marca.parcial { border-color: var(--dial-2); }
.chip-marca.parcial .chip-check::after { content: ''; width: 8px; height: 2px; background: var(--dial-2); border-radius: 1px; }
.chip-marca.completa:hover { background: var(--dial-2); border-color: var(--dial-2); color: #fff; }

/* =====================================================================
   Catálogo en azul noche: la tienda mantiene el azul de la portada
   (la vista del catálogo trae la marca <span class="catalogo-noche">)
   ===================================================================== */
body.pub:has(.catalogo-noche) {
  --bg: #040A20;
  --surface: #071029;
  --surface-2: #0B1636;
  --line: rgba(220, 227, 240, .10);
  --line-strong: rgba(220, 227, 240, .22);
  --ink: #EEF2FA;
  --ink-2: #B8C3D9;
  --ink-3: #8593B0;
  --brass-soft: rgba(70, 94, 134, .28);
  --brass-2: #C9D6EE;
  --brass-line: rgba(201, 214, 238, .18);
  background: #040A20;
  background-image: radial-gradient(60% 40% at 80% 0%, rgba(70, 94, 134, .22), transparent 70%), radial-gradient(50% 35% at 0% 60%, rgba(26, 39, 71, .55), transparent 70%);
  background-attachment: fixed;
  color: var(--ink);
  color-scheme: dark;
}
/* encabezado */
body.pub:has(.catalogo-noche) .pub-header { background: rgba(4, 10, 32, .86); border-bottom-color: rgba(220, 227, 240, .08); }
body.pub:has(.catalogo-noche) .pub-header .marca { color: #fff; }
body.pub:has(.catalogo-noche) .pub-nav a.enlace:hover { background: rgba(255, 255, 255, .08); color: #fff; }
body.pub:has(.catalogo-noche) .carrito-btn { background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: #fff; }
body.pub:has(.catalogo-noche) .carrito-btn:hover { background: rgba(255, 255, 255, .08); }
/* franjas */
body.pub:has(.catalogo-noche) .hero { border-bottom: 1px solid rgba(220, 227, 240, .06); }
body.pub:has(.catalogo-noche) .franja-promo { background: linear-gradient(90deg, rgba(201, 169, 97, .14), rgba(201, 169, 97, .04)); border-bottom-color: rgba(201, 169, 97, .22); color: #E9D9AE; }
body.pub:has(.catalogo-noche) .franja-promo b { color: #F3E6C3; }
body.pub:has(.catalogo-noche) .franja-estrellas { background: linear-gradient(180deg, rgba(70, 94, 134, .14), transparent); border-bottom-color: rgba(220, 227, 240, .08); }
body.pub:has(.catalogo-noche) .catalogo-barra h2 { color: #fff; }
body.pub:has(.catalogo-noche) .catalogo-barra h2 .icon { color: #C9A961; }
/* filtros */
body.pub:has(.catalogo-noche) select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23B8C3D9' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
}
body.pub:has(.catalogo-noche) .input::placeholder { color: #7484A3; }
body.pub:has(.catalogo-noche) .segmentos a.activo { background: var(--dial-2); color: #fff; box-shadow: none; }
body.pub:has(.catalogo-noche) .segmentos a.activo small { color: rgba(255, 255, 255, .75); }
body.pub:has(.catalogo-noche) .btn-sec { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
/* tarjetas: la foto se ilumina como en una vitrina (centro claro, bordes azul noche);
   así las fotos con fondo blanco se funden con el azul gracias a mix-blend-mode: multiply */
body.pub:has(.catalogo-noche) .producto-foto,
.ent-tarjeta-foto {
  background: radial-gradient(85% 75% at 50% 42%, #EEF1F6 0%, #D5DCE8 40%, #9CABC6 72%, #4A5D84 100%);
  box-shadow: 0 0 0 1px rgba(220, 227, 240, .08) inset;
}
body.pub:has(.catalogo-noche) .franja-estrellas .producto-foto { box-shadow: 0 0 0 1px rgba(201, 169, 97, .55) inset; }
body.pub:has(.catalogo-noche) .producto:hover .producto-foto { box-shadow: 0 0 0 1px rgba(220, 227, 240, .16) inset, 0 22px 40px -22px rgba(0, 0, 0, .8); }
body.pub:has(.catalogo-noche) .producto-nombre { color: #fff; }
body.pub:has(.catalogo-noche) .precio { color: #fff; }
body.pub:has(.catalogo-noche) .precio-antes { color: #7F8DAA; }
body.pub:has(.catalogo-noche) .texto-suave { color: var(--ink-3); }
body.pub:has(.catalogo-noche) .vacio h3 { color: #fff; }

/* entrada: la colección también en azul noche (antes crema) */
.ent-coleccion .ent-fija { background: #040A20; background-image: radial-gradient(70% 60% at 50% 100%, rgba(70, 94, 134, .35), transparent 70%); color: #fff; }
.ent-coleccion .ent-col-cabeza h2, .ent-tarjeta, .ent-tarjeta-nombre { color: #fff; }
.ent-coleccion .ent-col-cabeza p { color: rgba(220, 227, 240, .7); }
.ent-tarjeta-marca { color: rgba(220, 227, 240, .6); }
.ent-tarjeta-precio { color: #C9A961; }
.ent-tarjeta:hover .ent-tarjeta-foto { box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .9); }
.ent-tarjeta-fin { border-color: rgba(220, 227, 240, .25); color: #fff; }
.ent-tarjeta-fin:hover { background: #fff; color: #040A20; }
.ent-col-cabeza .ent-sobre { color: #C9A961; }

/* Entrada más fluida: el fundido de fotos lo maneja el scroll (sin transición propia),
   y con video la escena es más larga para que cada giro de la rueda avance poco */
.ent-fotos img { transition: none; will-change: opacity; }
.ent-pieza:has(.modo-video) { height: 520vh; }
.ent-pieza:has(.modo-fotos) { height: 420vh; }
.ent-escenario video { will-change: contents; }
.ent-coleccion { height: 340vh; }
.ent-pista { will-change: transform; }
@media (max-width: 760px) {
  .ent-pieza:has(.modo-video) { height: 380vh; }
  .ent-pieza:has(.modo-fotos) { height: 320vh; }
}
/* secuencia de cuadros del video (reemplaza al video cuando está lista) */
.ent-secuencia { max-height: 100%; max-width: 100%; border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.ent-escenario.con-secuencia video { display: none; }

/* Video al pasar el mouse por la tarjeta: aparece solo cuando ya se está reproduciendo */
.producto-foto video.foto-alt, .ent-tarjeta-foto video.foto-alt { opacity: 0; }
@media (hover: hover) {
  .producto:hover .producto-foto video.foto-alt { opacity: 0; }
  .producto:not(.video-activo):hover .producto-foto:has(video.foto-alt) .foto-principal { opacity: 1; }
}
.producto.video-activo .producto-foto video.foto-alt { opacity: 1; }
.producto.video-activo .producto-foto .foto-principal,
.producto.video-activo .producto-foto > svg { opacity: 0; }
.producto-foto > svg { transition: opacity .45s ease, transform .35s ease; }
.producto.video-activo .tarjeta-video { opacity: 0; }
/* tarjetas de la colección de la entrada */
.ent-tarjeta-foto video.foto-alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease; }
.ent-tarjeta.video-activo .ent-tarjeta-foto video.foto-alt { opacity: 1; }
.ent-tarjeta-foto img, .ent-tarjeta-foto > svg { transition: opacity .45s ease; }
.ent-tarjeta.video-activo .ent-tarjeta-foto img, .ent-tarjeta.video-activo .ent-tarjeta-foto > svg { opacity: 0; }