/* ============================================================
   CITZIA — estilos del catálogo público
   Colores SOLO vía var() de tokens.css.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--ff-head); margin: 0; font-weight: 600; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }

/* ── Barra superior ── */

/* ── Header ── */
.header {
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow);
}
.header .wrap { display: flex; align-items: center; gap: 18px; height: var(--header-h); }
.logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.logo-iso { height: 42px; width: auto; display: block; }
.logo-txt { display: flex; flex-direction: column; line-height: 1.05; }
.logo > .logo-txt > b {
  font-family: var(--ff-title); font-size: 19px; color: var(--brand);
  letter-spacing: -.01em; text-transform: uppercase; font-weight: 800;
}
.logo .bpsg-firma { margin-top: 3px; font-size: 9.5px; }

/* Firma BPSG — ver [[modulos/firma-bpsg]] */
.bpsg-firma {
  font-family: var(--ff-head); font-size: 9.5px; color: #b3b3ba;
  letter-spacing: .02em; user-select: none; white-space: nowrap;
}
.bpsg-firma b { color: #8a8a93; font-weight: 700; font-size: inherit; font-family: inherit; text-transform: none; letter-spacing: inherit; }


.buscador { flex: 1; position: relative; max-width: 520px; }
.buscador input {
  width: 100%; height: 38px; padding: 0 38px 0 14px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: var(--fs-base); font-family: inherit; background: var(--surface-2);
  transition: border-color .15s, background .15s;
}
.buscador input:focus { outline: none; border-color: var(--brand-light); background: var(--surface); }
.buscador .ico { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--text-mute); pointer-events: none; }

.header-acc { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.btn-icono {
  position: relative; background: none; border: none; padding: 8px;
  border-radius: var(--radius-sm); color: var(--text-soft); display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm);
}
.btn-icono:hover { background: var(--surface-2); color: var(--brand); }
.badge {
  position: absolute; top: 1px; right: 1px; background: var(--accent); color: var(--text-on-accent);
  font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* En el catálogo, el header también se apoya sobre la foto: la cabecera de
   categoría y la barra superior son una sola pieza continua con la portada. */
body.en-catalogo .header,
.hero-cat {
  /* La misma foto de la portada con los logos más chicos: a tamaño real el wordmark
     "Imprenta y Librería" quedaba justo detrás de los discos de categorías. */
  /* Sin `fixed`: la foto se pinta dentro de cada elemento y no se desplaza al
     scrollear. Las dos franjas empalman porque comparten escala (en `cover` manda
     el ancho) y la de abajo arranca corrida el alto de la barra. */
  background: url('../img/hero-catalogo.jpg?v=5') no-repeat;
  background-size: cover;
  border-bottom: none; box-shadow: none; position: relative;
}
body.en-catalogo .header { background-position: left top; }
.hero-cat { background-position: left calc(-1 * var(--header-h)); }
/* Cabecera y banda de rubros son transparentes: la foto la pinta el envoltorio. */
.cat-hero, body.en-catalogo .rubros { background: none; }
/* El velo vive sólo en la barra superior, y suave. */
body.en-catalogo .header::before {
  content: ''; position: absolute; inset: 0;
  background: var(--velo-hero);
}
body.en-catalogo .header .wrap { position: relative; z-index: 1; }
body.en-catalogo .logo > .logo-txt > b,
body.en-catalogo .menu-nav > button,
body.en-catalogo .menu-drop > button,
body.en-catalogo .btn-icono { color: #fff; }
body.en-catalogo .btn-icono:hover { background: rgba(255,255,255,.14); color: #fff; }
body.en-catalogo .bpsg-firma { color: rgba(255,255,255,.45); }
body.en-catalogo .bpsg-firma b { color: rgba(255,255,255,.62); }
/* la cabecera continúa la misma foto sin corte */


/* ── Barra de menú principal ───────────────────────────────
   Va entre el header y la cabecera de categoría, sobre la misma foto.
   Debajo quedan los círculos de rubro. */
.menu-nav {
  display: flex; gap: 2px; align-items: center;
  margin: 0 auto;                 /* centrado entre el logo y las acciones */
}
.menu-nav > button, .menu-drop > button {
  background: none; border: none; padding: 10px 16px;
  font-family: var(--ff-head); font-size: var(--fs-sm); font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.86);
  white-space: nowrap; transition: color .15s;
}
.menu-nav > button:hover, .menu-drop > button:hover { color: var(--accent); }

/* Desplegable de Productos */
.menu-drop { position: relative; }
.menu-drop:hover .menu-panel, .menu-panel:hover { display: block; }
.menu-prod::after { content: '⌄'; margin-left: 6px; font-size: 13px; vertical-align: 2px; }
.menu-panel {
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--surface); border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg); min-width: 250px; padding: 6px 0; z-index: 20;
}
/* Menú en cascada: cada nivel es una lista; los submenús se despliegan a la
   derecha con el hover (o con el chevron, en pantallas táctiles). Sin fondos
   grises ni negritas: el único color es el amarillo del ítem activo/hover. */
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.mp-item { position: relative; display: flex; align-items: stretch; }
.mp-btn {
  flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  text-align: left; padding: 10px 18px; background: none; border: 0; border-radius: 0;
  color: var(--text); font: inherit; font-size: var(--fs-base); font-weight: 400;
  text-transform: none; letter-spacing: 0; white-space: nowrap; cursor: pointer;
}
.has-sub > .mp-btn::after { content: '›'; color: var(--text-mute); font-size: 18px; line-height: 1; }
.mp-item:hover > .mp-btn, .mp-item.on > .mp-btn { background: var(--accent); color: var(--text-on-accent); }
.mp-item:hover > .mp-btn::after, .mp-item.on > .mp-btn::after { color: var(--text-on-accent); }
.mp-tog { display: none; width: 40px; background: none; border: 0; color: var(--text-mute); font-size: 22px; cursor: pointer; }
.mp-item > ul {
  display: none; position: absolute; left: 100%; top: -6px; min-width: 250px;
  max-height: 72vh; overflow-y: auto; background: var(--surface);
  box-shadow: var(--shadow-lg); border-radius: 0 var(--radius) var(--radius) var(--radius); padding: 6px 0;
}
@media (hover: hover) { .mp-item:hover > ul { display: block; } }
.mp-item.open > ul { display: block; }
.menu-panel .sep { height: 1px; background: var(--border); margin: 6px 14px; }

