/*
 * Catálogo Navideño Catador 2026
 *
 * Sistema visual heredado del PDF 2025 (brief §5). Las tipografías NO son las
 * que proponía el brief (Playfair + Inter): el sitio ya tiene definidas
 * Libre Baskerville para títulos y Roboto para texto en el kit de Elementor,
 * y el brief pedía usar las del sitio si existían.
 */

/*
 * Las variables van en :root, no en .catnav. El drawer y el botón flotante se
 * trasladan al <body> por JS y dejarían de heredarlas: el botón de checkout se
 * quedaría sin color de fondo (invisible sobre blanco).
 */
:root {
	/*
 * BLANCO PURO, y no un crema, a propósito.
 *
 * Las fotografías del catálogo se exportan sobre blanco. Con la hoja en #FDFCF9
 * —apenas un 1% más cálido— cada foto dejaba ver el canto de su rectángulo, y
 * al pasar el cursor, que tiñe la tarjeta de rojo al 4%, la fotografía se
 * quedaba sin teñir: un recuadro blanco recortado en medio de una tarjeta rosa.
 *
 * No se puede arreglar por el lado de la imagen. Los recortes que entregó el
 * cliente traen orla blanca pegada al contorno —en Château de Pizay, el 88% del
 * borde— así que exportarlas con transparencia o con fondo crema dejaría a la
 * vista un halo blanco alrededor de cada botella, que es bastante peor que un
 * canto. Lo que se iguala es la hoja.
 *
 * Si alguna vez se quiere recuperar el tono cálido de papel, hay que cambiar
 * ANTES el fondo sobre el que se exportan las imágenes (recortar.php, exportar)
 * y comprobar las orlas.
 */
--catnav-papel:      #FFFFFF;
	--catnav-rojo:       #B01E23;
	--catnav-azul:       #1B3A6B;
	--catnav-tinta:      #1A1A1A;
	--catnav-oro:        #987C54;  /* primario de marca del sitio */
	--catnav-navy:       #0C1D32;  /* color de títulos del sitio */
	--catnav-serif:      "Libre Baskerville", Georgia, serif;
	--catnav-sans:       Roboto, system-ui, -apple-system, sans-serif;
	--catnav-hoja-w:     550px;
	--catnav-hoja-h:     780px;
}

.catnav {
	position: relative;
	/* OJO: aquí NO puede ir z-index. Un z-index numérico sobre .catnav crea un
	   contexto de apilamiento y encierra al drawer dentro, con lo que ya no
	   puede taparse la cabecera del tema por mucho z-index que se le ponga.
	   El drawer, además, se traslada al <body> por JS (ver catalogo.js). */
	font-family: var(--catnav-sans);
}

/* ------------------------------------------------------------- escenario */

.catnav__escenario {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	/* Aire mínimo: el libro tiene que ocupar la pantalla, no flotar en ella. */
	padding: 10px 0;
}

.catnav__libro {
	/* StPageFlip posiciona las hojas en absoluto y fija el alto por JS.
	   Este min-height reserva el hueco antes de que arranque, para que el
	   libro no se solape con lo que tiene encima. */
	flex: 0 1 auto;
	min-height: 420px;
}

.catnav__flecha {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(12, 29, 50, .18);
	border-radius: 50%;
	background: #fff;
	color: var(--catnav-navy);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background .18s, border-color .18s;
}

.catnav__flecha:hover  { background: var(--catnav-papel); border-color: var(--catnav-oro); }
.catnav__flecha[disabled] { opacity: .3; cursor: default; }

/* ------------------------------------------------------------------ hoja */

/*
 * OJO: StPageFlip toma cada .catnav-hoja como elemento de página y le escribe
 * estilos INLINE (position, width, height, display). Por eso aquí no se define
 * ni display ni layout: todo eso vive en .catnav-hoja__interior, que la
 * librería no toca. Si se pone `display:flex` en .catnav-hoja, la librería lo
 * pisa al mostrar/ocultar páginas y el contenido se va arriba.
 */
.catnav-hoja {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	background: var(--catnav-papel);
	color: var(--catnav-tinta);
	overflow: hidden;
}

.catnav-hoja__interior {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 38px 34px 46px;
}

