/*
 * Catalogo Electo - hojas A4 para imprimir a PDF desde el navegador.
 *
 * Se imprime con el motor del propio Chrome (Ctrl+P > Guardar como PDF) y no
 * con una libreria de canvas. La diferencia importa: asi el texto queda
 * seleccionable, el PDF pesa una fraccion, y sobre todo los <a href="#ancla">
 * sobreviven como links reales adentro del PDF. Rasterizando se pierden las
 * tres cosas.
 *
 * Colores y tipografias: los mismos tokens que electo-web
 * (src/styles/global.css), para que el catalogo y el sitio se vean de la misma
 * empresa.
 */

@page {
	size: A4;
	margin: 0;
}

:root {
	--rojo: #cd2721;
	--rojo-oscuro: #bd0a0a;
	--gris: #f1f2f2;
	--amarillo: #ffbf40;
	--amarillo-claro: #ffd78f;
	/* El verde de WhatsApp del catalogo, elegido por Mauro el 2026-08-20. */
	--verde: #11c56d;
	--tinta: #1a1a1a;
	--gris-oscuro: #3d4142;

	/*
	 * La seccion de contacto se resuelve con tres tokens y no con el verde
	 * suelto, porque el fondo, el icono y el texto no quieren el mismo
	 * tratamiento. Los cuatro juegos estan abajo, en las clases .contacto-*.
	 */
	--contacto-fondo: #d4d4d4;
	--contacto-icono: var(--verde);
	--contacto-texto: var(--gris-oscuro);

	--titulo: "Poppins", "Segoe UI", sans-serif;
	--texto: "Source Sans 3", "Segoe UI", sans-serif;

	/*
	 * La hoja. A4 por defecto; el formato celular (mas abajo) cambia estas
	 * mismas variables y nada mas: la grilla, el indice y la marca de agua se
	 * derivan de aca.
	 */
	--hoja-ancho: 210mm;
	--hoja-alto: 297mm;
	--margen: 14mm;
	--banda: 34mm;
	--pie: 16mm;
	/* El aire entre la banda y la primera fila. */
	--aire-cuerpo: 8mm;

	/*
	 * Columnas y filas de fichas por hoja. Son las perillas de densidad: el
	 * alto de la ficha y el de la foto se derivan solos. En A4 con 3
	 * columnas, con 3 filas el catalogo son ~105 paginas y la foto mide 58
	 * mm; con 4, ~81 paginas y 38 mm; con 5, ~71 paginas y 24 mm. Mas de 5 y
	 * la foto queda mas chica que la pildora del precio.
	 *
	 * catalogo.js lee FILAS y COLUMNAS de estas mismas variables -- no hay
	 * dos numeros que mantener sincronizados.
	 */
	--columnas: 3;
	--filas: 5;

	--gap-fila: 4mm;
	/* Lo que se reserva de la fila para el nombre, la variante y la pildora;
	   el resto es la foto. */
	--reserva-fila: 22mm;

	/* Columnas del indice por hoja. Tambien lo lee catalogo.js. */
	--cols-indice: 2;

	/*
	 * Marca de agua. 0 la apaga.
	 *
	 * Va detras de las fichas, no encima: encima compite con las fotos, que son
	 * lo que el catalogo tiene que vender. Y va suave a proposito -- la marca no
	 * impide que nadie copie nada, solo hace que copiarlo quede en evidencia, y
	 * para eso no hace falta que tape el producto.
	 */
	--marca-opacidad: 0.09;
	--marca-color: var(--rojo);
	/* Aire entre repeticiones. La marca tiene que leerse como una trama de
	   fondo, no como un parrafo tachado encima del producto. */
	--marca-sep-x: 30mm;
	--marca-sep-y: 26mm;
	/* Aire entre el nombre y el telefono adentro de cada repeticion. */
	--marca-sep-interno: 14mm;
}

/*
 * Las medidas derivadas van en el body y no en :root a proposito. Una
 * propiedad personalizada se resuelve donde se declara: calculadas en :root
 * quedarian con las medidas del A4 aunque body.formato-celular cambie la
 * hoja, las filas o el margen. En el body, las bases que el formato pisa
 * son las que entran en la cuenta.
 */
body {
	--alto-cuerpo: calc(var(--hoja-alto) - var(--banda) - var(--pie) - var(--aire-cuerpo));
	--alto-foto: calc((var(--alto-cuerpo) / var(--filas)) - var(--reserva-fila));

	/* Ancho de una columna del indice. Lo usa tambien el medidor invisible.
	   Los 10 mm son el gap entre columnas (.indice-cols). */
	--col-indice: calc((var(--hoja-ancho) - 2 * var(--margen) - (var(--cols-indice) - 1) * 10mm) / var(--cols-indice));
}

/* --------------------------------------------------------------------------
   Tratamientos de la seccion de contacto
   --------------------------------------------------------------------------
   El verde elegido (#11c56d) es vivo pero claro: sirve como mancha de color y
   no como tinta. Sobre blanco da 2,3:1 y sobre el gris de la tapa 1,5:1, cuando
   el telefono de la tapa necesita 3:1 y el pie de cada hoja 4,5:1.

   Invertir la franja tampoco lo arregla: blanco sobre #11c56d da 2,3:1, o sea
   lo mismo. El verde es demasiado claro para llevar blanco encima.

   Lo que si funciona es separar el rol: el icono se queda con el verde pleno
   -- es una forma, no texto, y ahi el color se lee como WhatsApp -- y el texto
   toma algo con contraste. */

/* El default (arriba) es este: icono verde, texto gris oscuro. */
:root.contacto-a {                       /* como el Figma: todo en verde */
	--contacto-texto: var(--verde);
}
:root.contacto-c {                       /* todo gris, sin verde */
	--contacto-icono: var(--gris-oscuro);
	--contacto-texto: var(--gris-oscuro);
}
:root.contacto-d {                       /* la franja pasa a ser el verde */
	--contacto-fondo: var(--verde);
	--contacto-icono: var(--tinta);
	--contacto-texto: var(--tinta);
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	font-family: var(--texto);
	color: var(--tinta);
	background: #6b6b6b;
}

/* --------------------------------------------------------------------------
   Barra de herramientas: solo en pantalla, nunca en el PDF
   -------------------------------------------------------------------------- */
.barra {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 20px;
	background: #222;
	color: #fff;
	font-size: 14px;
}
.barra strong { font-family: var(--titulo); font-weight: 600; }
.barra label { display: flex; align-items: center; gap: 6px; font-size: 13px; opacity: .85; }
.barra select {
	font: inherit;
	font-size: 13px;
	padding: 4px 6px;
	border-radius: 4px;
	border: 1px solid #555;
	background: #333;
	color: #fff;
}
.barra .estado { margin-left: auto; opacity: .75; font-size: 13px; }
.barra button {
	font: inherit;
	font-weight: 600;
	padding: 8px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--rojo);
	color: #fff;
	cursor: pointer;
}
.barra button:hover { background: var(--rojo-oscuro); }
.barra button[disabled] { opacity: .4; cursor: default; }