@media (max-width: 900px) {
  /* en pantallas chicas el menú pasa a una fila propia debajo del logo */
  .header .wrap { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 6px; }
  .menu-nav { order: 3; flex-basis: 100%; margin: 0; justify-content: flex-start;
              overflow-x: auto; scrollbar-width: none; }
  .menu-nav::-webkit-scrollbar { display: none; }
  .menu-nav > button, .menu-drop > button { padding: 8px 11px; font-size: var(--fs-xs); }
  /* táctil: el desplegable ocupa el ancho y los submenús se abren en acordeón */
  .menu-drop { position: static; }
  .menu-panel { left: 0; transform: none; width: 100%; max-height: 70vh; overflow-y: auto; }
  .mp-tog { display: block; }
  .mp-item { flex-wrap: wrap; }
  .mp-btn { white-space: normal; }
  .has-sub > .mp-btn::after { content: ''; }
  .mp-item > ul { position: static; flex-basis: 100%; box-shadow: none; border-radius: 0; padding: 0 0 0 16px; max-height: none; }
}

/* ── Cabecera de categoría (estilo DPMSA) ──────────────────
   Título grande y liviano sobre la imagen de la portada, con la banda de
   rubros apoyada abajo. Es la misma foto de la home, así el paso de la
   portada al catálogo se siente continuo. */
.cat-hero { padding: 54px 0 46px; }

.cat-hero .wrap { position: relative; z-index: 1; }
.cat-hero h1 {
  font-family: var(--ff-head); font-weight: 200; font-size: clamp(38px, 6vw, 82px);
  line-height: 1.02; color: #fff; text-align: center; letter-spacing: -.02em;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.cat-hero h1 b { font-weight: 500; }

/* La banda de rubros se monta sobre la cabecera, como en el sitio de referencia */
/* Debajo del hero, sin recortarlo, sobre la misma foto */
body.en-catalogo .rubros { margin-top: 0; z-index: 2; padding: 14px 0 4px; border: none; }
body.en-catalogo .rubros .wrap { position: relative; z-index: 1; }
/* La banda va sin fondo: lo único que oscurece es el disco de cada item, con el
   mismo velo transparente de la barra superior, así no se pierde con la foto. */
body.en-catalogo .rubros .rubro-ico {
  background: var(--velo-hero); border: 1px solid transparent; color: #fff;
}
body.en-catalogo .rubros .rubro-btn { color: rgba(255,255,255,.9); }
body.en-catalogo .rubros .rubro-btn:hover .rubro-ico,
body.en-catalogo .rubros .rubro-btn.on .rubro-ico { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
body.en-catalogo .rubros .rubro-btn.on, body.en-catalogo .rubros .rubro-btn:hover { color: #fff; }

@media (max-width: 700px) {
  .cat-hero { padding: 30px 0 24px; }
}

/* ── Banda de rubros: minimalista, debajo del hero.
   Círculo apenas insinuado, icono de línea fina, sin bordes ni sombras. */
.rubros { background: var(--surface); border-bottom: 1px solid var(--border); padding: 22px 0 18px; }
.rubros .wrap { display: block; }
/* Fila 1: las familias, en el tamaño de siempre. Fila 2: las categorías de esa
   familia, más chicas y a lo ancho de la página (salen del wrap de 1360px). */
.rubros-fila {
  display: flex; gap: 4px; align-items: flex-start; justify-content: center; flex-wrap: wrap;
}
/* Banda blanca bajo el hero: las subcategorías ya no se apoyan sobre la foto. */
.subrubros { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 0 10px; }
/* Dock: el disco crece desde su base (hacia arriba y a los lados), por encima de
   los vecinos, y sale del borde superior de la banda como los iconos del Dock. */
.subrubros .rubro-ico {
  position: relative; transform-origin: 50% 100%;
  transition: background .18s, color .18s, transform .09s ease-out;
  will-change: transform;
}
.subrubros, .subrubros .wrap, .subrubros .rubros-fila { overflow: visible; }
.subrubros .wrap { max-width: none; padding: 0 14px; }
.rubros-fila.chicas { gap: 2px; }
/* Nombres bien legibles sobre el blanco, y el elegido en amarillo y negro. */
.subrubros .rubro-btn { color: var(--text); }
/* Mismo amarillo que los discos grandes también al pasar el mouse: el
   `--accent-soft` que hereda de .rubro-btn se veía pálido al lado de ellos. */
.subrubros .rubro-btn:hover { color: var(--brand); }
.subrubros .rubro-btn:hover .rubro-ico { background: var(--accent); color: var(--text-on-accent); }
.subrubros .rubro-btn.on { color: var(--brand); font-weight: 700; }
.subrubros .rubro-btn.on .rubro-ico { background: var(--accent); color: var(--text-on-accent); }
.rubros-fila.chicas .rubro-btn { min-width: 0; flex: 1 1 74px; max-width: 104px; padding: 3px 2px 5px; gap: 5px; }
.rubros-fila.chicas .rubro-ico { width: 52px; height: 52px; }
.rubros-fila.chicas .rubro-lbl { font-size: 11px; line-height: 1.2; }
.rubro-btn {
  background: none; border: none; padding: 4px 8px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 112px; flex-shrink: 0; color: var(--text-soft);
  font-family: var(--ff-head); transition: color .15s;
}
.rubro-ico {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand); transition: background .18s, color .18s;
}
.rubro-ico .ico-svg { width: 62%; height: 62%; }
.rubro-btn:hover .rubro-ico { background: var(--accent-soft); }
.rubro-btn:hover { color: var(--brand); }
.rubro-btn.on .rubro-ico { background: var(--accent); color: var(--text-on-accent); }
.rubro-btn.on { color: var(--brand); }
.rubro-lbl { font-size: var(--fs-sm); line-height: 1.25; text-align: center; font-weight: 500; }
.rubro-lbl small { display: block; font-size: 10px; font-weight: 400; opacity: .6; }
.rubro-lbl b { font-weight: 600; }

@media (max-width: 700px) {
  .rubros { padding: 12px 0 10px; }
  .rubros .wrap { justify-content: flex-start; }
  .rubro-btn { min-width: 74px; padding: 4px 5px; gap: 6px; }
  .rubro-ico { width: 48px; height: 48px; }
}


/* Buscador dentro de la barra del catálogo (el header ya no lo tiene) */
/* Mismo aspecto que el buscador de la portada: campo blanco redondeado y
   botón amarillo a la derecha (acá el icono es decorativo, la búsqueda es en vivo). */
.barra-buscar { max-width: 340px; margin-left: auto; }
.barra-buscar input {
  height: 44px; font-size: var(--fs-base); padding: 0 58px 0 18px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 999px;
}
.barra-buscar input:focus { border-color: var(--accent-dark); }
.barra-buscar .ico {
  right: 0; top: 0; bottom: 0; transform: none; width: 50px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--text-on-accent);
  border-radius: 0 999px 999px 0;
}
@media (max-width: 700px) { .barra-buscar { max-width: none; flex-basis: 100%; margin-left: 0; } }

/* Breadcrumb (Inicio / Rubro / Categoría) */
.miga {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--text-mute); margin: 16px 0 4px;
}
.miga a, .miga button {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--text-soft); text-decoration: none;
}
.miga a:hover, .miga button:hover { color: var(--brand); text-decoration: underline; }
.miga .sep { opacity: .5; }
.miga .cur { color: var(--text); font-weight: 600; }

