/*
Theme Name: Mi Librería
Theme URI: https://lapicesymaslapices.cl
Author: RayoWeb
Author URI: https://rayoweb.cl
Description: Tema de bloques para la tienda de Mi Librería (Villa Alemana). Paleta tomada del logo: morado, verde lima y amarillo.
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: milibreria
Tags: e-commerce, full-site-editing, block-patterns
*/

/* Los estilos base viven en theme.json. Acá va solo lo que theme.json no cubre:
   el detalle de las plantillas de WooCommerce y algunos ajustes finos. */

/* ---------- Anchos ----------
   El ancho de lectura (contentSize) y el de las grillas (wideSize) salen de
   theme.json. Acá va el margen lateral de la página: crece con la pantalla en
   vez de ser un valor fijo, así en el celular el contenido no queda apretado
   contra el borde y en un monitor grande no se pega a los costados. */
:root {
	--ml-margen: clamp(1rem, 3.5vw, 3.5rem);

	/* El rosa del logo (destellos y lápices). No está en la paleta de
	   theme.json a propósito: es un acento del diseño, no un color que Paulina
	   deba elegir desde el editor y aplicarle a un párrafo cualquiera. */
	--ml-rosa: #E95CA1;
}

body {
	--wp--style--root--padding-left: var(--ml-margen);
	--wp--style--root--padding-right: var(--ml-margen);
}

/* Las bandas de la portada van de lado a lado; lo que llevan adentro se
   centra al ancho normal. Sin esto el fondo de color queda como una caja
   flotando en medio de la pantalla. */
.ml-hero,
.ml-ventajas,
.ml-categorias,
.ml-novedades,
.ml-cta,
.ml-marcas {
	padding-left: var(--ml-margen);
	padding-right: var(--ml-margen);
}

/* ---------- Cabecera ---------- */
.ml-header {
	border-bottom: 3px solid var(--wp--preset--color--verde-lima);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 16px rgba(51, 38, 47, .07);
	/* La cabecera manda sus propios márgenes a cada fila (regla de más abajo).
	   Sin esto hereda el padding lateral de la página y la cinta morada queda
	   con dos franjas blancas a los costados: medido, 1424 px de fondo en una
	   pantalla de 1500. Eso era el "se ve cortada". */
	padding-left: 0;
	padding-right: 0;
}

/* Que ninguna fila de la cabecera se encoja al ancho de lectura: el fondo tiene
   que llegar de borde a borde y el aire lo pone el padding de adentro. */
.ml-header > .ml-tira,
.ml-header > .wp-block-group {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
	width: 100%;
}

/* La cabecera usa todo el ancho: el logo pegado a la izquierda y el menú a la
   derecha, como cualquier tienda. Antes quedaban los dos amontonados al medio
   con media pantalla vacía a los lados. */
.ml-header > .wp-block-group > .wp-block-group,
.ml-tira > .wp-block-group {
	max-width: none;
	padding-left: var(--ml-margen);
	padding-right: var(--ml-margen);
}

.ml-header .wp-block-navigation {
	gap: 1.6rem;
}

/* El logo que mandó la clienta el 2026-08-14 es casi el doble de alto que el
   anterior (relación 2:1). Con el tope de 62px que había, el ancho quedaba en
   125px y la marca se leía chica al lado del menú; con 82px vuelve a pesar lo
   que tiene que pesar. En el celular baja, que ahí compite con el carrito. */
.ml-header .wp-block-site-logo img {
	max-height: 82px;
	width: auto;
}

@media (max-width: 781px) {
	.ml-header .wp-block-site-logo img { max-height: 58px; }
}

/* Cinta superior con los datos que más se preguntan */
.ml-tira {
	font-size: 0.85rem;
	letter-spacing: 0.01em;
}

.ml-tira a { color: inherit; }

/* En el celular los tres datos ocupaban cinco líneas y empujaban el logo fuera
   de la pantalla. Se queda el que sirve para actuar —el WhatsApp— y el retiro;
   la dirección completa está en el pie y en Contacto. */
@media (max-width: 781px) {
	.ml-tira > .wp-block-group {
		flex-wrap: nowrap;
		justify-content: center;
		gap: 0.9rem;
	}
	.ml-tira p { margin: 0; white-space: nowrap; }
	.ml-tira p:nth-child(1) { display: none; }
	.ml-tira p:nth-child(2) { font-size: 0.78rem; }
}

@media (max-width: 480px) {
	.ml-tira p:nth-child(2) { display: none; }
}

/* ---------- Navegación ---------- */
.ml-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 500;
}

.ml-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--morado-oscuro);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---------- Buscador de la cabecera ----------
   Es el bloque `woocommerce/product-search`, no el buscador de WordPress: ese
   devuelve páginas y entradas mezcladas con los productos. Este manda un
   `post_type=product` escondido en el formulario, así que busca sólo en la
   tienda, que es lo que viene a hacer quien entra.

   El bloque trae su propia etiqueta "Buscar" visible arriba del campo. Se
   esconde a la vista pero NO se borra: es lo que le dice a un lector de
   pantalla para qué es ese campo.

   Ojo con los selectores: el aspecto del campo se estila por la clase del
   BLOQUE y no por `.ml-buscador`, porque WooCommerce imprime el mismo bloque en
   otra parte —la página de "no se encontraron productos"— y ahí salía con la
   pinta cruda de WordPress, una caja cuadrada al lado de un botón gris.
   `.ml-buscador` sólo decide dónde va y cuánto mide dentro de la cabecera. */
.ml-buscador {
	flex: 1 1 240px;
	max-width: 420px;
	min-width: 0;
}

.wc-block-product-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.wc-block-product-search__fields {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--wp--preset--color--crema);
	border: 1px solid #E7D9E2;
	border-radius: 999px;
	padding: 0.22rem 0.22rem 0.22rem 1rem;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.wc-block-product-search__fields:focus-within {
	border-color: var(--wp--preset--color--morado);
	box-shadow: 0 0 0 3px rgba(129, 10, 104, .12);
}

.wc-block-product-search__field {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0.5rem 0;
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.95rem;
	color: var(--wp--preset--color--tinta);
}

.wc-block-product-search__field:focus {
	outline: none; /* el anillo lo pone el contenedor, que es lo que se ve */
}

.wc-block-product-search__button {
	flex: none;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--blanco);
	cursor: pointer;
	transition: background .18s ease;
}

.wc-block-product-search__button:hover {
	background: var(--wp--preset--color--morado-oscuro);
}

/* El bloque dibuja una flecha (›). Una lupa se entiende sin leer nada, así que
   se cambia con una máscara: el icono va del color del texto del botón y no
   hay que sumar un archivo al tema. */