/* Caja fuera de pantalla para medir el alto de los bloques del indice antes de
   repartirlos en columnas. Ver repartirIndice() en catalogo.js. */
.medidor {
	position: absolute;
	left: -10000px;
	top: 0;
	visibility: hidden;
	width: var(--col-indice);
}

/* --------------------------------------------------------------------------
   La hoja
   -------------------------------------------------------------------------- */
.hoja {
	position: relative;
	width: var(--hoja-ancho);
	height: var(--hoja-alto);
	margin: 12mm auto;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0,0,0,.35);
	page-break-after: always;
	break-after: page;
}
.hoja:last-child { page-break-after: auto; break-after: auto; }

.banda {
	position: relative;
	z-index: 2;
	height: var(--banda);
	background: var(--rojo);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--margen);
}
.banda .kicker {
	font-family: var(--texto);
	font-size: 9pt;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .8;
	margin-bottom: 1mm;
}
.banda h1 {
	font-family: var(--titulo);
	font-weight: 700;
	font-size: 22pt;
	line-height: 1.05;
	margin: 0;
}
.banda .logo { height: 17mm; flex: none; }
/* La copia que encabeza cada seccion en la vista lista de la web. Afuera de
   esa vista (impresion, vista paginas) no existe. */
.banda.banda-seccion { display: none; }

/* El Figma tenia Novedades con banda blanca, titulo rojo y fondo amarillo.
   Se saco (decision de Mauro, 2026-08-20): el amarillo peleaba con las fotos
   y partia el catalogo en dos estilos. Novedades es una categoria mas. */

/* --------------------------------------------------------------------------
   La grilla de fichas
   -------------------------------------------------------------------------- */
/*
 * Cada fila visual son CUATRO pistas: foto, texto, precio y un separador
 * elastico. La ficha ocupa las cuatro y hereda las pistas con `subgrid`.
 *
 * Es lo que alinea las pildoras de precio entre hermanos de fila. Antes cada
 * ficha se apilaba sola, asi que un nombre de una linea dejaba el precio mas
 * arriba que el de al lado, que tenia dos: la fila quedaba en escalera. Con
 * subgrid la pista de texto mide lo mismo para los tres, la del precio arranca
 * en la misma altura, y el precio sigue pegado a su texto -- que era el otro
 * requisito, y por eso no sirve empujarlo al fondo con margin-top:auto.
 *
 * `subgrid` necesita Chrome 117+. Sin el, la ficha cae a una grilla comun: se
 * ve bien pero vuelve la escalera. Como el catalogo se imprime desde Chrome,
 * alcanza.
 */
.cuerpo {
	position: relative;
	z-index: 2;
	height: calc(var(--alto-cuerpo) + var(--aire-cuerpo));
	padding: var(--aire-cuerpo) var(--margen) 0;
	display: grid;
	grid-template-columns: repeat(var(--columnas), 1fr);
	grid-template-rows: repeat(var(--filas),
		var(--alto-foto) auto auto minmax(var(--gap-fila), 1fr));
	column-gap: 8mm;
	row-gap: 0;
	align-content: start;
}

.ficha {
	grid-row: span 4;
	display: grid;
	grid-template-rows: subgrid;
	justify-items: center;
	text-align: center;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Marca de agua
   --------------------------------------------------------------------------
   Va adentro del .cuerpo y no de la .hoja porque la pagina de destacados le
   pinta el fondo amarillo al cuerpo: puesta en la hoja quedaria tapada.

   Las lineas se generan desde JS, repetidas, y el bloque entero se rota. Se
   sobredimensiona 40% para que al girar siga cubriendo las esquinas. */
.marca {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Es decoracion: que no se la lleve el buscador ni el lector de pantalla. */
	user-select: none;
	color: var(--marca-color);
	opacity: var(--marca-opacidad);
	font-family: var(--titulo);
	font-weight: 700;
	font-size: 14pt;
	letter-spacing: .06em;
}
/* Se sobredimensiona bastante mas que la hoja: al rotar, las esquinas quedan
   fuera del rectangulo original y sin este margen se ven franjas vacias. */
.marca-trama {
	transform: rotate(-32deg);
	width: 190%;
	display: flex;
	flex-direction: column;
	gap: var(--marca-sep-y);
}
.marca-linea {
	display: flex;
	justify-content: center;
	gap: var(--marca-sep-x);
	white-space: nowrap;
}
/* El nombre y el telefono son dos piezas separadas por un gap y no un solo
   texto con un separador: asi el aire entre las dos se ajusta desde una
   variable y no depende de cuantos espacios se escriban en la constante. */
.marca-item {
	display: flex;
	gap: var(--marca-sep-interno);
}
/* Las lineas pares van corridas medio paso: si todas arrancan alineadas la
   trama forma columnas verticales y se lee como una tabla, no como un fondo. */
.marca-linea:nth-child(even) {
	transform: translateX(calc(var(--marca-sep-x) / -2 - 32mm));
}
.ficha .foto {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-bottom: 2mm;
}
/*
 * 100% de la caja, no var(--alto-foto): la pista de la subgrilla mide
 * --alto-foto pero el margen inferior de .foto sale de adentro, asi que la caja
 * real es 2mm mas baja. Atando la imagen a la variable se pasaba esos 2mm y se
 * montaba sobre el nombre.
 */
.ficha .foto img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}
/* Sin foto se imprime igual: el nombre y el precio siguen sirviendo. El hueco
   se marca para que se note que falta y no parezca un error de impresion. */
.ficha .sin-foto {
	width: 26mm;
	height: 26mm;
	border: 1px dashed #c9c9c9;
	border-radius: 3mm;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b0b0b0;
	font-size: 7pt;
	letter-spacing: .06em;
	text-transform: uppercase;
}
/* El nombre y la variante van juntos en una sola pista de la subgrilla, para
   que las tres fichas de la fila compartan el mismo alto de texto. */
.ficha .texto { align-self: start; }
.ficha .nombre {
	font-family: var(--titulo);
	font-weight: 700;
	font-size: 9.5pt;
	line-height: 1.15;
}
.ficha .variante {
	font-size: 8.5pt;
	line-height: 1.18;
	margin-top: .3mm;
}
.ficha .precio { align-self: start; margin-top: 1.5mm; }
.ficha .precio span {
	display: inline-block;
	background: var(--rojo);
	color: #fff;
	font-family: var(--titulo);
	font-weight: 600;
	font-size: 10.5pt;
	padding: 1.2mm 5mm;
	border-radius: 999px;
	white-space: nowrap;
}
.ficha .precio i { font-style: normal; }