@media (max-width: 700px) {
  .rubros { padding: 12px 0 10px; }
  .rubros .wrap { justify-content: flex-start; }
  .rubro-btn { min-width: 82px; padding: 4px 6px 6px; }
  .rubro-ico { width: 56px; height: 56px; }
  .rubro-lbl { font-size: var(--fs-xs); }
}


/* ── Layout ── */
/* Sin sidebar: la grilla ocupa todo el ancho, como DPMSA.
   El filtrado por subcategoría se hace con los chips horizontales. */
.layout { display: block; padding: 18px 0 50px; }
.side { display: none; }

/* ── Iconos SVG (reemplazan a los emojis) ── */
.ico-svg { flex-shrink: 0; display: block; }
.btn-icono .ico-svg, .rubro-btn .ico-svg, .cat-padre .ico-svg { display: inline-block; vertical-align: -.2em; }
.btn-add .ico-svg, .btn .ico-svg { vertical-align: -.22em; }
.vacio .ic .ico-svg { margin: 0 auto; }
.footer .ico-svg { display: inline-block; vertical-align: -.18em; margin-right: 3px; }

/* ── Sidebar ── */
.side {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px 6px 8px; position: sticky; top: calc(var(--header-h) + 12px);
  max-height: calc(100vh - var(--header-h) - 28px); overflow-y: auto;
  position: sticky;
}
.cat-item { border-radius: var(--radius-sm); overflow: hidden; }
.cat-padre {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 10px;
  background: none; border: none; text-align: left; font-size: var(--fs-base);
  color: var(--text); font-weight: 500; border-radius: var(--radius-sm);
}
.cat-padre:hover { background: var(--accent-soft); color: var(--brand); }
.cat-padre.on { background: var(--accent); color: var(--text-on-accent); font-weight: 600; }
.cat-todo {
  display: block; width: 100%; text-align: left; background: none;
  border: none; border-bottom: 1px solid var(--border); margin: 6px 0 4px;
  padding: 8px 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.cat-todo:hover { background: var(--accent-soft); color: var(--brand); }
.cat-hija {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 7px 10px; font-size: var(--fs-sm); color: var(--text-soft); border-radius: var(--radius-sm);
}
.cat-hija:hover { background: var(--accent-soft); color: var(--brand); }
.cat-hija.on { color: var(--text-on-accent); font-weight: 600; background: var(--accent); }

/* ── Contenido ── */
/* ── HOME: la imagen es el fondo de TODA la página ──
   El fondo va en el body, no en la portada: así el header, el contenido y el
   footer se apoyan sobre la misma foto y fluyen en columna, sin superponerse. */
body:not(.en-catalogo) {
  min-height: 100dvh; display: grid; align-content: center;
  /* Nada de negro acá: la portada ya cubre la pantalla entera y Safari usa el
     fondo del body para teñir su barra de herramientas. */
  background: var(--bg); overflow-x: hidden;
}
body:not(.en-catalogo) > .header,
body:not(.en-catalogo) > .portada,
body:not(.en-catalogo) > .footer { grid-area: 1 / 1; }
body:not(.en-catalogo) > .header { position: fixed; top: 0; left: 0; right: 0; z-index: 3; }
body:not(.en-catalogo) > .footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 3; }
/* velo global para que todo el texto blanco se lea sobre la foto */
body:not(.en-catalogo) .portada::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Casi sin velo, como la cabecera del catálogo; sólo abajo oscurece un poco
     para que se lea el pie. */
  background: linear-gradient(180deg, rgba(16,16,20,0) 0%, rgba(16,16,20,.04) 45%, rgba(16,16,20,.26) 100%);
}
body:not(.en-catalogo) > .portada { position: relative; z-index: 1; }