.wc-block-product-search__button svg { display: none; }

.wc-block-product-search__button::before {
	content: "";
	width: 19px;
	height: 19px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19 15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19 15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* La página de "no se encontraron productos" trae OTRO buscador: ahí
   WooCommerce imprime el bloque `core/search`, no el suyo. Se le da la misma
   pinta para que no parezca de otro sitio. */
.wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

.wp-block-search .wp-block-search__input {
	border: 1px solid #E7D9E2;
	border-radius: 999px;
	padding: 0.65rem 1.1rem;
	background: var(--wp--preset--color--crema);
	font-family: var(--wp--preset--font-family--cuerpo);
	font-size: 0.95rem;
}

.wp-block-search .wp-block-search__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--morado);
	box-shadow: 0 0 0 3px rgba(129, 10, 104, .12);
}

.wp-block-search .wp-block-search__button {
	border-radius: 999px;
	padding: 0.65rem 1.6rem;
}

/* La fila de la marca: logo · buscador · menú y carrito. */
.ml-fila-marca {
	gap: clamp(0.7rem, 2vw, 2rem);
}

.ml-acciones {
	gap: clamp(0.6rem, 1.4vw, 1.4rem);
}

/* Debajo de 1100px el buscador ya no cabe entre el logo y el menú sin dejarlo
   en 200px, y la fila se envuelve sola con el menú abajo, corrido a la
   izquierda. Se baja a una fila propia, a todo el ancho: en el celular es
   donde más se usa. El `order` es lo que lo manda abajo aunque en el HTML vaya
   al medio; sin eso, al envolverse el que baja es el menú. */
@media (max-width: 1100px) {
	.ml-buscador {
		order: 3;
		flex-basis: 100%;
		max-width: none;
	}
}

/* Entre 600 y 1000px el menú sigue siendo horizontal (el desplegable de
   hamburguesa recién aparece bajo 600) y con el espaciado de escritorio no
   entraba al lado del logo: se iba a una fila propia y dejaba el logo con media
   pantalla vacía al lado. Apretándolo un poco vuelve a caber. */
@media (max-width: 1000px) {
	.ml-header .wp-block-navigation {
		gap: 0.9rem;
		font-size: 0.95rem;
	}
}

/* ---------- El menú del celular ----------
   Lo abre el bloque de navegación de WordPress y viene sin ningún estilo del
   tema: fondo blanco, texto negro, todo pegado a la derecha y escalonado según
   el largo de cada palabra. Se veía como una lista suelta, no como el menú de
   la tienda.

   Nada de esto necesita media query: las clases `is-menu-open`/`has-modal-open`
   sólo existen mientras el menú está abierto. */
.ml-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--crema);
	padding: 1rem var(--ml-margen) 2.5rem;
}

/* El aire de arriba va acá y NO en el relleno del contenedor: el botón de
   cerrar está posicionado contra la caja de relleno del contenedor, así que
   agrandarlo lo baja a él también y la primera opción le seguía quedando
   debajo. Corriendo sólo el contenido, la X se queda arriba y el menú empieza
   más abajo. */
.ml-header .is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	margin-top: 2.8rem;
}

.ml-header .is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--morado);
	padding: 0.6rem;
}

/* Los `!important` de este bloque no son pereza: la hoja del bloque de
   navegación la imprime WordPress EN LÍNEA en el <head>, o sea después de
   style.css. En un empate de especificidad gana la que se imprime última, que
   siempre va a ser la de WordPress. Medido: sin esto el menú se queda con
   `align-items:flex-end` (todo pegado a la derecha, en escalera) y el submenú
   con `padding-left:32px; min-width:200px`, que lo dejaba flotando a 110px del
   borde en vez de alineado con el resto. */
.ml-header .is-menu-open ul.wp-block-navigation__container {
	width: 100%;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0;
}

.ml-header .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid #EFE1EA;
}

.ml-header .is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	/* WordPress deja estos enlaces en `content-box` con `width:100%`: el relleno
	   se suma POR FUERA y cada opción medía 393px en una pantalla de 390, o sea
	   la página entera arrastrándose de lado. */
	box-sizing: border-box;
	padding: 0.9rem 0.2rem !important;
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 1.06rem;
	font-weight: 500;
	color: var(--wp--preset--color--morado);
	text-align: left;
}

/* "Categorías" es un encabezado de sección, no un enlace más: sus hijos van
   indentados y en el color del cuerpo para que se lea la jerarquía. */
.ml-header .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--tinta);
	font-size: 0.82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .65;
	padding-bottom: 0.35rem;
}

/* El submenú viene con `padding-left:32px` y `min-width:200px` de WordPress, y
   como el contenedor va justificado a la derecha quedaba flotando en el medio
   de la pantalla: la barra lima arrancaba a 110px del borde. Se lo pone a todo
   el ancho y alineado con el resto. */
.ml-header .is-menu-open .wp-block-navigation__submenu-container {
	width: 100% !important;
	min-width: 0 !important;
	padding: 0 0 0.5rem !important;
	margin: 0 !important;
	border: 0;
	background: transparent;
	justify-content: flex-start !important;
	align-items: stretch !important;
}

.ml-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
}

.ml-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 0.2rem 0.55rem 1rem !important;
	margin: 0 !important;
	font-size: 1rem;
	border-left: 3px solid var(--wp--preset--color--verde-lima);
}

/* La flecha del submenú sobra cuando ya está desplegado. */
.ml-header .is-menu-open .wp-block-navigation__submenu-icon {
	display: none;
}

/* El foco se veía como un recuadro lima flotando alrededor de la primera
   opción —y al abrir el menú WordPress le pone el foco solo, así que era lo
   primero que se veía: parecía un campo de texto vacío—. Se cambia por una
   barra morada al costado, que se lee como "acá estás" y no como un formulario.
   El `outline` transparente no es decorativo: en el modo de alto contraste de
   Windows los fondos y las sombras se descartan, y ese contorno es lo único que
   sobrevive para marcar el foco. */
.ml-header .is-menu-open .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid transparent;
	outline-offset: -2px;
	background: rgba(129, 10, 104, .07);
	box-shadow: inset 4px 0 0 var(--wp--preset--color--morado);
	border-radius: 6px;
}

