/*
 * Estilos del tema PIPOL. Mobile-first, sin framework.
 * El orden es: reinicio, tipografía, disposición, componentes.
 */

/* ---------- Reinicio ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--pipol-fondo);
	color: var(--pipol-texto);
	font-family: var(--pipol-sans);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/*
 * El atributo hidden gana siempre. Sin esto, cualquier componente que declare
 * su propio display —flex, grid— le pisa el «display: none» del navegador y el
 * elemento sigue a la vista aunque esté marcado como oculto. Pasó con los
 * turnos del taller: se veían todos los días a la vez.
 */
[hidden] {
	display: none !important;
}

a {
	color: var(--pipol-texto);
	text-decoration: none;
	transition: color .18s;
}

a:hover {
	color: var(--pipol-texto-secundario);
}

button {
	font: inherit;
	cursor: pointer;
}

.saltar-al-contenido {
	position: absolute;
	left: -9999px;
	background: var(--pipol-tinta);
	color: var(--pipol-papel);
	padding: 12px 20px;
	z-index: 100;
}

.saltar-al-contenido:focus {
	left: 0;
	top: 0;
}

:focus-visible {
	outline: 2px solid var(--pipol-tinta);
	outline-offset: 2px;
}

/* ---------- Tipografía ---------- */

.pipol-display {
	font-family: var(--pipol-serif);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.08;
	margin: 0;
}

.pipol-eyebrow {
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--pipol-texto-secundario);
	text-transform: uppercase;
}

/* ---------- Disposición ---------- */

.pipol-ancho {
	max-width: var(--pipol-ancho);
	margin: 0 auto;
	padding-left: var(--pipol-margen);
	padding-right: var(--pipol-margen);
}

.pipol-tarjeta {
	background: var(--pipol-fondo-suave);
	border-radius: var(--pipol-radio-lg);
}

/* ---------- Botones ---------- */

.pipol-boton,
.pipol-boton-borde {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pipol-toque);
	padding: 0 32px;
	border-radius: var(--pipol-pastilla);
	font-size: 14.5px;
	font-weight: 500;
	border: 1px solid transparent;
	transition: background .2s, color .2s, border-color .2s;
}

.pipol-boton {
	background: var(--pipol-tinta);
	color: var(--pipol-papel);
}

.pipol-boton:hover {
	background: #2f2f2f;
	color: var(--pipol-papel);
}

.pipol-boton-borde {
	border-color: var(--pipol-tinta);
	color: var(--pipol-tinta);
}

.pipol-boton-borde:hover {
	background: var(--pipol-tinta);
	color: var(--pipol-papel);
}

/* ---------- Cabecera ---------- */

.pipol-avisos {
	background: var(--pipol-tinta);
	color: var(--pipol-papel);
	text-align: center;
	padding: 10px var(--pipol-margen-movil);
	font-size: 11.5px;
	letter-spacing: .045em;
}

/*
 * La cabecera queda pegada arriba en todo el sitio. La barra de avisos no: es
 * un anuncio, se lee una vez y se va. Lo que tiene que estar siempre a mano es
 * el buscador, el carrito y la vuelta al catálogo.
 */
/*
 * La barra tiene alto fijo, y es a propósito. Antes se achicaba al bajar, y como
 * está pegada arriba, el alto que dejaba de ocupar se lo devolvía al documento:
 * todo lo de abajo pegaba un salto de cien píxeles justo en el umbral del
 * scroll. Con el alto fijo, lo único que cambia adentro es el tamaño del
 * logotipo, y eso no mueve nada.
 */
.cabecera-sitio {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: var(--pipol-barra);
	padding: 0 var(--pipol-margen-movil);
	background: var(--pipol-fondo);
	transition: box-shadow .22s ease;
}

.cabecera-sitio.esta-compacta {
	box-shadow: 0 1px 0 var(--pipol-borde);
}

.cabecera-sitio__marca img,
.cabecera-sitio__marca .custom-logo {
	height: 54px;
	width: auto;
	transition: height .26s cubic-bezier(.4, 0, .2, 1), opacity .26s ease;
}

.cabecera-sitio.esta-compacta .cabecera-sitio__marca img,
.cabecera-sitio.esta-compacta .cabecera-sitio__marca .custom-logo {
	height: 44px;
}

/*
 * El salto al contenido y cualquier ancla tienen que caer debajo de la
 * cabecera, no detrás.
 */
html {
	scroll-padding-top: calc(var(--pipol-barra) + 12px);
}

@media (prefers-reduced-motion: reduce) {
	.cabecera-sitio,
	.cabecera-sitio__marca img,
	.cabecera-sitio__marca .custom-logo {
		transition: none;
	}
}

.cabecera-sitio__navegacion ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 38px;
	font-size: 14px;
}

.cabecera-sitio__acciones {
	display: flex;
	align-items: center;
	gap: 2px;
}

.pipol-icono {
	width: var(--pipol-toque);
	height: var(--pipol-toque);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	color: var(--pipol-tinta);
	border-radius: var(--pipol-pastilla);
	transition: background .18s;
}

.pipol-icono:hover {
	background: var(--pipol-fondo-suave);
	color: var(--pipol-tinta);
}

/* El icono ocupa siempre el mismo cuadro, sin importar el trazo que tenga. */
.pipol-icono svg {
	width: 21px;
	height: 21px;
	display: block;
}