body:not(.en-catalogo) .header,
body:not(.en-catalogo) .footer {
  background: transparent; border: none; box-shadow: none;
}
body:not(.en-catalogo) .logo b,
body:not(.en-catalogo) .menu-nav button,
body:not(.en-catalogo) .btn-icono { color: #fff; }
body:not(.en-catalogo) .logo i { color: rgba(255,255,255,.7); }
body:not(.en-catalogo) .btn-icono:hover { background: rgba(255,255,255,.14); color: #fff; }
body:not(.en-catalogo) .bpsg-firma { color: rgba(255,255,255,.45); }
body:not(.en-catalogo) .bpsg-firma b { color: rgba(255,255,255,.62); }
body:not(.en-catalogo) .footer-bot { border-top-color: rgba(255,255,255,.18); }
body:not(.en-catalogo) .footer { margin-top: 0; }
/* la portada ocupa el alto sobrante entre header y footer */
/* Proporción exacta del JPG (3072x1376): la foto se ve entera y sin recorte,
   y el contenido de encima escala con ella en cualquier pantalla. */
body:not(.en-catalogo) .portada {
  /* La portada mide exactamente la pantalla: así el contenido nunca queda
     fuera de vista. La foto la cubre entera con `cover` (sin deformar) y
     anclada a la izquierda, para no recortar nunca la franja de los logos. */
  width: 100vw; height: 100dvh;
  background: url('../img/hero-utiles.jpg?v=3') left center / cover no-repeat;
  container-type: inline-size;
}
/* Rubros y buscador van centrados horizontalmente y altos en la pantalla:
   el relleno de abajo los empuja hacia arriba dentro del centrado vertical. */
body:not(.en-catalogo) .portada-in {
  margin: 0 auto; width: 100%;
  padding: 0 1.5cqw calc(14cqw - 2cm);
}
body:not(.en-catalogo) .portada-buscar { margin-top: 2cm; }
body:not(.en-catalogo) .portada-velo { display: none; }
body:not(.en-catalogo) .portada-in { position: relative; z-index: 1; }

/* Con el velo suave, el texto blanco se apoya en una sombra para no perderse
   sobre el amarillo de la foto. */
body:not(.en-catalogo) .header,
body:not(.en-catalogo) .footer,
body:not(.en-catalogo) .portada-in,
body.en-catalogo .header,
.hero-cat { text-shadow: 0 1px 2px rgba(12,12,16,.8), 0 0 10px rgba(12,12,16,.55); }
/* En la banda de rubros, sobre la foto sin velo, texto e iconos piden más sombra. */
body.en-catalogo .rubros .rubro-lbl {
  text-shadow: 0 1px 2px rgba(12,12,16,.95), 0 0 6px rgba(12,12,16,.8), 0 0 14px rgba(12,12,16,.6);
}
body.en-catalogo .rubros .rubro-ico .ico-svg { filter: drop-shadow(0 1px 2px rgba(12,12,16,.9)) drop-shadow(0 0 4px rgba(12,12,16,.6)); }
/* Sobre el disco amarillo el icono va oscuro: la sombra ahí se ve como borroneo. */
body.en-catalogo .rubros .rubro-btn.on .rubro-ico .ico-svg,
body.en-catalogo .rubros .rubro-btn:hover .rubro-ico .ico-svg { filter: none; }
body:not(.en-catalogo) .pb-campo input,
body.en-catalogo .header input,
body.en-catalogo .rubros input { text-shadow: none; }

/* ── Portada: imagen a pantalla completa con la identidad encima ──
   Es la puerta de entrada; el catálogo arranca al hacer scroll o al elegir un rubro. */
.portada {
  position: relative; width: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* Velo para que el texto blanco se lea sobre cualquier zona de la foto */
.portada-velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,16,20,.48) 0%, rgba(16,16,20,.66) 42%, rgba(16,16,20,.86) 100%);
}
.portada-in {
  position: relative; z-index: 1;
  width: 66%; margin-left: 34%; margin-right: 0;   /* la franja izquierda es de la foto */
  padding: 6cqw 1.5cqw 5cqw; text-align: center; color: #fff;
}
.portada-nom {
  font-family: var(--ff-title); font-size: clamp(30px, 5.4vw, 52px);
  text-transform: uppercase; letter-spacing: -.02em; font-weight: 800;
  color: #fff; line-height: 1; margin-bottom: 8px;
}
.portada-rub {
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .2em;
  color: var(--accent); margin: 0 0 30px; font-weight: 600;
}
.portada-slogan {
  font-size: var(--fs-md); color: rgba(255,255,255,.9); margin: 0 auto 26px;
  max-width: 520px; line-height: 1.5;
}

.portada-marca .portada-logo {
  height: clamp(84px, 11vw, 132px); width: auto; margin: 0;
}
/* Wordmark oficial del flyer del cliente, recortado sobre transparencia */
.portada-word {
  height: clamp(66px, 9.5vw, 118px); width: auto;
}


/* Los rubros del flyer, debajo del logo: dicen de un vistazo qué se vende
   (el lockup solo dice "imprenta y librería"). */