/* ---------- Grilla de productos ----------
   Ojo: en esta tienda conviven TRES marcados distintos y hay que cubrir los
   tres o el cambio se aplica a medias.
     · portada    → bloque product-new, marcado viejo `.wc-block-grid__products`
     · categorías → bloque Product Collection, `.wc-block-product-template`
     · sueltos    → marcado clásico `ul.products` (relacionados, shortcodes)
   El número de columnas lo decide el ancho real de la pantalla, no la clase
   columns-N que WooCommerce escribe de antemano: dos en el celular (una sola
   dejaba la página larguísima) y hasta cinco en un monitor grande.

   Acá se apunta a `.wc-block-product-template` a secas y NO a
   `.wc-block-product-template__responsive`, que es lo que había antes. El mismo
   bloque sale con dos juegos de clases según cómo esté configurado:

     · categorías  → `wc-block-product-template__responsive columns-3`
     · ficha       → `is-flex-container columns-5`   ← el patrón
                     `woocommerce-blocks/related-products`, con la maquetación
                     vieja del bloque

   Pedir `__responsive` dejaba los relacionados de la ficha fuera de la regla:
   seguían en flex, una sola tarjeta por fila de 384px en el celular, mientras el
   resto de la tienda iba de a dos. Se veía como si la ficha tuviera otro diseño. */
ul.wc-block-grid__products,
ul.wc-block-product-template,
.woocommerce ul.products {
	/* `!important` a propósito y solo acá. La hoja del bloque viejo trae, dentro
	   de una media query para pantallas chicas, un `display:block` que devuelve
	   la grilla a una sola columna en el celular. Viene minificada y con
	   selectores que cambian según el número de columnas configurado, así que
	   pelearle por especificidad es frágil: se rompe con cualquier update de
	   WooCommerce. Marcar estas dos declaraciones es más estable y más honesto
	   que encadenar clases hasta ganar por casualidad. */
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: clamp(0.75rem, 1.6vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	ul.wc-block-grid__products,
	ul.wc-block-product-template,
	.woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (min-width: 1000px) {
	ul.wc-block-grid__products,
	ul.wc-block-product-template,
	.woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (min-width: 1400px) {
	ul.wc-block-grid__products,
	ul.wc-block-product-template,
	.woocommerce ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* El marcado clásico reparte con floats y anchos en porcentaje: hay que
   anularlos o pelean con la grilla. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/* ---------- Tarjetas de producto ---------- */
/* El `max-width` y el `flex-basis` en porcentaje que WooCommerce le pone a cada
   tarjeta (`.wc-block-grid.has-5-columns .wc-block-grid__product`) estaban
   pensados para un contenedor flex, donde el porcentaje se mide contra la fila
   entera. Dentro de una grilla se mide contra la celda, así que un
   `max-width:20%` dejaba cada tarjeta en la quinta parte de su columna.
   Hay que anularlo, y el selector necesita al menos tres clases para ganarle
   al de WooCommerce. */
.wc-block-grid .wc-block-grid__products > li.wc-block-grid__product,
.wc-block-product-template > li.wc-block-product,
.woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	/* Sin esto la tarjeta mide 100% de la celda MÁS su relleno y su borde: los
	   relacionados de la ficha vienen en `content-box` y quedaban 26px más
	   anchos que su columna, encimándose con la de al lado. */
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-width: 0;
	flex: none;
	background: var(--wp--preset--color--blanco);
	border: 1px solid #EFE6EC;
	border-radius: 14px;
	padding: 0.75rem 0.75rem 1rem;
	margin: 0;
	text-align: left;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Y la variante `is-flex-container` —la de los relacionados de la ficha— trae
   ADEMÁS su propio ancho por tarjeta:

     .wc-block-product-template.is-flex-container.is-flex-container.columns-5 > li
     { width: calc(20% - 1em) }

   sí, con la clase repetida dos veces. Es el mismo bug del 10-08 en su otra
   variante: ese 20% se pensó para una fila flex y adentro de una celda de
   grilla mide contra la celda, así que dejaba la tarjeta en 60px medidos.

   Acá sí va `!important`. WooCommerce duplica la clase y le pega el `.columns-N`
   que tenga configurado el bloque, o sea que la especificidad a vencer cambia
   según cuántas columnas pidió quien armó la página. Ganarle por selector es
   apostar a un número que no controlamos. */
ul.wc-block-product-template.is-flex-container > li.wc-block-product {
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
}

li.wc-block-grid__product:hover,
li.wc-block-product:hover,
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	border-color: #E2D2DC;
	box-shadow: 0 12px 30px rgba(51, 38, 47, .10);
}

/* Todas las fotos al mismo cuadrado, con el producto entero adentro.
   `contain` y no `cover`: son portadas de libros y cajas, y recortarlas para
   llenar el marco les corta el título, que es justo lo que hay que ver.

   El `!important` es por los relacionados de la ficha: ese bloque escribe
   `style="object-fit:cover;aspect-ratio:1/1;"` como ATRIBUTO en la etiqueta
   —no en una hoja—, y un estilo en línea le gana a cualquier selector por
   especificidad. Se veía como portadas cortadas arriba y abajo: la foto es de
   169×210 y el marco es cuadrado. Es la única forma de ganarle sin editar el
   patrón de WooCommerce, que no es nuestro. */
li.wc-block-grid__product .wc-block-grid__product-image img,
li.wc-block-product .wc-block-components-product-image img,
.woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: contain !important;
	width: 100%;
	height: auto;
	border-radius: 10px;
	background: #fff;
	transition: transform .35s ease;
}

li.wc-block-grid__product:hover .wc-block-grid__product-image img,
li.wc-block-product:hover .wc-block-components-product-image img,
.woocommerce ul.products li.product:hover a img {
	transform: scale(1.04);
}

li.wc-block-grid__product .wc-block-grid__product-image,
li.wc-block-product .wc-block-components-product-image {
	margin: 0 0 0.7rem;
	overflow: hidden;
	border-radius: 10px;
}

/* El título va sin subrayar y a dos líneas fijas. Subrayado se veía a plantilla
   vieja, y sin tope las tarjetas de una fila terminaban a distinta altura. */
li.wc-block-grid__product .wc-block-grid__product-title,
li.wc-block-product .wp-block-post-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.32;
	color: var(--wp--preset--color--tinta);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.64em;
	margin: 0 0 0.4rem;
	padding: 0;
}

li.wc-block-grid__product a,
li.wc-block-product a,
.woocommerce ul.products li.product a {
	text-decoration: none;
}

li.wc-block-grid__product:hover .wc-block-grid__product-title,
li.wc-block-product:hover .wp-block-post-title a,
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	color: var(--wp--preset--color--morado);
}

/* El precio es lo primero que busca la gente: que se lea. */
li.wc-block-grid__product .wc-block-grid__product-price,
li.wc-block-product .wc-block-components-product-price,
.woocommerce ul.products li.product .price {
	color: var(--wp--preset--color--morado);
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 600;
	font-size: 1.1rem;
	display: block;
	margin: 0 0 0.8rem;
}