/* Las hojas cuyo contenido va centrado lo hacen desde el interior. */
.catnav-hoja--portada .catnav-hoja__interior,
.catnav-hoja--contraportada .catnav-hoja__interior,
.catnav-hoja--separador .catnav-hoja__interior {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Sombra de lomo: más marcada en el borde interior de cada hoja. */
.stf__item--left  .catnav-hoja { box-shadow: inset -14px 0 22px -14px rgba(0, 0, 0, .32); }
.stf__item--right .catnav-hoja { box-shadow: inset  14px 0 22px -14px rgba(0, 0, 0, .32); }

.catnav-hoja__folio {
	position: absolute;
	right: 26px;
	bottom: 18px;
	font-family: var(--catnav-serif);
	font-size: 13px;
	color: rgba(26, 26, 26, .45);
}

.catnav-hoja--blanca { background: var(--catnav-papel); }

/* ------------------------------------------------- portada / contraportada */

.catnav-hoja--portada,
.catnav-hoja--contraportada {
	background: var(--catnav-navy);
	color: #fff;
}

.catnav-portada__marco {
	padding: 40px 28px;
	border: 1px solid rgba(152, 124, 84, .55);
}

.catnav-portada__sobretitulo {
	margin: 0 0 14px;
	font-family: var(--catnav-serif);
	font-size: 15px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--catnav-oro);
}

.catnav-portada__titulo {
	margin: 0;
	font-family: var(--catnav-serif);
	font-size: clamp(26px, 4.4vw, 40px);
	font-weight: 600;
	line-height: 1.18;
	color: #fff;
}

.catnav-portada__anio {
	margin: 18px 0 0;
	font-family: var(--catnav-serif);
	font-size: 30px;
	letter-spacing: .2em;
	color: var(--catnav-oro);
}

.catnav-contra__aviso {
	max-width: 34ch;
	margin: 22px auto 0;
	font-size: 12.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .74);
}

/* ---------------------------------------------------------------- índice */

.catnav-hoja__titulo {
	margin: 0 0 26px;
	font-family: var(--catnav-serif);
	font-size: 24px;
	font-weight: 600;
	text-align: center;
	color: var(--catnav-navy);
}

.catnav-indice { margin: 0; padding: 0; list-style: none; }
.catnav-indice li + li { margin-top: 2px; }

.catnav-indice__enlace {
	display: flex;
	align-items: baseline;
	gap: 8px;
	width: 100%;
	padding: 7px 4px;
	border: 0;
	background: none;
	font-family: var(--catnav-serif);
	font-size: 14.5px;
	color: var(--catnav-tinta);
	text-align: left;
	cursor: pointer;
}

/*
 * El índice declara su propio aspecto en TODOS los estados.
 *
 * Antes solo se fijaba el fondo del estado normal (`background: none`), y en
 * hover, foco o pulsación quedaba a merced de lo que trajera el tema o
 * WooCommerce para un `<button>` suelto. En producción aparecía una banda
 * fucsia a lo ancho de la fila, con el texto granate encima: prácticamente
 * ilegible, y además un color que no está en la paleta del catálogo.
 *
 * El resalte va acorde con el resto: un tinte rojo muy suave —el mismo 5-6% que
 * usan las filas de variantes— y el nombre de la bodega en rojo. Nada de bandas
 * sólidas.
 */
.catnav-indice__enlace:hover,
.catnav-indice__enlace:focus,
.catnav-indice__enlace:active {
	background: rgba(176, 30, 35, .06);
	color: var(--catnav-tinta);
	border-radius: 3px;
}

.catnav-indice__enlace:hover .catnav-indice__marca,
.catnav-indice__enlace:focus .catnav-indice__marca { color: var(--catnav-rojo); }

/*
 * Y no se deja seleccionar. Son controles de navegación, no texto de lectura:
 * al pulsarlos con un arrastre mínimo el navegador seleccionaba la línea entera
 * y la pintaba de su color de selección, que es justo lo que parecía un hover
 * roto. Los nombres de producto sí siguen siendo texto seleccionable.
 */
.catnav-indice__enlace { -webkit-user-select: none; user-select: none; }

/* Foco por teclado: tiene que verse, y no puede confundirse con el hover. */
.catnav-indice__enlace:focus-visible {
	outline: 2px solid var(--catnav-rojo);
	outline-offset: -2px;
}
.catnav-indice__puntos { flex: 1 1 auto; border-bottom: 1px dotted rgba(26, 26, 26, .32); }
.catnav-indice__pagina { color: var(--catnav-azul); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- separador */

.catnav-separador__filete {
	display: block;
	width: 54px;
	height: 1px;
	margin: 20px auto;
	background: var(--catnav-oro);
}

.catnav-separador__marca {
	margin: 0;
	font-family: var(--catnav-serif);
	font-size: clamp(20px, 3vw, 27px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--catnav-navy);
}

/* --------------------------------------------------------------- tarjeta */

.catnav-hoja__cuerpo {
	display: flex;
	flex-direction: column;
	/* NUNCA space-around/space-between aquí: si el contenido desborda la hoja el
	   espacio libre es negativo y los grupos se acaban montando unos sobre
	   otros. Con flex-start + gap el desbordamiento se recorta, que es feo pero
	   legible; el solape no lo es. */
	justify-content: flex-start;
	height: 100%;
	gap: 16px;
	overflow: hidden;
}

/*
 * Centrado vertical SEGURO: con márgenes automáticos el contenido se centra
 * cuando sobra sitio y los márgenes se quedan en cero cuando no sobra. Es la
 * alternativa a `justify-content: center`, que con espacio negativo monta unos
 * bloques sobre otros.
 */
.catnav-hoja__cuerpo > * { margin-block: auto; }

.catnav-tarjeta {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 0;
}

/* Una sola tarjeta en la hoja: se apila y se luce la foto. */
.catnav-hoja--g1 .catnav-tarjeta {
	flex-direction: column;
	gap: 14px;
	text-align: center;
}

.catnav-tarjeta__foto {
	flex: 0 0 54%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	height: 100%;
}

.catnav-hoja--g1 .catnav-tarjeta__foto { flex: 1 1 auto; width: 100%; }

.catnav-tarjeta__foto img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	/* Reserva el hueco antes de que el lazy-load traiga la imagen. */
	min-height: 90px;
}