.pipol-icono__cuenta {
	position: absolute;
	top: 7px;
	right: 5px;
	background: var(--pipol-tinta);
	color: var(--pipol-papel);
	font-size: 9px;
	font-weight: 600;
	min-width: 15px;
	height: 15px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

.cabecera-sitio__navegacion {
	display: none;
}

/*
 * Utilidades de visibilidad.
 *
 * Sólo esconden; nunca declaran cómo se muestra un elemento. Cuando lo hacían
 * —«.pipol-solo-escritorio { display: block }»— le pisaban el display a
 * cualquier componente con la misma especificidad que se cargara antes, y el
 * icono de cuenta dejaba de centrarse dentro de su caja.
 *
 * Llevan !important a propósito: son de una sola responsabilidad y tienen que
 * ganar sin importar en qué hoja esté definido el componente.
 */
@media (max-width: 860px) {

	.pipol-solo-escritorio {
		display: none !important;
	}
}

@media (min-width: 861px) {

	.pipol-solo-movil {
		display: none !important;
	}
}

/* ---------- Tarjeta de producto ---------- */

.pipol-producto__figura {
	position: relative;
	background: var(--pipol-fondo-suave);
	border-radius: var(--pipol-radio);
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 14px;
}

/*
 * La foto se centra y nunca se agranda.
 *
 * Antes era «width: 80%», que estiraba cualquier archivo hasta ocupar ese
 * ancho: una foto de 500 px en una tarjeta grande salía inflada y borrosa, y
 * una apaisada de 600x256 parecía más grande que una cuadrada de 600x600. Con
 * los máximos, cada una se muestra en su tamaño real y sólo se achica si no
 * entra.
 *
 * El hueco que sobra no se ve: las fotos vienen con fondo blanco y el modo de
 * fusión «multiply» lo funde con el fondo de la tarjeta.
 */
.pipol-producto__figura img {
	width: auto;
	height: auto;
	max-width: 80%;
	max-height: 80%;
	mix-blend-mode: multiply;
	transition: transform .5s ease;
}

.pipol-producto:hover .pipol-producto__figura img {
	transform: scale(1.05);
}

.pipol-producto__marca {
	font-size: 10px;
	letter-spacing: .15em;
	color: var(--pipol-texto-secundario);
	text-transform: uppercase;
	margin-bottom: 6px;
}

.pipol-producto__nombre {
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.35;
	margin: 0 0 5px;
}

.pipol-producto__ficha {
	font-size: 11px;
	color: var(--pipol-gris-tenue);
	margin-bottom: 9px;
}

.pipol-precio {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.pipol-precio__usd {
	font-size: 12px;
	font-weight: 400;
	color: var(--pipol-texto-secundario);
	margin-top: 2px;
}

.pipol-etiqueta-oferta {
	position: absolute;
	top: 11px;
	left: 11px;
	background: var(--pipol-tinta);
	color: var(--pipol-papel);
	font-size: 9px;
	letter-spacing: .13em;
	padding: 5px 10px;
	border-radius: var(--pipol-pastilla);
}

/* ---------- Grilla del catálogo ---------- */

.pipol-grilla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- Pie ---------- */

.pie-sitio {
	padding: 36px var(--pipol-margen-movil) 28px;
}

.pie-sitio__caja {
	background: var(--pipol-fondo-suave);
	border-radius: var(--pipol-radio-lg);
	padding: 32px 24px;
}

.pie-sitio__legal {
	margin: 26px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--pipol-linea-fuerte);
	font-size: 11.5px;
	color: var(--pipol-texto-secundario);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.pie-sitio ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pie-sitio li {
	margin-bottom: 9px;
}

.pie-sitio a {
	font-size: 12.5px;
	color: var(--pipol-texto-secundario);
}

/* ---------- Escritorio ---------- */

@media (min-width: 861px) {

	body {
		font-size: 15.5px;
	}

	.cabecera-sitio {
		padding: 0 var(--pipol-margen);
	}

	.cabecera-sitio__marca img,
	.cabecera-sitio__marca .custom-logo {
		height: 84px;
	}

	.cabecera-sitio.esta-compacta .cabecera-sitio__marca img,
	.cabecera-sitio.esta-compacta .cabecera-sitio__marca .custom-logo {
		height: 62px;
	}

	.cabecera-sitio__navegacion {
		display: block;
	}

	.pipol-avisos {
		font-size: 12px;
		padding: 11px 0;
	}

	.pipol-grilla {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 34px 24px;
	}

	.pipol-producto__figura {
		margin-bottom: 16px;
	}

	.pipol-producto__nombre {
		font-size: 15px;
	}

	.pipol-producto__ficha {
		font-size: 12px;
	}

	.pipol-precio {
		font-size: 17px;
	}

	.pipol-precio__usd {
		font-size: 13px;
	}

	.pie-sitio {
		padding: 40px var(--pipol-margen);
	}

	.pie-sitio__caja {
		padding: 48px 44px;
	}
}

/* ---------- Listado ---------- */

.pipol-listado__encabezado {
	padding-top: 24px;
	padding-bottom: 20px;
}

.pipol-listado__titulo {
	font-size: 38px;
	margin: 0;
}

.pipol-listado__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.pipol-listado__conteo {
	margin: 0;
	font-size: 13px;
	color: var(--pipol-texto-secundario);
}

.woocommerce-ordering select {
	font: inherit;
	font-size: 13.5px;
	color: var(--pipol-gris-texto);
	background: var(--pipol-papel);
	border: 1px solid var(--pipol-linea-fuerte);
	border-radius: var(--pipol-pastilla);
	min-height: var(--pipol-toque);
	padding: 0 18px;
}

.woocommerce-pagination ul {
	list-style: none;
	display: flex;
	gap: 8px;
	padding: 0;
	margin: 44px 0 0;
	justify-content: center;
	flex-wrap: wrap;
}

.woocommerce-pagination a,
.woocommerce-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pipol-toque);
	height: var(--pipol-toque);
	padding: 0 14px;
	border-radius: var(--pipol-pastilla);
	font-size: 13.5px;
	border: 1px solid var(--pipol-linea);
	color: var(--pipol-texto-secundario);
}