/* Buscador destacado: "¿Qué estás buscando?" */
.portada-buscar { margin-bottom: 0; }
.portada-buscar label {
  display: block; font-family: var(--ff-head); font-size: clamp(12px, 1.3cqw, 18px);
  font-weight: 600; margin-bottom: 10px; color: #fff;
}
.pb-campo { display: flex; width: 74%; max-width: 560px; margin: 0 auto; gap: 0; }
.pb-campo input {
  flex: 1; height: 50px; padding: 0 18px; border: none;
  border-radius: 999px 0 0 999px; font-family: inherit; font-size: var(--fs-md);
  background: rgba(255,255,255,.96); color: var(--text); min-width: 0;
}
.pb-campo input:focus { outline: none; background: #fff; }
.pb-campo button {
  width: 58px; height: 50px; border: none; border-radius: 0 999px 999px 0;
  background: var(--accent); color: var(--text-on-accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .15s;
}
.pb-campo button:hover { background: var(--accent-light); }

/* Círculos de rubros sobre la foto */
.portada-rubros { display: flex; gap: 14px; justify-content: center; flex-wrap: nowrap; }
.pr-btn {
  background: none; border: none; padding: 4px; color: rgba(255,255,255,.92);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 0; flex: 0 0 auto; font-family: var(--ff-head); transition: color .15s, transform .15s;
}
.pr-ico {
  width: 14cqw; min-width: 72px; aspect-ratio: 1; height: auto; border-radius: 50%;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background .18s, border-color .18s, color .18s;
}
.pr-ico .ico-svg { width: 51%; height: 51%; }        /* 2.5× el tamaño original */
.ico-fill { stroke: none; }                          /* iconos de relleno (estilo DPMSA) */
.pr-btn:hover { transform: translateY(-2px); color: #fff; }
.pr-btn:hover .pr-ico { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.pr-lbl { font-size: clamp(10px, 1.15cqw, 15px); line-height: 1.25; font-weight: 600; }
.pr-lbl small { display: block; font-size: var(--fs-xs); opacity: .75; font-weight: 400; }

/* Flecha para bajar al catálogo */
.portada-scroll {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  color: #fff; display: flex; align-items: center; justify-content: center;
  animation: flota 2s ease-in-out infinite;
}
.portada-scroll:hover { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
@keyframes flota { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(5px); } }

/* ── Pantallas altas (celular en vertical, monitores 4:3 y 5:4) ──
   Sobre una foto apaisada, `cover` deja en pantalla casi sólo la franja de los
   logos impresos y los rubros centrados caen encima de ellos. Ahí la foto pasa
   a verse entera como banda bajo la barra superior, con los rubros y el
   buscador debajo — siempre centrados. */
@media (max-width: 700px), (max-aspect-ratio: 8/5) {
  body:not(.en-catalogo) .portada {
    /* La banda ocupa el alto de la foto, pero nunca tanto como para dejar sin
       lugar a los rubros y al buscador: se le reservan 380px hasta el pie. */
    --banda: min(calc(100vw * 1376 / 3072), calc(100dvh - var(--header-h) - 380px));
    align-items: center;
    padding: calc(var(--header-h) + var(--banda)) 0 70px;
    background-size: auto var(--banda);
    background-position: center var(--header-h);
    background-color: #14141A;
  }
  body:not(.en-catalogo) .portada::before {
    top: calc(var(--header-h) + var(--banda));
    background: rgba(16,16,20,.35);
  }
  body:not(.en-catalogo) .portada-in { padding: 0 16px; }
  body:not(.en-catalogo) .pr-ico { width: clamp(64px, 9cqw, 116px); }
}

@media (max-width: 700px) {
  .rubros-fila.chicas .rubro-btn { flex: 1 1 62px; max-width: 90px; }
  .rubros-fila.chicas .rubro-ico { width: 44px; height: 44px; }
  .rubros-fila.chicas .rubro-lbl { font-size: 10px; }
  .portada { padding: 10px 0; }
  /* La firma ya va en el pie: en pantallas chicas sobra en la cabecera. */
  .header .bpsg-firma { display: none; }
  .portada-in { padding: 26px 16px 48px; }
  .portada-logo { height: 82px; }
  .portada-slogan { font-size: var(--fs-base); margin-bottom: 20px; }
  .portada-rubros { gap: 4px; }
  .pr-ico { width: clamp(72px, 20vw, 128px); }
  .pr-lbl { font-size: 10px; }
}


.barra {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.barra h2 { font-size: var(--fs-xl); }
.btn-volver {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 7px 15px; font-size: var(--fs-sm);
  font-weight: 600; color: var(--text-soft); font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-volver:hover { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.barra .cont { color: var(--text-mute); font-size: var(--fs-sm); }
.barra .orden { margin-left: 0; }
.barra select {
  height: 34px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0 10px; font-family: inherit; font-size: var(--fs-sm); background: var(--surface); color: var(--text);
}

/* Chips de subcategoría (patrón [[card-catalogo-media]]) */
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 5px 13px; font-size: var(--fs-sm); color: var(--text-soft);
}
.chip:hover { border-color: var(--brand-light); color: var(--brand); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 500; }

/* ── Grid de productos ── */
/* Cards a la mitad de tamaño: el doble de columnas, mismo estilo limpio. */
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px 16px; }
@media (max-width: 1200px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .grid { grid-template-columns: repeat(3, 1fr); } }

.prod-card {
  background: none; border: none; border-radius: 0;
  overflow: visible; display: flex; flex-direction: column; cursor: pointer;
  text-align: center; transition: transform .18s;
}
.prod-card:hover { transform: translateY(-3px); }

/* Media: contain sobre blanco, NUNCA cover (recorta el producto) */
.prod-media {
  position: relative; aspect-ratio: 1/1; background: #fff; overflow: hidden;
  border-radius: var(--radius-sm); margin-bottom: 8px;
}
/* Los slides se superponen (absolute) y sólo el activo es visible.
   Sin esta regla se apilan en flujo normal y la card se estira. */
.prod-media .pslide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .25s;
  display: flex; align-items: center; justify-content: center; background: #fff;
}
.prod-media .pslide.active { opacity: 1; }
.prod-media .pslide img, .prod-media .pslide video {
  width: 100%; height: 100%; object-fit: contain; background: #fff;
  transition: transform .25s;
}
.prod-card:hover .pslide.active img { transform: scale(1.04); }
.ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--border-strong); font-size: 44px; background: #fff;
}
.pmedia-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px;
  border-radius: 50%; border: none; background: rgba(255,255,255,.92);
  box-shadow: 0 1px 5px rgba(0,0,0,.22); font-size: 19px; color: var(--brand);
  z-index: 4; opacity: 0; display: flex; align-items: center; justify-content: center; transition: opacity .15s;
}
.prod-card:hover .pmedia-arrow { opacity: 1; }
.pmedia-arrow.prev { left: 7px; } .pmedia-arrow.next { right: 7px; }
.pmedia-dots {
  position: absolute; bottom: 7px; left: 0; right: 0; display: flex;
  justify-content: center; gap: 5px; z-index: 4; pointer-events: none;
}
.pmedia-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(22,32,46,.26); }
.pmedia-dots span.on { background: var(--accent); }

.tag {
  position: absolute; top: 5px; left: 5px; z-index: 5; font-size: 8px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 999px; color: #fff;
}
.tag.destacado { background: var(--accent); color: var(--text-on-accent); }
.tag.servicio { background: var(--imprenta); color: var(--text-on-accent); }
.tag.sinstock { background: var(--text-mute); }