/* El botón se va al fondo y ocupa todo el ancho, así todas las tarjetas de una
   fila terminan parejas por abajo. */
li.wc-block-grid__product .wc-block-grid__product-add-to-cart,
li.wc-block-product .wp-block-woocommerce-product-button,
.woocommerce ul.products li.product .button {
	margin-top: auto;
	margin-bottom: 0;
	width: 100%;
}

/* Ojo con la etiqueta: WooCommerce dibuja este botón como `<button>` cuando el
   producto es simple (se agrega al carrito ahí mismo) y como `<a>` cuando es
   variable (lleva a la ficha a elegir el curso o el color). La regla de antes
   sólo nombraba `a`, así que el `<button>` se quedaba con el relleno de
   theme.json —0.8rem × 1.9rem— y el `<a>` con éste. Resultado medido: 49px de
   alto contra 43px, y los botones de una misma fila desalineados por 6px.
   Se nombran las dos etiquetas.

   El `margin: 0 !important` tampoco es pereza: el bloque escribe
   `style="margin-bottom:1rem"` en el propio botón, y a un atributo `style` sólo
   se le gana así. Ese margen dejaba un hueco muerto entre el botón y el borde
   de la tarjeta. */
li.wc-block-grid__product .wc-block-grid__product-add-to-cart :is(a, button).wp-block-button__link,
li.wc-block-product .wp-block-woocommerce-product-button :is(a, button).wp-block-button__link,
.woocommerce ul.products li.product .button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	border-radius: 10px;
	font-size: 0.92rem;
	line-height: 1.3;
	/* Este relleno deja el botón en 44px de alto, que es el mínimo para que un
	   dedo le pegue sin fallar. Con el 0.72em de antes quedaba en 38. */
	padding: 0.92em 1em;
	margin: 0 !important;
}

/* Y el contenedor del botón: el del producto variable venía con 5px de margen
   arriba que el del simple no tenía. */
li.wc-block-product .wp-block-woocommerce-product-button,
li.wc-block-product .wc-block-components-product-button {
	margin-top: auto;
	margin-bottom: 0;
}

/* La plantilla que trae WooCommerce para las categorías centra el título, el
   precio y el botón con clases propias (`has-text-align-center`, `align-center`).
   La portada usa otro bloque y queda alineada a la izquierda: quedaban las dos
   páginas con criterios distintos. Se unifican a la izquierda, que además se
   lee más rápido cuando hay una fila de cinco. */
.wc-block-product-template > li.wc-block-product .wp-block-post-title,
.wc-block-product-template > li.wc-block-product .wc-block-components-product-price {
	text-align: left;
}

.wc-block-product-template > li.wc-block-product .wp-block-button.align-center {
	justify-content: stretch;
	text-align: left;
}

.wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link {
	display: block;
	width: 100%;
}

/* La etiqueta de oferta, anclada arriba a la izquierda y no como globo. */
li.wc-block-grid__product .wc-block-grid__product-onsale,
li.wc-block-product .wc-block-components-product-sale-badge,
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	right: auto;
	margin: 0;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	padding: 0.42em 0.7em;
	border-radius: 6px;
	border: 0;
	background: var(--wp--preset--color--verde-lima);
	color: var(--wp--preset--color--tinta);
	font-family: var(--wp--preset--font-family--titulos);
	font-size: 0.75rem;
	font-weight: 600;
	z-index: 2;
}

/* ---------- Botones de WooCommerce ----------
   WooCommerce trae sus propias clases .button, que no heredan de theme.json. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 500;
	border-radius: 999px;
	padding: 0.72em 1.6em;
	transition: background .15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--wp--preset--color--morado-oscuro);
	color: var(--wp--preset--color--blanco);
}

.woocommerce a.button.added_to_cart {
	color: var(--wp--preset--color--morado);
	text-decoration: underline;
}

/* ---------- Avisos ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--wp--preset--color--verde-lima);
	border-radius: 10px;
	background: var(--wp--preset--color--blanco);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--wp--preset--color--verde-lima);
}

/* ---------- Ficha de producto ----------
   Los listados ganan con el ancho completo, pero la ficha no: si la columna del
   texto se estira a 1700 px, la descripción queda en líneas larguísimas y el
   botón de compra se pierde lejos de la foto. Se le pone tope y se centra.
   El resto de la página (relacionados) sigue usando todo el ancho. */
/* Va con dos clases a propósito: la regla de WordPress que aplica el ancho de
   `alignwide` tiene la misma especificidad que una clase suelta y se imprime
   después de esta hoja, así que con `.ml-ficha` a secas ganaba ella. */
.wp-block-columns.ml-ficha,
.alignwide.ml-detalle {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-columns.ml-ficha {
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* Con una sola pestaña, la tira de pestañas es el mismo título dos veces
   seguidas: arriba "Descripción" como pestaña y abajo "Descripción" como
   encabezado. Desde el 2026-08-23 la ficha quedó con una sola, porque se
   sacaron "Información adicional" y "Valoraciones"
   (wp-content/mu-plugins/02-milibreria-ficha.php).

   La regla se escribe con `:not(:has(li + li))` y no a secas: el día que
   vuelvan las reseñas habrá dos pestañas, la tira volverá a servir para
   navegar y esta regla dejará de aplicar sola. */
.ml-detalle ul.wc-tabs:not(:has(li + li)) {
	display: none;
}

.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--titulos);
	color: var(--wp--preset--color--morado);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--wp--preset--color--morado);
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 600;
	font-size: 1.6rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--wp--preset--color--verde-lima);
}

/* ---------- Elegir la variación ----------
   WooCommerce arma esto como una <table>: etiqueta en una celda, desplegable en
   la otra. Dos problemas, y el segundo sólo se ve en el celular.

   1. El ancho de un <select> lo decide su OPCIÓN más larga, no el texto que
      muestra cerrado. Acá las opciones son "1º básico", "2º básico"…, así que el
      desplegable medía 131px — y "Elige una opción", que es lo que se ve
      mientras no elijas, necesita 129px y quedaba montado sobre la flecha.
      Se le da el ancho de la fila, con tope para que en el monitor no quede una
      barra de lado a lado.

   2. En una pantalla angosta la etiqueta y el desplegable se disputan la misma
      fila: al desplegable le sobraban 188px de los 324 del contenido. Apilados
      ocupan lo mismo y se leen mejor, que es lo que hace cualquier tienda en el
      teléfono. */
.woocommerce div.product form.cart .variations {
	width: 100%;
}

.woocommerce div.product form.cart .variations select {
	border: 1px solid #E4D3DE;
	border-radius: 10px;
	padding: 0.55em 0.7em;
	min-height: 2.7em;
	width: 100%;
	max-width: 22rem;
}

