/* Catálogo público — lo propio del catálogo (portada, filtros, grilla,
   pedido, modales, impresión). Lo común (colores, barra, pie) está en base.css.
   Las fotos de la grilla salen de Cloudinary con c_pad + b_white. */

/* ── Pedido ─────────────────────────────────────────────────────────────── */
/* Escritorio: "MI PEDIDO" en la barra. Celular: barra flotante abajo con el
   botón de WhatsApp siempre a mano (el "MI PEDIDO" de arriba se oculta).
   Las dos aparecen recién con el primer producto (actualizarBarraCarrito). */
/* Cápsula fina con borde dorado, como el buscador: va sobre el verde de la
   barra (base.css). */
.carrito-top {
  display: flex; align-items: center; gap: .5rem; flex: none; cursor: pointer;
  background: transparent; color: var(--amarillo); border: 1.5px solid var(--amarillo); border-radius: 99px;
  padding: .55rem 1.1rem; font-family: var(--fuente); font-weight: 700; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; transition: background .15s ease, color .15s ease;
}
.carrito-top:hover { background: var(--amarillo); color: var(--verde-hondo); }
.carrito-top[hidden] { display: none; }
.carrito-top svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carrito-top-n {
  background: var(--amarillo); color: var(--verde-hondo); border-radius: 99px; padding: 0 .45rem;
  font-size: .68rem; font-weight: 800; letter-spacing: 0;
}
.carrito-top:hover .carrito-top-n { background: var(--verde-hondo); color: var(--amarillo); }
.carrito-barra { display: none; }
@media (max-width: 768px) {
  .carrito-top { display: none !important; }
  .carrito-barra:not([hidden]) {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; left: .7rem; right: .7rem; bottom: calc(.8rem + env(safe-area-inset-bottom, 0px)); z-index: 40;
    background: var(--verde-hondo); border-radius: 14px; padding: .45rem .45rem .45rem .9rem;
    box-shadow: 0 8px 20px rgba(0,0,0,.3);
  }
  .carrito-barra .carrito-vaciar { display: none; }
  .carrito-barra .carrito-consultar { font-family: var(--fuente-titular); font-weight: 800; letter-spacing: .05em; font-size: 1.05rem; padding: .5rem .9rem; border-radius: 9px; }

  /* El modal del pedido pasa a ser hoja que sube desde abajo. */
  #carrito-modal { align-items: flex-end; padding: 0; }
  #carrito-modal .carrito-modal-card { max-width: none; border-radius: 22px 22px 0 0; padding: 1.2rem 1rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
  #carrito-modal .carrito-modal-card .modal-acciones { flex-direction: column-reverse; align-items: stretch; }
  #carrito-modal .carrito-modal-card .carrito-consultar { justify-content: center; font-family: var(--fuente-titular); font-weight: 800; letter-spacing: .05em; font-size: 1.15rem; padding: .8rem; border-radius: 11px; }
}

/* ── Estructura ─────────────────────────────────────────────────────────── */
/* Contenido a todo el ancho, con un margen chico a los costados (igual que la
   barra). Sin padding-top para la barra: ahora es
   sticky (base.css), ocupa su lugar en el flujo y no tapa nada. Abajo, en el
   celular, deja lugar para la barra flotante del pedido. */
.layout { margin: 0; padding: .9rem 1.4rem 3rem; }
@media (max-width: 768px) { .layout { padding: 1rem .7rem 6rem; } }

/* ── Inicio: carrusel de promos ─────────────────────────────────────────── */
/* banner.js arma una .sl por promo; la .activa es la visible. El fondo va
   cortado en diagonal (verde → verde hondo, o amarillo → amarillo claro). */
.car {
  position: relative; height: 290px; border-radius: 20px; overflow: hidden; margin-top: .3rem;
  touch-action: pan-y; user-select: none;
}
.car[hidden] { display: none; }
/* Escenario verde (opción A elegida con el usuario): una franja de un solo
   verde, el de la marca (sin diagonal, a pedido; la cápsula de la barra es
   del mismo verde), de punta a punta, detrás de la barra y del carrusel.
   Sube más allá del borde de la página (top negativo, queda recortado) y
   termina redondeada abajo, donde se le monta la bandeja de rubros. Vive en
   la portada, así que se va con ella cuando hay filtros o búsqueda. Los
   costados compensan el padding de .layout para llegar al borde. Cuelga de
   .escenario y no de #banner: banner.js convierte #banner en el .car, que
   recorta todo lo que sobresale (overflow hidden). */