.catnav-tarjeta__texto { flex: 1 1 auto; min-width: 0; }

.catnav-tarjeta__presentacion {
	margin: 0 0 6px;
	font-family: var(--catnav-serif);
	font-size: 14px;
	font-weight: 600;
	color: var(--catnav-rojo);
}

.catnav-tarjeta__nombre {
	margin: 0 0 6px;
	font-family: var(--catnav-serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--catnav-tinta);
}

.catnav-tarjeta__nombre a { color: inherit; text-decoration: none; }
.catnav-tarjeta__nombre a:hover { text-decoration: underline; }

.catnav-tarjeta__composicion {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(26, 26, 26, .72);
}

.catnav-tarjeta__precio {
	margin: 0 0 12px;
	font-family: var(--catnav-serif);
	font-size: 21px;
	font-weight: 700;
	color: var(--catnav-azul);
	font-variant-numeric: tabular-nums;
}

/* ------------------------- grupo: una foto + varias variantes que la comparten */

.catnav-grupo {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 0;
}

/* La fotografía manda: el cliente pidió imágenes grandes, "que llamen la
   atención". Antes ocupaba el 34% del ancho de la hoja. */
.catnav-grupo__foto {
	flex: 0 0 46%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	height: 100%;
}

.catnav-grupo__foto img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	min-height: 80px;
}

.catnav-grupo__texto { flex: 1 1 auto; min-width: 0; }

.catnav-variantes { margin: 0; padding: 0; list-style: none; }

/*
 * Nombre y precio comparten fila; el botón queda a la derecha ocupando las dos
 * filas. Así el nombre puede usar todo el ancho y no se parte en cuatro líneas
 * cuando la hoja es estrecha.
 */
.catnav-variante {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 1px 8px;
	padding: 6px 0;
	border-bottom: 1px solid rgba(26, 26, 26, .08);
}