.woocommerce-pagination .current {
	background: var(--pipol-tinta);
	border-color: var(--pipol-tinta);
	color: var(--pipol-papel);
}

.pipol-vacio {
	padding: 56px 24px;
	text-align: center;
}

.pipol-vacio__titulo {
	font-size: 26px;
	margin: 0 0 10px;
}

.pipol-vacio__texto {
	font-size: 14px;
	color: var(--pipol-texto-secundario);
	margin: 0 0 22px;
}

/* ---------- Pie, disposición ---------- */

.pie-sitio__marca img {
	height: 34px;
	width: auto;
	margin-bottom: 16px;
}

.pie-sitio__locales {
	margin: 0 0 26px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--pipol-texto-secundario);
}

.pie-sitio__navegacion > ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 16px;
}

.pie-sitio__navegacion > ul > li {
	margin: 0;
}

.pie-sitio__navegacion > ul > li > a {
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--pipol-texto);
	display: block;
	margin-bottom: 12px;
}

@media (min-width: 861px) {

	.pipol-listado__encabezado {
		padding-top: 32px;
		padding-bottom: 30px;
	}

	.pipol-listado__titulo {
		font-size: 52px;
	}

	.pipol-listado__cuerpo {
		padding-bottom: 88px;
	}

	.pipol-vacio {
		padding: 76px 24px;
	}

	.pie-sitio__caja {
		display: grid;
		grid-template-columns: 1.4fr 2.2fr;
		gap: 48px;
		align-items: start;
	}

	.pie-sitio__marca img {
		height: 40px;
	}

	.pie-sitio__navegacion > ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px;
	}

	.pie-sitio__legal {
		grid-column: 1 / -1;
	}
}

/* ---------- Páginas sueltas ---------- */

.pipol-pagina__encabezado {
	padding-top: 40px;
	padding-bottom: 8px;
	/*
	 * El título se alinea con la columna del texto y no con el borde de la
	 * página: si no, queda descolgado a la izquierda del contenido. Mismo
	 * tamaño de letra que el cuerpo, para que los 68ch midan lo mismo.
	 */
	max-width: calc(68ch + var(--pipol-margen) * 2);
	margin-inline: auto;
	font-size: 16px;
}

.pipol-pagina__titulo {
	font-size: clamp(34px, 5vw, 52px);
	max-width: 20ch;
}

.pipol-pagina__imagen {
	margin: 20px auto 0;
}

.pipol-pagina__imagen img {
	border-radius: var(--pipol-radio);
}

/*
 * El cuerpo se angosta a 68 caracteres. Es el ancho en el que una línea se lee
 * sin que el ojo se pierda al volver al margen; el resto de la página puede
 * seguir midiendo 1440.
 */
.pipol-pagina__cuerpo {
	padding-top: 12px;
	padding-bottom: 72px;
	max-width: calc(68ch + var(--pipol-margen) * 2);
	margin-inline: auto;
	font-size: 16px;
	line-height: 1.75;
	color: var(--pipol-gris-texto);
}

.pipol-pagina__cuerpo p {
	margin: 0 0 18px;
}

.pipol-pagina__cuerpo h2 {
	font-family: var(--pipol-serif);
	font-weight: 400;
	font-size: 27px;
	line-height: 1.2;
	color: var(--pipol-texto);
	margin: 38px 0 12px;
}

.pipol-pagina__cuerpo h3 {
	font-size: 16px;
	letter-spacing: .01em;
	color: var(--pipol-texto);
	margin: 28px 0 8px;
}

.pipol-pagina__cuerpo a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pipol-pagina__cuerpo ul,
.pipol-pagina__cuerpo ol {
	margin: 0 0 18px;
	padding-left: 20px;
}

.pipol-pagina__cuerpo li {
	margin-bottom: 6px;
}

.pipol-pagina__cuerpo blockquote {
	margin: 26px 0;
	padding-left: 20px;
	border-left: 2px solid var(--pipol-tinta);
	font-family: var(--pipol-serif);
	font-size: 21px;
	line-height: 1.35;
	color: var(--pipol-texto);
}

/* ---------- Formulario de contacto ---------- */

.pipol-contacto {
	margin-top: 26px;
	max-width: 620px;
}

.pipol-contacto__aviso {
	border-radius: var(--pipol-radio-sm);
	padding: 14px 18px;
	margin: 0 0 22px;
	font-size: 14.5px;
}

.pipol-contacto__aviso.es-bien {
	background: var(--pipol-tinta);
	color: var(--pipol-papel);
}

.pipol-contacto__aviso.es-mal {
	background: var(--pipol-fondo-suave);
	color: var(--pipol-alerta);
	border: 1px solid var(--pipol-alerta);
}

.pipol-contacto__titulo {
	font-size: 27px;
	margin: 0 0 16px;
}

.pipol-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
}

.pipol-campo label {
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pipol-texto-secundario);
}

.pipol-campo input,
.pipol-campo select,
.pipol-campo textarea {
	font: inherit;
	font-size: 15px;
	color: var(--pipol-texto);
	background: var(--pipol-papel);
	border: 1px solid var(--pipol-linea-control);
	border-radius: var(--pipol-radio-sm);
	padding: 12px 14px;
	min-height: var(--pipol-toque);
	width: 100%;
}

.pipol-campo textarea {
	resize: vertical;
	line-height: 1.6;
}

.pipol-campo input:focus,
.pipol-campo select:focus,
.pipol-campo textarea:focus {
	outline: 2px solid var(--pipol-tinta);
	outline-offset: 1px;
	border-color: var(--pipol-tinta);
}

.pipol-campos-par {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 16px;
}

/*
 * El campo trampa se saca de la vista sin display:none ni visibility:hidden,
 * que es lo primero que un robot detecta para saltearlo.
 */