.escenario { position: relative; isolation: isolate; }
.escenario::before {
  content: ''; position: absolute; z-index: -1;
  top: -300px; bottom: -64px; left: -1.4rem; right: -1.4rem;
  border-radius: 0 0 34px 34px;
  background: var(--verde);
}
.car { box-shadow: 0 0 0 1.5px rgba(255,255,255,.18), 0 22px 44px rgba(0,0,0,.3); }
@media (max-width: 768px) {
  .escenario::before { left: -.7rem; right: -.7rem; bottom: -48px; border-radius: 0 0 24px 24px; }
}
.sl {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 1.2rem;
  padding: 0 3.4rem 0 4.4rem; opacity: 0; visibility: hidden; transform: translateX(30px);
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.sl.activa { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) { .sl, .sl.activa { transition: none; transform: none; } }
.sl-verde { background: linear-gradient(115deg, var(--verde) 0 52%, var(--verde-hondo) 52% 100%); color: #fff; }
.sl-amarillo { background: linear-gradient(115deg, var(--amarillo) 0 52%, #ffbf2e 52% 100%); color: var(--verde-hondo); }
.sl-txt { flex: 1; min-width: 0; }
.sl-tag { display: inline-block; background: rgba(0,0,0,.22); color: #fff; font-weight: 800; font-size: .66rem; letter-spacing: .1em; padding: .25rem .6rem; border-radius: 4px; }
.sl-amarillo .sl-tag { background: var(--verde-hondo); }
.sl-marca { font-family: var(--fuente-titular); font-weight: 800; font-size: 1.3rem; letter-spacing: .07em; margin-top: .7rem; }
.sl-verde .sl-marca { color: var(--amarillo); }
.sl-tit { font-size: 3.4rem; margin: .1rem 0 .5rem; }
.sl-verde .sl-tit { text-shadow: 3px 3px 0 var(--verde-hondo); }
.sl-n { font-size: .82rem; font-weight: 600; opacity: .85; margin-bottom: .9rem; }
.sl-amarillo .btn-accion { background: var(--verde-hondo); color: var(--amarillo); box-shadow: 0 3px 0 #000; }
/* Lado derecho, composición "C" elegida con el usuario: el producto arriba,
   grande, y debajo una cinta roja inclinada con el número y la explicación
   ("2X1 · llevando 2 unidades", "50% · de descuento"). */
.sl-lado { flex: 0 0 44%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sl-fotos { display: flex; justify-content: center; align-items: flex-end; }
.sl-foto {
  height: 185px; width: auto; max-width: 170px; object-fit: contain; margin: 0 -12px;
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.3));
  transform: rotate(calc(-4deg + var(--k, 0) * 8deg));
}
.sl-foto.sin-recorte { background: #fff; border-radius: 14px; padding: 6px; filter: none; box-shadow: 0 12px 26px rgba(0,0,0,.25); width: 130px; height: 162px; margin: 0 4px; }
.sl-cinta {
  position: relative; z-index: 2; margin-top: -10px;
  display: flex; align-items: baseline; gap: .6rem;
  background: var(--rojo-oferta); color: #fff; border-radius: 6px;
  padding: .35rem 1.1rem .4rem .9rem; transform: rotate(-3deg);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.sl-cinta b { font-family: var(--fuente-titular); font-weight: 900; font-style: italic; font-size: 2.6rem; line-height: .9; letter-spacing: .02em; }
.sl-cinta span { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.car-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--verde-hondo); box-shadow: 0 2px 8px rgba(0,0,0,.2);
  display: flex; align-items: center; justify-content: center;
}
.car-flecha svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.car-flecha.izq { left: .5rem; } .car-flecha.der { right: .5rem; }
.car-puntos { position: absolute; bottom: .9rem; left: 4.4rem; z-index: 3; display: flex; gap: .4rem; }
.car-puntos button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 99px; background: rgba(255,255,255,.55); cursor: pointer; transition: width .25s ease; }
.car-puntos button.activo { width: 26px; background: #fff; }

@media (max-width: 768px) {
  .car { height: 300px; border-radius: 14px; }
  .sl { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; padding: 1rem 1rem 2.4rem; }
  .sl-verde { background: linear-gradient(160deg, var(--verde) 0 60%, var(--verde-hondo) 60% 100%); }
  .sl-amarillo { background: linear-gradient(160deg, var(--amarillo) 0 60%, #ffbf2e 60% 100%); }
  .sl-txt { flex: none; width: 100%; position: relative; z-index: 2; }
  .sl-tit { font-size: 2.2rem; max-width: 62%; }
  .sl-marca { font-size: 1rem; }
  .sl-lado { position: absolute; right: .5rem; bottom: 1.6rem; height: auto; }
  .sl-foto { height: 110px; max-width: 92px; margin: 0 -10px; }
  .sl-foto:nth-child(3) { display: none; }
  .sl-foto.sin-recorte { width: 80px; height: 100px; }
  .sl-cinta { margin-top: -6px; gap: .35rem; padding: .25rem .6rem .3rem .5rem; }
  .sl-cinta b { font-size: 1.5rem; }
  .sl-cinta span { font-size: .52rem; }
  .car-flecha { display: none; }
  .car-puntos { left: 1rem; bottom: .8rem; }
}


/* ── Inicio: rubros ─────────────────────────────────────────────────────── */
/* Círculos con el envase recortado (pintarRubrosPortada en catalogo.js), en
   un carrusel: flechas a los costados (escritorio), arrastre con el mouse,
   dedo en el celular y puntitos abajo (bindCarruselRubros). Los bordes se
   desvanecen para que se note que hay más. */
.inicio[hidden] { display: none; }
/* Bandeja blanca que se monta sobre el borde de abajo del escenario verde. */
.rubros-car {
  position: relative; z-index: 1; margin: 1.1rem 2.5rem 0; padding: .2rem 3rem .4rem;
  background: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(18,64,38,.12);
}
.rubros {
  display: flex; gap: .9rem; overflow-x: auto; scrollbar-width: none;
  padding: 1.2rem .4rem .5rem; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  cursor: grab;
}
.rubros::-webkit-scrollbar { display: none; }
/* Mientras se arrastra: sin snap ni scroll suave, que sigan al mouse. */
.rubros.arrastrando { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.rubros.arrastrando .rubro { pointer-events: none; }
.rub-flecha {
  position: absolute; top: calc(50% - .8rem); transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 2px solid var(--verde); color: var(--verde);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.12); transition: opacity .2s ease, background .15s ease;
}
.rub-flecha:hover:not(:disabled) { background: var(--verde); color: #fff; }
.rub-flecha:disabled { opacity: .3; cursor: default; }
.rub-flecha svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rub-flecha.izq { left: .2rem; } .rub-flecha.der { right: .2rem; }
.rub-puntos { display: flex; justify-content: center; gap: .4rem; padding-bottom: .4rem; }
.rub-puntos button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 99px; background: #cfd8cc; cursor: pointer; transition: width .25s ease, background .25s ease; }
.rub-puntos button.activo { width: 24px; background: var(--verde); }
/* Si entran todos, sin flechas ni puntitos ni bordes desvanecidos. */
.rubros-car.sin-desborde { padding: .2rem 1rem .6rem; }
.rubros-car.sin-desborde .rub-flecha, .rubros-car.sin-desborde .rub-puntos { display: none; }
.rubros-car.sin-desborde .rubros { -webkit-mask-image: none; mask-image: none; justify-content: center; cursor: default; }
@media (max-width: 768px) {
  .rubros-car, .rubros-car.sin-desborde { margin: .9rem 0 0; padding: 0 .3rem .3rem; border-radius: 16px; }
  .rub-flecha { display: none; }
}
.rubro {
  flex: none; width: 96px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: .76rem; font-weight: 700; color: var(--tinta);
}
.rubro-circ {
  width: 86px; height: 86px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fff 0%, var(--verde-suave) 100%);
  box-shadow: 0 0 0 2px var(--verde), 0 6px 14px rgba(18,64,38,.12);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.rubro:hover .rubro-circ { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--amarillo), 0 10px 20px rgba(18,64,38,.18); }
.rubro-img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0,0,0,.2)); }
.rubro-img.sin-recorte { width: 100%; height: 100%; filter: none; }
.rubro-inicial {
  font-family: var(--fuente-titular); font-weight: 900; font-style: italic; font-size: 2.4rem;
  color: var(--amarillo); background: var(--verde); width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.rubro-nombre { text-align: center; line-height: 1.15; }
@media (max-width: 768px) {
  .rubro { width: 70px; font-size: .66rem; }
  .rubro-circ { width: 60px; height: 60px; }
}

/* ── Cabecera de resultados ─────────────────────────────────────────────── */
/* Título + conteo a la izquierda, filtros a la derecha, sobre el fondo de la
   página (ya no adentro de la barra verde). scroll-margin-top: al saltar acá
   (irAResultados en catalogo.js) no queda tapada por la barra sticky. */
/* Barra blanca redondeada que encabeza la grilla: título, filtros, orden y,
   en una segunda línea, los chips de lo elegido. */
.resultados-cab {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem 1.2rem;
  flex-wrap: wrap; margin: 1.6rem 0 1rem; scroll-margin-top: 140px;
  background: #fff; border-radius: 18px; padding: .75rem .8rem .75rem 1.3rem;
  box-shadow: var(--sombra);
}
.resultados-cab .chips { flex-basis: 100%; margin: 0; }
.chips:empty { display: none; }
@media (max-width: 768px) { .resultados-cab { margin-top: 1.2rem; padding: .7rem .8rem; border-radius: 14px; } }
.resultados-tit { display: flex; align-items: baseline; gap: .7rem; min-width: 0; }
.resultados-tit h1 { font-size: 1.9rem; color: var(--verde-hondo); }
.barra-conteo { font-size: .8rem; font-weight: 500; color: var(--tinta-2); white-space: nowrap; }
.barra-filtros { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }

.sort-inline { display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; color: var(--tinta-2); }
.sort-inline select {
  padding: .45rem .8rem; font-size: .78rem; font-weight: 700; color: var(--tinta);
  font-family: inherit; background: #fff; border: 2px solid var(--linea); border-radius: 99px;
  outline: none; cursor: pointer;
}
.sort-inline select:focus { border-color: var(--verde); }

/* Menú ⋯: Imprimir y Quitar selección, que antes ocupaban lugar fijo. */
.mas { position: relative; }
.mas-btn {
  width: 36px; height: 36px; border-radius: 99px; cursor: pointer;
  background: #fff; border: 2px solid var(--linea); color: var(--tinta);
  display: flex; align-items: center; justify-content: center;
}
.mas-btn svg { width: 18px; height: 18px; fill: currentColor; }
.mas-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px;
  background: #fff; border: 1px solid var(--linea); border-radius: 12px;
  box-shadow: var(--sombra-alta); padding: .35rem; display: flex; flex-direction: column;
}
.mas-panel[hidden] { display: none; }
.mas-panel button {
  text-align: left; background: none; border: none; border-radius: 8px; cursor: pointer;
  padding: .6rem .75rem; font-size: .82rem; font-weight: 600; color: var(--tinta);
}
.mas-panel button:hover { background: var(--fondo); }
.mas-panel button[hidden] { display: none; }

/* #dd-filtros (botón "Filtros" + modal combinado con Rubros y Marca
   adentro) es sólo para mobile; #dd-rubros/#dd-marca (sueltos) son sólo
   para escritorio -- ver el bloque "Filtros combinados" más abajo. */
#dd-filtros { display: none; }
@media (max-width: 768px) {
  #dd-rubros, #dd-marca { display: none; }
  #dd-filtros { display: inline-flex; }
}

/* ── Filtros combinados (mobile) ────────────────────────────────────────── */
/* Un solo botón "Filtros" en vez de tener que abrir Rubros y Marca por
   separado -- mismo diseño de hoja modal que ya tenían, con las dos listas
   adentro como secciones. #cats-m/#marcas-m son una segunda copia de
   #cats/#marcas: pintarCategorias()/pintarFiltros() en catalogo.js pintan
   ambas copias con el mismo estado. Adentro de esta hoja nada se cierra
   solo (ni al elegir una marca, a diferencia del desplegable suelto de
   escritorio): hay dos secciones, cerrar de golpe al tocar la primera
   sería raro -- se cierra con "Ver resultados", el telón o la "✕". */
/* Tabs (Mostrar/Rubros/Marca): eligiendo una salta directo a esa sección
   sin tener que scrollear pasando por Rubros (la lista más larga) para
   llegar a Marca -- a pedido explícito. Sólo la sección con .tab-activa se
   ve; el resto queda armado en el DOM pero oculto (bindTabsFiltros() en
   catalogo.js sólo togglea clases, no vuelve a pintar nada). */
.filtros-tabs {
  display: flex; gap: .3rem; flex: none;
  padding: 0 .8rem .5rem; border-bottom: 1px solid var(--linea);
}
.filtros-tab {
  flex: 1; padding: .5rem .4rem; border: none; border-radius: 8px;
  background: none; font-family: inherit; font-size: .78rem; font-weight: 700;
  color: var(--tinta-2); cursor: pointer;
}
.filtros-tab.activa { background: var(--verde-suave); color: var(--verde); }

.filtros-sheet-body { flex: 1; overflow-y: auto; padding: .3rem .6rem; }
.filtros-sheet-seccion[data-tab-panel] { display: none; }
.filtros-sheet-seccion[data-tab-panel].tab-activa { display: block; }
.ddown-panel-filtros .cats { max-height: none; overflow: visible; }

/* ── Desplegables y pastillas de filtro ────────────────────────────────── */
/* Desplegable de rubros: el único filtro multi-selección, por eso panel
   propio con casilleros en vez de un <select>. */
.ddown { position: relative; }
.ddown-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem; border-radius: 99px; cursor: pointer;
  font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--tinta);
  background: #fff; border: 1.5px solid var(--linea);
  transition: border-color .13s ease, background .13s ease, color .13s ease;
}
.ddown-btn:hover { border-color: var(--tinta-3); }
.ddown-btn .chevron { width: 13px; height: 13px; }
.ddown-btn[aria-expanded="true"] .chevron { transform: rotate(180deg); }
/* Con rubros elegidos toma el amarillo, igual que los chips y los combos con
   selección: el mismo código de color en toda la página. */
.ddown-btn.activo { background: var(--amarillo-suave); border-color: var(--amarillo); color: var(--verde); }
.ddown-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px;
  background: var(--amarillo); color: var(--verde);
  font-size: .62rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.ddown-n[hidden] { display: none; }
.ddown-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  width: min(268px, calc(100vw - 3.5rem)); padding: .4rem;
  background: #fff; border: 1px solid var(--linea); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.ddown-panel[hidden] { display: none; }
/* Cabecera ("Rubros" + cerrar) y pie ("Listo") sólo existen para la hoja
   modal de mobile -- en el desplegable de escritorio el panel ya es chico y
   la lista alcanza sola, así que estos dos van ocultos por default. */
.ddown-panel-cab, .ddown-panel-pie { display: none; }
.ddown-backdrop { display: none; }

/* Rubros es el único filtro que en mobile pasa de dropdown a hoja modal: es
   selección múltiple y con la lista larga un desplegable angosto se hace
   incómodo de tocar. El resto de los filtros (Marca, Con foto, Ofertas)
   siguen siendo pastillas/selects nativos, sin modal. */
@media (max-width: 768px) {
  .ddown-backdrop:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 55;   /* por encima de la barra sticky (z 50) */
    background: rgba(10,20,12,.45);
  }
  .ddown-panel {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 60;
    width: auto; max-width: none; max-height: 78vh;
    display: flex; flex-direction: column; padding: 0;
    border: none; border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,.18);
  }
  .ddown-panel::before {
    content: ''; display: block; flex: none;
    width: 36px; height: 4px; border-radius: 99px;
    background: var(--linea); margin: .65rem auto .2rem;
  }
  .ddown-panel-cab {
    display: flex; align-items: center; justify-content: space-between; flex: none;
    padding: .5rem 1.1rem .7rem; border-bottom: 1px solid var(--linea);
  }
  .ddown-panel-cab h2 { font-size: 1rem; font-weight: 800; color: var(--tinta); }
  .ddown-panel-cerrar {
    width: 28px; height: 28px; border-radius: 99px; border: none;
    background: var(--fondo); display: flex; align-items: center; justify-content: center; flex: none;
  }
  .ddown-panel-cerrar svg { width: 14px; height: 14px; stroke: var(--tinta-2); fill: none; stroke-width: 2.4; stroke-linecap: round; }
  .ddown-panel .cats { flex: 1; max-height: none; padding: .4rem .6rem; }
  .ddown-panel .cat { padding: .68rem .6rem; font-size: .86rem; }
  .ddown-panel .cat-dot { width: 19px; height: 19px; }
  .ddown-panel-pie { display: flex; flex: none; padding: .8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linea); }
  .ddown-panel-listo {
    width: 100%; padding: .75rem 1rem; border-radius: 11px; border: none;
    background: var(--verde); color: #fff; font-family: inherit;
    font-size: .85rem; font-weight: 800; cursor: pointer;
  }
}