.catnav-variante__nombre  { grid-column: 1; grid-row: 1; }
.catnav-variante__precio  { grid-column: 1; grid-row: 2; }
.catnav-variante .catnav-boton-agregar { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

.catnav-variante:last-child { border-bottom: 0; }

/* Mismo tamaño que `.catnav-tarjeta__nombre`: son lo mismo para quien lee. */
.catnav-variante__nombre {
	margin: 0;
	font-family: var(--catnav-serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--catnav-tinta);
}

/*
 * Toda la fila de variante es clicable, y toda la tarjeta de producto único
 * también —incluida su fotografía—. Lo pidió el cliente: "al hacer clic en la
 * imagen poder comprar", "al hacer clic en ítem poder llevarlo al carrito".
 *
 * Se consigue estirando un pseudo-elemento del botón sobre el contenedor, en
 * vez de envolver todo en un <button>: así el nombre sigue siendo un <h3> de
 * texto real (indexable) y el marcado sigue siendo válido.
 */
.catnav-variante,
.catnav-tarjeta--clicable { position: relative; }

.catnav-variante .catnav-boton-agregar::after,
.catnav-tarjeta--clicable .catnav-boton-agregar::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/*
 * EL RESALTE DEL CURSOR NO PINTA FONDO DETRÁS DE LA FOTOGRAFÍA.
 *
 * Teñir la tarjeta entera parecía lo natural, pero la fotografía es opaca y con
 * fondo blanco: el tinte la rodeaba sin llegar a ella y la dejaba como un
 * recuadro blanco recortado dentro de una tarjeta rosa. Cuanto más grande la
 * foto —y aquí son grandes a propósito— más cantaba.
 *
 * En la tarjeta de un solo producto, donde la foto ocupa casi todo, el aviso va
 * por el contorno: un filete y una sombra suave. En la lista de variantes, donde
 * lo que se resalta es una FILA DE TEXTO y no hay foto debajo, el tinte sí vale
 * y se conserva, porque ahí es lo que mejor indica qué línea se va a comprar.
 */
.catnav-variante { transition: background .15s; border-radius: 3px; }
.catnav-variante:hover { background: rgba(176, 30, 35, .05); }

/*
 * El filete va SEPARADO de la tarjeta, no pegado a su borde.
 *
 * Pegado no funcionaba: la fotografía ocupa exactamente el borde izquierdo, así
 * que la línea quedaba lamiendo el canto de la imagen y dejaba de leerse como un
 * marco cerrado — parecía un rectángulo que empezaba donde acababa la foto, con
 * la imagen rompiéndolo.
 *
 * Se usa `outline` con `outline-offset` en vez de `box-shadow`: separa el filete
 * unos píxeles sin empujar el contenido ni cambiar la altura de la hoja, cosa
 * que un padding sí haría. La sombra suave se queda, que es la que da la
 * sensación de que la tarjeta se levanta.
 */
.catnav-tarjeta--clicable {
	transition: box-shadow .15s, outline-color .15s;
	border-radius: 6px;
	outline: 1px solid transparent;
	outline-offset: 7px;
}

.catnav-tarjeta--clicable:hover {
	outline-color: rgba(176, 30, 35, .30);
	box-shadow: 0 3px 16px rgba(12, 29, 50, .10);
}

.catnav-tarjeta--clicable:hover .catnav-tarjeta__foto img { transform: scale(1.02); }
.catnav-tarjeta__foto img { transition: transform .18s; }

/* Mismo tamaño que `.catnav-tarjeta__precio`, por el mismo motivo. */
.catnav-variante__precio {
	font-family: var(--catnav-serif);
	font-size: 21px;
	font-weight: 700;
	color: var(--catnav-azul);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ------------------------------------------------------ botón de compra */

/*
 * `max-width:100%` y `min-width:0` para que el botón nunca sobresalga de su
 * columna: en la hoja de dos productos el texto "Agregar al carrito" se salía
 * de la tarjeta y la hoja lo recortaba a "Agregar al carri".
 */
.catnav-boton-agregar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-width: 100%;
	min-width: 0;
	padding: 9px 15px;
	border: 0;
	border-radius: 4px;
	background: var(--catnav-rojo);
	color: #fff;
	font-family: var(--catnav-sans);
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	transition: background .18s, transform .12s;
}

.catnav-boton-agregar:hover  { background: #8f171c; }
.catnav-boton-agregar:active { transform: translateY(1px); }

.catnav-boton-agregar__texto { min-width: 0; }

.catnav-boton-agregar__icono {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Variante compacta: solo el icono, para las listas de variantes. */
.catnav-boton-agregar--mini {
	padding: 6px 9px;
	border-radius: 3px;

	/*
	 * 44 px de lado, que es la zona táctil mínima recomendada.
	 *
	 * La fila entera ya es clicable —un pseudo-elemento del botón se estira sobre
	 * ella— así que el dedo acierta igual. Pero el botón es lo ÚNICO que se ve, y
	 * medía 38x32: en móvil parecía un adorno y no invitaba a tocarlo. Medido a
	 * mano en las dos pantallas antes de tocarlo.
	 */
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.catnav-boton-agregar--mini .catnav-boton-agregar__texto {
	/* Se oculta visualmente pero sigue disponible para lectores de pantalla. */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.catnav-boton-agregar--mini.is-ok .catnav-boton-agregar__icono,
.catnav-boton-agregar--mini.is-error .catnav-boton-agregar__icono { display: none; }

.catnav-boton-agregar--mini.is-ok::after    { content: "✓"; font-size: 14px; line-height: 16px; }
.catnav-boton-agregar--mini.is-error::after { content: "!"; font-size: 14px; line-height: 16px; }

.catnav-boton-agregar.is-cargando { background: #8f171c; cursor: wait; }
.catnav-boton-agregar.is-ok       { background: #2f7d3f; }
.catnav-boton-agregar.is-error    { background: #6b6b6b; }

.catnav-boton-agregar.is-cargando .catnav-boton-agregar__icono {
	animation: catnav-girar .8s linear infinite;
}

@keyframes catnav-girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------ carrito flotante */

/*
 * Los z-index van muy altos a propósito: la cabecera de Elementor y los
 * botones flotantes del tema (WhatsApp, volver arriba) se pintan por encima
 * de 9999, y el drawer tiene que taparlos mientras está abierto.
 */
.catnav-carrito-boton {
	position: fixed;
	right: 22px;
	/* Por encima del botón de WhatsApp del tema, que vive abajo a la derecha. */
	bottom: 96px;
	z-index: 999997;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 50%;
	background: var(--catnav-navy);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .26);
}

/*
 * Volver al índice. Se apila justo encima del carrito, en la misma columna, y
 * lleva etiqueta visible: el icono de tres rayas solo es ambiguo.
 */
.catnav-indice-boton {
	position: fixed;
	right: 22px;
	bottom: 160px;
	z-index: 999997;
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 16px 0 13px;
	border: 0;
	border-radius: 22px;
	background: var(--catnav-navy);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	letter-spacing: .02em;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .26);
}

.catnav-indice-boton[hidden] { display: none; }

.catnav-indice-boton svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
}

.catnav-carrito-boton svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.catnav-carrito-boton__contador {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 21px;
	height: 21px;
	padding: 0 5px;
	border-radius: 11px;
	background: var(--catnav-rojo);
	font-size: 12px;
	font-weight: 700;
	line-height: 21px;
}

.catnav-carrito-boton__contador:empty,
.catnav-carrito-boton__contador[data-vacio] { display: none; }

/* ---------------------------------------------------------------- drawer */

.catnav-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	width: min(380px, 92vw);
	height: 100%;
	background: #fff;
	box-shadow: -8px 0 30px rgba(0, 0, 0, .2);
	transform: translateX(102%);
	transition: transform .28s ease;
}

.catnav-drawer.is-abierto { transform: translateX(0); }

.catnav-drawer__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid #ececec;
}

.catnav-drawer__cabecera h2 {
	margin: 0;
	font-family: var(--catnav-serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--catnav-navy);
}

.catnav-drawer__cerrar {
	border: 0;
	background: none;
	font-size: 27px;
	line-height: 1;
	color: #767676;
	cursor: pointer;
}

.catnav-drawer__cuerpo { flex: 1 1 auto; overflow-y: auto; padding: 8px 20px; }

/* El drawer vive en el <body>, fuera de .catnav: fija su propia tipografía. */
.catnav-drawer { font-family: var(--catnav-sans); }

.catnav-linea {
	display: flex;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid #f2f2f2;
}

.catnav-linea__foto { flex: 0 0 56px; }
.catnav-linea__foto img { width: 56px; height: auto; border-radius: 3px; }
.catnav-linea__datos { flex: 1 1 auto; min-width: 0; }

.catnav-linea__nombre {
	margin: 0 0 4px;
	font-family: var(--catnav-serif);
	font-size: 14px;
	line-height: 1.35;
	color: var(--catnav-tinta);
}

.catnav-linea__importe { font-weight: 700; color: var(--catnav-azul); font-size: 14px; }

.catnav-linea__controles { display: flex; align-items: center; gap: 6px; margin-top: 7px; }

.catnav-linea__cant {
	width: 27px;
	height: 27px;
	border: 1px solid #dcdcdc;
	border-radius: 3px;
	background: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.catnav-linea__num { min-width: 26px; text-align: center; font-size: 14px; }

.catnav-linea__quitar {
	margin-left: auto;
	border: 0;
	background: none;
	font-size: 12px;
	color: #9a9a9a;
	text-decoration: underline;
	cursor: pointer;
}

.catnav-drawer__vacio { padding: 34px 0; text-align: center; color: #8a8a8a; font-size: 14px; }

.catnav-drawer__pie { padding: 16px 20px 22px; border-top: 1px solid #ececec; }

.catnav-drawer__subtotal {
	display: flex;
	justify-content: space-between;
	margin: 0 0 14px;
	font-size: 15px;
}

.catnav-drawer__subtotal strong {
	font-family: var(--catnav-serif);
	font-size: 19px;
	color: var(--catnav-azul);
}

.catnav-drawer__checkout {
	display: block;
	padding: 13px;
	border-radius: 4px;
	background: var(--catnav-rojo);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
}

.catnav-drawer__checkout:hover { background: #8f171c; color: #fff; }

.catnav-drawer__seguir {
	display: block;
	width: 100%;
	margin-top: 9px;
	padding: 9px;
	border: 0;
	background: none;
	font-size: 13.5px;
	color: #6b6b6b;
	text-decoration: underline;
	cursor: pointer;
}

.catnav-velo {
	position: fixed;
	inset: 0;
	z-index: 999998;
	background: rgba(0, 0, 0, .38);
}

/* --------------------------------------------------- fallback en scroll */

.catnav__scroll { display: grid; gap: 22px; padding: 18px 0; }

.catnav__scroll .catnav-hoja {
	height: auto;
	border: 1px solid #ececec;
	border-radius: 5px;
}

/* ------------------------------------------------------------ responsive */

/* =========================================================================
 * MODO SCROLL (pantallas estrechas)
 *
 * En móvil no se usa flipbook: las hojas se apilan y se recorren con scroll
 * vertical, cada una a todo el ancho y con la fotografía grande. Es el plan B
 * que el brief dejó aprobado (§3.7) y que el cliente autorizó al decir que el
 * efecto de libro no era imprescindible.
 *
 * Mantener el flipbook aquí obligaba a que cada página del catálogo cupiera en
 * una hoja de ~445 px de alto, y con 7 combos eso significaba fotos diminutas
 * — justo lo contrario de lo que pidió.
 * ========================================================================= */

.catnav--scroll .catnav__escenario { display: block; padding: 0; }
.catnav--scroll .catnav__flecha { display: none; }

/*
 * Ancho de lectura en escritorio.
 *
 * Estaba en 1180 px, elegido cuando la fotografía más grande rondaba los 520 px.
 * Con el catálogo completo hay composiciones de seis botellas que ocupan casi el
 * ancho de la página impresa y piden 1228 px para dibujarse a su tamaño real.
 *
 * Y esto NO afecta solo a esas: el catálogo usa un multiplicador único para que
 * todas las botellas midan lo mismo, y ese multiplicador lo fija la imagen más
 * ancha. Con 1180 px, una sola composición que no cupiera encogía el catálogo
 * ENTERO a un 91% — la botella bajaba de 559 a 509 px, que es justo la queja que
 * el cliente ya había dado por resuelta.
 *
 * 1360 px deja sitio a la más ancha (1278 px, la bandeja de seis de la página
 * 51) más el relleno de la hoja, y el resto se dibuja a escala 1. En pantallas
 * más estrechas el contenedor manda y todo baja en proporción, que es el
 * comportamiento correcto.
 *
 * ESTE NÚMERO HAY QUE REVISARLO cada vez que cambie la escala de las imágenes.
 * Ya pasó dos veces: al pasar a escalar por arreglo, la bandeja de seis creció
 * de 1228 a 1278 px y volvió a desbordar, dejando todo el catálogo al 96,9%.
 * `medir-escala.php` lo dice en una línea: si el factor no es 0,5000, la imagen
 * más ancha no cabe.
 */
.catnav--scroll .catnav__libro {
	display: block;
	min-height: 0;
	max-width: 1360px;
	margin: 0 auto;
}

.catnav--scroll .catnav-hoja {
	position: static;
	width: 100%;
	height: auto;
	margin-bottom: 14px;
	border: 1px solid #ECEAE4;
	border-radius: 4px;
	box-shadow: none;
	overflow: visible;
}

.catnav--scroll .catnav-hoja__interior { height: auto; padding: 22px 18px 30px; }
.catnav--scroll .catnav-hoja__cuerpo { height: auto; overflow: visible; gap: 26px; }

/* La hoja de relleno que existe solo para que el libro tenga par de páginas. */
.catnav--scroll .catnav-hoja--blanca { display: none; }

/*
 * LA PORTADA OCUPA LA PANTALLA, como la primera hoja de un catálogo impreso.
 *
 * Petición del cliente: que el bloque azul con «Catador / Catálogo Navideño /
 * 2026» se lea como una hoja completa. Se usa 92vh y no 100: dejar asomar un
 * dedo de la hoja siguiente es lo que le dice al lector que hay más abajo. A
 * pantalla completa exacta parecería el final de la página.
 *
 * `min-height` y no `height`: en un móvil apaisado, o con la barra del
 * navegador, el contenido manda y no se recorta.
 */
.catnav--scroll .catnav-hoja--portada .catnav-hoja__interior {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 92vh;
	padding: 40px 18px;
}

.catnav--scroll .catnav-hoja--contraportada .catnav-hoja__interior { padding: 40px 18px; }
.catnav--scroll .catnav-hoja--separador .catnav-hoja__interior { padding: 26px 18px; }

/*
 * BASE = móvil: foto grande arriba, texto debajo. Es lo que el cliente aprobó.
 * OJO con el orden: las reglas de escritorio van DESPUÉS, en la media query.
 * Al revés (media query primero) estas la anularían por tener igual
 * especificidad y ganar por posición.
 */
.catnav--scroll .catnav-tarjeta { flex-direction: column; text-align: center; gap: 14px; }
.catnav--scroll .catnav-tarjeta__foto { flex: 0 0 auto; width: 100%; height: auto; }
.catnav--scroll .catnav-tarjeta__texto { width: 100%; }

.catnav--scroll .catnav-grupo { flex-direction: column; gap: 14px; }
.catnav--scroll .catnav-grupo__foto { flex: 0 0 auto; width: 100%; height: auto; }
.catnav--scroll .catnav-grupo__texto { width: 100%; }

/*
 * ESCALA REAL CONSTANTE — la regla que iguala de verdad el tamaño de las botellas.
 *
 * Aquí NO se encaja la foto en ninguna caja. Se dibuja al ancho que trae el
 * propio archivo (`--w`, la mitad del natural, que el PHP escribe en línea)
 * multiplicado por un único factor `--catnav-escala` COMÚN A TODO EL CATÁLOGO.
 * Al ser común, la proporción entre páginas no cambia nunca: si dos botellas
 * miden igual en el origen, miden igual en pantalla, en cualquier dispositivo.
 *
 * Es justo lo contrario de lo que hacíamos antes (`max-height: 650px`), que
 * aplicaba un factor DISTINTO a cada imagen según su proporción y deshacía la
 * normalización hecha en el PowerPoint: las botellas acababan entre 283 y
 * 481 px, un 70% de dispersión. De ahí que el cliente siguiera viendo «unas
 * grandes y otras pequeñas» por mucho que subiéramos la calidad.
 *
 * El factor lo calcula el JS (`escalarFotos`) como el mayor valor con el que
 * quepa la composición más ancha. Nunca sube de 1: no se amplía, solo se reduce
 * cuando la pantalla no da para el tamaño natural. Si el JS no corre, vale 1 y
 * `max-width: 100%` evita desbordes.
 */
.catnav--scroll .catnav-tarjeta__foto img,
.catnav--scroll .catnav-grupo__foto img {
	width: calc(var(--w, 320) * 1px * var(--catnav-escala, 1));
	max-width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;

	/*
	 * La proporción se declara para RESERVAR EL HUECO antes de que la imagen
	 * llegue.
	 *
	 * Las fotos se cargan a medida que se baja (no llevan `src` hasta que el JS
	 * se lo pone), así que sin esto el navegador no sabe cuánto van a ocupar y
	 * las reserva a cero: el texto de debajo sube y baja de golpe mientras el
	 * lector recorre el catálogo, y en un documento de 45.000 px eso pasa 114
	 * veces. Medido: las 114 imágenes iban sin espacio reservado.
	 *
	 * No hace falta dato nuevo: --w y --h ya vienen escritos en línea con el
	 * tamaño real del archivo.
	 */
	aspect-ratio: var(--w) / var(--h);
}

/*
 * De 768 px para arriba SE MANTIENE la misma maquetación que en móvil:
 * fotografía centrada y texto centrado debajo. Solo cambian los tamaños de
 * letra y los márgenes.
 *
 * Aquí había dos maquetaciones. Las fotos de más de 650 px se centraban con el
 * texto debajo; las demás se ponían en fila, foto a la izquierda y texto al
 * lado. El cliente lo señaló el 23/sep con tres capturas seguidas: el estuche de
 * 3 botellas centrado, y justo después el de 1 botella y la Bandeja 1 pegados al
 * margen izquierdo. «Se podría poner las botellas q estén a la izq. centradas,
 * así como la primera imagen [...] para q todo quede más standard.»
 *
 * Tenía razón, y el corte era peor de lo que parecía: 38 hojas de un lado y 87
 * del otro, y la frontera —el ancho del archivo— no es nada que el lector pueda
 * ver. Dos estuches de la misma bodega, en hojas consecutivas, salían maquetados
 * distinto sin que hubiera motivo visible.
 *
 * Con una sola maquetación, además, todas las fotos comparten eje vertical: es
 * más fácil ver que las botellas miden igual, que es lo que costó tres rondas.
 */
@media (min-width: 768px) {
	.catnav--scroll .catnav-hoja__interior { padding: 34px 30px 40px; }
	.catnav--scroll .catnav-hoja__cuerpo { gap: 40px; }

	.catnav--scroll .catnav-tarjeta,
	.catnav--scroll .catnav-grupo {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 18px;
	}

	.catnav--scroll .catnav-tarjeta > *,
	.catnav--scroll .catnav-grupo > * { width: 100%; }

	/*
	 * La caja de foto ocupa el ancho de la hoja y centra la imagen dentro. No se
	 * le pone medida a la imagen: la fija `--catnav-escala`, común a todo el
	 * catálogo, y tocarla aquí desharía la igualación de tamaños.
	 */
	.catnav--scroll .catnav-tarjeta__foto,
	.catnav--scroll .catnav-grupo__foto {
		flex: 0 0 auto;
		justify-content: center;
	}

	.catnav--scroll .catnav-tarjeta__texto,
	.catnav--scroll .catnav-grupo__texto { flex: 0 0 auto; min-width: 0; }

	/*
	 * EL MISMO TAMAÑO DE LETRA PARA TODOS LOS PRODUCTOS.
	 *
	 * Un producto se escribe de dos maneras según comparta o no fotografía: como
	 * ficha suelta o como línea de una lista de variantes. Son la misma cosa para
	 * el lector —un vino con su precio y su botón— pero salían a tamaños
	 * distintos: 24/28 px la ficha y 15/17 la variante, un 38% más pequeño.
	 *
	 * El cliente lo señaló el 1/oct en la página 36 y avisó de que «hay varios
	 * así». Medidos: 92 de los 183 productos, la mitad del catálogo.
	 */
	.catnav--scroll .catnav-tarjeta__presentacion { font-size: 16px; }
	.catnav--scroll .catnav-tarjeta__nombre,
	.catnav--scroll .catnav-variante__nombre { font-size: 24px; }
	.catnav--scroll .catnav-tarjeta__precio,
	.catnav--scroll .catnav-variante__precio { font-size: 28px; }
	.catnav--scroll .catnav-variante { padding: 14px 0; }
	.catnav--scroll .catnav-boton-agregar { font-size: 15px; padding: 11px 20px; }
}

/*
 * OJO CON EL ORDEN. Estas reglas van DESPUÉS de la media query y tienen la misma
 * especificidad, así que ganan también en escritorio. Aquí había tres que
 * fijaban el tamaño de las variantes en 15 y 17 px y anulaban sin querer las 16
 * y 19 que la media query acababa de poner: el aviso de no invertir el orden
 * está escrito ocho líneas más arriba y aun así pasó.
 *
 * Por eso ya no queda ninguna regla de `font-size` en este bloque. Lo que se
 * deje aquí tiene que ser cosa que valga igual en móvil y en escritorio.
 */
.catnav--scroll .catnav-boton-agregar--mini { padding: 8px 11px; }

/*
 * El índice también se toca con el dedo.
 *
 * Sus filas medían 30 px de alto, por debajo de los 44 recomendados, y son
 * veintiuna seguidas: fallar el destino y saltar a la bodega equivocada era
 * fácil. Se separan un poco y se les da altura mínima.
 */
.catnav-indice__enlace {
	min-height: 44px;
	padding-block: 4px;
}

/*
 * Letra del índice más grande, a petición del cliente: era lo bastante pequeña
 * como para costar de leer en una pantalla grande, y es la primera pantalla
 * desde la que se navega. Sube de 14,5 a 17 px, y a 19 en escritorio, donde hay
 * sitio de sobra. El número de página acompaña.
 */
.catnav--scroll .catnav-indice__enlace { font-size: 17px; }
.catnav--scroll .catnav-indice__pagina { font-size: 16px; }

@media (min-width: 768px) {
	.catnav--scroll .catnav-indice__enlace { font-size: 19px; }
	.catnav--scroll .catnav-indice__pagina { font-size: 18px; }
	.catnav--scroll .catnav-indice li + li { margin-top: 4px; }
}

/*
 * SIN NÚMEROS DE PÁGINA — petición del cliente del 1/oct.
 *
 * Pidió quitar la numeración del índice «mas si dejar el índice o listado», y
 * quitar también el número de la esquina de cada hoja. Tiene sentido: en una
 * página que se recorre con el dedo, un folio impreso no lleva a ninguna parte,
 * y además los del catálogo original venían repetidos en cuatro casos.
 *
 * Se OCULTAN, no se borran del HTML. El número de hoja es lo que usa
 * `hojaInicial()` en el JS para resolver un enlace como `...#pagina-24` y abrir
 * el catálogo por esa página; si se quita del marcado, esos enlaces dejan de
 * funcionar sin que nadie se entere. Con `display:none` el texto sigue ahí para
 * el JS y desaparece de la pantalla y del lector de voz.
 */
.catnav-indice__pagina,
.catnav-hoja__folio {
	display: none;
}

/*
 * Y fuera también la línea de puntos.
 *
 * Existía para llevar la vista desde el nombre de la bodega hasta su número, que
 * es para lo único que sirve una guía de puntos. Sin número, se queda cruzando la
 * hoja hasta el margen derecho sin terminar en nada, y lo que parecía un índice
 * de libro pasa a parecer un renglón a medio rellenar.
 */
.catnav-indice__puntos { display: none; }


/* El modo estrecho del flipbook se eliminó: en pantalla angosta ahora
   siempre se usa scroll vertical (ver bloque MODO SCROLL más arriba). */

@media (max-width: 767px) {
	.catnav-carrito-boton { right: 15px; bottom: 88px; width: 50px; height: 50px; }
	.catnav-indice-boton  { right: 15px; bottom: 146px; font-size: 13px; padding: 0 14px 0 11px; }
}

@media (prefers-reduced-motion: reduce) {
	.catnav-drawer { transition: none; }
	.catnav-boton-agregar.is-cargando .catnav-boton-agregar__icono { animation: none; }
}