.pipol-trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (min-width: 640px) {
	.pipol-campos-par {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- Redes en el pie ---------- */

.pipol-redes {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
}

.pipol-redes a {
	width: var(--pipol-toque);
	height: var(--pipol-toque);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	color: inherit;
	transition: opacity .18s;
}

.pipol-redes a:hover {
	opacity: .65;
}

/* ---------- Cortina de bienvenida ---------- */

/*
 * Se va sola: la animación termina en visibilidad oculta con fill-mode forwards,
 * así que aunque el JavaScript no corra nunca, la cortina desaparece igual. Una
 * cortina que depende de JavaScript para irse es una cortina que algún día se
 * queda tapando el sitio.
 */
.pipol-cortina {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	background: var(--pipol-papel);
	animation: pipol-cortina-salir var(--pipol-cortina-dura, 2000ms) cubic-bezier(.4, 0, .2, 1) forwards;
}

.pipol-cortina__marca {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	padding: 0 24px;
}

.pipol-cortina__logo {
	width: min(60vw, 420px);
	height: auto;
	animation: pipol-cortina-logo var(--pipol-cortina-dura, 2000ms) cubic-bezier(.22, 1, .36, 1) forwards;
}

/* La línea se abre debajo del logotipo. Es lo único que se mueve. */
.pipol-cortina__linea {
	display: block;
	height: 1px;
	width: min(46vw, 320px);
	background: var(--pipol-tinta);
	transform-origin: center;
	animation: pipol-cortina-linea var(--pipol-cortina-dura, 2000ms) cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes pipol-cortina-salir {
	0%,
	62% {
		opacity: 1;
		filter: blur(0);
		visibility: visible;
	}

	100% {
		opacity: 0;
		filter: blur(18px);
		visibility: hidden;
		pointer-events: none;
	}
}

@keyframes pipol-cortina-logo {
	0% {
		opacity: 0;
		transform: scale(.965);
	}

	38%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes pipol-cortina-linea {
	0%,
	18% {
		transform: scaleX(0);
		opacity: 0;
	}

	60%,
	100% {
		transform: scaleX(1);
		opacity: 1;
	}
}

/* Ya se vio en esta visita. */
.pipol-sin-cortina .pipol-cortina {
	display: none;
}

/*
 * Quien pidió menos movimiento no quiere una animación de entrada; tampoco
 * quiere esperar dos segundos por una.
 */
@media (prefers-reduced-motion: reduce) {
	.pipol-cortina {
		display: none;
	}
}

/* ---------- Frontispicio de la portada ---------- */

/*
 * El logotipo grande de la portada vive fuera de la barra pegada, suelto en el
 * flujo. Así se va con el scroll como cualquier contenido, sin que nada cambie
 * de alto y sin que la página salte.
 *
 * En la barra hay un segundo logotipo, el chico, que arranca invisible y aparece
 * cuando el grande ya se fue. Su lugar está reservado desde el principio: lo que
 * cambia es la opacidad, no la disposición.
 */
.pipol-frontispicio {
	display: flex;
	justify-content: center;
	padding: 18px var(--pipol-margen-movil) 0;
}

.pipol-frontispicio__enlace {
	display: block;
	line-height: 0;
}

.pipol-frontispicio__logo {
	height: clamp(72px, 22vw, 116px);
	width: auto;
}

body.home .cabecera-sitio .cabecera-sitio__marca img,
body.home .cabecera-sitio .cabecera-sitio__marca .custom-logo {
	opacity: 0;
}

body.home .cabecera-sitio.esta-compacta .cabecera-sitio__marca img,
body.home .cabecera-sitio.esta-compacta .cabecera-sitio__marca .custom-logo {
	opacity: 1;
}

@media (min-width: 861px) {

	.pipol-frontispicio {
		padding: 22px var(--pipol-margen) 0;
	}

	/*
	 * El SVG recortado ya no trae el aire que tenía adentro, así que con menos
	 * alto se ve igual de grande: 170 píxeles de dibujo son más logotipo que
	 * 220 con un cuarto de blanco alrededor.
	 */
	.pipol-frontispicio__logo {
		height: clamp(120px, 12vw, 170px);
	}

	/*
	 * En la portada la barra pegada no muestra su logotipo hasta bajar, y ahí
	 * lo muestra a 62: no necesita el alto que reserva en el resto del sitio
	 * para el de 84. Sigue siendo fijo mientras se está en la página, que es
	 * lo que evita el salto.
	 */
	body.home {
		--pipol-barra: 88px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.cabecera-sitio,
	.cabecera-sitio__marca img,
	.cabecera-sitio__marca .custom-logo {
		transition: none;
	}
}

/* ---------- Notas de la cuenta ---------- */

.pipol-nota-cuenta {
	background: var(--pipol-fondo-suave);
	border-radius: var(--pipol-radio-sm);
	padding: 14px 18px;
	margin: 18px 0;
	font-size: 14px;
	color: var(--pipol-gris-texto);
	max-width: 52ch;
}

.pipol-nota-cuenta a {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--pipol-texto);
}

/* ---------- Carrito: panel lateral y vistazo ---------- */

.pipol-carrito-acceso {
	position: relative;
	display: inline-flex;
}

.pipol-icono__cuenta.esta-vacio {
	display: none;
}

/* El velo apaga la página sin taparla del todo. */
.pipol-carrito-velo {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: rgba(11, 11, 11, .38);
	opacity: 0;
	transition: opacity .26s ease;
}

.pipol-carrito-velo.esta-abierto {
	opacity: 1;
}

.pipol-carrito-panel {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 96;
	width: min(420px, 92vw);
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--pipol-papel);
	box-shadow: -18px 0 46px rgba(11, 11, 11, .12);
	transform: translateX(100%);
	transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}

.pipol-carrito-panel.esta-abierto {
	transform: none;
}

.pipol-carrito-panel__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px 16px;
	border-bottom: 1px solid var(--pipol-borde);
}

.pipol-carrito-panel__titulo {
	font-family: var(--pipol-serif);
	font-weight: 400;
	font-size: 24px;
	margin: 0;
}

.pipol-carrito-panel__cerrar {
	width: var(--pipol-toque);
	height: var(--pipol-toque);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	border-radius: 8px;
	font-size: 26px;
	line-height: 1;
	color: var(--pipol-texto);
}

.pipol-carrito-panel__cerrar:hover {
	background: var(--pipol-fondo-suave);
}

.pipol-carrito-panel__cuerpo {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px 24px 28px;
}

/*
 * El vistazo cuelga del ícono. El puente invisible de arriba es lo que permite
 * bajar el mouse desde el ícono sin que el panel se cierre en el camino.
 */
.pipol-carrito-vistazo {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 60;
	width: 330px;
	max-height: 460px;
	overflow-y: auto;
	padding: 18px 20px;
	background: var(--pipol-papel);
	border: 1px solid var(--pipol-borde);
	border-radius: var(--pipol-radio-sm);
	box-shadow: 0 18px 44px rgba(11, 11, 11, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.pipol-carrito-vistazo::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}

.pipol-carrito-acceso.esta-asomado .pipol-carrito-vistazo {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* ---------- El mini carrito, en los dos lugares ---------- */

.pipol-carrito-panel__cuerpo ul.cart_list,
.pipol-carrito-vistazo ul.cart_list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pipol-carrito-panel__cuerpo ul.cart_list li,
.pipol-carrito-vistazo ul.cart_list li {
	position: relative;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 14px;
	align-items: start;
	padding: 12px 30px 12px 0;
	border-bottom: 1px solid var(--pipol-borde);
	font-size: 14px;
	line-height: 1.4;
}

.pipol-carrito-panel__cuerpo.pipol-carrito-panel__cuerpo ul.cart_list li img,
.pipol-carrito-vistazo.pipol-carrito-vistazo ul.cart_list li img {
	grid-row: span 2;
	float: none;
	width: 56px;
	height: 56px;
	margin: 0;
	object-fit: cover;
	border-radius: 10px;
	background: var(--pipol-fondo-suave);
	order: -1;
}

.pipol-carrito-panel__cuerpo ul.cart_list li a,
.pipol-carrito-vistazo ul.cart_list li a {
	display: block;
	line-height: 1.35;
}

.pipol-carrito-panel__cuerpo .quantity,
.pipol-carrito-vistazo .quantity {
	display: block;
	margin-top: 4px;
	color: var(--pipol-texto-secundario);
	font-size: 13px;
}

/*
 * La cruz de quitar.
 *
 * Los selectores repiten la clase a propósito. WooCommerce trae
 * «.woocommerce a.remove» con la misma especificidad que tendría el nuestro, y
 * esa clase está en el body de la tienda y de la ficha pero no en la portada:
 * sin esto la cruz se ve de un tamaño en unas páginas y de otro en otras. El
 * color lleva !important porque el de WooCommerce también lo lleva.
 */
.pipol-carrito-panel__cuerpo.pipol-carrito-panel__cuerpo a.remove,
.pipol-carrito-vistazo.pipol-carrito-vistazo a.remove {
	position: absolute;
	top: 12px;
	right: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 999px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	color: var(--pipol-gris-tenue) !important;
	transition: background .16s, color .16s;
}

.pipol-carrito-panel__cuerpo.pipol-carrito-panel__cuerpo a.remove:hover,
.pipol-carrito-vistazo.pipol-carrito-vistazo a.remove:hover {
	background: var(--pipol-fondo-suave);
	color: var(--pipol-alerta) !important;
}

.pipol-carrito-panel__cuerpo .total,
.pipol-carrito-vistazo .total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 18px 0;
	padding-top: 4px;
	font-size: 15px;
}

.pipol-carrito-panel__cuerpo .total strong,
.pipol-carrito-vistazo .total strong {
	font-weight: 500;
	color: var(--pipol-texto-secundario);
}

.pipol-carrito-panel__cuerpo .total .amount,
.pipol-carrito-vistazo .total .amount {
	font-size: 19px;
	font-weight: 600;
}

/*
 * Los dos botones del pie. Misma altura, mismo radio y el mismo peso óptico: el
 * de comprar lleno y el de ver el carrito con borde. La clase repetida es por lo
 * mismo que en la cruz — «.woocommerce a.button» tiene su propio relleno y su
 * propio color y gana en la tienda pero no en la portada.
 */
.pipol-carrito-panel__cuerpo.pipol-carrito-panel__cuerpo .woocommerce-mini-cart__buttons,
.pipol-carrito-vistazo.pipol-carrito-vistazo .woocommerce-mini-cart__buttons {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.pipol-carrito-panel__cuerpo.pipol-carrito-panel__cuerpo .woocommerce-mini-cart__buttons .button,
.pipol-carrito-vistazo.pipol-carrito-vistazo .woocommerce-mini-cart__buttons .button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pipol-toque);
	margin: 0;
	padding: 11px 18px;
	border-radius: var(--pipol-pastilla);
	border: 1px solid var(--pipol-tinta);
	background: var(--pipol-papel);
	color: var(--pipol-tinta);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.pipol-carrito-panel__cuerpo.pipol-carrito-panel__cuerpo .woocommerce-mini-cart__buttons .button:hover,
.pipol-carrito-vistazo.pipol-carrito-vistazo .woocommerce-mini-cart__buttons .button:hover {
	background: var(--pipol-fondo-suave);
}

.pipol-carrito-panel__cuerpo.pipol-carrito-panel__cuerpo .woocommerce-mini-cart__buttons .checkout,
.pipol-carrito-vistazo.pipol-carrito-vistazo .woocommerce-mini-cart__buttons .checkout {
	background: var(--pipol-tinta);
	color: var(--pipol-papel);
}

.pipol-carrito-panel__cuerpo.pipol-carrito-panel__cuerpo .woocommerce-mini-cart__buttons .checkout:hover,
.pipol-carrito-vistazo.pipol-carrito-vistazo .woocommerce-mini-cart__buttons .checkout:hover {
	background: var(--pipol-gris-texto);
	color: var(--pipol-papel);
}

.pipol-carrito-panel__cuerpo .woocommerce-mini-cart__empty-message,
.pipol-carrito-vistazo .woocommerce-mini-cart__empty-message {
	margin: 0;
	color: var(--pipol-texto-secundario);
}

.esta-cargando {
	opacity: .55;
	cursor: progress;
}

@media (max-width: 860px) {

	/* En pantalla angosta el ícono lleva al carrito y no hay nada que asomar. */
	.pipol-carrito-vistazo {
		display: none;
	}
}

/* ---------- Servicio técnico: formulario ---------- */

.pipol-service,
.pipol-service-consulta,
.pipol-service__gracias {
	margin-top: 26px;
}

.pipol-service__grupo {
	border: 1px solid var(--pipol-borde);
	border-radius: var(--pipol-radio-sm);
	padding: 20px 22px 6px;
	margin: 0 0 20px;
}

.pipol-service__grupo legend {
	padding: 0 8px;
	font-family: var(--pipol-serif);
	font-size: 20px;
}

.pipol-campo__ayuda {
	font-size: 13px;
	color: var(--pipol-texto-secundario);
	text-transform: none;
	letter-spacing: 0;
}

/* ---------- Turnos por franja ---------- */

.pipol-franja {
	border: 1px solid var(--pipol-borde);
	border-radius: var(--pipol-radio-sm);
	margin: 0 0 10px;
	background: var(--pipol-papel);
}

.pipol-franja > summary {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 14px 16px;
	cursor: pointer;
	list-style: none;
	min-height: var(--pipol-toque);
}

.pipol-franja > summary::-webkit-details-marker {
	display: none;
}

.pipol-franja > summary::after {
	content: '+';
	margin-left: auto;
	font-size: 17px;
	color: var(--pipol-texto-secundario);
}

.pipol-franja[open] > summary::after {
	content: '\2013';
}

.pipol-franja[open] > summary {
	border-bottom: 1px solid var(--pipol-borde);
}

.pipol-franja__nombre {
	font-weight: 600;
	font-size: 15px;
}

.pipol-franja__rango {
	font-size: 13px;
	color: var(--pipol-texto-secundario);
	font-variant-numeric: tabular-nums;
}

.pipol-franja__libres {
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pipol-texto-secundario);
}

/*
 * Las horas en grilla y no en fila: con seis u ocho por franja, una fila que
 * envuelve deja renglones cojos y la última hora sola abajo.
 */
.pipol-turnos__horas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
	padding: 14px 16px 16px;
}

.pipol-turno {
	position: relative;
	display: flex;
}

.pipol-turno input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.pipol-turno span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--pipol-toque);
	padding: 0 10px;
	border: 1px solid var(--pipol-linea-control);
	border-radius: var(--pipol-pastilla);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	transition: border-color .16s, background .16s, color .16s;
}