/* Combos de una sola opción: <select> nativo con la misma pastilla que el
   resto de la barra. La etiqueta va DENTRO de la opción vacía ("Familia:
   todas") porque en una barra horizontal no hay lugar para un rótulo arriba. */
.barra-select {
  padding: .5rem 2rem .5rem .85rem; border-radius: 99px; cursor: pointer;
  font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--tinta);
  background: #fff; border: 1.5px solid var(--linea); outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 13px;
  max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .13s ease, background-color .13s ease;
}
.barra-select:hover:not(:disabled) { border-color: var(--tinta-3); }
.barra-select:focus { border-color: var(--verde); }
.barra-select:disabled { color: var(--tinta-3); cursor: default; opacity: .6; }
.barra-select.activo { background-color: var(--amarillo-suave); color: var(--verde); border-color: var(--amarillo); }

/* Los dos modos de vista, como pastillas del mismo alto que el resto. El
   checkbox real queda oculto pero sigue siendo el que recibe el click (está
   dentro del <label>), así el teclado lo alcanza sin JS extra. */
.pill-check {
  display: inline-flex; align-items: center; cursor: pointer;
  padding: .5rem .85rem; border-radius: 99px;
  font-size: .8rem; font-weight: 600; color: var(--tinta-2);
  background: #fff; border: 1.5px solid var(--linea);
  transition: border-color .13s ease, background .13s ease, color .13s ease;
}
.pill-check:hover { border-color: var(--tinta-3); }
.pill-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill-check:has(input:checked) { background: var(--verde-suave); border-color: var(--verde); color: var(--verde); }
.pill-check:has(input:focus-visible) { outline: 2px solid var(--verde); outline-offset: 2px; }
.pill-oferta:has(input:checked) { background: var(--amarillo-suave); border-color: var(--amarillo); color: var(--verde-hondo); }
/* Un solo estilo para toda la barra: pastilla gris suave; elegida = verde
   hondo lleno. "Ofertas" en rojo suave (rojo lleno cuando está activa). */
