/* =============================================================
   Catálogo para imprimir — hoja A4, pensado para "Guardar como PDF"
   No depende de styles.css: los estilos del sitio (animaciones,
   elementos ocultos hasta hacer scroll) romperían la impresión.
   ============================================================= */
:root {
  --navy: #0A3560;
  --mostaza: #FFC64E;
  --dorado: #C7A365;
  --tinta: #1B2A38;
  --tinta-suave: #4A5B68;
  --gris: #EAEAEA;
  --gris-claro: #F5F6F7;
  --display: "Bebas Neue", Impact, sans-serif;
  --texto: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--texto); color: var(--tinta); background: var(--gris-claro); line-height: 1.5; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
[hidden] { display: none !important; }

/* ===================== BARRA DE CONTROL ===================== */
.barra { position: sticky; top: 0; z-index: 10; background: var(--navy); color: #fff; padding: .9rem 1.1rem; box-shadow: 0 2px 14px rgba(10,53,96,.25); }
.barra-in { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; max-width: 1180px; margin-inline: auto; }
.volver { color: #fff; opacity: .85; text-decoration: none; font-size: .88rem; white-space: nowrap; }
.volver:hover { opacity: 1; text-decoration: underline; }
.ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; flex: 1 1 auto; }
.ctrl label { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: #cfe0f2; white-space: nowrap; }
.ctrl select { font: inherit; font-size: 16px; padding: .45rem .6rem; border-radius: 9px; border: 0; background: #fff; color: var(--tinta); max-width: 100%; }
.ctrl .chk { cursor: pointer; }
.ctrl input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--mostaza); }
.btn { font: inherit; font-weight: 700; font-size: .92rem; padding: .7rem 1.3rem; min-height: 44px; border: 0; border-radius: 999px; background: var(--mostaza); color: var(--navy); cursor: pointer; white-space: nowrap; }
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .6; cursor: progress; }
.tip { max-width: 1180px; margin: .6rem auto 0; font-size: .78rem; color: #b9cee3; line-height: 1.45; }
@media (max-width: 700px) {
  .barra { padding: .8rem .9rem; }
  .barra-in { gap: .6rem; }
  .ctrl { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .6rem; }
  .ctrl label { flex-direction: column; align-items: stretch; gap: .2rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
  .ctrl .chk { flex-direction: row; align-items: center; gap: .45rem; text-transform: none; letter-spacing: 0; font-size: .78rem; }
  .ctrl select { width: 100%; }
  .btn { width: 100%; }
  .tip { font-size: .72rem; margin-top: .5rem; }
}

/* ===================== HOJA ===================== */
.doc { max-width: 210mm; margin: 1.5rem auto 3rem; background: #fff; padding: 14mm 12mm; box-shadow: 0 6px 30px rgba(10,53,96,.12); }
@media (max-width: 780px) { .doc { margin: 1rem auto 2rem; padding: 8mm 6mm; } }

/* Portada */
.doc[data-portada="no"] .portada { display: none; }
.portada { text-align: center; padding-block: 2rem 2.6rem; border-bottom: 3px solid var(--navy); margin-bottom: 2rem; }
.portada-logo { height: 20mm; width: auto; margin: 0 auto 1.4rem; }
.portada h1 { font-family: var(--display); font-size: 68px; line-height: .92; color: var(--navy); letter-spacing: .02em; }
.portada-lema { font-size: 1rem; color: var(--dorado); font-weight: 600; margin-top: .7rem; }
.portada-pie { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem 1.4rem; margin-top: 2.2rem; text-align: left; max-width: 130mm; margin-inline: auto; }
.portada-pie > div { border-left: 3px solid var(--mostaza); padding-left: .7rem; }
.portada-pie .et { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-suave); }
.portada-pie strong { font-size: .95rem; color: var(--navy); }

/* Rubro */
.rubro { margin-bottom: 1.4rem; }
.rubro + .rubro { margin-top: 1.8rem; }
.rubro-tit { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--navy); padding-bottom: .35rem; margin-bottom: 1rem; }
.rubro-tit h2 { font-family: var(--display); font-size: 30px; color: var(--navy); letter-spacing: .03em; font-weight: 400; }
.rubro-tit span { font-size: .78rem; color: var(--tinta-suave); white-space: nowrap; }

/* Grilla de productos */
.grilla { display: grid; gap: 6mm; }
.doc[data-cols="1"] .grilla { grid-template-columns: 1fr; }
.doc[data-cols="2"] .grilla { grid-template-columns: repeat(2, 1fr); }
.doc[data-cols="3"] .grilla { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) {
  .doc[data-cols="2"] .grilla, .doc[data-cols="3"] .grilla { grid-template-columns: repeat(2, 1fr); }
}

.prod { border: 1px solid var(--gris); border-radius: 8px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.prod-img { background: var(--gris-claro); display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; }
.prod-img img { width: 100%; height: 100%; object-fit: contain; padding: 4mm; }
.prod-img.sin-foto { color: #9aa8b4; font-size: .72rem; }
.prod-txt { padding: 3.5mm 4mm 4mm; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.prod-marca { font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; color: var(--dorado); font-weight: 700; }
.prod h3 { font-size: .95rem; line-height: 1.25; color: var(--navy); font-weight: 700; }
.prod-pres { font-size: .78rem; font-weight: 600; color: var(--tinta); background: var(--gris-claro); border-radius: 5px; padding: .18rem .45rem; align-self: flex-start; }
.prod-desc { font-size: .74rem; line-height: 1.45; color: var(--tinta-suave); }
.prod-oculto { font-size: .64rem; color: #b06b00; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }

/* Ficha completa (1 por fila): foto al costado */
.doc[data-cols="1"] .prod { flex-direction: row; }
.doc[data-cols="1"] .prod-img { width: 58mm; flex: none; aspect-ratio: auto; }
.doc[data-cols="1"] .prod-txt { padding: 5mm; gap: .4rem; justify-content: center; }
.doc[data-cols="1"] .prod h3 { font-size: 1.15rem; }
.doc[data-cols="1"] .prod-desc { font-size: .85rem; }

/* Compacto (3 por fila) */
.doc[data-cols="3"] .prod h3 { font-size: .84rem; }
.doc[data-cols="3"] .prod-desc { font-size: .68rem; }
.doc[data-cols="3"] .prod-pres { font-size: .7rem; }
.doc[data-cols="3"] .prod-txt { padding: 3mm; }

/* Cierre */
.cierre { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 3px solid var(--navy); }
.cierre h2 { font-family: var(--display); font-size: 34px; color: var(--navy); letter-spacing: .03em; font-weight: 400; margin-bottom: 1rem; }
.cierre-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
@media (max-width: 620px) { .cierre-grid { grid-template-columns: 1fr; } }
.cierre h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dorado); margin-bottom: .5rem; }
.cierre li { font-size: .82rem; padding: .3rem 0; border-bottom: 1px solid var(--gris); line-height: 1.4; }
.cierre li strong { color: var(--navy); }
.cierre li small { display: block; color: var(--tinta-suave); font-size: .72rem; }
.cierre-wa { margin-top: 1.4rem; font-size: 1rem; color: var(--navy); }
.cierre-wa strong { font-family: var(--display); font-size: 26px; letter-spacing: .04em; }
.cierre-nota { margin-top: .5rem; font-size: .72rem; color: var(--tinta-suave); }

.vacio { text-align: center; padding: 3rem 1rem; color: var(--tinta-suave); border: 1.5px dashed var(--gris); border-radius: 10px; }

/* ===================== IMPRESIÓN ===================== */
@page { size: A4 portrait; margin: 13mm 11mm; }

@media print {
  html, body { background: #fff; }
  .barra { display: none !important; }
  .doc { max-width: none; margin: 0; padding: 0; box-shadow: none; }

  /* Que se impriman los fondos claros y los bordes de las fichas */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Nada de fichas ni títulos partidos entre dos hojas */
  .prod, .portada-pie > div, .cierre li { break-inside: avoid; page-break-inside: avoid; }
  .rubro-tit { break-after: avoid; page-break-after: avoid; }
  .cierre { break-inside: avoid; page-break-inside: avoid; }

  /* La portada ocupa su propia hoja */
  .portada { min-height: 245mm; display: flex; flex-direction: column; justify-content: center; border-bottom: 0; margin-bottom: 0; break-after: page; page-break-after: always; }

  .rubro { break-before: auto; }
  .grilla { gap: 5mm; }
  .prod-img { aspect-ratio: 4 / 3; }
  .doc[data-cols="1"] .prod-img { aspect-ratio: auto; }

  a { color: inherit; text-decoration: none; }
}