.pipol-turno input:hover + span {
	border-color: var(--pipol-tinta);
}

.pipol-turno input:focus-visible + span {
	outline: 2px solid var(--pipol-tinta);
	outline-offset: 2px;
}

.pipol-turno input:checked + span {
	background: var(--pipol-tinta);
	border-color: var(--pipol-tinta);
	color: var(--pipol-papel);
}

.pipol-turno.esta-tomado span {
	color: var(--pipol-gris-tenue);
	border-style: dashed;
	text-decoration: line-through;
}

.pipol-turno input:disabled {
	cursor: not-allowed;
}

/* ---------- Servicio técnico: número y estado ---------- */

.pipol-service__numero {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--pipol-fondo-suave);
	border-radius: var(--pipol-radio-sm);
	padding: 16px 20px;
	margin: 18px 0;
}

.pipol-service__numero span {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pipol-texto-secundario);
}

.pipol-service__numero strong {
	font-family: var(--pipol-serif);
	font-size: 30px;
	letter-spacing: .04em;
}

.pipol-service-estado__actual {
	font-family: var(--pipol-serif);
	font-size: 24px;
	margin: 0 0 18px;
}

.pipol-service-estado__linea {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	border-left: 2px solid var(--pipol-borde);
}

.pipol-service-estado__linea li {
	position: relative;
	padding: 0 0 16px 22px;
	margin-left: -1px;
	font-size: 14.5px;
	color: var(--pipol-gris-tenue);
}