/*
 * La marquita "s3": que foto sale del bucket y cual de la carpeta vieja.
 *
 * Solo en la previa del panel — la clase `previa` la pone CatalogoController y
 * el catalogo publicado no la tiene, asi que el cliente no la ve. Hasta el
 * 2026-09-09 iba quemada en el pixel de la foto (la dibujaba el navegador
 * antes de subirla), y por eso aparecia igual en el catalogo publico y en la
 * app, donde no hay CSS que pueda taparla. Es informacion de diagnostico:
 * ahora se dibuja donde se mira, y la foto queda limpia.
 */
body.previa .ficha[data-bucket] .foto { position: relative; }
body.previa .ficha[data-bucket] .foto::after {
	content: "s3";
	position: absolute;
	right: 1mm;
	bottom: 1mm;
	padding: 0 1.2mm;
	border-radius: 1mm;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-family: var(--texto);
	font-weight: 600;
	font-size: 7pt;
	line-height: 1.7;
}

/*
 * El catalogo sin precios, para escribirlos a mano.
 *
 * Es el mismo catalogo -- mismas hojas, mismas fotos, mismo orden -- con la
 * pildora vacia: fondo blanco y borde rojo, del ancho de un precio de cinco
 * digitos para que todas midan igual y entre lo escrito. El numero no se
 * pinta de blanco ni se hace transparente: se esconde el <i>, asi no queda en
 * el PDF ni se puede seleccionar.
 */
body.precios-vacios .ficha .precio span {
	background: #fff;
	border: .3mm solid var(--rojo);
	/* El borde y el padding comen del ancho, no lo suman: la pildora tiene
	   que seguir entrando en la columna de la grilla. Lo que sobresalga del
	   <i> escondido no se ve --esta oculto--, asi que no hace falta recortar
	   nada: un overflow aca moveria la linea base de la pildora. */
	box-sizing: border-box;
	width: 24mm;
	text-align: center;
}
/* visibility y no display:none: el <i> sigue armando la linea, y sin el la
   pildora vacia se quedaria sin alto. */
body.precios-vacios .ficha .precio i { visibility: hidden; }

/* --------------------------------------------------------------------------
   El pie
   -------------------------------------------------------------------------- */
.pie {
	position: absolute;
	z-index: 2;
	left: var(--margen);
	right: var(--margen);
	bottom: 6mm;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 10pt;
}
.pie .volver {
	font-family: var(--titulo);
	font-weight: 600;
	font-size: 9pt;
	text-decoration: none;
	color: var(--rojo);
	border: 1px solid var(--rojo);
	border-radius: 999px;
	padding: 1.4mm 5mm;
}
/* El contacto es un link a wa.me: en el PDF abre el chat directo, y en papel
   se lee igual que antes. */
.pie .contacto {
	display: flex;
	align-items: center;
	gap: 2mm;
	color: var(--contacto-texto);
	font-weight: 700;
	text-decoration: none;
}
/* El icono conserva el verde pleno aunque el texto vaya mas oscuro: el SVG usa
   currentColor, asi que alcanza con volver a declarar `color` aca. */
.pie .contacto svg { width: 5mm; height: 5mm; flex: none; color: var(--contacto-icono); }

/* --------------------------------------------------------------------------
   Tapa y contratapa
   -------------------------------------------------------------------------- */
.hoja.tapa, .hoja.contratapa {
	background: var(--rojo);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
}
/*
 * display:contents hace que el envoltorio no exista para el layout: en la
 * hoja A4 el logo, el titulo y el periodo siguen siendo hijos directos de
 * la tapa, con su margin-top:auto y todo. Solo la version web lo convierte
 * en una caja de verdad.
 */
.tapa-cabecera { display: contents; }
.hoja.tapa .logo-grande { width: 96mm; margin-top: 52mm; }
.hoja.tapa .titulo {
	margin-top: auto;
	font-family: var(--titulo);
	font-weight: 400;
	font-size: 26pt;
}
.hoja.tapa .periodo {
	font-family: var(--titulo);
	font-weight: 700;
	font-size: 20pt;
	color: var(--amarillo-claro);
	margin: 3mm 0 26mm;
}
.hoja.tapa .franja {
	width: 100%;
	background: var(--contacto-fondo);
	color: var(--contacto-texto);
	padding: 5mm 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3mm;
	font-family: var(--titulo);
	font-weight: 700;
	font-size: 22pt;
	text-decoration: none;
}
.hoja.tapa .franja svg { width: 10mm; height: 10mm; color: var(--contacto-icono); }
.hoja.tapa .datos {
	width: 100%;
	background: #fff;
	color: var(--contacto-texto);
	flex: 1;
	padding: 6mm 20mm;
	text-align: center;
	font-size: 11pt;
	line-height: 1.7;
}
.hoja.tapa .datos b { font-weight: 700; }

.hoja.contratapa { justify-content: center; }
.hoja.contratapa .logo-grande { width: 68mm; }
.hoja.contratapa .contacto-blanco {
	margin-top: 10mm;
	text-align: center;
	font-size: 11pt;
	line-height: 1.7;
}
.hoja.contratapa .tel {
	font-family: var(--titulo);
	font-weight: 700;
	font-size: 16pt;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5mm;
	margin-bottom: 4mm;
	color: #fff;
	text-decoration: none;
}
.hoja.contratapa .tel svg { width: 6mm; height: 6mm; }

/* --------------------------------------------------------------------------
   El indice
   --------------------------------------------------------------------------
   Las columnas se llenan desde JS y no con column-count: hay 13 categorias con
   60 subcategorias y no entran en una hoja, asi que el indice se reparte en
   varias. column-count no sabe cortar entre hojas -- desbordaba en una tercera
   columna invisible fuera del A4. */
.hoja.indice .cuerpo {
	display: flex;
	flex-direction: column;
	padding: var(--aire-cuerpo) var(--margen) 0;
}
.indice-cols {
	display: flex;
	gap: 10mm;
	align-items: flex-start;
	flex: 1;
	min-height: 0;
}
.col-indice { width: var(--col-indice); flex: none; }

/*
 * La aclaracion de que el indice es navegable.
 *
 * No es adorno: el PDF lleva los links adentro, pero no todos los visores los
 * abren -- la vista previa de Google Drive en el celular, por ejemplo, los
 * ignora. Por eso la segunda linea manda al numero de pagina, que funciona en
 * cualquier lector y tambien en papel.
 */
.indice-nota {
	margin: 0 0 6mm;
	padding: 3mm 5mm;
	border-left: 3px solid var(--rojo);
	background: var(--gris);
	font-size: 9.5pt;
	line-height: 1.35;
}
.indice-nota b { font-weight: 700; }
.indice-nota span {
	display: block;
	margin-top: 1mm;
	font-size: 8.5pt;
	color: var(--gris-oscuro);
}

/* Apretado a proposito: con 13 categorias y 60 subcategorias, aflojar estos
   milimetros manda el indice a una segunda hoja que queda casi vacia. */