.prod-body { padding: 0 6px; display: flex; flex-direction: column; flex: 1; align-items: center; }
/* Orden visual DPMSA: nombre en bold arriba, categoría en gris debajo. */
.prod-nom {
  order: 1; font-family: var(--ff-head); font-size: var(--fs-sm); font-weight: 700;
  line-height: 1.3; color: var(--brand); margin-bottom: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.prod-cat { order: 2; font-size: 14.25px; font-weight: 400; color: #A5A5A5; margin: 0 0 6px; }
.ver-desc  { order: 3; }
.prod-desc { order: 4; }
.prod-precio { order: 5; }
.prod-stock  { order: 6; }
.btn-add     { order: 7; }
.ver-desc {
  background: none; border: none; padding: 0; font-size: var(--fs-xs); color: var(--brand-light);
  text-align: center; margin-bottom: 5px; text-decoration: underline; text-underline-offset: 2px;
}
.prod-desc {
  display: none; font-size: var(--fs-xs); color: var(--text-soft);
  line-height: 1.45; margin-bottom: 7px; padding: 7px 9px; background: var(--surface-2); border-radius: var(--radius-sm);
}
.prod-desc.open { display: block; }
.prod-precio { margin-top: auto; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: center; }
.prod-precio b { font-family: var(--ff-head); font-size: var(--fs-md); font-weight: 700; color: var(--brand); }
.prod-precio small { font-size: var(--fs-xs); color: var(--text-mute); }
.prod-stock { font-size: var(--fs-xs); margin-top: 3px; }
.prod-stock.hay { color: var(--ok); } .prod-stock.poco { color: var(--warn); } .prod-stock.no { color: var(--err); }

.btn-add {
  margin-top: 7px; width: 100%; height: 30px; border: none; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--text-on-accent); font-size: var(--fs-xs); font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .15s;
}
.btn-add:hover { background: var(--accent-dark); }
.btn-add:disabled { background: var(--border-strong); color: var(--text-mute); cursor: not-allowed; }
.btn-add.serv { background: var(--accent); color: var(--text-on-accent); }
.btn-add.serv:hover { background: var(--accent-dark); }

/* Skeleton */
.sk { background: none; border: none; border-radius: var(--radius); overflow: hidden; }
.sk-img { aspect-ratio: 1/1; background: linear-gradient(90deg, var(--surface-2) 25%, #e9ecf2 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: sh 1.3s infinite; }
.sk-l { height: 11px; margin: 9px 12px; border-radius: 4px; background: linear-gradient(90deg, var(--surface-2) 25%, #e9ecf2 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: sh 1.3s infinite; }
.sk-l.corta { width: 55%; }
@keyframes sh { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Estado vacío */
.vacio { text-align: center; padding: 60px 20px; color: var(--text-mute); grid-column: 1 / -1; }
.vacio .ic { font-size: 46px; margin-bottom: 12px; opacity: .5; }
.vacio h3 { color: var(--text-soft); margin-bottom: 6px; font-size: var(--fs-md); }

/* Paginación */
.pager { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 26px; }
.pager button {
  min-width: 34px; height: 34px; border: 1px solid var(--border-strong); background: var(--surface);
  border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--text-soft); padding: 0 9px;
}
.pager button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.pager button.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pager button:disabled { opacity: .4; cursor: not-allowed; }
.pager .ver-mas { min-width: 220px; height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 600; }
.pager .ver-mas small { font-weight: 400; color: var(--text-mute); margin-left: 4px; }
.cargando-mas { color: var(--text-mute); font-size: var(--fs-sm); padding: 10px; }

/* ── Drawer carrito ── */
.overlay {
  position: fixed; inset: 0; background: rgba(22,32,46,.45); z-index: 100;
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.overlay.on { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw;
  background: var(--bg); z-index: 101; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1); box-shadow: var(--shadow-lg);
}
.drawer.on { transform: translateX(0); }
.drawer-head {
  padding: 15px 18px; border-bottom: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; gap: 10px;
}
.drawer-head h3 { font-size: var(--fs-md); }
.drawer-head .x { margin-left: auto; background: none; border: none; font-size: 22px; color: var(--text-mute); line-height: 1; }
.drawer-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
.drawer-foot { border-top: 1px solid var(--border); background: var(--surface); padding: 14px 18px; }

.ci { display: flex; gap: 11px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 9px; }
.ci-img { width: 58px; height: 58px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ci-img img { width: 100%; height: 100%; object-fit: contain; }
.ci-info { flex: 1; min-width: 0; }
.ci-nom { font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; margin-bottom: 3px; }
.ci-pre { font-size: var(--fs-xs); color: var(--text-mute); }
.ci-sub { font-family: var(--ff-head); font-weight: 700; color: var(--brand); font-size: var(--fs-base); margin-top: 3px; }
.qty { display: flex; align-items: center; gap: 4px; margin-top: 5px; }
.qty button { width: 25px; height: 25px; border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-sm); color: var(--text-soft); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.qty button:hover { border-color: var(--brand); color: var(--brand); }
.qty input { width: 44px; height: 25px; text-align: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: var(--fs-sm); }
.qty .del { margin-left: auto; border-color: transparent; color: var(--err); font-size: 13px; }

.tot { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 11px; }
.tot span { color: var(--text-soft); font-size: var(--fs-sm); }
.tot b { font-family: var(--ff-head); font-size: var(--fs-xl); color: var(--brand); }

.btn {
  width: 100%; height: 43px; border: none; border-radius: var(--radius);
  background: var(--accent); color: var(--text-on-accent); font-size: var(--fs-md); font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--ff-head);
  transition: background .15s;
}
.btn:hover { background: var(--accent-dark); }
.btn:disabled { background: var(--border-strong); color: var(--text-mute); cursor: not-allowed; }
.btn.sec { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); font-weight: 600; }
.btn.sec:hover { background: var(--surface-2); }
.btn.wa { background: #25D366; color: #fff; }
.btn.wa:hover { background: #1DA851; }

/* ── Formularios ── */
.campo { margin-bottom: 12px; }
.campo label { display: block; font-size: var(--fs-sm); font-weight: 500; margin-bottom: 5px; color: var(--text-soft); }
.campo label .req { color: var(--err); }
.campo input, .campo select, .campo textarea {
  width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); font-family: inherit; font-size: var(--fs-base);
  background: var(--surface); color: var(--text);
}
.campo textarea { height: auto; padding: 9px 11px; resize: vertical; min-height: 72px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--brand-light); box-shadow: 0 0 0 3px var(--brand-soft); }
.campo .hint { font-size: var(--fs-xs); color: var(--text-mute); margin-top: 4px; }
.radios { display: flex; gap: 8px; }
.radio { flex: 1; position: relative; }
.radio input { position: absolute; opacity: 0; }
.radio > span {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); color: var(--text-soft); background: var(--surface);
}
.radio input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.radios.pagos { flex-wrap: wrap; }
.radios.pagos .radio { flex: 1 1 30%; min-width: 120px; }
.radios.pagos .radio > span { padding: 0 8px; white-space: nowrap; }

/* Tarjeta embebida (Card Payment Brick de Mercado Pago) */
.mp-brick { min-height: 120px; }
.mp-cargando { padding: 28px 0; text-align: center; color: var(--text-mute); font-size: var(--fs-sm); }

.msg { padding: 10px 13px; border-radius: var(--radius-sm); font-size: var(--fs-sm); margin-bottom: 12px; }
.msg.err { background: var(--err-soft); color: var(--err); border: 1px solid #F3C9C7; }
.msg.ok { background: var(--ok-soft); color: var(--ok); border: 1px solid #BFE6D6; }

/* ── Modal ── */
.modal {
  position: fixed; inset: 0; z-index: 110; display: none; align-items: center; justify-content: center; padding: 18px;
}
.modal.on { display: flex; }
/* El velo del modal reutiliza .overlay (z-index 100) pero vive DENTRO del modal:
   sin bajarlo, quedaba por encima de la tarjeta y se comía todos los clics. */
.modal > .overlay { z-index: 1; }
.modal-card {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 880px; max-height: 90vh; overflow: auto; position: relative; z-index: 2;
}
.modal-card.chico { max-width: 420px; }
.modal-x {
  position: absolute; top: 12px; right: 14px; background: var(--surface); border: 1px solid var(--border);
  width: 30px; height: 30px; border-radius: 50%; font-size: 17px; color: var(--text-soft); z-index: 3;
  display: flex; align-items: center; justify-content: center;
}

/* Detalle de producto (formato DPMSA: galería + ficha + relacionados) */
.det { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; }
.det-galeria { display: flex; gap: 10px; padding: 26px 0 26px 26px; }
.det-thumbs { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.det-thumb {
  width: 58px; height: 58px; border-radius: var(--radius-sm); overflow: hidden;
  border: 2px solid var(--border); background: #fff; padding: 0;
  display: flex; align-items: center; justify-content: center; transition: border-color .15s;
}
.det-thumb img, .det-thumb video { width: 100%; height: 100%; object-fit: contain; }
.det-thumb:hover { border-color: var(--brand-light); }
.det-thumb.on { border-color: var(--accent); }
.det-media {
  flex: 1; position: relative; aspect-ratio: 1/1; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.dslide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .22s;
  display: flex; align-items: center; justify-content: center; background: #fff;
}
.dslide.active { opacity: 1; }
.dslide img, .dslide video { width: 100%; height: 100%; object-fit: contain; }

.det-info { padding: 26px 26px 26px 22px; min-width: 0; }
.det-info h2 { font-size: var(--fs-xl); margin: 4px 0 8px; line-height: 1.2; color: var(--brand); }
.det-precio {
  font-family: var(--ff-head); font-size: 30px; font-weight: 700;
  color: var(--brand); margin: 12px 0 6px;
}
.det-precio small { font-size: 14px; color: var(--text-mute); font-family: var(--ff-body); font-weight: 400; }
.det-txt { font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.55; margin: 10px 0; }

/* Ficha técnica en tabla label/valor, como las specs de DPMSA */
.det-specs { width: 100%; border-collapse: collapse; margin: 14px 0 18px; font-size: var(--fs-sm); }
.det-specs th {
  text-align: left; padding: 7px 10px 7px 0; color: var(--text-mute); font-weight: 500;
  white-space: nowrap; width: 40%; border-bottom: 1px solid var(--border);
  text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); background: none;
}
.det-specs td { padding: 7px 0; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 500; }
.det-specs tr:last-child th, .det-specs tr:last-child td { border-bottom: none; }

.det-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.det-acciones .btn { width: auto; flex: 1; min-width: 180px; }
.det-acciones .qty { margin-top: 0; }

/* Tabla de variantes / medidas (formato DPMSA) */
.det-var { grid-column: 1 / -1; padding: 0 26px 22px; }
.det-var h3 { font-size: var(--fs-md); margin-bottom: 10px; color: var(--brand); }
.det-var h3 small { font-weight: 400; color: var(--text-mute); font-size: var(--fs-xs); margin-left: 6px; }
.det-var .tabla-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.var-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--surface); }
.var-tabla th {
  text-align: left; padding: 9px 12px; background: var(--surface-2); color: var(--text-soft);
  font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.var-tabla td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.var-tabla tr:last-child td { border-bottom: none; }
.var-tabla tbody tr:hover { background: var(--accent-soft); }
.var-tabla tr.actual { background: var(--accent-soft); }
.var-tabla tr.actual td { font-weight: 600; }
.var-tabla .cod { color: var(--text-mute); font-family: var(--ff-body); font-variant-numeric: tabular-nums; }
.var-tabla .num { text-align: right; white-space: nowrap; }
.pill-act {
  display: inline-block; background: var(--accent); color: var(--text-on-accent);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 1px;
}
.btn-var {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-soft);
  border-radius: var(--radius-sm); padding: 4px 9px; font-size: var(--fs-xs);
  display: inline-flex; align-items: center; gap: 4px; margin-left: 4px;
}
.btn-var:hover { border-color: var(--brand); color: var(--brand); background: var(--surface-2); }
.btn-var.sec { font-weight: 600; }

/* Productos relacionados */
.det-rel { grid-column: 1 / -1; padding: 0 26px 26px; }
.det-rel h3 { font-size: var(--fs-md); margin-bottom: 12px; color: var(--brand); }
.rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rel-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px; text-align: left; transition: border-color .15s, box-shadow .15s;
  display: flex; flex-direction: column; gap: 6px;
}
.rel-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.rel-img {
  aspect-ratio: 1/1; background: #fff; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; color: var(--border-strong);
  overflow: hidden;
}
.rel-img img { width: 100%; height: 100%; object-fit: contain; }
.rel-nom {
  font-size: var(--fs-xs); line-height: 1.3; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rel-precio { font-family: var(--ff-head); font-weight: 700; color: var(--brand); font-size: var(--fs-sm); margin-top: auto; }


/* ── Footer compacto: una línea con marca + datos de contacto ── */
.footer { background: var(--brand-dark); color: rgba(255,255,255,.72); margin-top: 22px; padding: 17px 0 12px; font-size: var(--fs-xs); }
.footer-linea {
  display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap;
  justify-content: space-between; padding-bottom: 11px;
}
.f-datos { display: flex; align-items: center; justify-content: center; gap: 6px 18px; flex-wrap: wrap; margin: 0 auto; }
.f-datos span:empty { display: none; }
.footer a:hover { color: #fff; }
.footer .ico-svg { display: inline-block; vertical-align: -.18em; margin-right: 3px; }
.footer-bot {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 8px; display: flex;
  justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 10px;
}
.footer .bpsg-firma { color: rgba(255,255,255,.42); }
.footer .bpsg-firma b { color: rgba(255,255,255,.62); }


/* Toast */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(90px);
  background: var(--text); color: #fff; padding: 11px 20px; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 500; z-index: 200; opacity: 0;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .28s; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 8px; max-width: 90vw;
}
.toast.on { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.err { background: var(--err); }
.toast.ok { background: var(--ok); }

/* ── Responsive ── */
@media (max-width: 1023px) {
  .layout { grid-template-columns: 1fr; }
  .side { display: none; }
  .side.movil {
    display: block; position: fixed; inset: 0 auto 0 0; width: 280px; max-width: 86vw;
    z-index: 101; border-radius: 0; max-height: 100vh; overflow-y: auto; padding: 14px 8px;
  }
}
@media (max-width: 700px) {
  .header .wrap { gap: 10px; }
  .logo b { font-size: 21px; }
  .logo i { display: none; }
  .buscador { order: 3; flex-basis: 100%; max-width: none; }
  .header { height: auto; }
  .header .wrap { height: auto; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap; }
  /* De-zoom móvil: la card cuadrada agranda todo → 4/3. SOLO dentro del @media. */
  .prod-media { aspect-ratio: 4/3; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  :root { --card-min: 150px; }
  .pmedia-arrow { opacity: .85; width: 32px; height: 32px; }
  .hero { height: clamp(180px, 46vw, 260px); }
  .hero-txt { padding: 30px 14px 14px; }
  .hero-foto { position: absolute; inset: 0; }
  .hero h1 { font-size: 21px; }
  .hero-eyebrow { margin-bottom: 5px; }
  .hero p { font-size: var(--fs-sm); }
  .hero-chips { margin-top: 12px; }
  .hero h1 { font-size: 25px; }
  .hero p { font-size: var(--fs-base); }
  /* En móvil el velo cubre parejo: el texto ocupa todo el ancho */
  .hero-foto::after { background: linear-gradient(180deg, rgba(20,20,24,.82) 0%, rgba(20,20,24,.68) 100%); }
  .hero-chips button { padding: 10px 16px; font-size: var(--fs-xs); }
  .det { grid-template-columns: 1fr; }
  .det-galeria { flex-direction: column-reverse; padding: 18px 18px 0; }
  .det-thumbs { flex-direction: row; overflow-x: auto; }
  .det-info { padding: 18px; }
  .det-rel { padding: 0 18px 18px; }
  .det-var { padding: 0 18px 16px; }
  .rel-grid { grid-template-columns: repeat(2, 1fr); }
  .det-acciones .btn { min-width: 100%; }
  .drawer { width: 100%; }
}

/* ── Entrada escalonada de la portada ──────────────────────
   Los elementos suben y aparecen uno detrás de otro al cargar, como hace
   el catálogo que el cliente tomó de referencia. */
@keyframes sube {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.portada-logo,
.portada-nom,
.portada-rub,
.portada-slogan,
.portada-buscar,
.portada-rubros .pr-btn {
  animation: sube .62s cubic-bezier(.22,.61,.36,1) backwards;
}
.portada-marca-bloque { animation-delay: .06s; }
.portada-rubros .pr-btn:nth-child(1) { animation-delay: .34s; }
.portada-rubros .pr-btn:nth-child(2) { animation-delay: .44s; }
.portada-buscar  { animation-delay: .56s; }

/* La cabecera del catálogo entra igual al cambiar de sección */
.cat-hero h1 { animation: sube .55s cubic-bezier(.22,.61,.36,1) backwards; }
.rubros .rubro-btn { animation: sube .45s cubic-bezier(.22,.61,.36,1) backwards; }
.rubros .rubro-btn:nth-child(1) { animation-delay: .04s; }
.rubros .rubro-btn:nth-child(2) { animation-delay: .08s; }
.rubros .rubro-btn:nth-child(3) { animation-delay: .12s; }
.rubros .rubro-btn:nth-child(4) { animation-delay: .16s; }
.rubros .rubro-btn:nth-child(5) { animation-delay: .20s; }
.rubros .rubro-btn:nth-child(6) { animation-delay: .24s; }
.rubros .rubro-btn:nth-child(7) { animation-delay: .28s; }
.rubros .rubro-btn:nth-child(8) { animation-delay: .32s; }

/* Respeta a quien pidió menos movimiento en el sistema */
@media (prefers-reduced-motion: reduce) {
  .portada-logo, .portada-nom, .portada-rub, .portada-slogan,
  .portada-buscar, .portada-rubros .pr-btn,
  .cat-hero h1, .rubros .rubro-btn { animation: none; }
}

/* Artículos importados del catálogo del proveedor: entran sin precio. Se agregan
   al carrito como cualquier otro y el precio se cierra por WhatsApp. */
.a-consultar { color: var(--text-soft); font-weight: 700; }


/* ── Escritorio: las subcategorías van en el sidebar, no en chips ──
   En pantallas angostas no hay lugar al costado y vuelven a ser chips. */
@media (min-width: 1024px) {
  .layout {
    display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 24px; align-items: start;
  }
  .layout.sin-side { display: block; }
  .side { display: block; }
  .layout.sin-side .side { display: none; }
  .chips { display: none; }
}

/* ── promo-: promociones en la tienda ─────────────────────────
   El precio de lista va tachado y en gris; el precio promo lleva el amarillo de
   marca como fondo con la tinta oscura encima —el mismo patrón que los botones y
   el tag Destacado: el amarillo como texto sobre blanco no se lee—. La etiqueta
   (-20%, 2x1…) va sobre la foto a la derecha, en tinta con letra amarilla como
   el logo, para no confundirse con la de Destacado que ya ocupa la izquierda. */
.promo-lista {
  color: var(--text-mute); font-weight: 500; font-size: var(--fs-sm);
  text-decoration: line-through; text-decoration-thickness: 1.5px;
}
.promo-precio {
  background: var(--accent); color: var(--text-on-accent); font-family: var(--ff-head);
  font-weight: 700; padding: 1px 9px; border-radius: 999px; white-space: nowrap;
}
.prod-precio .promo-precio { color: var(--text-on-accent); }
.tag.promo-tag { left: auto; right: 5px; background: var(--brand); color: var(--accent); }
.promo-etq {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  font-family: var(--ff-body); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--brand); color: var(--accent); padding: 2px 8px; border-radius: 999px; line-height: 1.5;
}
.promo-etq.chica { font-size: 9px; padding: 1px 6px; margin-left: 4px; }

/* Ficha: el tachado acompaña al precio grande sin competir con él. */
.det-precio .promo-lista { font-family: var(--ff-body); font-size: var(--fs-md); margin-right: 8px; }
.det-precio .promo-precio { font-size: 26px; padding: 2px 14px; }
.promo-vig { font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 400; color: var(--text-soft); margin-top: 6px; }

/* Carrito: el tachado hereda el tamaño chico de la línea de precio. */
.ci-pre .promo-lista { font-size: inherit; }
.ci-pre .promo-etq { vertical-align: baseline; }

/* Variantes y relacionados: tachado arriba, promo abajo, en poco ancho. */
.var-tabla .promo-lista, .rel-precio .promo-lista { display: block; font-size: var(--fs-xs); font-weight: 400; }
.var-tabla .promo-precio { font-size: var(--fs-sm); padding: 0 7px; }
.rel-precio .promo-precio { font-size: var(--fs-xs); padding: 0 7px; }

/* ── Botón flotante del carrito ──
   Visible sólo con algo cargado. Abajo a la derecha, sin tapar el pie en móvil. */
.cart-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 18px 0 16px;
  background: var(--accent); color: var(--text-on-accent); border: none; border-radius: 999px;
  font-family: var(--ff-head); font-size: var(--fs-sm); font-weight: 700;
  box-shadow: 0 8px 24px rgba(34,34,42,.28); cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.cart-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(34,34,42,.32); }
.cart-fab .ico-svg { display: block; }
.cart-fab-n {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cart-fab.late { animation: fab-late .45s ease-out; }
@keyframes fab-late { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }
/* Con el carrito o el modal abiertos, el flotante se retira para no superponerse
   (lo maneja body.con-panel desde abrirCarrito/abrirModal). */
body.con-panel .cart-fab { display: none; }
@media (max-width: 700px) {
  .cart-fab { right: 12px; bottom: 12px; height: 46px; padding: 0 14px; }
  .cart-fab-txt { display: none; }
}