.pipol-service-estado__linea li::before {
	content: '';
	position: absolute;
	left: -6px;
	top: 6px;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--pipol-borde);
}

.pipol-service-estado__linea li.esta-hecho {
	color: var(--pipol-texto-secundario);
}

.pipol-service-estado__linea li.esta-hecho::before {
	background: var(--pipol-gris-tenue);
}

.pipol-service-estado__linea li.esta-activo {
	color: var(--pipol-texto);
	font-weight: 600;
}

.pipol-service-estado__linea li.esta-activo::before {
	background: var(--pipol-tinta);
	box-shadow: 0 0 0 4px var(--pipol-fondo-suave);
}

/* ---------- Botones de WooCommerce en la marca ---------- */

/*
 * WooCommerce pinta sus botones de violeta (los principales) y de gris lila
 * (los demás). Con estas reglas quedan en negro y blanco en todo el sitio:
 * carrito, checkout, cuenta y avisos. La especificidad es la misma que la de
 * WooCommerce —su :where() no suma— y esta hoja carga después, así que gana.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background-color: var(--pipol-papel);
	color: var(--pipol-tinta);
	border: 1px solid var(--pipol-tinta);
	border-radius: var(--pipol-pastilla);
	font-weight: 500;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--pipol-fondo-suave);
	color: var(--pipol-tinta);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background-color: var(--pipol-tinta);
	color: var(--pipol-papel);
	border-color: var(--pipol-tinta);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	background-color: #2f2f2f;
	color: var(--pipol-papel);
}

.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled[disabled] {
	background-color: var(--pipol-gris);
	color: var(--pipol-papel);
}

/* ---------- Pie, con contenido ---------- */