@media (max-width: 600px) {
	.woocommerce div.product form.cart .variations,
	.woocommerce div.product form.cart .variations tbody,
	.woocommerce div.product form.cart .variations tr,
	.woocommerce div.product form.cart .variations th,
	.woocommerce div.product form.cart .variations td {
		display: block;
		width: 100%;
		text-align: left;
	}

	.woocommerce div.product form.cart .variations th.label {
		padding-bottom: 0.35rem;
	}

	.woocommerce div.product form.cart .variations select {
		max-width: none;
	}
}

/* Ficha del producto variable, alineada (reunión con Paulina, 03-11-2026).
   Tres cosas descuadraban: (1) Woo deja la etiqueta y el desplegable con
   `vertical-align: top` y `line-height: 2em`, así que "Gramaje" quedaba más
   abajo que el centro del desplegable; (2) "Limpiar" caía en su propia línea
   y abría un hueco antes del precio; (3) el precio de la variación salía en
   1,6rem morado, más grande que el rango de arriba ($2.400 – $18.000), que
   iba en negro. Ahora la etiqueta va centrada, "Limpiar" al lado y los dos
   precios con el mismo estilo. */
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	vertical-align: middle;
	line-height: 1.3;
	padding: 0.3rem 0;
}

.woocommerce div.product form.cart .variations th.label {
	padding-right: 1rem;
	white-space: nowrap;
}

.woocommerce div.product form.cart .variations label {
	margin: 0;
}

/* En el escritorio la fila pasa a flex: como tabla, la celda del desplegable
   no tomaba el ancho y "Limpiar" bajaba de línea, y la etiqueta se centraba
   contra esas dos líneas en vez de contra el desplegable. */
@media (min-width: 601px) {
	.woocommerce div.product form.cart .variations,
	.woocommerce div.product form.cart .variations tbody {
		display: block;
	}

	.woocommerce div.product form.cart .variations tr {
		display: flex;
		align-items: center;
	}

	.woocommerce div.product form.cart .variations th.label {
		flex: 0 0 auto;
		min-width: 6rem;
	}

	.woocommerce div.product form.cart .variations td.value {
		flex: 1 1 auto;
	}
}

.woocommerce div.product form.cart .variations td.value {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem 0.8rem;
}

.woocommerce div.product form.cart .variations select {
	margin-right: 0;
	flex: 1 1 12rem;
	min-width: 0;
	max-width: 18rem;
}

.woocommerce div.product form.cart .reset_variations {
	margin: 0;
	font-size: 0.85rem;
}

.woocommerce div.product form.cart .variations {
	margin-bottom: 0.6rem;
}

.woocommerce div.product .single_variation_wrap .woocommerce-variation-price .price {
	display: block;
	font-size: var(--wp--preset--font-size--large);
	margin: 0.2rem 0 0.1rem;
}

.woocommerce div.product .single_variation_wrap .woocommerce-variation-availability .stock {
	margin: 0 0 0.6rem;
}

.woocommerce div.product .wp-block-woocommerce-product-price[data-is-descendent-of-single-product-template] {
	color: var(--wp--preset--color--morado);
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 600;
}

/* Stock: verde cuando hay, morado cuando queda poco */
.woocommerce .stock.in-stock { color: #4C7A02; font-weight: 600; }
.woocommerce .stock.out-of-stock { color: var(--wp--preset--color--morado); font-weight: 600; }

/* ---------- Cabecera de una categoría ----------
   El título, la bajada, el conteo y el ordenamiento en una sola franja, con
   una línea que la separa de la grilla. */
.woocommerce .woocommerce-breadcrumb {
	font-size: 0.85rem;
	color: #7A6A74;
	margin-bottom: 1.4rem;
}

.woocommerce .woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--morado);
	text-decoration: underline;
}

.woocommerce .term-description {
	color: #6E5C68;
	max-width: 60ch;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: 1.6rem;
}

.woocommerce .woocommerce-result-count {
	color: #7A6A74;
	font-size: 0.9rem;
}

/* El desplegable de orden venía sin ningún estilo: es de lo que más delata que
   una tienda quedó con la plantilla por defecto. */