.ddown-btn, .pill-check, .sort-inline select, .mas-btn {
  border: 1.5px solid transparent; color: var(--tinta); background-color: var(--fondo);
  font-weight: 700; font-size: .78rem; padding: .5rem .95rem; border-radius: 99px;
}
.ddown-btn:hover, .pill-check:hover, .sort-inline select:hover, .mas-btn:hover { border-color: var(--linea); }
.ddown-btn.activo, .pill-check:has(input:checked) { background: var(--verde-hondo); color: #fff; border-color: var(--verde-hondo); }
.ddown-btn.activo .chevron { stroke: #fff; }
.ddown-btn.activo .ddown-n { background: var(--amarillo); color: var(--verde-hondo); }
.pill-oferta { background: #fde9e4; color: var(--rojo-oferta); }
.pill-oferta:hover { border-color: #f6c2b6; }
.pill-oferta:has(input:checked) { background: var(--rojo-oferta); border-color: var(--rojo-oferta); color: #fff; }
.mas-btn { padding: 0; }
/* Chevron compartido por la barra de filtros y el desplegable de rubros. */
.chevron {
  width: 16px; height: 16px; stroke: var(--tinta-3); fill: none;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease; flex: none;
}

/* Lista de rubros dentro del desplegable -- misma marca que genera
   pintarCategorias() en catalogo.js, sólo cambia el vestido. */
.cats {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px;
  max-height: 320px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--linea) transparent;
}
.cats::-webkit-scrollbar { width: 6px; }
.cats::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 99px; }
.cats::-webkit-scrollbar-track { background: transparent; }

.cat {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .42rem .5rem; border: none; background: none; border-radius: 7px;
  cursor: pointer; text-align: left; color: var(--tinta-2);
  font-size: .84rem; font-weight: 500; font-family: inherit;
  transition: background .13s ease, color .13s ease;
}
.cat:hover { background: var(--fondo); color: var(--tinta); }
/* .cat-dot venía oculto de la versión en columna; acá se reusa como el
   CASILLERO. Es lo que hace evidente que los rubros se marcan de a varios --
   antes había que descubrirlo clickeando. */
.cat-dot {
  flex: none; width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid var(--linea); background-color: #fff;
  background-repeat: no-repeat; background-position: center; background-size: 10px;
  transition: background-color .13s ease, border-color .13s ease;
}
.cat.activa { color: var(--verde); font-weight: 700; }
.cat.activa .cat-dot {
  background-color: var(--verde); border-color: var(--verde);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E");
}
.cat-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-num {
  font-size: .66rem; font-weight: 600; color: var(--tinta-3); flex: none;
  font-variant-numeric: tabular-nums;
}
.cat.activa .cat-num { color: var(--verde-claro); }

/* ── Chips de lo elegido ───────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  font-size: .78rem; font-weight: 600; padding: .32em .85em; border-radius: 99px;
  background: var(--amarillo-suave); color: var(--verde);
  border: 1px solid var(--amarillo);
  font-family: inherit; transition: filter .13s ease;
}
.chip:hover { filter: brightness(.96); }
.chip b { opacity: .55; font-weight: 800; }

/* ── Grilla de productos ────────────────────────────────────────────────── */
/* Tarjetas de ancho parecido en cualquier pantalla: en las anchas entran más
   por fila en vez de estirarse. */
.grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* Tarjeta blanca sobre el fondo gris verdoso. La foto queda sobre blanco
   (Cloudinary c_pad,b_white) adentro de su propio marco 4:5. */
.card {
  background: var(--card); border-radius: var(--radio); padding: .65rem;
  display: flex; flex-direction: column; position: relative;
  box-shadow: var(--sombra); transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.card.en-pedido { box-shadow: 0 0 0 2px var(--amarillo), var(--sombra); }
/* En oferta: el pie de la tarjeta se entibia con el amarillo suave. */
.card-conpromo { background: linear-gradient(180deg, #fff 0%, #fff 72%, var(--amarillo-suave) 100%); }
.card-img { position: relative; aspect-ratio: 4 / 5; background: #fff; border-radius: 10px; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Estrella de descuento: 24 puntas, roja, inclinada (reemplaza al sello
   redondo amarillo). El texto lo arma numeroOferta() en catalogo.js. */
.card-estrella {
  position: absolute; top: .35rem; right: .35rem; z-index: 2;
  width: 62px; height: 62px; transform: rotate(-8deg);
  background: var(--rojo-oferta); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--fuente-titular); line-height: .9;
  clip-path: polygon(50% 0,61% 12%,76% 6%,79% 21%,94% 24%,89% 39%,100% 50%,89% 61%,94% 76%,79% 79%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,21% 79%,6% 76%,11% 61%,0 50%,11% 39%,6% 24%,21% 21%,24% 6%,39% 12%);
}
.card-estrella b { font-size: 1.3rem; font-weight: 900; font-style: italic; }
.card-estrella small { font-size: .55rem; font-weight: 800; letter-spacing: .03em; }

.card-body { display: flex; flex-direction: column; gap: .2rem; flex: 1; padding: .55rem .1rem 0; }
.card-marca {
  font-family: var(--fuente-titular); font-weight: 800; font-size: .98rem; letter-spacing: .06em;
  color: var(--verde); text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-nombre {
  font-size: .82rem; font-weight: 600; line-height: 1.3; color: var(--tinta);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.3em);
}
.card-espec {
  font-size: .72rem; color: var(--tinta-2); line-height: 1.35; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.card-rubro, .card-cab, .card-cat, .card-promo,
.card-tags, .tag, .card-visual, .card-inicial { display: none; }

/* Única acción de la ficha: botón ancho al pie. margin-top:auto lo empuja
   abajo (todas las fichas alineadas); el elemento de arriba le deja aire. */
.card-agregar {
  margin-top: auto; width: 100%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  background: var(--verde); color: #fff; border: none; border-radius: 9px;
  padding: .6rem; font-size: .8rem; font-weight: 700; font-family: inherit;
  box-shadow: 0 3px 0 var(--verde-hondo); transition: transform .08s ease, box-shadow .08s ease;
}
.card-body > :nth-last-child(2) { margin-bottom: .45rem; }
.card-agregar:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--verde-hondo); }
.card-agregar svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.card-agregar.activo { background: var(--amarillo); color: var(--verde-hondo); box-shadow: 0 3px 0 #c98a00; }

/* Botón, no texto suelto: abre el modal con la lista (ver abrirCarritoModal
   en catalogo.js). Ícono de bolsa + contador, como el botón flotante de
   "Ver pedido" de una app de delivery. */
.carrito-cuenta {
  display: flex; align-items: center; gap: .55rem;
  background: none; border: none; color: #fff; cursor: pointer; font-family: inherit;
  font-size: .85rem; font-weight: 700; padding: .4rem;
}
.carrito-cuenta:hover { opacity: .85; }
.carrito-cuenta svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carrito-barra-acciones { display: flex; align-items: center; gap: .75rem; }
.carrito-vaciar {
  background: none; border: none; color: rgba(255,255,255,.7); cursor: pointer;
  font-size: .78rem; font-weight: 600; font-family: inherit; text-decoration: underline;
  text-underline-offset: 2px; padding: .4rem;
}
.carrito-vaciar:hover { color: #fff; }
.carrito-consultar {
  display: flex; align-items: center; gap: .5rem;
  background: #25d366; color: #fff; text-decoration: none;
  padding: .65rem 1.25rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  transition: background .15s ease;
}
.carrito-consultar:hover { background: #1ebe5a; }
.carrito-consultar svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Modal del carrito: mismo .modal-fondo/.modal que el diálogo de impresión
   (ver esas reglas más abajo). Filas con foto del producto -- calco del
   look de una app de delivery (Pedidos Ya y similares): miniatura cuadrada
   redondeada a la izquierda, nombre + código al medio, tacho a la derecha. */
.carrito-modal-card { max-width: 460px; padding: 1.5rem 1.4rem 1.4rem; }
.carrito-lista {
  list-style: none; margin: .9rem 0 1.3rem; padding: 0;
  max-height: 360px; overflow-y: auto;
  display: flex; flex-direction: column; gap: .6rem;
}
.carrito-lista li {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem; background: var(--fondo); border-radius: 14px;
}
.carrito-item-img {
  flex: none; width: 52px; height: 52px; object-fit: contain;
  background: #fff; border: 1px solid var(--linea); border-radius: 10px;
}
.carrito-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.carrito-item-nombre {
  font-size: .85rem; font-weight: 600; color: var(--tinta); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carrito-item-id { flex: none; font-size: .72rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.carrito-item-quitar {
  flex: none; width: 34px; height: 34px; border-radius: 99px; border: none;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--tinta-3); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.carrito-item-quitar:hover { background: #fde8e8; color: #d92d20; }
.carrito-item-quitar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carrito-modal-card .modal-acciones { justify-content: space-between; flex-wrap: wrap; }

/* Cabecera del modal: título a la izquierda, "Descargar PDF" a la derecha --
   discreto (es un extra, no la acción principal, que sigue siendo el botón
   verde de WhatsApp de .modal-acciones). */
.carrito-modal-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.carrito-modal-pdf-link {
  display: flex; align-items: center; gap: .3rem; flex: none;
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: .76rem; font-weight: 700; color: var(--verde);
  padding: .25rem 0;
}
.carrito-modal-pdf-link:hover { text-decoration: underline; }
.carrito-modal-pdf-link:disabled { opacity: .6; cursor: default; text-decoration: none; }
.carrito-modal-pdf-link svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Paginación ─────────────────────────────────────────────────────────── */
.pager { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: 2rem; }
.pager button {
  min-width: 38px; height: 38px; padding: 0 .6rem;
  background: #fff; border: 1.5px solid var(--linea); border-radius: 10px;
  color: var(--tinta-2); font-size: .85rem; font-weight: 600; cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color .13s ease, color .13s ease;
}
.pager button:hover:not(:disabled):not(.actual) { border-color: var(--verde); color: var(--verde); }
.pager button:disabled { opacity: .35; cursor: default; }
.pager button.actual { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 700; }
.pager .puntos { color: var(--tinta-3); padding: 0 .15rem; }

/* ── Estados ────────────────────────────────────────────────────────────── */
.vacio {
  grid-column: 1 / -1; background: var(--card); border-radius: var(--radio);
  box-shadow: var(--sombra); text-align: center; padding: 4rem 1rem; color: var(--tinta-3);
}
.vacio-icono { font-size: 2.2rem; opacity: .35; margin-bottom: .6rem; }
.vacio p { margin: 0 0 .3rem; font-size: .95rem; font-weight: 600; color: var(--tinta-2); }
.vacio small { font-size: .8rem; }

.skeleton {
  background: var(--fondo); aspect-ratio: 1 / 1.35;
}
.skeleton, .skeleton-row { animation: pulso 1.4s ease-in-out infinite; }
.skeleton-row { height: 26px; border-radius: 8px; background: var(--fondo); margin-bottom: .4rem; list-style: none; }
@keyframes pulso { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }

.error {
  grid-column: 1 / -1; background: #fdeaea; border-radius: var(--radio);
  padding: 1.1rem 1.3rem; color: #c02626; font-size: .87rem;
}

/* ── Modal de impresión ─────────────────────────────────────────────────── */
.modal-fondo {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(22,24,29,.4); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal-fondo[hidden] { display: none; }
.modal {
  background: #fff; border-radius: var(--radio); box-shadow: var(--sombra-alta);
  padding: 1.4rem 1.5rem 1.3rem; width: 100%; max-width: 420px;
}
.modal h3 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.modal-sub { margin: .45rem 0 1rem; font-size: .8rem; color: var(--tinta-2); line-height: 1.45; }
.modal-campos { display: flex; gap: .9rem; flex-wrap: wrap; }
.modal-campos label {
  flex: 1; min-width: 140px;
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .72rem; font-weight: 700; color: var(--tinta-3);
  text-transform: uppercase; letter-spacing: .07em;
}
.modal-campos input {
  padding: .5rem .65rem; font-size: .95rem; font-weight: 600; color: var(--tinta);
  font-family: inherit;
  background: var(--fondo); border: 1.5px solid transparent; border-radius: 10px;
  outline: none; width: 100%;
}
.modal-campos input:focus { border-color: var(--verde); background: #fff; }

/* Opción de agrupado en el diálogo de impresión. */
.modal-check {
  display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
  margin-top: 1rem; padding: .7rem .8rem; border-radius: 10px;
  background: var(--fondo);
}
.modal-check input { margin-top: .18rem; accent-color: var(--verde); flex: none; }
.modal-check span { font-size: .82rem; font-weight: 600; color: var(--tinta); }
.modal-check small {
  display: block; margin-top: .2rem; font-size: .74rem; font-weight: 500;
  color: var(--tinta-2); line-height: 1.4;
}
.modal-info { margin: .8rem 0 1.1rem; font-size: .8rem; font-weight: 600; color: var(--tinta-2); }
.modal-acciones { display: flex; justify-content: flex-end; gap: .55rem; }
.btn-ghost {
  padding: .55rem 1rem; background: none; border: 1.5px solid var(--linea);
  border-radius: 10px; font-size: .84rem; font-weight: 600; color: var(--tinta-2);
  cursor: pointer; transition: border-color .13s ease, color .13s ease;
}
.btn-ghost:hover { border-color: var(--tinta-3); color: var(--tinta); }
.btn-solid {
  padding: .55rem 1.15rem; background: var(--verde); border: 1.5px solid var(--verde);
  border-radius: 10px; font-size: .84rem; font-weight: 700; color: #fff;
  cursor: pointer; transition: filter .13s ease;
}
.btn-solid:hover:not(:disabled) { filter: brightness(1.08); }
.btn-solid:disabled { opacity: .6; cursor: default; }

/* ── Modal "¿Cómo te ayudamos?" (sólo la primerísima consulta) ───────────── */
.wa-opciones { display: flex; flex-direction: column; gap: .6rem; margin-top: .2rem; }
.wa-opcion {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  width: 100%; text-align: left; font-family: inherit;
  padding: .85rem 1rem; border: 1.5px solid var(--linea); border-radius: 12px;
  background: #fff; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.wa-opcion:hover { border-color: var(--verde); background: var(--verde-suave); }
.wa-opcion-tit { font-size: .92rem; font-weight: 700; color: var(--tinta); }
.wa-opcion-sub { font-size: .76rem; font-weight: 500; color: var(--tinta-2); }
.wa-modal-nota { margin: .9rem 0 0; font-size: .72rem; color: var(--tinta-3); text-align: center; }

/* Link chico en el pie para resetear el contador de visitas de WhatsApp --
   por si tocó "Consultar" sin querer o el celular pasó a otra persona
   de la familia. */
.foot-wa-cambiar {
  display: inline; margin-left: .5rem; padding: 0; border: none; background: none;
  font: inherit; font-size: .72rem; color: rgba(255,255,255,.55);
  text-decoration: underline; cursor: pointer;
}
.foot-wa-cambiar:hover { color: rgba(255,255,255,.85); }

/* ── Pantallas chicas ───────────────────────────────────────────────────── */

/* Grilla de 2 columnas en mobile, mismo formato de ficha que desktop (foto
   arriba, texto abajo) sólo más chica -- dirección aprobada en el mockup:
   antes era una lista de una columna estilo Mercado Libre, se reemplaza
   entera por esto. */
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .card { padding: .45rem; }
  .card-marca { font-size: .85rem; }
  .card-nombre { font-size: .74rem; }
  .card-agregar { font-size: .72rem; padding: .5rem; }
  .card-estrella { width: 46px; height: 46px; }
  .card-estrella b { font-size: .95rem; }
  .card-estrella small { font-size: .42rem; }

  /* En mobile la fila de filtros queda corta: Filtros (hoja con Mostrar/
     Rubros/Marca adentro), Orden y ⋯. "Con foto"/"Ofertas" viven adentro de
     la hoja, y para sacar un filtro puntual están los chips con su ×. */
  .resultados-tit h1 { font-size: 1.45rem; }
  .barra-filtros { width: 100%; }
  .pill-check { display: none; }
  .sort-inline > span { display: none; }
  .mas { margin-left: auto; }
}





/* ══════════════════════════════════════════════════════════════════════════
   CATÁLOGO PAGINADO — portada + hojas de 12 fichas
   Estos estilos viven fuera de @media print a propósito: además de imprimirse,
   las hojas se rasterizan en pantalla para exportar a PDF (html2canvas no
   puede leer un display:none). En uso normal no molestan porque #print-root
   está oculto. Medidas en mm: cada hoja es un A4 completo, 210×297.
   ══════════════════════════════════════════════════════════════════════════ */
#print-root { display: none; }

/* Visible fuera del viewport sólo mientras se genera el PDF. */
#print-root.exportando {
  display: block; position: absolute; top: 0; left: -20000px;
  width: 210mm; background: #fff; z-index: -1;
}

.hoja {
  width: 210mm; height: 297mm;
  display: flex; flex-direction: column;
  overflow: hidden; background: #fff;
  break-after: page; page-break-after: always;
  color: #212121;
}
.hoja:last-child { break-after: auto; page-break-after: auto; }

/* ── Portada: la foto real de la sucursal (mismo archivo que el hero de la
   landing), con un velo verde de marca para que el texto siga leyéndose.
   Antes era un gradiente verde plano sin foto -- el usuario prefirió la
   imagen real de El Indio a la tapa "de catálogo genérico". */
.portada {
  background: #145D32; /* se ve un instante mientras carga pt-foto */
  color: #fff;
  justify-content: space-between; text-align: center;
  padding: 0 18mm; position: relative; overflow: hidden;
}
.pt-foto {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Más oscuro arriba (detrás del título) y abajo (detrás de los datos y el
   pie), más claro al medio para que se note que hay una foto real y no sólo
   un tinte. Verde de marca, no negro, para no perder la identidad que tenía
   el gradiente anterior. */
.pt-velo {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg,
    rgba(10,46,26,.82) 0%, rgba(10,46,26,.34) 32%,
    rgba(10,46,26,.34) 62%, rgba(6,28,16,.86) 100%);
}
/* Marco amarillo fino, a modo de filete de tapa. Va por encima de la foto y
   el velo, por debajo del texto. */
.portada::before {
  content: ""; position: absolute; inset: 7mm; z-index: 1;
  border: .8mm solid rgba(245,168,0,.55);
}
.portada > .pt-cab, .portada > .pt-centro, .portada > .pt-datos, .portada > .pt-pie {
  position: relative; z-index: 2;
}

.pt-cab {
  display: flex; align-items: center; justify-content: center; gap: 4mm;
  padding-top: 30mm;
}
/* Con logo-marca.svg el alto declarado es el alto real del dibujo, así que
   estos valores bajan respecto de cuando el SVG traía 24% de aire. */
.pt-logo { height: 19mm; width: auto; }
.pt-marca { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.pt-marca strong { font-size: 27pt; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.pt-marca span {
  font-size: 9pt; font-weight: 700; color: #F5A800;
  text-transform: uppercase; letter-spacing: .34em;
}

.pt-centro { margin-top: -12mm; }
.pt-kicker {
  display: block; font-size: 9pt; font-weight: 700; color: rgba(255,255,255,.7);
  text-transform: uppercase; letter-spacing: .3em; margin-bottom: 6mm;
}
.pt-titulo {
  font-size: 36pt; font-weight: 800; color: #fff;
  letter-spacing: -.03em; line-height: 1.06; margin: 0;
}
.pt-regla {
  width: 36mm; height: 2mm; border-radius: 2mm;
  background: #F5A800; margin: 7mm auto 0;
}
.pt-ctx { margin: 6mm 0 0; font-size: 10pt; font-weight: 500; color: rgba(255,255,255,.72); }

.pt-datos { display: flex; justify-content: center; gap: 18mm; padding-bottom: 8mm; }
.pt-datos div { display: flex; flex-direction: column; gap: 1mm; }
.pt-datos b { font-size: 16pt; font-weight: 800; color: #F5A800; }
.pt-datos span {
  font-size: 7pt; font-weight: 600; color: rgba(255,255,255,.6);
  text-transform: uppercase; letter-spacing: .16em;
}

/* El padding inferior deja el texto por dentro del marco amarillo (inset 7mm)
   y lejos del borde no imprimible de la hoja. */
.pt-pie {
  border-top: 1px solid rgba(245,168,0,.4);
  margin: 0 4mm; padding: 3.5mm 0 14mm;
  font-size: 7.5pt; font-weight: 500; color: rgba(255,255,255,.65);
}

/* ── Hojas de producto ──────────────────────────────────────────────────── */
/* Banda verde a sangre con el rubro de la página. */
.hj-top {
  flex: none; display: flex; align-items: center; gap: 3mm;
  background: #1E7A3E; color: #fff;
  border-bottom: 1.6mm solid #F5A800;
  padding: 5mm 12mm 4.5mm;
}
.hj-logo { height: 7mm; width: auto; }
.hj-marca { display: flex; flex-direction: column; line-height: 1.05; }
.hj-marca strong { font-size: 12pt; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.hj-marca span {
  font-size: 5pt; font-weight: 700; color: #F5A800;
  text-transform: uppercase; letter-spacing: .26em;
}
.hj-sec {
  margin-left: auto; font-size: 10pt; font-weight: 700; color: #F5A800;
  text-transform: uppercase; letter-spacing: .08em;
  max-width: 100mm; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.hj-grid {
  flex: 1; display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4mm; padding: 5mm 12mm; min-height: 0;
}

.pf {
  border: .5pt solid #e0e0e0; border-top: 1.4mm solid #F5A800;
  border-radius: 1.5mm; overflow: hidden;
  display: flex; flex-direction: column;
  break-inside: avoid; page-break-inside: avoid;
}
/* La foto se queda con todo el alto que sobra (flex:1) y el bloque de texto
   ocupa sólo lo suyo. Antes era al revés -- foto fija de 37mm y texto flexible --
   y como los nombres son cortos, el tercio central de cada ficha quedaba en
   blanco mientras el producto se veía chico. */
.pf-img {
  flex: 1; min-height: 34mm; background: #fff; overflow: hidden;
  position: relative; border-bottom: .5pt solid #ececec;
}
.pf-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Promo deducida del nombre (respaldo, cuando no hay descuento del ERP). */
.pf-promo {
  position: absolute; top: 1.6mm; right: 1.6mm;
  font-size: 6pt; font-weight: 800; letter-spacing: .02em;
  background: #F5A800; color: #145D32;
  padding: .7mm 2mm; border-radius: 4mm;
}

/* Sello de descuento real, el mismo de la web pero en mm. El aro blanco lo
   despega de la foto cuando el producto llega hasta esa esquina.
   SIN rotación ni box-shadow a propósito, aunque en la web sí las tenga:
   html2canvas -- que rasteriza cada hoja para el PDF -- no las aplica, así que
   el PDF salía derecho y sin sombra mientras que Imprimir desde el navegador
   salía rotado. Se saca el efecto y las dos salidas quedan idénticas. */
.pf-dto {
  position: absolute; top: 1.4mm; right: 1.4mm;
  width: 11mm; height: 11mm; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #F5A800; color: #145D32;
  border: .5mm solid #fff;
  line-height: 1;
}
.pf-dto b { font-size: 7pt; font-weight: 800; letter-spacing: -.03em; font-style: normal; }
.pf-dto i {
  font-size: 3.6pt; font-weight: 700; font-style: normal;
  letter-spacing: .1em; margin-top: .2mm;
}
/* La ficha en promo se recuadra en amarillo: en una hoja de 12 se distingue
   de un vistazo sin agregarle otro elemento. */
.pf-conpromo { border-color: #F5A800; }

.pf-txt {
  flex: none; display: flex; flex-direction: column; gap: .8mm;
  padding: 2.2mm 2.4mm 0; min-height: 0;
}
.pf-marca {
  font-size: 6pt; font-weight: 800; color: #1E7A3E;
  text-transform: uppercase; letter-spacing: .1em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-nombre {
  font-size: 8pt; font-weight: 700; line-height: 1.24; color: #212121;
  letter-spacing: -.005em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-cat {
  font-size: 6.4pt; font-weight: 500; color: #8f8f8f;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 1.6mm;
}
/* Franja verde suave con el código, cierra la ficha con color de marca. */
.pf-pie {
  margin: 0 -2.4mm; padding: 1.5mm 2.4mm;
  background: #e9f3ed; border-top: .5pt solid #d3e5da;
  display: flex; justify-content: space-between; gap: 2mm;
  font-size: 6.2pt; font-weight: 700; color: #1E7A3E;
}
.pf-barra { font-family: Consolas, monospace; letter-spacing: -.02em; font-weight: 600; }

/* Pie de hoja con banda clara y numeración destacada. */
.hj-bot {
  flex: none; display: flex; justify-content: space-between; align-items: center; gap: 4mm;
  background: #e9f3ed; border-top: 1mm solid #F5A800;
  padding: 3mm 12mm;
  font-size: 6.8pt; font-weight: 500; color: #4a5f52;
}
.hj-num {
  font-weight: 800; color: #fff; background: #1E7A3E;
  padding: 1mm 3mm; border-radius: 4mm; white-space: nowrap;
}

/* ── Impresión ──────────────────────────────────────────────────────────
   Sin margen de página para que el verde llegue a sangre; los márgenes los
   pone cada hoja por dentro (12mm), bien por encima del área no imprimible
   típica de una impresora (~5mm). */
@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body {
    background: #fff; margin: 0; padding: 0;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .navbar, .layout, .foot, .modal-fondo, .carrito-barra { display: none !important; }
  #print-root { display: block; }
}

.carrito-modal-card h3 { font-family: var(--fuente-titular); font-weight: 800; font-style: italic; letter-spacing: .045em; font-size: 1.5rem; text-transform: uppercase; }