/*
 * Marca y redes, locales, y las columnas del menú del pie. Va al final de la
 * hoja para pisar la disposición anterior, que era de dos columnas.
 */
.pie-sitio__caja {
	display: grid;
	gap: 32px;
}

.pie-sitio__marca img {
	height: 52px;
	margin-bottom: 14px;
}

.pie-sitio__bajada {
	max-width: 30ch;
	margin: 0 0 20px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--pipol-texto-secundario);
}

.pie-sitio .pipol-redes {
	display: flex;
	gap: 6px;
}

.pie-sitio .pipol-redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--pipol-linea-fuerte);
	border-radius: 50%;
	color: var(--pipol-texto);
}

.pie-sitio .pipol-redes a:hover {
	background: var(--pipol-papel);
}

.pie-sitio__rotulo,
.pie-sitio__columna,
.pie-sitio__navegacion > ul > li > a {
	display: block;
	margin: 0 0 14px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pipol-texto);
}

.pie-sitio__locales {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--pipol-texto-secundario);
}

.pie-sitio__local {
	margin: 0 0 18px;
}

.pie-sitio__local p {
	margin: 0;
}

.pie-sitio__local .pie-sitio__local-nombre {
	margin-bottom: 2px;
	font-weight: 600;
	color: var(--pipol-texto);
}

.pie-sitio__local a {
	font-size: 13px;
	color: var(--pipol-texto-secundario);
	white-space: nowrap;
}

.pie-sitio__local a:hover,
.pie-sitio__navegacion li li a:hover {
	color: var(--pipol-texto);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pie-sitio__whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--pipol-tinta);
	border-radius: var(--pipol-pastilla);
	font-size: 13px;
	font-weight: 500;
	color: var(--pipol-texto);
}

.pie-sitio .pie-sitio__whatsapp {
	color: var(--pipol-texto);
	font-size: 13px;
}

.pie-sitio__whatsapp:hover {
	background: var(--pipol-tinta);
	color: var(--pipol-papel);
}

.pie-sitio .pie-sitio__whatsapp:hover {
	color: var(--pipol-papel);
}

.pie-sitio__navegacion:empty {
	display: none;
}

.pie-sitio__navegacion > ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 16px;
}

.pie-sitio__navegacion li li {
	margin-bottom: 10px;
}

.pie-sitio__navegacion li li a {
	font-size: 13.5px;
}

.pie-sitio__legal {
	grid-column: 1 / -1;
	margin: 0;
}

.pie-sitio__pagos {
	flex-basis: 100%;
	order: 3;
}

@media (min-width: 861px) {

	.pie-sitio__caja {
		grid-template-columns: 1.2fr 1.2fr 2fr;
		gap: 40px 56px;
	}

	.pie-sitio__marca img {
		height: 60px;
	}

	.pie-sitio__navegacion > ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
	}

	.pie-sitio__legal {
		margin-top: 8px;
	}

	.pie-sitio__pagos {
		flex-basis: auto;
		order: 0;
	}
}

/* La referencia en dólares dentro del panel lateral del carrito. */
.pipol-carrito-panel .pipol-usd,
.pipol-carrito-vistazo .pipol-usd {
	display: inline;
	margin-left: 6px;
	font-size: 11.5px;
	color: var(--pipol-texto-secundario);
}

/* ---------- Pie: enlaces legales y la frase de la ley ---------- */

.pie-sitio__legales {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-top: 8px;
	padding-top: 20px;
	border-top: 1px solid var(--pipol-linea-fuerte);
}

.pie-sitio .pie-sitio__legales a {
	font-size: 12.5px;
	color: var(--pipol-texto);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * La frase que exige la Ley 4868/13. Va chica pero legible: tiene que poder
 * leerse, no esconderse.
 */
.pie-sitio__ley {
	grid-column: 1 / -1;
	margin: 12px 0 0;
	max-width: 95ch;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--pipol-texto-secundario);
}