.woocommerce .woocommerce-ordering select {
	appearance: none;
	background-color: var(--wp--preset--color--blanco);
	background-image: linear-gradient(45deg, transparent 50%, var(--wp--preset--color--morado) 50%),
	                  linear-gradient(135deg, var(--wp--preset--color--morado) 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(1em + 1px), calc(100% - 13px) calc(1em + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	border: 1px solid #E4D3DE;
	border-radius: 10px;
	color: var(--wp--preset--color--tinta);
	font-family: inherit;
	font-size: 0.92rem;
	padding: 0.62em 2.6em 0.62em 1em;
	cursor: pointer;
}

.woocommerce .woocommerce-ordering select:hover {
	border-color: var(--wp--preset--color--morado);
}

/* En un teléfono angosto esto se desbordaba: WooCommerce deja el conteo a la
   izquierda y el orden a la derecha con floats, y el ancho del desplegable lo
   fija su opción más larga —"Ordenar por popularidad", 268px—. En 360px de
   pantalla se salía 17px de la página, o sea la tienda se podía arrastrar de
   lado. Debajo de 600px van apilados y a todo el ancho, que además deja de
   partir "Mostrando 8 resultados" en tres líneas. */
@media (max-width: 600px) {
	.woocommerce .woocommerce-result-count,
	.woocommerce .woocommerce-ordering {
		float: none;
		width: 100%;
		margin-bottom: 0.9rem;
	}

	.woocommerce .woocommerce-ordering select {
		width: 100%;
	}

	/* Los dos bloques —conteo y orden— van en una fila flex `nowrap` que arma
	   WooCommerce en su plantilla de archivo. Como esa plantilla no es nuestra
	   (el tema no trae `archive-product.html`), no hay dónde colgarle una clase
	   sin adoptar la plantilla entera, que es mucho más que mantener por esto.
	   `:has()` deja apuntarle desde acá al padre por lo que contiene.
	   Sin esto, el desplegable se quedaba con 190px de los 328 y mostraba
	   "Orden predetermin…" cortado. */
	.wp-block-group:has(> .wc-block-catalog-sorting) {
		flex-wrap: wrap;
	}

	.wp-block-group > .wc-block-catalog-sorting {
		flex: 1 1 100%;
	}
}

/* Y en cualquier ancho, que no se pase de su contenedor. */
.woocommerce .woocommerce-ordering select {
	max-width: 100%;
}

/* ---------- Categorías ---------- */
.woocommerce ul.products li.product-category a img {
	border-radius: 14px;
}

.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
	font-family: var(--wp--preset--font-family--titulos);
	color: var(--wp--preset--color--morado);
	font-size: 1.05rem;
}

/* ---------- Pie ---------- */
.ml-footer {
	border-top: 3px solid var(--wp--preset--color--verde-lima);
}

.ml-footer a { color: inherit; }

/* ============================================================================
   BANDAS CON FOTO
   ----------------------------------------------------------------------------
   Las fotos de fondo se ponen desde acá y NO desde el contenido de la página.
   Es a propósito: el sitio deriva su URL del host de cada petición (funciona
   igual en localhost:8083 que tras el túnel), así que meter una URL absoluta a
   una imagen en el contenido lo rompería al cambiar de dominio. Las rutas de
   este archivo se resuelven contra la carpeta del tema, que no cambia nunca.
   Los archivos los baja `scripts/bajar-fotos-stock.sh` desde Pexels.
   ============================================================================ */

/* ---------- Hero de la portada: claro, a color y con fotos que rotan ----------
   Cambió el 2026-08-23 por pedido de la clienta: antes era la foto de lápices
   bajo un velo morado al 93% y el resultado se leía oscuro ("el fondo donde
   están los lápices es un poco oscuro, será posible crear una imagen movible o
   algo más dinámico y colorido"). Las referencias que mandó —somosmooving.com,
   nacional.cl, dibu.cl— son todas fondo claro con la mercadería a color.

   Así que la foto salió del fondo y pasó a una tarjeta al costado, donde tres
   imágenes se van turnando solas. El fondo quedó crema con la trama de puntos
   (idea tomada de Mooving) y dos manchas de color de la paleta del logo.

   El carrusel es CSS puro, como el de marcas: tres capas apiladas y una
   animación que las desvanece por turnos. Sin JavaScript no hay nada que
   cargar ni que se pueda romper, y con `prefers-reduced-motion` se queda
   quieto en la primera foto. */
.ml-hero-claro {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--wp--preset--color--crema);
	/* Tres capas: dos manchas de color y la trama de puntos, en ese orden. El
	   `background-size` va en el mismo orden y por eso las dos primeras van en
	   `auto`: sólo la trama necesita medida. */
	background-image:
		radial-gradient(circle at 8% 6%, rgba(255, 227, 42, .55) 0, rgba(255, 227, 42, 0) 42%),
		radial-gradient(circle at 96% 92%, rgba(177, 200, 4, .30) 0, rgba(177, 200, 4, 0) 45%),
		radial-gradient(rgba(129, 10, 104, .14) 1.5px, transparent 1.6px);
	background-size: auto, auto, 22px 22px;
	background-position: center, center, 0 0;
}

/* La cinta de colores del pie: son los cuatro colores del logo, y es lo que
   amarra el hero con la marca sin llenar la pantalla de color. */
.ml-hero-claro::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 7px;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--morado) 0 25%,
		var(--ml-rosa) 25% 50%,
		var(--wp--preset--color--verde-lima) 50% 75%,
		var(--wp--preset--color--amarillo) 75% 100%
	);
}

/* Texto a la izquierda y fotos a la derecha. El `!important` es el mismo de
   antes y por la misma razón: WordPress centra a los hijos de un contenedor
   `constrained` con `margin-left:auto !important` en su propia hoja, así que
   sin responderle con la misma arma el bloque no se puede ensanchar. */
.ml-hero-claro > .ml-hero__grid {
	max-width: 1280px !important;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	gap: clamp(1.6rem, 3.5vw, 3.4rem);
	align-items: center;
}

@media (max-width: 860px) {
	.ml-hero-claro > .ml-hero__grid { grid-template-columns: minmax(0, 1fr); }
}

.ml-hero__texto { text-align: left; }

.ml-hero__texto > * {
	max-width: 37rem;
	margin-left: 0;
	margin-right: auto;
}

.ml-hero__texto h1 {
	font-size: clamp(2rem, 4.1vw, 3.5rem);
	line-height: 1.08;
	margin: 0 0 0.7rem;
	text-wrap: balance;
}

.ml-hero__texto p {
	font-size: clamp(1rem, 1.25vw, 1.18rem);
	margin-bottom: 1.7rem;
}

/* La cursiva que pidió la clienta ("algún título con una letra bonita, cursiva,
   algo más entretenido pero entendible a la vez"). Va sólo en una parte del
   titular: Pacifico entera cansa la lectura y el resto del sitio sigue en
   Fredoka. El `line-height` y el `padding` de abajo son porque la cursiva tiene
   colas que se cortan contra la línea siguiente. */
.ml-script {
	font-family: var(--wp--preset--font-family--escrita);
	font-style: normal;
	font-weight: 400;
	color: var(--ml-rosa);
	font-size: 1.12em;
	line-height: 1.35;
	padding-bottom: .12em;
	display: inline-block;
}

/* El distintivo de arriba: da contexto en una línea antes del titular. */
.ml-pildora {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--wp--preset--color--blanco);
	border: 1px solid rgba(129, 10, 104, .22);
	box-shadow: 0 2px 10px rgba(51, 38, 47, .06);
	color: var(--wp--preset--color--morado);
	border-radius: 999px;
	padding: 0.42em 1.05em;
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: .02em;
	margin-bottom: 1.15rem;
}

/* Sobre el fondo claro el botón morado del tema ya contrasta; sólo se le suma
   la sombra para que despegue de la trama de puntos. */
.ml-hero-claro .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	box-shadow: 0 10px 24px rgba(129, 10, 104, .22);
}

.ml-hero-claro .wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--wp--preset--color--blanco);
	border-color: rgba(129, 10, 104, .35);
}

.ml-hero-claro .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--amarillo-suave);
	border-color: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--morado);
}

/* ---------- El carrusel de fotos del hero ----------
   Tres capas apiladas ocupando la misma caja. Cada una está visible un tercio
   del ciclo y se cruza con la siguiente. Los retardos son -0s, -6s y -12s sobre
   un ciclo de 18s: arrancan desfasadas sin necesidad de tres animaciones
   distintas. */
/* La tarjeta lleva la PRIMERA foto como fondo propio, y no un blanco liso.
   No es decoración: dos capas que se cruzan al 50% no suman opacidad 1 —tapan
   el 75%— así que con fondo blanco la tarjeta se aclaraba en cada cambio.
   Medido con `scripts/probar-carrusel.mjs`: 0.44 + 0.77 dejaba pasar un 13% de
   blanco. Con la foto abajo, lo que se transparenta es la misma imagen.

   Desde el 2026-08-26 las fotos NO están acá: las pone el mu-plugin
   `03-milibreria-banners.php` en el atributo `style` de cada capa, leyéndolas
   del tipo de contenido «Banners». Los `@keyframes` también los imprime él,
   porque los porcentajes dependen de cuántos banners haya publicados. Lo que
   queda en esta hoja es lo que no cambia con la cantidad. */