.indice-cat { margin-bottom: 3mm; }
.indice-cat > a {
	display: flex;
	align-items: baseline;
	gap: 2mm;
	text-decoration: none;
	color: var(--rojo);
	font-family: var(--titulo);
	font-weight: 700;
	font-size: 11pt;
	margin-bottom: .8mm;
}
.indice-cat .puntos {
	flex: 1;
	border-bottom: 1px dotted #c4c4c4;
	transform: translateY(-1mm);
}
.indice-cat ul { list-style: none; margin: 0; padding: 0 0 0 3mm; }
.indice-cat li a { line-height: 1.25; }
.indice-cat li { margin-bottom: .2mm; }
.indice-cat li a {
	display: flex;
	align-items: baseline;
	gap: 2mm;
	text-decoration: none;
	color: var(--tinta);
	font-size: 9pt;
}
.indice-cat li .puntos { border-bottom-color: #e2e2e2; }
.indice-cat .pag { font-variant-numeric: tabular-nums; color: #7a7a7a; font-size: 8.5pt; }


/* ==========================================================================
   FORMATO CELULAR
   ==========================================================================
   El PDF con precios se mira en un telefono: llega por WhatsApp y nadie lo
   imprime. En A4 con tres columnas, el visor mete la hoja entera en el ancho
   de la pantalla y cada ficha queda a un tercio: el nombre a 3 pt (Mauro,
   2026-09-10: "quedo muy chico"). Esta es la misma hoja -- misma grilla de
   pistas, mismo indice, misma marca de agua -- del tamano y la proporcion
   de una pantalla de celular: 105 x 230 mm (9:19,5). Una hoja es una
   pantalla, y un nombre de 10,5 pt se ve como el texto de un chat.

   Lo activa `body.formato-celular`, que PdfDelCatalogo pone en el HTML del
   PDF con precios y la previa con ?formato=celular. El PDF sin precios --el
   que imprime Cristian para escribir las pastillas a mano-- sigue en A4.

   Chromium respeta el tamano de una pagina con nombre (probado el
   2026-09-10 con la estructura real: tres hojas de 105 x 230, ninguna en
   blanco). El tamano va dos veces, en @page y en las variables: @page no
   admite var(), y tienen que coincidir.
   ========================================================================== */
@page celular { size: 105mm 230mm; margin: 0; }
body.formato-celular { page: celular; }

body.formato-celular {
	--hoja-ancho: 105mm;
	--hoja-alto: 230mm;
	/* Casi sin margen, y la banda y el pie lo mas bajos que se puede: en el
	   telefono cada milimetro de hoja es pantalla, y con tres columnas cada
	   milimetro de alto que se le saca a la fila se lo come la foto. */
	--margen: 3mm;
	--banda: 17mm;
	--pie: 10mm;
	--aire-cuerpo: 3mm;
	/*
	 * Tres columnas y cuatro filas (Mauro, 2026-09-10): 12 fichas por hoja,
	 * 92 hojas, la foto de ~21 mm y el nombre a 9,5 pt. Es la densidad de
	 * la web en el celular, que tambien va a tres. Con dos columnas eran 8
	 * por hoja y 119 hojas, con el nombre a 10 pt y la foto casi igual.
	 */
	--columnas: 3;
	--filas: 4;
	--gap-fila: 2.5mm;
	/*
	 * Alcanza para un nombre de TRES lineas mas la variante y la pildora. En
	 * una columna de 31 mm a 9,5 pt entran ~15 caracteres por linea; los
	 * nombres que no entran en tres lineas bajan de cuerpo (ver .largo, mas
	 * abajo). Reservar para dos lineas y dejar que la tercera se acomode no
	 * sirve: la hoja tiene alto fijo, y lo que se pasa se mete abajo del pie.
	 * Cada medio punto de letra que se sube cuesta ~1 mm de foto.
	 */
	--reserva-fila: 29mm;
	--cols-indice: 1;
	--marca-sep-x: 18mm;
	--marca-sep-y: 16mm;
	--marca-sep-interno: 8mm;
}

body.formato-celular .banda .kicker { font-size: 6.5pt; letter-spacing: .1em; margin-bottom: .5mm; }
body.formato-celular .banda h1 { font-size: 13pt; }
body.formato-celular .banda .logo { height: 9mm; }

body.formato-celular .cuerpo { column-gap: 3mm; }
/* Medio punto mas que la primera version (Mauro, 2026-09-11: "un poquito mas
   grande la descripcion y el precio"). */
body.formato-celular .ficha .nombre { font-size: 9.5pt; }
/*
 * Los nombres largos bajan de cuerpo para quedarse en tres lineas: mas de 32
 * caracteres serian cuatro a 9,5 pt, y mas de 54, cuatro a 8,5. Son 160
 * nombres de mas de 34 y 2 de mas de 52 (medido el 2026-09-10). catalogo.js
 * pone la clase por largo del texto, y fuera de este formato no significa
 * nada.
 */
body.formato-celular .ficha .nombre.largo { font-size: 8.5pt; }
body.formato-celular .ficha .nombre.muy-largo { font-size: 7.5pt; }
body.formato-celular .ficha .variante { font-size: 8.5pt; }
body.formato-celular .ficha .precio span { font-size: 11pt; padding: 1.1mm 3.5mm; }
body.formato-celular .ficha .sin-foto { width: 18mm; height: 18mm; }

body.formato-celular .marca { font-size: 9pt; }

body.formato-celular .pie { bottom: 3mm; font-size: 8.5pt; }
body.formato-celular .pie .volver { font-size: 7.5pt; padding: 1mm 3mm; }
body.formato-celular .pie .contacto svg { width: 4mm; height: 4mm; }

body.formato-celular .hoja.tapa .logo-grande { width: 58mm; margin-top: 30mm; }
body.formato-celular .hoja.tapa .titulo { font-size: 17pt; }
body.formato-celular .hoja.tapa .periodo { font-size: 13pt; margin: 2mm 0 16mm; }
body.formato-celular .hoja.tapa .franja { font-size: 15pt; padding: 3.5mm 0; gap: 2.5mm; }
body.formato-celular .hoja.tapa .franja svg { width: 7mm; height: 7mm; }
body.formato-celular .hoja.tapa .datos { padding: 4mm 8mm; font-size: 9.5pt; line-height: 1.6; }

body.formato-celular .hoja.contratapa .logo-grande { width: 50mm; }
body.formato-celular .hoja.contratapa .contacto-blanco { margin-top: 8mm; font-size: 10pt; }
body.formato-celular .hoja.contratapa .tel { font-size: 14pt; }
body.formato-celular .hoja.contratapa .tel svg { width: 5.5mm; height: 5.5mm; }

/* El indice a una columna por hoja, y un poco mas grande: en el telefono se
   lee a dos tercios. */
body.formato-celular .indice-cat { margin-bottom: 4mm; }
body.formato-celular .indice-cat > a { font-size: 12pt; }
body.formato-celular .indice-cat li { margin-bottom: .5mm; }
body.formato-celular .indice-cat li a { font-size: 10pt; }
body.formato-celular .indice-cat .pag { font-size: 9.5pt; }


/* ==========================================================================
   MODO WEB
   ==========================================================================
   La version publica y la version para imprimir son EL MISMO documento: el
   mismo HTML, el mismo JS, este mismo CSS. Lo unico que cambia es la clase
   `modo-web` en el <body>.

   Todo lo de aca abajo vive dentro de @media screen, asi que la impresion no
   se entera: desde el navegador, Ctrl+P sigue sacando exactamente las mismas
   hojas A4 que antes. Esa es la razon de hacerlo asi y no con dos paginas
   separadas -- una sola fuente que se lee en el celular y se imprime en A4 sin
   que las dos versiones se desincronicen.
   ========================================================================== */

@media screen {

	/* Vista paginas: fondo gris como el panel, para que la hoja se lea como hoja.
   Vista lista: blanco, porque ahi no hay hojas. */
body.modo-web { background: #6b6b6b; }
	body.modo-web.vista-lista { background: #fff; }
	body.modo-web .barra { display: none; }

	/* La hoja deja de ser una hoja: se vuelve parte de una seccion que fluye.
	   La seccion (.seccion) son todas las hojas de una subcategoria juntas,
	   con un encabezado arriba de todas. Es la unidad de la version web: de
	   ella salen las anclas y lo que dice la barra. */
	body.modo-web.vista-lista .hoja {
		width: 100%;
		max-width: none;
		height: auto;
		margin: 0 auto;
		/* La hoja recorta a 210 x 297 mm para imprimir; aca no hay nada que
		   recortar. Y deja de ser el contenedor posicionado: lo unico absoluto
		   que tiene adentro (la marca y el pie) esta oculto en esta vista, y
		   las anclas se posicionan contra la seccion, mas abajo. */
		overflow: visible;
		position: static;
		box-shadow: none;
	}

	/* En scroll continuo la banda de cada hoja sobra: la seccion lleva un
	   solo encabezado, arriba de todas sus hojas. */
	body.modo-web.vista-lista .hoja .banda { display: none; }
	/*
	 * El encabezado de la seccion, en la corriente del scroll.
	 *
	 * No es una banda roja ni se pega: fue las dos cosas, y eran dos franjas
	 * rojas -- la barra y esta -- comiendose la pantalla en cada scroll
	 * (Mauro, 2026-09-09). Es un titulo que pasa con el resto, y es lo que
	 * separa una subcategoria de la siguiente ahora que el scroll es libre
	 * (2026-09-10): sin el, dos grillas seguidas se leen como una sola. La
	 * barra sigue diciendo en que seccion se esta parado, y el rubro y el
	 * titulo los saca de este mismo elemento.
	 */
	body.modo-web.vista-lista .banda-seccion {
		display: block;
		position: static;
		height: auto;
		max-width: 1180px;
		margin: 0 auto;
		padding: 36px var(--margen) 0;
		background: none;
		color: var(--tinta);
	}
	body.modo-web.vista-lista .banda-seccion .logo { display: none; }
	body.modo-web.vista-lista .banda-seccion .kicker {
		font-size: 11px;
		color: var(--gris-oscuro);
		opacity: 1;
		margin-bottom: 3px;
	}
	body.modo-web.vista-lista .banda-seccion h1 {
		font-size: 22px;
		color: var(--rojo);
		padding-bottom: 8px;
		border-bottom: 2px solid var(--gris);
	}

	/* El pie se repite 71 veces. En web va uno solo, al final. */
	body.modo-web.vista-lista .pie { display: none; }

	/* La marca de agua es una defensa del PDF impreso. En pantalla solo
	   ensucia y encima cuesta scroll. */
	body.modo-web.vista-lista .marca { display: none; }

	/*
	 * Las anclas del indice y del desplegable estan adentro de la primera
	 * hoja de la seccion, o sea despues del encabezado. Se las sube al borde
	 * de la seccion para que el salto aterrice en el titulo y no en la
	 * primera fila de fichas con el titulo escondido bajo la barra.
	 *
	 * Sin scroll-margin: la barra ya la descuenta el scroll-padding de <html>
	 * (mas abajo), y las dos correcciones se SUMAN. Con las dos, el salto
	 * aterrizaba una barra mas abajo y asomaba la cola de la seccion anterior
	 * (Mauro, 2026-09-10); con el snap no se notaba porque la seccion se
	 * reacomodaba sola despues.
	 */
	body.modo-web.vista-lista .seccion { position: relative; }
	body.modo-web.vista-lista .hoja > span[id] {
		position: absolute;
		top: 0;
	}

	/* La grilla deja de ser 3 x N fijo y se acomoda al ancho que haya. */
	body.modo-web.vista-lista .cuerpo {
		height: auto;
		/* Centrado y con tope de ancho: la banda llega al borde, la grilla no. */
		max-width: 1180px;
		margin: 0 auto;
		padding: 8mm var(--margen);
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
		grid-template-rows: none;
		row-gap: 8mm;
		column-gap: 12mm;
	}
	/* Sin la grilla de 4 pistas por fila, subgrid no aplica: la ficha vuelve a
	   apilarse sola. En pantalla la escalera de precios no molesta como en
	   papel, porque no hay una fila fija con la que comparar. */
	body.modo-web.vista-lista .ficha {
		grid-row: auto;
		display: flex;
		flex-direction: column;
		/* justify-items del padre es de grid y no llega al flex: sin esto el
		   contenido de la ficha se estira y el precio queda a la izquierda. */
		align-items: center;
	}
	/* Al fondo de la celda. Como las celdas de una fila miden todas igual,
	   todas las pildoras de esa fila quedan a la misma altura.
	
	   El align-self:center no es redundante con el align-items:center del
	   padre: la ficha impresa usa align-self:start para engancharse a las
	   pistas de subgrid, y en flex ese mismo valor manda sobre el eje
	   transversal -- o sea que dejaba el texto y el precio a la izquierda. */
	body.modo-web.vista-lista .ficha .texto { align-self: center; }
	body.modo-web.vista-lista .ficha .precio {
		align-self: center;
		margin-top: auto;
		padding-top: 3mm;
	}
	body.modo-web.vista-lista .ficha .foto {
		height: 110px;
		margin-bottom: 3mm;
	}
	body.modo-web.vista-lista .ficha .foto img { max-height: 110px; }
	body.modo-web.vista-lista .ficha .texto { flex: 1; }
	body.modo-web.vista-lista .ficha .nombre { font-size: 12px; }
	body.modo-web.vista-lista .ficha .variante { font-size: 11px; }
	body.modo-web.vista-lista .ficha .precio span { font-size: 13px; padding: 4px 12px; }

	/* El indice se vuelve la portada de la navegacion. */
	body.modo-web.vista-lista .hoja.indice .cuerpo { padding: 6mm var(--margen); }
	body.modo-web.vista-lista .indice-cols {
		display: block;
		/* Tres columnas entran comodas arriba de 900px y dejan la lista mas
		   corta; abajo de eso vuelve a dos y en el celular a una. */
		column-count: 3;
		column-gap: 12mm;
	}
	@media (max-width: 900px) {
		body.modo-web.vista-lista .indice-cols { column-count: 2; }
	}
	/* En pantalla el indice no compite por espacio como en la hoja A4, asi
	   que la tipografia puede respirar. */
	body.modo-web.vista-lista .indice-cat { margin-bottom: 7mm; }
	body.modo-web.vista-lista .indice-cat > a { font-size: 16px; margin-bottom: 3mm; }
	body.modo-web.vista-lista .indice-cat li { margin-bottom: 1.5mm; }
	body.modo-web.vista-lista .indice-cat li a { font-size: 14px; line-height: 1.35; }
	body.modo-web.vista-lista .col-indice { width: auto; }
	body.modo-web.vista-lista .indice-cat { break-inside: avoid; }
	/* El numero de pagina no significa nada cuando no hay paginas. */
	body.modo-web.vista-lista .indice-cat .pag,
	body.modo-web.vista-lista .indice-cat .puntos { display: none; }
	body.modo-web.vista-lista .indice-cat > a,
	body.modo-web.vista-lista .indice-cat li a { gap: 0; }

	/* La tapa pasa a ser un encabezado compacto. */
	/*
	 * La tapa deja de ser una tapa y pasa a ser el encabezado del sitio: el
	 * rojo se limita a una franja y el resto queda en blanco. A pantalla
	 * completa, y pegada a la barra que tambien es roja, era una plancha de
	 * rojo sin nada.
	 */
	body.modo-web.vista-lista .hoja.tapa {
		/* Sigue ocupando la pantalla, pero casi todo en blanco: lo que se
		   acorto es el rojo, no la seccion. Si la tapa fuera mas corta que la
		   pantalla, el titulo del indice aparecia a media altura -- justo lo
		   que no se quiere. */
		background: #fff;
		color: var(--tinta);
		padding-bottom: 0;
	}
	/* Solo el bloque del logo lleva rojo, y con una altura acotada. */
	/* El bloque rojo: mide lo que mide su contenido, no un numero fijo. */
	body.modo-web.vista-lista .tapa-cabecera {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-self: stretch;
		background: var(--rojo);
		padding: 26px 16px 22px;
	}
	body.modo-web.vista-lista .hoja.tapa .logo-grande {
		width: 122px;
		margin: 0 0 16px;
	}
	body.modo-web.vista-lista .hoja.tapa .titulo {
		margin-top: 0;
		font-size: 19pt;
		color: #fff;
	}
	body.modo-web.vista-lista .hoja.tapa .periodo {
		font-size: 13pt;
		margin: 1mm 0 14px;
	}
	body.modo-web.vista-lista .hoja.tapa .franja { padding: 10px 0; font-size: 16pt; }
	body.modo-web.vista-lista .hoja.tapa .franja svg { width: 6mm; height: 6mm; }
	body.modo-web.vista-lista .hoja.tapa .datos {
		flex: none;
		padding: 12px 6mm 18px;
		font-size: 10.5pt;
	}
	body.modo-web.vista-lista .hoja.contratapa { padding: 34px 0; min-height: 0; }
	body.modo-web.vista-lista .hoja.contratapa .logo-grande { width: 110px; }

	/*
	 * El scroll es libre (2026-09-10).
	 *
	 * Iba enganchado por secciones -- snap `mandatory`, cada seccion del alto
	 * de la pantalla y una animacion propia de 620 ms por paso de rueda -- y se
	 * sentia trabado: cada gesto era un salto que habia que esperar. Lo pidio
	 * Mauro y lo saco Mauro. Del scroll queda esto: los saltos del indice y
	 * del desplegable son suaves y aterrizan debajo de la barra.
	 */
	html.vista-lista {
		scroll-behavior: smooth;
		scroll-padding-top: var(--alto-barra-web);
	}

	/* Mientras se busca, del catalogo solo se ve la seccion de resultados,
	   que el buscador arma con copias de las fichas que entran. */
	body.modo-web .seccion.resultados { display: none; }
	body.modo-web.buscando .seccion.resultados { display: block; }
	body.modo-web.buscando #catalogo > .seccion:not(.resultados) { display: none; }
	body.modo-web.buscando-vacio .seccion.resultados { display: none; }
	/* De que seccion viene cada resultado. */
	body.modo-web .ficha .donde {
		margin-top: 3px;
		font-size: 11px;
		line-height: 1.25;
		color: var(--gris-oscuro);
	}
}


/* --------------------------------------------------------------------------
   VISTA PAGINAS (la de por defecto en la web)
   --------------------------------------------------------------------------
   La hoja sigue midiendo 210 x 297 mm; lo que cambia es que se dibuja escalada
   para entrar en el ancho que haya. Se escala con transform y no achicando las
   medidas, porque asi TODO baja en la misma proporcion -- la grilla de 3 x 5,
   la alineacion de precios por subgrid, el indice repartido en columnas, la
   marca de agua. Es la misma hoja que sale impresa, mas chica.

   Convertirla en una lista fluida rompia justamente eso: las secciones se
   pegaban una con otra, el indice se desarmaba y los precios perdian la
   alineacion, porque sin la grilla de pistas fijas subgrid no tiene de donde
   agarrarse.

   `transform` no ocupa lugar en el layout: la hoja escalada sigue reservando
   297 mm. Por eso cada una va adentro de .hoja-caja, que tiene el alto real ya
   escalado y recorta lo que sobra. */
@media screen {
	body.modo-web .hoja-caja {
		width: 100%;
		height: calc(var(--hoja-alto) * var(--escala));
		margin: 0 auto 14px;
		overflow: hidden;
	}
	body.modo-web .hoja-caja .hoja {
		margin: 0 auto;
		transform: scale(var(--escala));
		transform-origin: top left;
		/* Con origin top-left la hoja escalada queda pegada a la izquierda;
		   este margen la vuelve a centrar. */
		margin-left: calc((100% - var(--hoja-ancho) * var(--escala)) / 2);
	}
	/* En vista lista la caja desaparece y la hoja vuelve a fluir. */
	body.modo-web.vista-lista .hoja-caja {
		height: auto;
		overflow: visible;
		margin-bottom: 0;
	}
	body.modo-web.vista-lista .hoja-caja .hoja {
		transform: none;
		margin-left: auto;
	}
}

/* En impresion la caja no existe: es un div sin estilo alrededor de la hoja. */
@media print {
	.hoja-caja { display: block; }
}

/* --------------------------------------------------------------------------
   La barra de la version publica
   -------------------------------------------------------------------------- */
/*
 * Lo escribe medirBarra() en catalogo.js con el alto real de la barra. El
 * valor de aca es solo el arranque, hasta que el JS mida.
 *
 * OJO: la barra NO puede tomar su altura de esta variable. Lo hacia, y como
 * el JS la calcula midiendo la barra, se retroalimentaban: al pasar de
 * celular (tres filas, 136 px) a escritorio, la barra se quedaba en 136 px
 * para siempre.
 */
:root { --alto-barra-web: 52px; }

.barra-web { display: none; }

@media screen {
	/* La barra es de la version web entera, no de una vista. Quedo atada a
	   .vista-lista en un refactor y desaparecia en vista paginas. */
	body.modo-web .barra-web {
		position: sticky;
		top: 0;
		z-index: 20;
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 52px;
		padding: 8px 12px;
		background: var(--rojo);
		color: #fff;
	}
	.barra-web img { height: 30px; }
	/*
	 * Una sola linea, en toda pantalla (Mauro, 2026-09-09).
	 *
	 * El buscador no esta a la vista: lo abre la lupa, que ocupa su lugar. Era
	 * el arreglo del celular y paso a ser la regla -- la barra esta pegada
	 * arriba de todo el scroll, asi que cada pixel de alto se lo come al
	 * producto, que es lo que la gente vino a ver. Al abrirse, el buscador se
	 * estira en la misma fila (`flex: 1`) y no agrega una segunda.
	 *
	 * El orden es explicito y no el del DOM: la lupa va donde estaba el campo,
	 * pegada al logo, y no al final despues del PDF.
	 */
	.barra-web img { order: 1; }
	.barra-web .seccion-actual { order: 2; }
	/* El campo ABRE A LA IZQUIERDA de la lupa (Mauro, 2026-09-09): asi la lupa
	   y los botones se quedan donde estaban y no salta nada al tocarla. Con la
	   lupa antes, abrir corria toda la barra a la derecha. */
	.barra-web .buscador { order: 3; }
	.barra-web .lupa { order: 4; }
	.barra-web .menu-cats { order: 5; }
	.barra-web .vista { order: 6; }
	.barra-web .pdf { order: 7; }

	/*
	 * El logo solo a la izquierda y todo lo demas junto a la derecha (Mauro,
	 * 2026-09-09). Lo separa el bloque de la seccion, que crece y ocupa el
	 * medio; el `auto` de la lupa es el respaldo para cuando ese bloque no
	 * esta (la tapa, el indice, la vista paginas).
	 *
	 * Con el buscador abierto el `auto` no hace nada, y esta bien: un margen
	 * auto se queda con el espacio libre solo cuando no hay nadie creciendo, y
	 * ahi el campo (`flex: 1`) se lo lleva todo.
	 */
	.barra-web .lupa { margin-left: auto; }

	/*
	 * En que seccion esta parado el que lee: "Pan dulce y budines › Budines".
	 *
	 * Vivia en una banda roja propia, pegajosa, abajo de la barra -- y eran
	 * dos franjas rojas una encima de la otra comiendose la pantalla. Acá
	 * entra en la linea que ya existia y no cuesta un pixel de alto.
	 *
	 * `min-width: 0` es lo que habilita el ellipsis: sin eso un hijo de flex
	 * no baja de su ancho de contenido y el titulo largo empuja los botones
	 * afuera de la barra en vez de recortarse.
	 */
	.barra-web .seccion-actual {
		flex: 1;
		min-width: 0;
		display: flex;
		align-items: baseline;
		gap: 0 .45em;
		white-space: nowrap;
		font-family: var(--titulo);
	}
	.barra-web .seccion-actual .rubro {
		flex: none;
		font-family: var(--texto);
		font-size: 11px;
		letter-spacing: .12em;
		text-transform: uppercase;
		opacity: .75;
	}
	.barra-web .seccion-actual .rubro::after { content: " ›"; }
	.barra-web .seccion-actual .titulo {
		font-weight: 700;
		font-size: 16px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/* Buscando no importa en que seccion estabas, y el campo necesita el
	   lugar. En vista paginas tampoco: ahi cada hoja lleva su banda. */
	.barra-web.con-buscador .seccion-actual,
	body.modo-web:not(.vista-lista) .seccion-actual,
	body.buscando .seccion-actual { display: none; }

	.barra-web .buscador {
		display: none;
		flex: 1;
		min-width: 0;
		font: inherit;
		font-size: 15px;
		padding: 7px 12px;
		border: 0;
		border-radius: 999px;
		background: rgba(255,255,255,.16);
		color: #fff;
	}
	.barra-web.con-buscador .buscador { display: block; }
	.barra-web .buscador::placeholder { color: rgba(255,255,255,.7); }
	.barra-web .buscador:focus { outline: 2px solid #fff; background: rgba(255,255,255,.24); }
	.barra-web > a, .barra-web > button,
	.barra-web .menu-cats > a, .barra-web .menu-cats > button {
		flex: none;
		font: inherit;
		font-family: var(--titulo);
		font-weight: 600;
		font-size: 13px;
		padding: 7px 14px;
		border: 1px solid rgba(255,255,255,.5);
		border-radius: 999px;
		background: transparent;
		color: #fff;
		text-decoration: none;
		cursor: pointer;
	}
	.barra-web > a:hover, .barra-web > button:hover { background: rgba(255,255,255,.15); }
	/* La pildora partida se ilumina entera, no por mitades: si no, con el
	   mouse sobre la flecha se veia como dos botones distintos. */
	.barra-web .menu-cats:hover > a, .barra-web .menu-cats:hover > button,
	.barra-web .menu-cats.abierto > a, .barra-web .menu-cats.abierto > button { background: rgba(255,255,255,.15); }
	.barra-web .vista {
		flex: none;
		font: inherit;
		font-family: var(--titulo);
		font-weight: 600;
		font-size: 13px;
		/* El mismo padding que las pildoras, mas el lugar de la flecha. */
		padding: 7px 30px 7px 14px;
		border: 1px solid rgba(255,255,255,.5);
		border-radius: 999px;
		color: #fff;
		cursor: pointer;
		/* Sin la flecha nativa del navegador: la misma que la del desplegable
		   de categorias, del mismo tamano (11 x 7) y al mismo margen (11 px). */
		appearance: none;
		-webkit-appearance: none;
		background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center / 11px 7px;
	}
	.barra-web .vista:hover { background-color: rgba(255,255,255,.15); }
	.barra-web .vista option { color: var(--tinta); }
	.barra-web .lupa { display: flex; align-items: center; padding: 7px 11px; }
	.barra-web .lupa svg { display: block; width: 15px; height: 15px; }
	.barra-web.con-buscador .lupa { background: rgba(255,255,255,.2); }
	/* La flecha va antes del texto ("↓ PDF") y con su tamano fijo: sin el
	   width toma el del contenedor y sale gigante. */
	.barra-web .pdf .corto { display: inline-flex; align-items: center; }
	.barra-web .pdf .corto svg { width: 9px; height: 10px; margin-right: 4px; }

	/* El desplegable de categorias. El link y la flecha son una sola pildora
	   partida en dos: el link lleva al indice, la flecha abre la lista. */
	.barra-web .menu-cats {
		position: relative;
		flex: none;
		display: flex;
		/* Las dos mitades miden lo mismo de alto: la flecha es un SVG de 7 px
		   y con su propio padding quedaba mas baja que la linea de texto. */
		align-items: stretch;
	}
	.barra-web .menu-cats > a { border-radius: 999px 0 0 999px; border-right: 0; }
	.barra-web .menu-cats > button {
		display: flex;
		align-items: center;
		border-radius: 0 999px 999px 0;
		padding: 0 11px 0 8px;
		border-left-color: rgba(255,255,255,.3);
	}
	.barra-web .menu-cats > button svg {
		display: block;
		width: 11px;
		height: 7px;
		transition: transform .15s;
	}
	.barra-web .menu-cats.abierto > button svg { transform: rotate(180deg); }
	/* El panel cuelga de la pildora. El aire de arriba es padding y no margen
	   para que el mouse pueda bajar del boton a la lista sin salir del grupo,
	   que es lo que lo cierra. */
	.menu-cats-panel {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 30;
		padding-top: 8px;
	}
	.menu-cats.abierto .menu-cats-panel { display: block; }
	.menu-cats-lista {
		width: max-content;
		max-width: min(760px, calc(100vw - 24px));
		max-height: calc(100vh - var(--alto-barra-web) - 24px);
		overflow: auto;
		padding: 16px 20px 8px;
		background: #fff;
		color: var(--tinta);
		border-radius: 12px;
		box-shadow: 0 10px 30px rgba(0,0,0,.28);
		column-count: 3;
		column-gap: 28px;
		text-align: left;
	}
	.menu-cat { break-inside: avoid; margin-bottom: 12px; }
	.menu-cat > a {
		display: block;
		font-family: var(--titulo);
		font-weight: 600;
		font-size: 14px;
		line-height: 1.25;
		color: var(--rojo);
		text-decoration: none;
	}
	.menu-cat ul { list-style: none; margin: 3px 0 0; padding: 0; }
	.menu-cat li a {
		display: block;
		padding: 2px 0;
		font-size: 13px;
		line-height: 1.3;
		color: var(--tinta);
		text-decoration: none;
	}
	.menu-cat a:hover { text-decoration: underline; }

	.sin-resultados {
		display: none;
		max-width: 1080px;
		margin: 0 auto;
		padding: 14mm var(--margen);
		text-align: center;
		color: var(--gris-oscuro);
	}
	body.modo-web.buscando-vacio .sin-resultados { display: block; }
}

/* --------------------------------------------------------------------------
   Celular
   --------------------------------------------------------------------------
   Con el margen de 14mm de la hoja A4, a 375px quedan 269px utiles y no entran
   dos fichas de 140: la grilla colapsaba a UNA columna y recorrer 654 productos
   era scroll infinito. Y la barra metia logo, buscador y dos botones en una
   fila sola, con lo que el buscador terminaba en 61px de ancho.

   Los margenes de milimetros son para el papel; en pantalla chica estorban. */
@media screen and (max-width: 640px) {
	body.modo-web.vista-lista .cuerpo {
		padding: 5mm 3mm;
		/* Tres por fila, fijas. Con el minimo de 116 px por ficha, a 375 px
		   entraban dos y recorrer 654 productos era el doble de scroll. */
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 2.5mm;
		row-gap: 6mm;
	}
	body.modo-web.vista-lista .banda-seccion,
	body.modo-web.vista-lista .hoja.indice .cuerpo { padding-left: 4mm; padding-right: 4mm; }
	body.modo-web.vista-lista .banda-seccion { padding-top: 26px; }
	body.modo-web.vista-lista .banda-seccion h1 { font-size: 18px; }
	body.modo-web.vista-lista .ficha .foto { height: 88px; }
	body.modo-web.vista-lista .ficha .foto img { max-height: 88px; }

	/* El indice a una columna: a 375px, dos columnas son ilegibles. */
	body.modo-web.vista-lista .indice-cols { column-count: 1; }

	body.modo-web .barra-web {
		flex-wrap: wrap;
		gap: 6px;
		padding: 8px 10px;
		/* El pseudo que corta la fila se lleva un row-gap propio, asi que este
		   se cuenta dos veces entre una fila y la otra. */
		row-gap: 4px;
	}
	/*
	 * Dos filas, y siempre las mismas dos (Mauro, 2026-09-09):
	 *
	 *     logo   [ la seccion, o el buscador ]   lupa
	 *     Categorias   Lista   ↓ PDF
	 *
	 * Antes envolvia sola por falta de lugar, asi que el corte caia donde
	 * cayera: el "↓ PDF" bajaba solo a una segunda fila, y con una seccion
	 * larga el nombre se metia abajo de los botones. El corte va acá, fijo,
	 * con un pseudo-elemento de ancho completo entre la lupa y las pildoras
	 * -- que es como se fuerza un salto de fila en flex.
	 *
	 * Los dos que se turnan comparten el `order`: solo uno esta visible por
	 * vez, y asi el buscador aparece exactamente donde estaba la seccion.
	 */
	.barra-web .seccion-actual { order: 2; }
	.barra-web .buscador { order: 2; flex-basis: auto; }
	.barra-web .lupa { order: 3; padding: 6px 8px; }
	.barra-web::before {
		content: "";
		order: 4;
		flex-basis: 100%;
		height: 0;
	}
	.barra-web .menu-cats { order: 5; }
	.barra-web .vista { order: 6; }
	.barra-web .pdf { order: 7; }

	/* Solo el titulo: el rubro entero mas el titulo no entran en 360 px, y de
	   los dos el titulo es el que dice donde estas parado. */
	.barra-web .seccion-actual .rubro { display: none; }
	.barra-web .seccion-actual .titulo { font-size: 14px; }

	.barra-web img { height: 26px; }
	.barra-web > a, .barra-web > button,
	.barra-web .menu-cats > a, .barra-web .menu-cats > button { padding: 6px 9px; font-size: 12px; }
	.barra-web .menu-cats > button { padding: 0 8px 0 6px; }
	.barra-web .vista { padding: 6px 24px 6px 9px; font-size: 12px; background-position: right 8px center; }

	/* En el celular el desplegable ocupa el ancho de la pantalla, debajo de
	   la barra, a dos columnas. */
	.menu-cats-panel {
		position: fixed;
		left: 8px;
		right: 8px;
		top: var(--alto-barra-web);
		padding-top: 0;
	}
	.menu-cats-lista {
		width: auto;
		max-width: none;
		max-height: calc(100vh - var(--alto-barra-web) - 16px);
		padding: 14px 14px 4px;
		column-count: 2;
		column-gap: 18px;
	}
}

@media print {
	.barra-web, .sin-resultados, .seccion.resultados { display: none !important; }
}

/* --------------------------------------------------------------------------
   Impresion
   -------------------------------------------------------------------------- */
@media print {
	html, body { background: #fff; }
	.barra, .medidor { display: none !important; }
	.hoja {
		margin: 0;
		box-shadow: none;
	}
	/* Sin esto Chrome descarta los fondos de color y la banda roja sale en
	   blanco. Es el ajuste que mas rompe cuando falta. */
	* {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}