.pie-sitio .pie-sitio__ley a {
	font-size: 11.5px;
	color: var(--pipol-texto);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pie-sitio__legal {
	border-top: 0;
	padding-top: 12px;
}

/* ==========================================================================
   Barra de avisos: aviso a un lado, enlaces institucionales al otro
   ========================================================================== */

.pipol-avisos__interior {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}

.pipol-avisos__texto {
	margin: 0;
}

/*
 * En móvil la barra es una sola línea de 11,5px y no entra nada más. Los
 * enlaces siguen estando: el menú del teléfono los repite.
 */
.pipol-avisos__enlaces {
	display: none;
}

/* ==========================================================================
   Submenús de la barra principal
   ========================================================================== */

/*
 * En móvil el menú se abre como panel y las subcategorías van anidadas y a la
 * vista, con sangría. Nada de desplegables: en una pantalla de teléfono, un
 * menú que se abre al pasar por encima no se puede abrir, porque no hay «pasar
 * por encima».
 */
/*
 * El menú del teléfono.
 *
 * El botón de la cabecera ya alternaba la clase «esta-abierta», pero ninguna
 * regla la usaba: el botón existía y no abría nada. Se descubrió al mover
 * Empresa y Contacto a la barra de arriba, porque en móvil esa barra no se
 * muestra y el menú pasó a ser el único camino a esas páginas.
 *
 * Cuelga de la cabecera, que es «sticky» y por eso ya sirve de referencia para
 * posicionarlo sin tocar nada más.
 */
.cabecera-sitio__navegacion.esta-abierta {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 70;
	padding: 20px var(--pipol-margen-movil) 26px;
	border-top: 1px solid var(--pipol-linea);
	background: var(--pipol-fondo);
	box-shadow: 0 18px 32px rgba(0, 0, 0, .09);
}

.cabecera-sitio__navegacion.esta-abierta > ul {
	flex-direction: column;
	gap: 16px;
	font-size: 15px;
}

.cabecera-sitio__navegacion .sub-menu {
	display: block;
	gap: 0;
	margin: 6px 0 0;
	padding-left: 16px;
	border-left: 1px solid var(--pipol-linea);
	font-size: 13px;
}

.cabecera-sitio__navegacion .sub-menu li + li {
	margin-top: 6px;
}

@media (min-width: 861px) {

	.pipol-avisos__interior {
		justify-content: space-between;
	}

	.pipol-avisos__enlaces {
		display: flex;
		gap: 20px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.pipol-avisos__enlaces a {
		color: inherit;
		text-decoration: none;
		opacity: .82;
		transition: opacity .18s ease;
	}

	.pipol-avisos__enlaces a:hover,
	.pipol-avisos__enlaces a:focus-visible {
		opacity: 1;
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	/* El ancla del desplegable. */
	.cabecera-sitio__navegacion > ul > li {
		position: relative;
	}

	/*
	 * El relleno de abajo alarga la zona sensible hasta el desplegable: sin
	 * eso, el mouse cruza un hueco de unos píxeles entre el texto y el panel,
	 * el :hover se corta y el menú se cierra justo cuando lo ibas a usar. El
	 * margen negativo devuelve el alto, para que la barra no crezca.
	 */
	.cabecera-sitio__navegacion > ul > li.menu-item-has-children {
		padding-bottom: 16px;
		margin-bottom: -16px;
	}

	.cabecera-sitio__navegacion > ul > li.menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		width: 5px;
		height: 5px;
		margin-left: 7px;
		vertical-align: 2px;
		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;
		transform: rotate(45deg) translateY(-1px);
		transition: transform .18s ease;
	}

	.cabecera-sitio__navegacion > ul > li.menu-item-has-children:hover > a::after,
	.cabecera-sitio__navegacion > ul > li.menu-item-has-children:focus-within > a::after {
		transform: rotate(-135deg) translateY(-2px);
	}

	.cabecera-sitio__navegacion .sub-menu {
		position: absolute;
		top: 100%;
		left: -18px;
		z-index: 60;
		min-width: 208px;
		margin: 0;
		padding: 12px 0;
		border: 1px solid var(--pipol-linea);
		border-radius: var(--pipol-radio-sm);
		background: var(--pipol-papel);
		box-shadow: 0 14px 34px rgba(0, 0, 0, .09);
		font-size: 13.5px;

		/* Oculto pero alcanzable: visibility —y no display— permite animarlo. */
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity .18s ease, transform .18s ease, visibility .18s;
	}

	/*
	 * Se abre al pasar por encima y también al llegar con el teclado:
	 * :focus-within cubre a quien navega con tabulador, que de otra forma
	 * tabularía dentro de un menú invisible.
	 */
	.cabecera-sitio__navegacion > ul > li:hover > .sub-menu,
	.cabecera-sitio__navegacion > ul > li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.cabecera-sitio__navegacion .sub-menu li + li {
		margin-top: 0;
	}

	.cabecera-sitio__navegacion .sub-menu a {
		display: block;
		padding: 7px 20px;
		white-space: nowrap;
	}

	.cabecera-sitio__navegacion .sub-menu a:hover,
	.cabecera-sitio__navegacion .sub-menu a:focus-visible {
		background: var(--pipol-fondo-suave);
	}
}

@media (prefers-reduced-motion: reduce) {

	.cabecera-sitio__navegacion .sub-menu,
	.cabecera-sitio__navegacion > ul > li.menu-item-has-children > a::after {
		transition: none;
	}
}

/* ==========================================================================
   Botón flotante de WhatsApp
   ========================================================================== */

/*
 * El verde es el único color de todo el sitio, y es a propósito: la marca es
 * blanco y negro, pero este botón se reconoce por su color antes que por su
 * forma. Pintarlo de negro lo volvería un botón más.
 *
 * El z-index queda por debajo del panel del carrito y del buscador, que son
 * capas que cubren la pantalla: cuando una de ésas está abierta, el botón no
 * tiene que asomar por encima.
 */
.pipol-wa-flotante {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 45;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
	transition: transform .18s ease, box-shadow .18s ease;
}

.pipol-wa-flotante:hover,
.pipol-wa-flotante:focus-visible {
	color: #fff;
	transform: scale(1.06);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}

.pipol-wa-flotante:focus-visible {
	outline: 2px solid var(--pipol-tinta);
	outline-offset: 3px;
}

/*
 * En el celular se corre un poco hacia adentro y hacia arriba: ahí abajo está
 * la barra del navegador, y muchos teléfonos tienen un gesto de sistema en ese
 * borde que se come el toque.
 */
@media (max-width: 860px) {

	.pipol-wa-flotante {
		right: 14px;
		bottom: 14px;
		width: 50px;
		height: 50px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.pipol-wa-flotante {
		transition: none;
	}

	.pipol-wa-flotante:hover,
	.pipol-wa-flotante:focus-visible {
		transform: none;
	}
}