.ml-hero-fotos {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 22px;
	overflow: hidden;
	background-color: var(--wp--preset--color--blanco);
	background-size: cover;
	background-position: center;
	box-shadow: 0 22px 50px rgba(51, 38, 47, .16);
	/* Levantada apenas: da la sensación de tarjeta puesta encima, no de recorte. */
	transform: rotate(-1.2deg);
}

.ml-hero-fotos__foto {
	position: absolute;
	inset: 0;
	display: block;
	background-size: cover;
	background-position: center;
	opacity: 0;
	text-decoration: none;
	/* Sin nombre ni duración: los pone el mu-plugin según cuántos banners haya.
	   Lo que sí es fijo es que se repite para siempre y que no arranca de golpe. */
	z-index: 1;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
}

/* Un banner con enlace es un enlace de verdad: tiene que verse al tabular. */
.ml-hero-fotos__foto:focus-visible {
	outline: 3px solid var(--wp--preset--color--morado);
	outline-offset: -6px;
}

/* Los puntitos de abajo no son botones: no hay JavaScript que los escuche. Son
   el indicador de en qué foto va, y por eso quedan fuera del árbol accesible. */
.ml-hero-fotos__puntos {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: flex;
	justify-content: center;
	gap: 7px;
	/* Encima de las capas, que ahora pueden ser enlaces y ocupan la tarjeta
	   entera. Las capas se mueven entre z-index 1 y 3 mientras rotan. */
	z-index: 5;
	pointer-events: none;
}

.ml-hero-fotos__puntos i {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(129, 10, 104, .28);
	box-shadow: 0 1px 3px rgba(255, 255, 255, .7);
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

/* El texto del enlace del banner existe para los lectores de pantalla, no para
   la vista. El core lo define en la hoja de bloques; se repite acá para no
   depender de que esa hoja esté encolada en todas las páginas. */
.ml-hero-fotos .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 860px) {
	.ml-hero-fotos { aspect-ratio: 16 / 10; transform: none; }
	.ml-hero__texto > * { max-width: none; }
}

/* El velo morado no es decoración: sobre una foto a color el texto blanco no
   llega a contraste AA por sí solo. Va más oscuro abajo, que es donde caen el
   párrafo y los botones. */
.ml-hero-pagina {
	position: relative;
	isolation: isolate;
	background-color: var(--wp--preset--color--morado-oscuro);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--wp--preset--color--blanco);
	overflow: hidden;
}

.ml-hero-pagina::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		rgba(79, 6, 64, .88) 0%,
		rgba(79, 6, 64, .72) 42%,
		rgba(129, 10, 104, .48) 100%
	);
}

/* theme.json pinta todos los títulos de morado; acá abajo eso sería invisible. */
.ml-hero-pagina :is(h1, h2, h3, p, li) {
	color: var(--wp--preset--color--blanco);
}

/* Las páginas interiores también llevan la cinta de colores: es la firma que
   las emparenta con la portada. */
.ml-hero-pagina::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 7px;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--morado) 0 25%,
		var(--ml-rosa) 25% 50%,
		var(--wp--preset--color--verde-lima) 50% 75%,
		var(--wp--preset--color--amarillo) 75% 100%
	);
}


/* ---------- Portada de las páginas interiores ----------
   Cada página trae su foto por clase. Son más bajas que el hero de la portada:
   son un encabezado, no la escena principal. */
.ml-hero-pagina {
	text-align: left;
	padding-top: clamp(2.6rem, 6vw, 4.6rem);
	padding-bottom: clamp(2.6rem, 6vw, 4.6rem);
}

.ml-hero-pagina h1 {
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	margin: 0 0 0.5rem;
}

/* La bajada NO lleva `max-width` propio, aunque sea lo que uno escribiría.
   WordPress centra cada hijo del contenedor por su cuenta, así que un párrafo
   más angosto que el título se centra distinto y queda corrido hacia adentro:
   se veía el título en un borde y la bajada en otro. Compartiendo el ancho del
   contenedor, los dos caen sobre la misma línea vertical que el texto del
   cuerpo, que empieza más abajo en esa misma columna. */
.ml-hero-pagina p {
	opacity: .93;
	text-wrap: pretty;
}

.ml-hero--despacho     { background-image: url("assets/img/despacho.jpg"); }
.ml-hero--quienes      { background-image: url("assets/img/quienes-somos.jpg"); }
.ml-hero--cambios      { background-image: url("assets/img/cambios.jpg"); }
.ml-hero--cotizaciones { background-image: url("assets/img/cotizaciones.jpg"); }
.ml-hero--contacto     { background-image: url("assets/img/contacto.jpg"); }

/* ============================================================================
   TARJETAS DE CATEGORÍA
   Reemplazan a las píldoras de texto: con foto se entiende de un vistazo qué
   hay adentro, y es lo que más acerca la portada a una tienda de verdad.
   ============================================================================ */
.ml-cats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.7rem, 1.4vw, 1.15rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px)  { .ml-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ml-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.ml-cat {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(140px, 17vw, 215px);
	padding: 0.95rem 1rem;
	border-radius: 16px;
	overflow: hidden;
	background-color: var(--wp--preset--color--morado);
	background-size: cover;
	background-position: center;
	color: var(--wp--preset--color--blanco);
	text-decoration: none;
	isolation: isolate;
	transition: transform .22s ease, box-shadow .22s ease;
}

/* Degradado de abajo hacia arriba: el título se apoya en la parte oscura y la
   foto se sigue viendo arriba. */
.ml-cat::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgba(51, 38, 47, .88) 0%,
		rgba(51, 38, 47, .45) 45%,
		rgba(51, 38, 47, .10) 100%
	);
	transition: background .22s ease;
}

.ml-cat:hover,
.ml-cat:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(51, 38, 47, .22);
}

.ml-cat:hover::after {
	background: linear-gradient(
		to top,
		rgba(79, 6, 64, .92) 0%,
		rgba(79, 6, 64, .55) 55%,
		rgba(79, 6, 64, .18) 100%
	);
}

.ml-cat span {
	font-family: var(--wp--preset--font-family--titulos);
	font-weight: 500;
	font-size: clamp(0.95rem, 1.1vw, 1.08rem);
	line-height: 1.2;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

.ml-cat--arte      { background-image: url("assets/img/cat-arte.jpg"); }
.ml-cat--escolar   { background-image: url("assets/img/cat-escolar.jpg"); }
.ml-cat--escritura { background-image: url("assets/img/cat-escritura.jpg"); }
.ml-cat--oficina   { background-image: url("assets/img/cat-oficina.jpg"); }
.ml-cat--libros    { background-image: url("assets/img/cat-libros.jpg"); }
.ml-cat--licencias { background-image: url("assets/img/cat-licencias.jpg"); }

/* ============================================================================
   CARRUSEL DE MARCAS
   Sin JavaScript ni librerías: dos copias de la misma tira desplazándose. Al
   llegar al -50% la segunda copia está exactamente donde arrancó la primera,
   así que el salto no se nota y el ciclo es continuo.
   ============================================================================ */
.ml-marquee {
	overflow: hidden;
	/* Los logos se desvanecen en los bordes en vez de cortarse de golpe. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	/* De borde a borde: encajonado al ancho de lectura solo entraban cinco
	   logos y el desfile se veía como una lista corta que se repite. Los
	   `!important` van por lo de siempre: el contenedor `constrained` de
	   WordPress centra a sus hijos con `margin:auto !important`. */
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.ml-marquee__pista {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 4vw, 3.6rem);
	width: max-content;
	animation: ml-desfile 48s linear infinite;
}

.ml-marquee:hover .ml-marquee__pista,
.ml-marquee:focus-within .ml-marquee__pista {
	animation-play-state: paused;
}

@keyframes ml-desfile {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.ml-marca {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	height: 54px;
	width: 118px;
}

/* Van a color, no en escala de grises.
   El gris es el recurso de manual para que una tira de logos no se pelee con
   el resto de la página, pero acá rompe: varias de estas marcas —Adetec,
   Dactic— tienen el nombre en blanco sobre un bloque de color, y al pasarlas a
   gris el bloque se vuelve un rectángulo gris con un hueco adentro, que se lee
   como imagen rota. Con una opacidad pareja se consigue lo mismo (que ninguna
   grite más que otra) sin desarmar ningún logo, y de paso le va mejor a una
   librería, que es un rubro de colores. */
.ml-marca img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: .78;
	transition: opacity .25s ease, transform .25s ease;
}

.ml-marca:hover img {
	opacity: 1;
	transform: scale(1.06);
}

/* ============================================================================
   PULIDO GENERAL
   ============================================================================ */

/* El antetítulo en cursiva sobre el título de cada sección. Es la misma letra
   del hero y cumple el mismo pedido de la clienta: una línea "entretenida" que
   anuncia la sección sin robarle el papel al título, que sigue en Fredoka. */
.ml-antetitulo {
	font-family: var(--wp--preset--font-family--escrita);
	color: var(--ml-rosa);
	font-size: clamp(1.15rem, 1.7vw, 1.5rem);
	line-height: 1.3;
	margin: 0 0 0.1rem;
}

/* Los títulos de sección llevaban solo tamaño. Una línea corta debajo los
   separa del contenido y le da ritmo a la página. */
.ml-titulo-seccion {
	text-align: center;
	margin-bottom: 0.35rem;
}

.ml-titulo-seccion::after {
	content: "";
	display: block;
	width: 62px;
	height: 4px;
	margin: 0.7rem auto 0;
	border-radius: 999px;
	background: var(--wp--preset--color--verde-lima);
}

.ml-bajada {
	text-align: center;
	color: #6E5C68;
	max-width: 52ch;
	margin: 0 auto 2rem;
}

/* Las ventajas pasan de tres párrafos sueltos a una fila de fichas. */
.ml-ventajas .wp-block-column {
	background: var(--wp--preset--color--blanco);
	border: 1px solid #F0E7ED;
	border-radius: 14px;
	padding: 1.05rem 1.2rem;
}

.ml-ventajas .wp-block-column p {
	margin: 0;
	font-size: 0.95rem;
}

.ml-ventajas .wp-block-column strong {
	font-family: var(--wp--preset--font-family--titulos);
	color: var(--wp--preset--color--morado);
}

/* Tarjetas de producto un poco más suaves, en la línea del resto. */
.wc-block-grid .wc-block-grid__products > li.wc-block-grid__product,
.wc-block-product-template > li.wc-block-product,
.woocommerce ul.products li.product {
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(51, 38, 47, .04);
}

/* El contenido de las páginas interiores respira: la portada con foto pega
   arriba y el texto necesita separarse de ella. */
.ml-hero-pagina + * {
	margin-top: clamp(2rem, 4vw, 3.2rem);
}

/* ---------- Accesibilidad ---------- */
:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--verde-lima);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.wp-block-woocommerce-product-template li {
		transition: none;
	}
	.woocommerce ul.products li.product:hover,
	.wp-block-woocommerce-product-template li:hover,
	.ml-cat:hover {
		transform: none;
	}
	/* El carrusel de marcas se detiene y pasa a poder arrastrarse a mano: un
	   movimiento continuo que no se puede parar es justo lo que molesta a quien
	   pidió menos animación. */
	.ml-marquee__pista {
		animation: none;
	}
	.ml-marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ============================================================================
   Banda "Síguenos" de la portada (pedido de la clienta, 01-09-2026)
   ============================================================================
   Dos tarjetas, una por red. Acá la tarjeta sí corresponde a una unidad real
   —una cuenta— así que no es el contenedor perezoso de siempre.
   Los iconos salen del bloque social-links del núcleo: son los logos oficiales
   y se mantienen solos, en vez de un SVG nuestro que envejece. */

.ml-redes__bajada {
	max-width: 46ch;
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--40);
}

.ml-redes__grid {
	gap: var(--wp--preset--spacing--30);
}

.ml-red {
	height: 100%;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border: 1px solid var(--ml-borde, rgba(51, 38, 47, 0.14));
	border-radius: 16px;
	background: var(--wp--preset--color--blanco);
	text-align: center;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) {
	.ml-red:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 28px rgba(22, 32, 46, 0.10);
	}
}

/* El bloque social-links trae su propio margen inferior de párrafo; se anula
   para que el aire lo ponga la escala y no la suma de dos márgenes. */
.ml-red__icono {
	margin-bottom: var(--wp--preset--spacing--20);
}

.ml-red__cuenta {
	font-weight: 700;
	color: var(--wp--preset--color--morado);
	margin: 0 0 var(--wp--preset--spacing--30);
	overflow-wrap: anywhere; /* @lapicesymaslapices no cabe en un celular angosto */
}

/* A un tercio de ancho el botón se parte en tres renglones y deja de leerse
   como botón: bajo 782px las dos tarjetas van una sobre otra (lo hace el
   bloque de columnas) y acá solo se recupera el aire entre ellas. */
@media (max-width: 781px) {
	.ml-redes__grid {
		gap: var(--wp--preset--spacing--30);
	}
}